Gymnázium a Jazyková škola s právem státní jazykové zkoušky Zlín
Interaktivní průvodce lázeňským městam Luhačovice Interactive guide of Spa town Luhacovice
Autor Tomáš Máčala Vedoucí práce Mgr. Michal Mikláš
Luhačovice 2011
Poděkování Rád bych touto cestou poděkoval panu učiteli Michalu Miklášovi za vstřícnost a cenné rady při tvorbě nejen této práce.
i
Prohlášení Prohlašuji, že předložená diplomová práce je mým původním autorským dílem, které jsem vypracoval samostatně. Literaturu a další zdroje, z nichž jsem při zpracování čerpal, v práci řádně cituji. Luhačovice 20. 3. 2011
....................................
ii
Klíčová slova průvodce, interaktivní průvodce, Luhačovice, Lázně Luhačovice, flash Anotace Práce je interaktivním průvodcem lázeňského města Luhačovice. Snaží se obeznámit se základními informacemi o lázních a jednotlivých lázeňskými penziony, prameny a hotely. Keywords guide, interactive guide, Luhacovice, Spa Luhacovice, flash
Abstract The thesis is interactive guide of Spa town Luhacovice. In attemps to familiarize with basic information about spa and its pensions, springs and hotels.
iii
1. Obsah 1. 2. 3. 4. 5. 6. 7. 8.
Úvod Úvodní strana Základní šablona Základní informace Mapa Luhačovic Šablona pro jednotlivá místa Vytvoření stránky místa Struktura dokumentu I. Šablony stránek II. Vrstvy III. Odstavcové styly IV. Znakové styly V. Objektové styly VI. Záložky 9. Závěr 10. Použité zdroje
1 2 5 6 9 13 15 18 18 19 20 21 21 22 23 24
iv
1. Úvod Aby si lidé něco přečetli nebo se na něco podívali, musí o to mít zájem, nebo v lepším případě je to musí něčím zaujmout, přilepit jejich zrak, jinak daná věc nemá šanci a upadá v zapomnění. To platí o věcech na internetu dvojnásob. Ať už jde o stránky či prezentace, čím více to lidi zaujme, tím více času nad tím stráví. Lidé rádi klikají na různá tlačítka a pozorují, co se stane. Proto se vše ubírá interaktivní cestou. Dvakrát kliknu a vím, co jsem vědět chtěl. Adobe InDesign nabízí širokou paletu možností, jak vytvořit interaktivní dokument podle svým požadavkům. Vkládání videí, animací či interaktivních tlačítek není žádný problém, poté stačí jen dokument exportovat do požadovaného formátu a vysledný produkt je hotov. Mým úkolem bylo vytvořit interaktivní dokument o Luhačovicích, který by zmapoval tamní dominanty a přiblížil lidem, kteří v Luhačovicích nikdy nebyli, jak to tam vypadá a co vše tam lze naleznout. Luhačovice jsou lázeňské město na jihovýchodě Moravy ve Zlínském kraji, 16 km jihovýchodně od Zlína. V Luhačovicích jsou 4. největší lázně v Česku a největší na Moravě. Léčí se zde především lidé s nemocemi dýchacího ústrojí, trávením a obezitou. Lázně vděčí za svůj věhlas především minerálním pramenům. Ve městě se nachází velké množství nejrůznějších kaváren, vináren, restaurací a cukrářství. Do Luhačovic se dnes nejezdí jen za léčením, ale zdejší podmínky uspokojí lidí turisticky, sportovně i společensky založené. Pro turistiku jsou v Luhačovicích vytvořeny speciální okruhy po okolí s přírodní scenérii. V okolí Luhačovic se nachází doklady o příchodu Slovanů na území Česka, zříceniny hradů nebo zámek Serényiů a architektura Dušana Jurkoviče. Ve městě se nachází také sportovní hala, tenisové kurty nebo lázeňské divadlo. Použité programy: Adobe InDesign CS5, Adobe Photoshop CS5
1
2. Úvodní strana
2
Ústřením motivem Úvodní strany je jedna z dominant Luhačovic - lázeňský hotel Jestřabí. Fotografie byla upravena ve Photoshopu - horní část je vymazána do ztracena, aby plynule přešla do bílé barvy.
Nad fotografií se nachází velkým nadpis Luhačovice, na který je aplikován styl Nadpis 1. Text - internetový průvodce lázeňským městem, který je umístěn pod tímto nápisem, je roztáhnut na šířku nápisu Luhačovice.
Vedle těchto nadpisů je na pravé straně tlačítko Základní informace, které nás po kliknutí přepne na stránku se základními informacemi o lázních. Tlačítku se skládá z obdélníku, kterému je nastaveno ohraničení a uvnitř je vložen text. Krytí je zmenšeno na 50% a po najetí myší se zvýrazní. Ve vrchní Úvodní strany je vložen na pozadí obdelník, na který je aplikován přechod z bílé barvy do světle zelené. Uprostřed přechodu zaujímá své místo znak města Luhačovic, pod kterým je obdélník tmavě zelené barvy s černém ohraničením.
3
Naspodu Úvodní strany je na pozadí umístěn obdélník stětlezelené barvy, na kterém je umístěno tlačítko oválného tvaru, do kterého je vložena zmenšená mapa města. Vedle tlačítko je nápis Přejít na mapu a pod ním šipka směřující k mapě. Tlačítko se po najetí myší zvírazní.
4
3. Základní šablona
Všechny stránky kromě Úvodní a Mapy používají stejnou šablonu, která je poté modifikována pro další stránky. Šablonu překrýva přes celý obsah obdélník, který je vyplněn přechodem. Na horní straně se nachází ohraničený obdélník tmavě zelené barvy, přes který je vždy vložen název dané stránky. Uprostřed vidíme vodítky vymezený prostor pro text a obrázky. Na spodní straně nalezneme obdélník světlé barvy, který nám opticky odděluje spodek stránek. Pod tímto obdélníkem je vycentrován nápis Luhačovice - internetový průvodce lázeňským městem stylem Šablona text a po stranách čísla stránek. Na spodních rozích jsou ještě šipky, které znázorňují možnost otočení stránek dopředu či dozadu.
5
4. Základní informace
Stránka se základními informacemi vychází ze základní šablony. Nejprve je vložen nadpis Základní informace Nadpisem 2, pod ním obdélník světlé barvy a poté jsou vytvořeny v ohraničeném prostoru vodítky tři textové vrstvy, ve kterých je umístěn text. Na první odstavec je použit styl Popis in s iniciálou. Další odstavce jsou stylem Popis a text s odrážkamy stylem List. Na nadpisy druhého a třetího odstavce je použit styl Nadpis 3, u kterého je definováno čářkované podtržrení.Vzhled odrážek je definován ve Znakovém stylu Odrážka.
6
Pod tyto vrstvy je vložen obrázek na střed a nastaven Objektový styl Rámeček fotky.
Poté jsem si ve Photoshopu vytvořil jednoduchý vzorek o velikost 50x50 bodů, který se skládá ze dvou čar - jedné umístěné nahoře a druhé vlevo. V úpravách jsem si pomocí položky Definovat vzorek nadefinoval tento vzorek a vložil do nového souboru 300x600 bodů do nové vrstvy jako Výplň vzorkem. Na vznikou vrstvu výplňe jsem přidal vektorovou masku a v ní začal umazávat čáry, abych vytvořil „schody“ nahoře a dole. Takto vytvořený obrázek uložený ve formátu psd jsem vložil přes tři obrázky vložené nad sebou a umístil tak, aby zapadal přesně do jejich výšky a šířky.
7
Výsledný efekt Stejný efekt je použit na obou stranách.
8
5. Mapa Luhačovic
K Mapě jsem si vytvořil také šablonu, abych si oddělil pozadí od ostatních prvků stránky. V této šabloně se nachází pouze mapa Luhačovic a nad ní na horní a dolní straně dvojstránky obdélník světle zelené barvy ohraničen tmavě zelenou.
9
Poté je na dvojstránku aplikována šablona mapy, do které byl nejprve vložen nadpis stránky Mapa Luhačovic Nadpisem 2 a pod něj umístěn zelený obdélník.
Ve spodním obdélníku jsou vložena tři tlačítka. Každé tlačítko obsahuje kruh, ve kterém je vložena fotografie místa symbolického pro danou kategorii, na které tlačítko odkazuje. Vedle kruhu je název kategorie místa a pod ním šipka směřující na tento kruh s fotografií.
V pravém okraji stránky je vloženo tlačítko Základní informace, které je zkopírováno z úvodní strany. Každý budova nebo pramen, která je popsána v této příručce je vyznačena barevně na mapě - penziony žlutou barvou, prameny modrou a hotely tmavě zelenou. Budovy mají skutečný obrys a poloha pramenů je znázorněna kolečkem.
10
Nad každým místem vyznačeným na mapě je jeho název na zeleném obdélníku, který není po zobrazení stránky s obdélníkem vidět. Je jim nastavo krytí na 0%, po najetí na obrys se název zobrazí (viz obrázky).
Obrysy a kolečka nejsou na mapě po načtení stránky zobrazeny ihned, ale objeví se až po chvíli. Toho je docíleno animací, která se vytvoří v položce Animace. Stačí označit všechny objekty a vybrat požadovanou animaci a zadat čas, po jehož uplynutí se zobrazí.
11
Aby se všechny objekty zobrazili naráz a ne po jednom, musíme v Časování nastavit zobrazení všech souběžně.
12
6. Šablona pro jednotlivá místa
Pro jednotlivá místa je upravena také základní šablonu. Nejprve jsem si ji zduplikoval, abych do ní mohl vkládat jednotlivé prvky. Jako první je v této šabloně vymezen prostor pro menu, které se bude skládat ze zmenšených obrázků jednotlivých míst dané kategorie v kruhu, které se po najetí zvýrazní a po kliknutí nás přehodí na určení místo. Do takto vymezeného prostoru je vložen obdélník světle zelené barvy s jemným stínem vymezující menu. Poté je vytvořen nápis Vybrat hotel, který je otočen o 90° a . Mezi vodítka je umístěno šest stejně velikých kruhů, které jsou ohraničené tmavě zelenou barvou. Tyto kruhy jsou od sebe stejně vzdáleny, čehož je docílili tak, že vrchní a spodní kruh byl umístěn na cílové místo a ostatní mezi ně. Poté stačí všechny označit a vybrat nástroj Rozmístit svislé středy. Poté stačilo vložit obrázky jednotlivých míst do příslušných kruhů a zmenšit je na požadovanou velikost. Aby se obrázek choval jako odkaz, byl převedem na tlačítko v položce Tlačítka a zmenšeno mu krytí, které se při najetí myší zvětší na původní velikost. Nakonec byly tlačítka odkázána na daná místa pomocí Přejít na určité místo pomocí záložek v každé stránce s místem.
13
Aby prostor po stranách nebyl jen prázdný prostor, potřebovalo ho vyplnit nějakým grafickým prvkem, který by nenarušl stavbu stránky. Ve Photoshopu jsem si vytvořil podobný vzorek jako u stránky Základní informace. Skládá se ze dvou čar - vleva a nahoře, a v každém rohu je umístět jeden bod světlejší barvy, který nám má zjemnit tento vzorek a poté jsem si ho v úpravách nadefinoval. Po tomto kroku jsem si změřil velikost levého místa mezi okrajem a prosterem pro text, kde bude umístět výsledný obrázek. Vytvořil jsem se ve Photoshopu obrázek změřené velikosti a vložil do něj Vrstvu výplně se vzorkem. Tento uložený soubor jsem vložil na své místo a postupně jsem pomocí masky a štětce umazával okroje, aby tam obrázek co nejlépe zapadl. Nakonec jsem ještě vyplnil několik čtverečků světle nebo tmavě zelenou barvou. Stejně je vytvořeno i pozadí pro levou stranu mezi textem a menu.
Jako poslední jsou v šablony vloženy 3 kolečka v pravém dolním rohu, ze kterých jsou vytvořil tlačítka, která odkazují podle barvy na kategorii. Světle zelené odkazuje na Mapu, žluté na Lázeňské penziony a modré na Prameny.
Stejné dvě šablony jsem si vytvořil pro Lázeňské penziony i Prameny, které se liší jen menu a barvy koleček odkazující na příslušná místa.
14
7. Vytvoření stránky místa
Když máme vytvořené šablony pro jednotlivé kategorie Lázeňské penziony, Prameny a Lázeňské hotely, můžeme vytvořit konečnou podobu jednotlivých stránek míst. Postup si ukážeme na stránce s hotelem Dům Bedřicha Smetany. Na vytvořenou, prázdnou dvojstránku je aplikována šablona Hotely tím, že jsme ji chytli a přetáhli na tuto dvojstránku. Nyní můžeme vkládat jednotlivý obsah (pozor abychom ho nevkládali do šablony). Jako je vložen nadpis Dům Bedřicha Smetany stylen Nadpis 2 na připravené místo. Pod ním je umístěn obdélník světlě barvy, aby nám text nesplýval s vodorovnou čarou.
Následně byl vložen textový rámeček s textem popisu místa. Na první odstavec je aplikován styl Odstavce Popis in, který obsahuje iniciálu jako první písmeno, která je nadefinována ve Znakovém styluIniciála. Další odstavce jsou bez iniciály stylem Popis. 15
Poté bylo přidámo vodítko pod text ve stejné vzdálenosti, jako máme připraveno spodní od dělícího obdélníku. Do tohoto vymezeného prostoru jsme vložili přes sebe tři obrázky se stejnými rozměry. Takto vložené obrázky jsme označili a poté v poločce Stavy objektů kliknutím na Vytvořit stavy objektů vytvořili tři stavy s obrázky (viz obrázek).
Posledním krokem k tomu, aby jsme mohly přepínat mezi stavy, je vložení tlačtka na přejítí na předchozí a další stav. Přes obrázek se stavy jsme vložili následující dva obrázky tlačítek na levý, respektive pravý okraj.
16
Umístění obrázků tlačítek Nakonec stačí vybrat obrázek, přejít do položky Tlačítka, kde jsme vytvořili z obrázku tlačítko a vybrali u pravého Při kliknutí přejít na Další stav a u pravého Při kliknutí přejít na Předchozí stav. Posledním krokem je nastavení krytí, které nám způsobí, že tlačítko zmizí, a zobrazí se pouze po najetí kurzoru. Tímto způsobem byly vytvořeny všechny stránky s jednotlivými místy.
17
8. Struktura dokumentu I. Šablony stránek V InDesignu si můžete vytvořit šablony stránek, které můžete aplikovat na Vámi požadované stránky. Tato možnost Vám urychlí práci, protože nemusíte vytvářet stejný obsah ve více stránkách, ale vytvoříte si jednu šablonu a její obsah pak budou obsahovat všechny vámi vybrané stránky, na kterou šablonu použijete. Šablony existují pro jednu stránku nebo pro dvojstránky. Vytvořený dokument obsahuje celkem pět dvojstránkových šablon. První šablonou pro Mapu jsme se již podrobně zabývali, druhá je pro Základní informace, která je shodná se zbývajícími třemi. Liší se pouze tím, že neobsahuje žádné menu, překlikávače stránek a místo síťky jsou umístěny po stranách tři obrázky, které překrývají „schody“. Lázeňské penziony, Prameny a Lázeňské hotely vychází ze stejné šablony, každá se liší jiným menu a překlikávačem.
18
II. Vrstvy V dokumentu si můžete vytvořit libovolný počet vrstev, nebo si můžete vystačit pouze s jednou. Výhodou více vrstev je rychlejší orientace v dokumentu, např. když máte jednu vrstvu pro text a druhou pro obrázky. Vrstva, která je výše umístěna, překrývá svým obsahem obsah níže položé vrstvy. Vrstvy si můžete také zamykat, aby se Vám rychleji pracovalo a neklikali jste např. na prvky, které již nechcete dále upravovat. Ve vytvořeném dokumentu je celkem 21 vrstev. Každá šablona, Úvodní strana, Mapa, Základní informace má alespoň tři vrstvy. Jednu vždy pro pozadí, text a další obrázky. Důvodem je především zmíněna větší přehlednost a překrývání jednotlivých prvků .
19
III. Odstavcové styly V dokumentu si můžete definovat vlastní styly, které použijeta na určitý typ textu, např. pro hlavní nadpis, podnadpis nebo běžný text. Nespornou výhodou použití Odstavcových stylů je to, že pokud budete chtít v průběhu změnit nějak písmo, změní se Vám všude, kde jste daný styl použili a Vy tak nemusíte upravovat písmo manuálně na každé stránce. V dokumentu je použito celkem deset Odstavcových stylů: • Nadpis 1 je použit v Úvodní straně na nápis Luhačovice • Nadpis 2 je použit na nadpisy všech stránek kromě Úvodní strany, tyto nadpisy slouží také jako záložky. • Nadpis 3 je použit na podnadpisy druhého a třetího odstavce Základních informací • Podnadpis 1 je použit na text - internetový průvodce lázeňským městem na Úvodní straně • Popis in je použit na bežný text s iniciálami • Popis je použit na bežný text bez iniciál • List je použit na text s odrážkami • Mista je použit na názvy objektů na Mapě • Šablona text je použit na zápatí všech stránek kromě Úvodní strany a Mapy • Odkazy je použit na tlačítka na Úvodní straně a Mapě a na názvy kategoríí v menu
20
IV. Znakové styly Znakové styly slouží na definování stylů pro jednotlivé znaky nebo slova. Znakový styl Číslo stránky je použit na vzhled čísel stránek, Odrážka na odrážky v odstavcovím stylu List a Iniciála v odstavcovém stylu Popis in.
V. Objektové styly Tak jako lze vytvořit styly na odstavce nebo znaky, tak i na objekty. Pokud se v dokumentu vyskytuje více objektů, u kterých chcema nastavit např. stejné ohraničení nebo obtékání, je dobré si vytvořit vlastní Objektový styl. Výhoda je stejná jako u stylů odstavcových – pokud se rozhodneme něco změnit, změní se nám to u všech objektů najednou. Styl Mapa fotky je použit na objekty na Mapě, Rámeček fotky na fotografie jednotlivých míst a Rámeček přechodů na odkazy v menu nebo např. na Úvodní straně.
21
VI. Záložky V InDesignu si lze definovat také záložky, které poté můžeme využít na odkazy. Každý Nadpis 2 v dokumentu je použit rovněž jako záložka. Každé vytvořené tlačítko tak odkazuje na něktorou ze záložek, která je umístěna na dané stránce.
22
9. Závěr Hlavním cílem této práce bylo vytvoření dokumentu, který bude obsahovat interaktivní prvky jako jsou tlačítka, která nás přepnou na danou stránku, stavy objektů, pomocí kterých můžeme vytvořit např. jednoduché portfolio či vložení videa. Takto vzniklý dokument poté můžete exportovat do formátu swf (flash) nebo klasického pdf. Každý formát má své specifika a nepodporuje všechny funkce, které InDesign nabízí. Aktuální verze InDesignu CS5 přinesla oproti svému předchůdci CS4 řadu vylepšení a rozříšené možnosti, jako jsou již dříve zmíněné Stavy objektů, tedy přepínání obrázků, Animace, pomocí kterých si můžete nastavit různé zobrazení prvků po načtení stránek a Časování, kterým si uspořádáte vše tak, aby to vyhovovalo přesně Vašim představám. Pracovat v InDesignu není obtížné, avšak chvíli potrvá začínajícímu uživatele zvyknout na ovládání, které je rozdílné od běžně používaných a uspořádání programu, které se ale od ostatních aplikací Adobe příliš neliší. Tím však získáté do ruky mocnou zbraň, pomocí které pro Vás bude vytvoření interaktivního dokumentu či tiskoviny hračka.
23
10. Použité zdroje Text: www.lazneluhacovice.cz www.luhacovice.cz Obrázky: www.lazneluhacovice.cz www.panoramio.com http://blog.zarohem.cz/
24
