Orientační systém budovy FRRMS

MENDELOVA UNIVERZITA V BRNĚ PROVOZNĚ EKONOMICKÁ FAKULTA

Orientační systém budovy FRRMS Bakalářská práce

Vedoucí práce: Ing. Mgr. Jana Dannhoferová, Ph.D.

Lenka Klímová

Brno 2011

Volný list pro vložení zadání práce

Děkuji vedoucí mé bakalářské práce Ing. Mgr. Janě Dannhoferové, Ph.D. za velmi užitečné rady a pomoc při tvorbě výsledné práce. Poděkování patří také Ing. Heleně Šenkeříkové, za přispění svými radami ohledně ekonomické části práce. V neposlední řadě děkuji za vytvoření šablony pro bakalářskou práci Doc. Jiřímu Rybičkovi.

Prohlašuji, že jsem tuto bakalářskou práci vypracovala samostatně, a že v ní uvádím všechny v ní použité zdroje a literaturu. V Brně dne 8. prosince 2011

__________________

Abstract Klímová, L., The orientation system of building FRDIS/diploma thesis. Bachelor thesis. Brno: Mendel university in Brno, 2011. The thesis describes the process of creating the orientation system. 3D modeling and animation of the building will be made available on the internet. The theoretical part deals with the theory of 3D, video, SketchUp, HTML. The important theoretical part of the thesis is analyzing the industry and companies offering the creation of orientation systems. Keywords Thesis, 3D, SketchUp, building FRRMS, animation, web design.

Abstrakt Klímová, L., Orientační systém budovy FRRMS. Bakalářská práce. Brno: Mendelova univerzita v Brně, 2011. V práci je popsán postup při vytváření orientačního systému. 3D modelace budovy a animace budou zpřístupněny na internetu. Teoretická část se zabývá teorií v oblasti 3D, videa, programu SketchUp, HTML. Důležitá teoretická část práce je analýza situace v odvětví společností, které nabízejí zhotovení orientačních systémů. Klíčová slova Závěrečná práce, 3D, SketchUp, budova FRRMS, animace, webový design.

OBSAH

6

Obsah 1

Úvod a cíl práce

10

1.1

Úvod .........................................................................................................10

1.2

Cíl práce ................................................................................................... 11

2

Metodika řešení

12

3

Teoretická východiska práce

13

3.1

Program Google SketchUp ...................................................................... 13

3.1.1

Důležité nástroje programu Google SketchUp ................................ 13

3.1.1.1

Nástroj „Zatlačit/Vytáhnout“........................................................... 14

3.1.1.2 Nástroj „Následuj mně“ ................................................................... 14 3.1.1.3 Nástroj „Plechovka barvy“ ............................................................... 15 3.1.1.4 Nástroj „Terén“ ................................................................................ 15 3.1.2 3.2

Další podstatné funkce programu SketchUp................................... 15

Modelování těles ...................................................................................... 16

3.2.1

Reprezentace těles ........................................................................... 17

3.2.1.1 Co jsou Manifoldy? .......................................................................... 17 3.2.1.2 Drátový model (hranový model) ..................................................... 17 3.2.1.3 Jednoduchá plošková reprezentace ................................................. 17 3.2.1.4 Strukturovaná plošková reprezentace .............................................18 3.2.1.5 Bodová reprezentace ........................................................................18 3.3

Webový design .........................................................................................18

3.3.1

Webová stránka................................................................................ 19

3.3.2

Domovská stránka .......................................................................... 20

3.3.3

Vkládání obrázků, videa, zvuků ...................................................... 20

3.3.4

Text .................................................................................................. 20

3.3.5

CSS ................................................................................................... 21

3.3.6

Barvy na internetu ........................................................................... 21

3.4

Analýza odvětví ....................................................................................... 23

OBSAH

4

7

3.4.1

Hrozba silné rivality ........................................................................ 24

3.4.2

Hrozba vstupu nových konkurentů ................................................ 24

3.4.3

Hrozba nahraditelnosti (substituce) výrobků ................................ 25

3.4.4

Hrozba rostoucí vyjednávací síly zákazníků ................................... 25

3.4.5

Hrozba rostoucí vyjednávací síly dodavatelů ................................. 25

Vlastní řešení 4.1

Model budovy ve 3D ............................................................................... 27

4.2

Model jednotlivých pater budovy ve 3D ................................................. 30

4.2.1 4.3 4.4

Animace 3D objektů a vytvoření videa ........................................... 32

Internetová stránka ................................................................................ 33

4.3.1

5

27

Zpřístupnění internetové stránky na webovém serveru ................ 35

Analýza vstupu do odvětví ...................................................................... 36

Závěr

38

5.1

Závěr ekonomické, manažerské části práce ........................................... 38

5.2

Praktický přínos práce ............................................................................ 39

5.3

Způsoby navázání na práci ..................................................................... 39

6

Literatura

40

A

Výsledná internetová stránka orientačního systému v HTML

42

B

Náhled na výslednou podobu www stránky

44

C

Náhled na budovu ve 3D

45

D

Náhled na 3D model přízemí

46

E

Náhled na 3D model 1. patra

47

F

Náhled na 3D model 2. a 3. patra

48

SEZNAM OBRÁZKŮ

8

Seznam obrázků Obr. 1 Náhled na pracovní plochu programu Google SketchUp

14

Obr. 2 Popis tělesa je v hraniční reprezentaci převeden na popis pláště (Moderní počítačová grafika, Žára Jiří a kol.)

17

Obr. 3

Diagramy souladu barev (Thomas A. Powell, Web design)22

Obr. 4

5 hybných sil (Porter)

24

Obr. 5

Náhled na tvorbu kopule

29

Obr. 6


30

Obr. 7

Screenshot Adobe After Effects

33

Obr. 8

Screenshot práce v aplikaci PSPad

34

Obr. 9

Screenshot FTP složky

36

Obr. 10

Internetová stránka

44

Obr. 11

Budova FRRMS, náhled ze 3D modelu

45

Obr. 12

Přízemí

46

Obr. 13

1. patro

47

Obr. 14

2. patro

48

Obr. 15

3. patro

48

SEZNAM TABULEK

9

Seznam tabulek Tab. 1

Hodnoty bezpečných barev

22

Tab. 2

Příklady bezpečných barev

23

ÚVOD A CÍL PRÁCE

10

1 Úvod a cíl práce 1.1

Úvod

V dnešní době, kdy jde vývoj veškeré techniky rychle kupředu, je zároveň potřeba vše zrychlovat, a také ulehčovat. O to usiluje výpočetní technika, tedy lidé, kteří ji vytváří a většinou ulehčují lidem práci, a otevírají jim nové obzory. Lze si jen těžko představit, jak bychom si poradili bez počítačů, internetové sítě a podobných technik. Vždyť i svět reklamy, který nás všechny obklopuje a ovlivňuje, by nemohl existovat nebýt programů určených pro její úpravu. Produkty grafických programů jsou všude, kam se podíváme. Nejen na billboardech, v televizi, na internetu, ale bez jejich pomoci se neobejde ani nábytek, budovy, počítačové hry, obaly na výrobky, a spousta dalších. Například návrhy budov a nábytku se vytváří počítačovými programy pro úpravu ve 3D prostoru. 3D prostor, neboli Three-Dimensional space, je prostor, který lze sledovat ve 3 různých rozměrech. Vývoj nových aplikací pro grafické úpravy jde mimo jiné směrem ke zjednodušování a uzpůsobování programů tak, aby mohli tvořit i jedinci, kteří nemají dlouhodobou praxi s podobnými grafickými nástroji. Zatím se uživatelé mohli spíše setkat se složitými programy, ve kterých museli pracovat dlouhé hodiny, než pochopili, jak se v prostředí pracuje. Ve skupině 3D editorů je zástupcem těchto jednoduchých programů právě Google SketchUp, ve kterém vypracovávám větší část této Bakalářské práce. Kromě programů pro 3D grafiku jsou důležité i dvojdimensionální prostory. Vznikají v nich plakáty, letáky, knihy, časopisy, upravují se v nich fotografie, a spousta dalších úprav, které se velmi často využívají. Mezi takové programy patří například Malování, které má ve vybavení také téměř každý počítač. Ale pokud chce uživatel vykonávat dokonalejší, ale složitější úpravy, měl by si pořídit program dle svých potřeb. Málokdo z těch, kteří využívají počítač pro takovéto úpravy, se spokojí se základním vybavením svého počítače. V dnešní době i studenti základních škol umí velmi dobře pracovat s grafickými programy, upravují fotografie, vytváří koláže, a to ať už zcela dle své fantazie, nebo za pomocí nástrojů, předvoleb, které úpravy zjednodušují. Vývojem se více a více ujišťujeme, že grafický design je a v budoucnu určitě bude součástí našich životů. Pro některé jako pro pasivní pozorovatele, kteří budou vidět výsledky práce těch, kteří ovlivňují vzhled našeho společného prostředí. Do skupin, které ovlivňují toto prostředí, patří neodmyslitelně různé grafické společnosti, zabývající se reklamou, grafikou, technickými záležitostmi, které jsou potřeba pro vývoje staveb, a další podobné oblasti grafického designu. Existuje několik firem, které se věnují tvorbě 3D modelů budov na objednávku. Vytvoří 3D model budovy z vnějšku a také navrhnou orientační systémy pro budovu. Objednávky podávají většinou větší společnosti, nebo veřejná zařízení,

ÚVOD A CÍL PRÁCE

11

jako jsou školy, nemocnice, a úřady. Společnosti, které tuto službu poskytují, obvykle zaměstnávají grafické designéry, kteří zvládají vytvořit jak 3D model budovy, se všemi detaily a potřebnými parametry, tak i vymyslet vhodný orientační systém, jeho grafickou stránku a užitnost. Musí být snadné se v takovém orientačním systému zorientovat.

1.2

Cíl práce

Cílem bakalářské práce je vytvořit jednoduchý orientační systém budovy Fakulty regionálního rozvoje a mezinárodních studií. Budova se nachází v ulici tř. Generála Píky 7, 61300 Brno. Orientační systém je vytvářen především za pomoci 3D prezentace. K tomuto účelu je využit grafický editor pro modelování ve 3D. Dále program pro úpravu videozáznamů, tedy pro úpravu vzniklé animace ze 3D editoru. A v neposlední řadě HTML jazyk pro zpřístupnění dat na webových stránkách. Důležitou a neopomenutelnou částí práce bude ekonomické ohodnocení situace v oblasti konkurenčního prostředí společností, které se zabývají zhotovováním orientačních systémů, a jaké jsou podmínky pro vstup do odvětví.

METODIKA ŘEŠENÍ

12

2 Metodika řešení Rozhodla jsem se použít k modelování 3D modelu budovy FRRMS aplikaci Google SketchUp 8, který je volně přístupný na internetu. Stejnou aplikaci použiji i pro modelování jednotlivých pater budovy, které bude sloužit pro orientaci v budově. Ke zpracování videa jsem zvolila aplikaci Adobe After Effects, protože práci v něm jsem se učila v rámci předmětu Audiovizuální komunikace. A webovou stránku se chystám zhotovit pomocí programu PSPad.

TEORETICKÁ VÝCHODISKA PRÁCE

13

3 Teoretická východiska práce V této části práce představím aplikace, ve kterých jsem práci zpracovala, a také přiblížím některé teoretické vlastnosti 3D objektů a webového designu.

3.1

Program Google SketchUp

Tento software společnosti Google byl vyvinut především pro uživatele začínající s tvorbou 3D objektů, aby prováděné činnosti v programu byly zcela intuitivní, a snadno zapamatovatelné. Práce v něm je jednoduchá a z ostatních softwarů pro modelaci objektů se každý nejrychleji naučí, jak se v prostředí pohybovat a efektivně tvořit. Další výhodou je možnost sdílení vytvořeného objektu na internetu, v galerii Google. Dále lze vytvořit výstupy jako obrázek, video, nebo rovnou tisk náhledu z přímo z programu. Práce se SketchUp je sice jednoduchá, ale i přesto jej používá velké množství profesionálních pracovníků. Velkou část zákazníků tvoří práce v odvětví architektury a designu, stavebnictví a konstrukce, a v neposlední řadě také oblast digitální zábavy, to jsou animace a prostor ve hrách a televizi. (Google SketchUp [online], Zákazníci) 3.1.1

Důležité nástroje programu Google SketchUp

V následujícím textu budou popsané nejvýznamnější nástroje programu Google SketchUp, pro pochopení o který nástroj se jedná, lze níže vidět i obrázek náhledu na pracovní plochu programu (Obr. 1).


Obr. 1

14

Náhled na pracovní plochu programu Google SketchUp

Jednoduchost modelování v programu je dána existencí pouze dvou prvků v modelu, jsou to hrany a plochy. Jde o rovné čáry a plochy ve 2D. Spojením těchto prvků se vytvoří objekt ve 3D. Pro upřesnění je plocha čtverce založena spojením čtyř hran spojených pravým úhlem. Ve SketchUp jsou pro uživatele potřeba ale jen hrany a plochy, pro jejíž vznik jsou nabídnuty jednoduché a snadno použitelné nástroje, se kterými se dá naučit pracovat opravdu brzy. 3.1.1.1 Nástroj „Zatlačit/Vytáhnout“ Nástroj, který asi nejvíce dopomáhá uživateli ke snadnému a intuitivnímu modelování je určitě nástroj „Zatlačit/Vytáhnout“. Pouhým kliknutím a následným pohybem myši na plochu, kterou je cílem prostorově zatlačit, nebo vytáhnout k sobě, lze vytvořit z 2D objektu (plochy) 3D objekt. Například kruh tažený do výšky se tím stane trojrozměrný a tedy válec. Obdélník se změní na kvádr. Na tomto je postaven největší nápad a úspěch produktu SketchUp. 3.1.1.2 Nástroj „Následuj mně“ Nelze opomenout nástroj „Následuj mě“. Umí například vytvořit potrubí, a to pár kliknutími. Stačí kruhová plocha, ze které vede linka, která určuje, jak by mělo potrubí vést. Poté použitím nástroje „Následuj mě“, klikne uživatel na kruhovou plochu, a automaticky se tato plocha, podle linek z nich vedoucích, přemění na 3D model, v tomto případě opět válec, který má ale zaoblení a směr, dle zmíněné linky vedoucí z kruhové plochy. Nakreslení trojúhelníku nad kvádrem, jednoduše, pomocí tohoto nástroje vznikne střecha. Stačí jen mít trojúhel-


15

ník označený a kliknout na jednu z linií tvořící vrchní část kvádru, kudy povede strana střechy. Kromě nástroje „Zatlačit/Vytáhnout“ je „Následuj mě“ dalším nástrojem, který dokáže velmi snadno udělat z 2D plochy 3D objekt. 3.1.1.3 Nástroj „Plechovka barvy“ Co by to bylo za model, kdyby v něm nebyly barvy. K vložení barev, textur i snímků pořízených fotoaparátem, nebo vytvořených obrázků v různých aplikacích slouží „Plechovka barvy“. Některé barvy a textury jsou umístěny v knihovně materiálů, je možné je v aplikaci snadno využít. Nabídka barev je velmi pestrá a jsou zde i základní textury, které se často využívají, jsou to koberce, střechy, zeleň, kachličky, kameny, některé typy podlah. Pokud by tato nabídka byla pro někoho nedostačující, další motivy jsou k dispozici na internetu. Pak stačí jen vybrat barvu a kliknout na místo, které má být obarveno. V panelu Materials, jde nastavit i velikost jedné části obarvení. Tedy u textury, která má jednu jedinou barvu, je toto nedůležité, ale pokud se dává textura něčeho členitého, u čeho je důležitá velikost, lze využít tohoto nastavení, například u textury střechy, aby jednotlivé tašky nebyly, přiliž malé, nebo naopak velké, nastaví se jim správná velikost v poměru s celým modelem. 3.1.1.4 Nástroj „Terén“ Stává se velmi často, že budova není na úplně rovné zemi, většinou je podklad zvlněný terénem, pokud je například budova na kopci, nebo v dolině. Aby budova zapadla do okolního prostředí, je nutné terén upravit i ve 3D. K tomu slouží nástroj „Terén“. Používá se nejen na změnu nadmořské výšky terénu, ale i na vložení silnic, řek, říms i údolí. 3.1.2

Další podstatné funkce programu SketchUp

Další výhodou je bezesporu přesná práce v aplikaci. Je zde několik nástrojů pro měření. Umožňují již zmíněnou přesnost, a to bez zbytečného zdržování. Jediné co modeláře může zdržovat, je jeho nedostatek informací o rozměrech modelovaného objektu. Proto je důležité si vše dopředu promyslet a zapsat, aby práce pak byla efektivní. Aby model vypadal realisticky, potřebuje svoje prostředí, které realitu napodobí. V aplikaci SketchUp mysleli i na toto a umožnili vybírání prostředí. Nastavení, světla, stínu. Dokonce při propojení aplikace s Google.com můžete zadat geografické umístění reálné, nebo smyšlené budovy, objektu. A s pomocí časového posuvníku nastavit denní dobu, kterou potřebujete. Je to vhodné například při promýšlení, jak umístit kryt terasy před sluncem tak, aby na terasu v době největšího parna hřálo slunce co nejméně. K dotváření realističnosti je také možné zvolit, jestli se zobrazí například mlha. Když už je model hotový, vypadá co nejvíce realisticky, a uživatel je spokojen, zbývá otázka, jak dostat model do podoby, aby bylo možné si jej prohlížet


16

na většině počítačů? Odpověď je jednoduchá, a každý na ni pohodlně přijde pomocí intuitivního programu. Jedna z možností je exportovat náhled modelu do zvoleného formátu. V nabídce je možný export na rastrové obrázky ve 2D a to do formátů *.jpg, *.bmp, *.tif, *.png1. Pokud chceme uložit model do jiného formátu, ale ponechat jej ve 3D, nabízí SketchUp dva formáty, *.dae a *.kmz. Využívaným řešením je především animace. Tvoří se pomocí klíčových snímků, které potom SketchUp spojí průletem mezi dvěma snímky. Nástroj k tomu vytvořený se nazývá „Scene“. Tímto způsobem se vytvoří takové video, podle toho jak si snímky nastaví uživatel. Výsledné video přitom dokáže „proletět“ i zdmi a dalšími objekty v modelu. Opět je vše velmi intuitivní. Vytvořenou animaci je potřeba exportovat, aby se dala prohlížet i jinde než v tomto programu. Volba exportu a možnost animace. Nejvhodnější je vybrat formát *.avi. Jiné nabízené formáty jsou totiž pro obrázky, a pokud jej uživatel zvolí, uloží se mu jako jednotlivé náhledy, které při prohlížení jednoho obrázku po druhém navazuje jako video. Ale jen *.avi je možné prohlížet jako video, bez přepínání obrázků. Výhodou je také možnost importu jiných 3D modelů z jiných programů a v jiných formátech (DXF, DWG a 3DS). Je to využitelné v případě, že je v jiném programu část modelu již hotová, a není tedy třeba ji znovu modelovat v aplikaci SketchUp. Pokud uživatel narazí na problém ve své práci, nebude si vědět rady, má vždy možnost rychlé nápovědy pomocí „Instruktora“. „Instruktor“ je dialogové okno, které lze kdykoli aktivovat a umožňuje nápovědu pro otázky, které jsou při práci v programu nejčastější. Nejčastěji, pokud uživatel neví, jak určitý nástroj použít, a má tento nástroj aktivovaný, zobrazí se jednoduchá animace, kde je použití vysvětleno. Zobrazí se také užitečné klíče úprav a další typy, které usnadní a zefektivní práci ve SketchUp.

3.2

Modelování těles

V počítačové grafice lze často vidět objekty, které jsou tělesa. 3D objekty jsou takové prvky grafiky, které se snažíme vytvářet tak, aby napodobovali skutečné předměty, které mají svůj objem. Těleso je tedy množina bodů v trojrozměrném prostoru, splňující určitá kritéria (Moderní počítačová grafika, Žára Jiří, a kol.). Těleso lze považovat za spojení disjunktních množin. Spojení hraničních a vnitřních bodů2. Z toho vyplývá, že tělesem nemohou být různé křivky, ani plochy. Křivky a plochy ale stále zůstávají důležitými prvky těles. Jejich funkcí je totiž popis množiny hraničních bodů.

*.jpg, *.png, *.bmp, *.tif, *.avi. Hvězdy v textu značí název souboru ve formátu, který je znám pod zkratkou, která následuje po hvězdě a tečce. 2 Vnitřní bod je pouze vedle dalšího vnitřního bodu nebo hraničního bodu. Zato hraniční bod sousedí minimálně s jedním hraničním bodem, s bodem vnitřním, ale i s bodem vnějším. 1


3.2.1

17

Reprezentace těles

Pro vytvoření těles je důležitá jejich reprezentace, je dobré vědět, jakým způsobem jsou tělesa tvořena. Reprezentace jsou hraniční, a objemová. Nejvíce používané jsou hraniční reprezentace. Další důvod, proč zde bude vysvětlena hraniční reprezentace je, že v praktické části práce je tento způsob využit. Hraniční reprezentace těles je založena na popisu hranice, což znamená popisu množiny hraničních bodů. Tato reprezentace je velmi přirozená a intuitivní, protože většina lidí pokud kreslí těleso, dělá to pomocí hran. Pro správnou představu následuje obrázek, na kterém je těleso sestaveno pomocí hraniční reprezentace (Obr. 2).

Obr. 2

Popis tělesa je v hraniční reprezentaci převeden na popis pláště (Moderní počítačová grafika, Žára Jiří a kol.)

3.2.1.1 Co jsou Manifoldy? Důležitým pojmem jsou tzv. Manifoldy. Protože při hraniční reprezentaci mohou vzniknout i taková tělesa, která v reálném světě vzniknout nemohou. Například spojení dvou těles pouze jedním jediným bodem, nebo třeba nekonečně dlouhá přímka. Manifoldy tedy označují taková tělesa, která lze modelovat, ale v realitě je nenajdeme. 3.2.1.2 Drátový model (hranový model) Drátový model, z něj vznikl typ reprezentace, který se nazývá hranový model. Je to nejjednodušší a také nejstarší způsob jak vytvořit model. Nevýhodou je ale, že pouhé hrany neurčí přesný tvar modelu. Interpretace může být různá. 3.2.1.3 Jednoduchá plošková reprezentace Jednoduchá plošková reprezentace rozšiřuje předchozí reprezentaci o plochy, tím se vyruší problém s interpretací modelů. Plocha je složena z množiny trojúhelníků nebo polygonů


18

3.2.1.4 Strukturovaná plošková reprezentace Nejznámější komplexní datová struktura hraniční reprezentace je strukturovaná plošková reprezentace. Je známa i pod názvem okřídlená hrana, protože zobrazení hrany a s ní sousedících prvků tvoří dojem křídla. Datový záznam hrany obsahuje ukazatele na sousední geometrické elementy (Moderní počítačová grafika, Žára Jiří a kol.) 3.2.1.5 Bodová reprezentace Poslední známou hraniční reprezentací modelu je bodová reprezentace. Jedná se o povrchové body získané digitálním snímáním reálných objektů. Nevýhodou jsou vysoké nároky na paměť.

3.3

Webový design

Každý den se většina z nás připojí k internetu, a různě si prohlíží a čte stránky, které hledá, nebo jen tak surfuje po internetu. Ale už ne všechny z nás napadne, co všechno obnáší takové stránky vytvořit. Internetové stránky vypadají v téměř všech případech velmi pěkně, a hlavně, každá je jiná. Za to mohou weboví designéři, nebo někdy i lidé, které vytváření stránek prostě baví, a chtějí si dát práci s tím, aby stránka vypadala hezky. To, jaké stránky se komu líbí, ale není pravidlem, je to otázkou vkusu, který má každý jiný. Někdo z designérů raději tvoří stránky s jednodušší grafikou, nebo dokonce bez grafických prvků, pouze text. Dělají to tak, protože věří, že internetová stránka má být především účelná a čitelná. Ti co více prosazují grafiku, mají sice velmi zajímavé a krásné stránky, ale mnohdy ztrácí účelnost. Existuje i další skupina, která dokáže vytvořit graficky velmi hezké stránky, ale zároveň si pohrají také s čitelností a účelností, tím vzniknou ty nejlepší internetové stránky. Pro efektivní a pěknou internetovou stránku je vhodné si nejdříve osvojit alespoň základy práce s jazykem HTML, a osvojit si některé znalosti z webového designu. Tedy pokud chcete stránku vytvořit sami, a nemáte spoustu peněz na vytvoření stránky firmou nebo webovým designérem. Není to pro začátečníky rozhodně jednoduchá záležitost. Je důležité si uvědomit, co je vlastně webový design. Je to všeoborová činnost týkající se plánování a tvorby webových serverů, včetně (avšak nikoli pouze) technického vývoje, struktury informací, vizuálního designu a přenosu prostřednictvím sítě. (Web Design, Thomas A. Powell). Poté by neměl autor budoucích stránek opomenout skutečnost, že on není uživatelem daných stránek, a tomu přizpůsobit jejich vznik a vývoj. Ale také, že uživatel, který jednou bude stránky prohlížet, není autorem, tedy, že uživatel nebude znát informace, které má autor, to musí autor vzít v úvahu, a také dle toho stránku tvořit. Úprava webových stánek by se měla odrážet hlavně ve stránce samotné a v rozvržení textu a obrázků, popřípadě jiných prvků. Autor je vždy omezen


19

nějakými limity, pravým účelem rozvržení je vždy napomáhat uživateli v používání stránky. 3.3.1

Webová stránka

Webová stránka je to, co vidí uživatel při otevření prohlížeče. Platí, že pro jednu internetovou stránku existuje jedna URL adresa, ale při zadání jedné URL adresy může být zahrnuto více dokumentů. Velikosti stránek jsou nejdůležitější hlavně díky zobrazení na prohlížečích v různých počítačích uživatelů. Především kvůli rozdílným rozlišením. Ale velikost stránek se přizpůsobuje z více důvodů, například pro tisk, aby stránky nebyly zbytečně dlouhé, a dalo se je pohodlně vytisknout. Bohužel, ideální velikost stránky neexistuje. Záleží na spoustě parametrů, které má vytvářená stránka, na tom, co má sdělovat, kolik je v ní textu, obrázků. Měla by odpovídat účelu. Délka stránky je tedy vcelku individuální a autor sám musí vědět, jak si stránku představuje, a jak ji udělat krátkou nebo naopak dlouhou. Další parametr stránky je její šířka, u ní existuje jedno výrazné doporučení. Nedělat stránku tak širokou, aby se musela při prohlížení posouvat na stranu. To by velmi negativně ovlivnilo smýšlení uživatele o stránce. Délka stránky většinou ale přesáhne okno prohlížeče, na tom není nic špatného, ale je třeba opět usnadnit prohlížení takovéto stránky uživateli. V takovém případě se jednoduše vytvoří obsah, kde se v bodech vypíše, co je na stránce obsaženo, aby bylo uživateli ihned jasné, zda tam má hledat informace, které potřebuje. Kromě velikosti webové stránky jako pojmu se využívá pojem velikost obrazovky, ale záměna těchto pojmů je nesprávná. Není správně vytvářet omezení rozlišení u webových serverů. V některých případech se tomu designér nevyhne. Toto platí především, pokud by si uživatel stránku chtěl zobrazit na jiném zařízení, než PC (například prostřednictvím televizoru, kapesního digitálního počítače). Existuje možnost volby relativní velikosti stránky. To znamená procentně vyjádřená velikost poměrně k velikosti obrazovky. Stránka se zmenší nebo rozšíří podle vzniklého prostoru v okně. Přizpůsobuje se aktuální velikosti okna. Může brát v úvahu i okraje stránky. Příklad relativního rozvržení: <meta http-equiv="content-type" content="text/html; charset=windows1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> Zvětšení


20

Šířka tabulky je nastavena na 100% šířky zobrazení, pokud zvětšíte plochu zobrazení v prohlížeči, obsah vyplní dostupný prostor. Rozšíření prostrou ne vždy napomůže čitelnosti, protože mohou vzniknout velmi dlouhé řádky textu.

(Web design, Thomas A. Powell) 3.3.2

Domovská stránka

Každý webový server má svoji domovskou stránku. Je to první stránka, která se zobrazí po načtení URL odkazu. Její vzhled by se měl lišit od ostatních stránek serveru. Aby už domovská stránka uživatele neodradila od prohlížení serveru, měla by být rychle načtená, ale ne na úkor malého množství informací. Další její úlohou je vzbudit zájem uživatele a utvrdit jej v tom, aby si stránky dále prohlížel. 3.3.3

Vkládání obrázků, videa, zvuků

Pokud jde o vkládání obrázku, videí, a dalších multimediálních souborů, musí autor dbát na to, aby ponechal vhodné rozlišení, takové, které je v původním nastavení použitých multimediálních souborů, jinak bude například obrázek příliš roztažený, nebo tak malý, že stejně nebude rozpoznat, co na něm je. Vkládání videí je nejsnadnější z YouTube, video má tak i své ovládací tlačítka a graficky je také zdařilé. Jedinou nevýhodou je zobrazení reklamy při spouštění. 3.3.4

Text

I když psaní textu a jeho zobrazení se jeví na první pohled jako nejjednodušší část tvorby webových stránek, dalo by se spíše říci, že opak je pravdou. Text se skládá z odstavců, řádků a písmen, a každý řádek, tedy i odstavec může být v prohlížeči každého uživatele viděn jinak. Tok textu je totiž velmi dynamický. Pouhá změna písma změní velikost okna, a snadno a rychle tak změní propracované formátování stránky. Navíc je velmi těžké si s tímto problémem poradit, protože ani v online režimu je nelze předvídat. Patří sem typografické řešení stránky, tedy i mezery mezi písmeny. Vhodnou možností, jak vyřešit problém s nepředvídatelností podoby textu na webové stránce je zobrazení textu pomocí grafiky. Tím vzniká určitá možnost kontroly, takový text má vlastnosti takové, že je nelze rozladit jako běžný


21

text. Ale i toto má svá negativa, značně se pak zpomalí načítání stránky, a také se tento textový obrázek nebude zvětšovat, při zachování kvality. Snaha o upoutání uživatele, aby zůstal na webové stránce, může být zmařena, i když stránka odpovídá snad všem designovým doporučením. Stane se tak velmi jednoduše, stačí jen, aby uživatele nezaujal obsah. Tedy není důležitá jen grafická forma, ale stejně tak i význam stránky. A nejen v grafice, ale i v textu musí upoutat v prvních vteřinách. Osoba, která si stránku prohlíží, totiž nezačne hned číst dlouhý text, tak by ztratila spoustu času hledáním toho, co potřebuje. Vždy si totiž zpravidla stránku rychle prohlédne (grafická stránka) a poté hledá obsah, něco, kde zjistí, co na stránce vůbec může hledat. Proto je výhodné na stránce na viditelném místě alespoň staticky umístit obsah. Jinak se autor může bát, že uživatele odradí ihned po shlédnutí stránky. 3.3.5

CSS

Způsobem, jak vyřešit spoustu problémů se zařízením webové stránky je použít místo HTML jazyka CSS. Poskytuje spoustu úprav, od zavedení obsahu po zpracování mezer. CSS je ale časově poněkud náročnější na zpracování než práce v HTML, ale pokud má autor trpělivost, určitě bude spokojen s výsledky. Také kompletně převezme kontrolu nad zobrazením stránek. 3.3.6

Barvy na internetu

Barvy jsou bezpochyby základní stavební kámen grafické stránky. Dají webové stránce správnou atmosféru. Avšak ne vždy se barva zobrazí, jak bylo původně v úmyslu designéra. Je to kvůli bitové hloubce, protože barvy mohou být za hranicí zobrazovaného prostředí. Prohlížeč se takovou situaci snaží automaticky vyřešit, a buď barvu nahradí alternativní barvou, nebo je barva zkreslena. Aby bylo takovým situacím předcházeno, existuje seznam takzvaných bezpečných barev. Řídí se dle tabulky hodnot bezpečných barev (Tab. 1).


Tab. 1

Hodnota RGB3 255 204 153 102 51 0

22

Hodnoty bezpečných barev

Procentuální hodnota 100% 80% 60% 40% 20% 0%

Hexadecimální hodnota4 FF CC 99 66 33 00

Úplný seznam přímo bezpečných barev je velmi rozsáhlý, proto zde uvedu jen odkaz ke zdroji, kde se můžete podívat, jaké barvy jsou bezpečné pro webové prezentace. Stránka je: http://www.htmlref.com/reference/AppE/index.htm nebo na http://www.jakpsatweb.cz/archiv/barvy-bezpecne.html. Kromě bezpečnosti při výběru barev je zde opět otázka designu. Některé barvy se k sobě hodí, jiné tolik ne, nebo dokonce některé kombinace mohou být oku nepříjemné. Pro orientaci ve volbě barev jsou designérům k dispozici diagramy souladu barev. Těmi je dobré se řídit. Analogový diagram spojuje barvy do harmonie pomocí jednoduchého klíče, prostě 3 barvy, které jsou na diagramu vedle sebe. Komplementární diagram spojením protějších barev, rozdělený komplementární rozdělí diagram na třetiny, a poslední, zvaný triáda spojuje barvy vrcholy rovnostranného trojúhelníku (Obr. 3).

Obr. 3

Diagramy souladu barev (Thomas A. Powell, Web design)

Dalším doporučením při volbě barev jsou následující tipy: • Používejte na stránce pouze několik odlišných barev • Nepoužívejte přílišný počet barev • Používejte teplé a studené barvy dohromady (Thomas A. Powell, Web design) RGB je barevný model, který zahrnuje využití 3 základních barev (červená, zelená, modrá) (TŮMA, Tomáš. Počítačová grafika a design) 4 Hexadecimální hodnota je hodnota v číselné soustavě, jejíž základ je 16 3


23

Barvy je doporučováno používat opatrně i z hlediska jejich významu. Pokud autor stránky počítá i se zahraniční návštěvou jeho webových stránek, může se stát, že barvy pochopí jinak, než český občan. Například u nás, a v dalších západnějších zemích je černá barva spojována se smrtí, smutkem, ale v Japonsku je se smrtí spojována barva bílá, tedy naprostý opak. (Web design, Thomas A. Powell) Za vysvětlení, co která barva znamená, vděčíme německému spisovateli a mysliteli Goethemu, který se právě teorii barev věnoval. Některé z těchto barev jsou popsány v tabulce příkladů bezpečných barev (Tab. 2). Tab. 2

Barva Červená Modrá Žlutá

3.4

Příklady bezpečných barev

Popis Vášeň, chyba, varování, agrese, odvážnost Mír, smutek, voda, mužnost Štěstí, výstraha, slunce, radost, zpomalení

Analýza odvětví

K analyzování odvětví a k zjištění vhodnosti vstupu do odvětví jsem si vybrala Porterovu analýzu odvětví podle pěti hybných sil. Jde o analýzu strukturální přitažlivosti odvětví z hlediska ziskovosti (Analýza podniku v rukou manažera, Grasseová). Dle Portera závisí stanovení odvětví na pěti dynamických faktorech. Těchto pět faktorů určuje vhodnost vstupu do odvětví se zohledněním ziskovosti při existenci v odvětví, a také bere v úvahu rizika související s podnikáním v dané konkurenci. Konkurence, která je v této analýze podstatný pojem, znamená, že firmy spolu soupeří o nezbytné zdroje a zákazníky. Schopnost firem produkovat takové výrobky, služby, které uspějí na trhu (u zákazníků), se nazývá konkurenční schopnost společností. Taková společnosti musí věnovat úsilí sledování konkurenčních firem. Ale pouhé sledování konkurence, pro vhodné začlenění do odvětví, nestačí. Všechny předpoklady pro zjištění vhodnosti vstupu do odvětví jsou znázorněny v grafickém znázornění pěti hybných sil Portera (Obr. 4). Společnost vstupující do odvětví, by měla mít už před vlastním vstupem připravenou konkurenční strategii. Bez strategie, ať už jasné formulované, či skryté, je velmi pravděpodobný neúspěch společnosti, v horším případě i její bankrot.


Obr. 4

24

5 hybných sil (Porter)

Tento model patří mezi nejpoužívanější nástroje a analýzy oborového odvětví, tzv. mikroprostředí. V následujícím textu budou jednotlivé síly popsány. 3.4.1

Hrozba silné rivality

Pokud v odvětví působí příliš velké procento konkurentů, není pro podnik výhodné do odvětví vstoupit. Navíc, pokud se odvětví zmenšuje, nebo stagnuje, stávající konkurenti nechtějí pouštět nové společnosti do odvětví, aby tak nepřišli o své místo a podíl na trhu. V takové situaci může dojít i k cenovým válkám, kdy velkou roli hrají vysoké fixní náklady, a tlak na snižování cen. Záleží také na zájmu konkurentů o udržení se v odvětví, co všechno jsou ochotni udělat, aby se v odvětví udrželi). Pokud by společnost, chtěla vstoupit na trh se silnou rivalitou, měla by si předem ujasnit a naplánovat, v čem chce být odlišena a čím si získá a udrží své jedinečné místo v odvětví. Nebezpečí nepřichází pouze z vnějšku, typické je i soupeření mezi stávajícími konkurenty v odvětví. Každý konkurent se naží získat výhodnější postavení. Využívají různých metod, jako jsou cenová konkurence, reklamní kampaně, uvedení produktu a zlepšený servis zákazníkům nebo záruky (Kotler, Marketing management). 3.4.2

Hrozba vstupu nových konkurentů

Nové konkurenty omezuje především vstupní bariéra, která se vyskytuje v každém odvětví. Ať už je velká, nebo nepatrná. Sílu bariéry vstupu do odvětví tvoří následujících šest prvků (Analýza v rukou manažera, Grasseová): úspory z rozsahu, kapitálová náročnost vstupu, přístup k distribučním kanálům, očekávaná reakce zavedených firem, legislativa a vládní zásahy, diferenciace výrobků. Nejvhodnější z hlediska ziskovosti, je takový trh, který má vysoké vstupní barié-


25

ry a nízké výstupní bariéry. Pokud by v odvětví byly obě zmíněné bariéry vysoké, vytvářela by se sice vysoká ziskovost, ale také velké riziko, protože při neúspěchu je společnost nucena na trhu setrvat a bojovat o své udržení, nemůže totiž přes vysokou výstupní bariéru z trhu odejít. Z toho pak vzniká nadvýroba a nízké výnosy nejen pro tu jedinou firmu, ale i pro všechny firmy v odvětví. Protože je vhodné, aby do odvětví nevstupovaly firmy, které by nemusely zvládnout konkurenci a tím zhoršit úspěšnost všech ostatních firem, je vhodné zajistit, aby vstupní bariéry byly dostatečně vysoké. Firmy, které nově vstupují do odvětví, zvyšují jeho kapacitu. Jejich snahou je získat podíl na trhu. Další nebezpečí přináší také poptávka po zdrojích. Toto může vést ke stlačení cen nebo k růstu nákladů, a tím ke snížení ziskovosti (Kotler, Marketing management). 3.4.3

Hrozba nahraditelnosti (substituce) výrobků

Substituty jsou produkty, které jsou podobné, v podstatě zaměnitelné a slouží ke srovnatelnému účelu. Pokud tedy nabízí společnost stejný výrobek jako už v odvětví jiné firmy, není produkt už tolik atraktivní. Podnik se pak musí zaměřit na sledování cen u jiných substitutů. Pokud by chtěl podnik vstoupit na takový trh, měl by si uvědomit jak snížit hrozbu substitutů. 3.4.4

Hrozba rostoucí vyjednávací síly zákazníků

Pokud zákaznici mohou příliš ovlivňovat cenu, stává se odvětví neatraktivní. Snaží se snižovat ceny, zároveň chtějí vyšší kvalitu a více služeb. Stává se tak především u produktů, které tvoří u zákazníků produkt časté potřeby. V takovém případě by se dalo říci, že jsou zákazníci organizovaní, a snaží se takto tlačit na snižování cen u stejných produktů. Správná reakce společnosti by měla být vytvoření takové nabídky, která se bude zákazníkům líbit, a nebudou chtít cenu snížit. Nebo přijít na způsob jak snížit tuto sílu zákazníků. Jejich prioritou je nakoupit za co nejnižší cenu, ale zároveň usilují o dosazení vyšší kvality nebo lepších služeb a tímto svým chováním staví konkurenty navzájem proti sobě (Kotler, Marketing management). 3.4.5

Hrozba rostoucí vyjednávací síly dodavatelů

Jestliže je situace taková, že si společnosti v odvětví mohou dovolit nabízet nekvalitní zboží, nebo dávat méně zboží, je toto odvětví také nevhodné. Pokud je takovýchto dodavatelů na trhu více, roste i četnost těchto praktik, tím spíš, že nabízejí jedinečný výrobek. I síla těchto dodavatelů se dá snížit. Stačí jen přijít na to jak, a pro vstupujícího podnikatele se tato hrozba ztratí. Hrozbou jsou takoví dodavatelé, kteří zvyšují ceny nebo snižují kvalitu nakupovaných statků a služeb. Vlivní dodavatelé tak mohou v odvětví, které není schopno se tlakům bránit, zvýšit vlastní ceny, a tak ovlivnit ziskovost (Kotler, Marketing management).


26

V poslední době se vyskytují názory, dle nichž je tento Porterům model pěti hybných sil nutné rozšířit ještě alespoň o dva další faktory. Jsou tím myšleni komplementáři a vliv zásadních, nečekaných změn v podnikání. (POŠVÁŘ, Zdeněk; ERBES, Jiří. Management I.) Každá společnost by si před vstupem do odvětví měla tyto body projít a uvědomit si, jestli se jí vyplatí do odvětví vstoupit. Analýza nemá nikdy jeden jediný možný výstup. Každá firma si individuálně určí, co je pro ni vhodné, jestli se rozhodne do odvětví vstoupit, nebo zda zvolí jiné odvětví. Nelze nikdy předem říci, jestli je rozhodnutí manažera nebo například majitele správné, to se projeví až po čase.

VLASTNÍ ŘEŠENÍ

27

4 Vlastní řešení V následujícím textu najdete popis postupu mé práce. Od začátku, tedy modelování 3D modelu budovy a jednotlivých pater, až po vytvoření internetové stránky a její umístění na internetu.

4.1

Model budovy ve 3D

Pro tento model jsem si zvolila k práci program, který je volně přístupný na internetu, SketchUP. Práce v něm vytvořená může být následně zveřejněna na internetu, přesněji v prohlížeči Google Earth. V Google Earth je již mnoho vytvořených modelů z celého světa, a to včetně areálu Mendelovy Univerzity. V této práci vytvořím model budovy, kde sídlí především Fakulta regionálního rozvoje a mezinárodních studií. Tato budova je ve vlastnictví Správy kolejí a menz. Už na první pohled vyniká její architektura, je rozdělena na dvě odlišné budovy, přičemž obě mají základ v nedokončeném kruhu. Tato vlastnost vcelku ztížila práci v již zmíněném programu SketchUP. A to především díky tomu, že nelze vkládat texturu na zakulacené plochy, i posouvání jednotlivých stěn plochy je nemožné po velkých částech, proto byl postup složitější než u běžných budov. Bylo potřeba rozdělit stěnu na více částí, a otexturovat je jednotlivě. Problém by mohl být odstraněn při volbě jiného programu než SketchUp, například Rhinoceros, ale práci už jsem začala ve SketchUp, tedy u něj i zůstanu. Jako první jsem potřebovala mít podklad, fotografii okolí i budovy z leteckého snímku. V tomto případě jsem využila možnosti, kterou SketchUp nabízí díky spolupráci s Google. Při otevření nového projektu ve zmíněném programu si zvolím, File – Geo-location – Add location. Objeví se okno, a do řádku pro vyhledávání zadám adresu místa, kde je budova, kterou chci modelovat. V mém případě tedy – Brno, třída Generála Píky. V okně si nastavím obrázek tak, aby byla vidět celá budova shora, a trochu jejího okolí. Pokud jsem se zobrazením spokojená, zvolím „Select Region“, poté můžu ještě plochu upravit, zmenšit nebo zvětšit. Stisknutím tlačítka „Grab“ se v programu SketchUp tento obrázek objeví na úrovni země, není tedy potřeba jej umísťovat, to program zařídí automaticky. Nyní můžeme za pomoci obrysů budovy, a dle vlastností získaných z plánů budovy, začít modelovat její jednotlivé části. Pomocí tlačítka s obrázkem tužky („Line“) vykreslíme obrysy částí budovy. Každou část po spojení do uzavřené plochy, kdy se nám tato plocha zobrazí změnou barvy, změníme ve 3D objekt. Tlačítko s obrázkem kvádru se šipkou směřující nahoru („Zatlačit/vytáhnout). Poté lze označenou plochu tažením přeměnit v prostorový objekt. Takto pokračujeme u všech hlavní obrysů budovy. Výšku dále upravíme dle informací z plánů budovy, přední budova při pohledu z cesty je vysoká 10,80 metru a budova zadní, prosklená, má 23,65 metrů bez kopule na střeše. Po srovnání všech výšek přejdeme k úpravě materiálů.

VLASTNÍ ŘEŠENÍ

28

V modelu jsou použity jak materiály pořízené pomocí digitální zrcadlovky značky Olympus, tak i vytvořené v grafickém programu Corel Draw X5. Například obklady v béžové barvě, které jsou na budově nejčetnější, pochází z Corelu, a prosklená zadní budova, její skleněná část a okna jsou z pořízených fotografií. Texturu vložíme do modelu stiskem tlačítka kbelíku s barvou („Plechovka barev“), a následně klikem na plochu, kterou chceme obarvit. Některé vzory, jako je většina dveří, oken, částí budovy, které musí být přesně na svém místě, se nezobrazí správnou částí nebo ve správné velikosti. K úpravám těchto důležitých detailů slouží funkce k úpravě pozice. Vyvoláme ji, když v ploše, kterou chceme změnit, klikneme pravým tlačítkem myši, zvolíme texture – position. Zobrazí se poloprůhledná vrstva, kterou můžeme pomocí čtyř různých funkcí měnit, tak, jak potřebujeme. Vzhledem k již dříve zmíněné složitosti při dávání textury na oblé části budov, nelze měnit pozici textury při výběru velké plochy, je potřeba tuto část vždy rozdělit na menší, pomocí tlačítka s tužkou. Vždy tak, aby bylo možné po stisknutí pravého tlačítka myši, zvolit položku texture. Stejně tak při změně velikosti, nebo vzdálenosti některých ploch tvořících 3D objekt je u oblých částí složitější změna. Opět je potřeba plochu rozdělit na části, a poté použitím tlačítka s kvádrem a šipkou směřující nahoru („Zatlačit/vytáhnout“). Tyto úpravy zaberou nejvíce času. SketchUp nemá ve svém vybavení nástroj určený k vytváření 3D těles, nesložených z rovných ploch, jednoduchým způsobem, jako je to u většiny jiných 3D programů. Jeden ze způsobů, jak lze získat kopuli umístěnou na střeše budovy, je pomocí rotace kruhu po jiném kruhu. Tento způsob je ale složitý, a je potřeba přesnost a praxe práce v programu. Proto lze použít pluginu5, kterou lze najít na internetové stránce http://sketchup.wu.cz/forum/viewtopic.php?f=17&t=19&p=22 , kde se dá plugin stáhnout, poté rozbalit do adresáře “Plugins“. Dále je potřeba SketchUp restartovat. Pokud vše proběhne správně, při otevření programu najdete plaginu v nabídce menu, položka Draw – Sphere. Tažením myši pak zvolíte velikost objektu, a koule se vytvoří. Jak je možné si všimnout, kopule v modelu není koule, ale jen polovina koule. Těleso se musí ještě upravit, a to následujícím postupem. Kliknutím na kouli pravým tlačítkem myši, a volbou Soften/Smooth edges nastavíte takové rozvrstvení objektu, aby v tomto případě šlo kouli v polovině oddělit (Obr. 5), a spodní část vymazat (hodnota 14,0 degrees), následně odstranit spodní nepotřebnou část, a přesunout na chtěné místo, na střechu budovy, kde je již vytvořený válec s otevřenou vrchní částí. Polokouli jsem umístila tak, aby výsledek vypadal reálně.

Plugin je software, který nelze využít samostatně, ale který doplňuje jiné aplikace o nové funkce.

5

VLASTNÍ ŘEŠENÍ

29

Obr. 5

Náhled na tvorbu kopule

Když jsem dokončila konstrukci budovy, barvy, texturu, bylo nutné odstranit všechny černé linie, které se vytvářeli automaticky při sestavování objektů. Což obnášelo jednotlivé, větší či menší linie udělat „neviditelnými“. Na černou linii jsem vždy klikla pravým tlačítkem myši a vybrala možnost „Hide“, poté linie nebyla vidět. Je důležité tento krok dělat až nakonec, protože tyto linie jsou potřeba, pokud chci ještě model upravovat, pokud je vymažu, je složité je znovu nakreslit na stejné místo. Po této poslední úpravě jsem už byla s grafickou stránkou modelu spokojená, a výsledek mé práce můžete vidět na videu na webových stránkách, nebo přímo zde v práci (Obr. 5). Tento obrázek vznikl jako export do 2D náhledu. Další náhled obrázku můžete vidět i v příloze C.

VLASTNÍ ŘEŠENÍ

30

Obr. 6

4.2


Model jednotlivých pater budovy ve 3D

Pro vytvoření průchodu patry, jako další části práce, bylo potřeba získat plány budovy. Podmínkou pro mě, ze strany majitele budovy bylo, že prvky práce (plány jednotlivých pater, fotografie učeben) nesmí být veřejně přístupné, a to z důvodů bezpečnosti. Získané plány byli velmi podrobné, bylo v nich spoustu informací, které jsem pro práci nevyužila. Například do modelu jsem vzala v úvahu jen učebny, ve kterých je během semestru vyučováno, a také místnosti, kde sídlí vyučující, aby je mohli studenti po zhlédnutí této animace jednoduše vyhledat. Další nevyužitá data do práce jsou čísla místností ve vyšší budově, a to proto, že se zde nachází koleje, a informace o místnostech nejsou pro studenty důležité k nalezení učeben a vyučujících. I když jsem už měla plány těchto pater, očíslování místností je v nich vypsané dle čísel místností, které se ale neshoduje s čísly učeben. Musela jsem tyto informace zjistit přímo při průchodu budovou a daty z Univerzitního informačního systému. Samozřejmě v plánu nebylo popsáno, ani kde se běžně vyskytují ti kteří vyučující, to jsem se pokusila zjistit na informacích v budově, ale tam žádná taková data nebyla. Dříve je údajně měli, aby mohli radit studentům jak najít vyučujícího, nebo ve kterém patře je jaká učebna. Dozvěděla jsem se také, že si Správa kolejí a menz objednala u specializované firmy orientační systém budovy. Takže veškerá potřebná data měla aktuálně specializovaná firma. Při modelování patra jsem postupovala podobně jako při modelování budovy, akorát jako podklad, místo fotografie z Google, využiji získané 2D obrázky řezu patrem. Ve formátu *.jpg. Podle nich jsem tvořila stěny a rozmístila dveře, okna, schody, hlavní vchod, a některé vybavení chodeb. Model jsem modelovala tak, aby při animaci bylo možné divákem vidět označení místností, které sice

VLASTNÍ ŘEŠENÍ

31

není realistické, jako ve skutečnosti, ale zato účelné a viditelné. Již výše zmíněné koleje ve vyšší budově jsou pouze naznačeny, kudy se k nim student nebo návštěvník dostane. Stejně tak není náhled do učeben, a dalších místností, ani do menzy. To je dáno omezením, které mě svazovalo při práci z důvodů bezpečnosti vybavení budovy. Aby byla animace světlá lehce průchodná, patro jsem udělala vždy bez stropu. To znamená jen podlahu a stěny. Strop při vyhledávání učeben a orientaci v budově není vůbec důležitý. Označení učeben by bylo nečitelné, kdyby mělo být ve skutečné velikosti, proto jsem zvolila nerealistickou formu označení. Využila jsem nástroj „Text“, který napsaná písmena převede do 3D. Vzniklé popisky jsem umístila ke dveřím vedoucí do popisky určených místností. To znamená, že při animaci průchodu chodbou bude vidět nápis i z jiného, než přímého pohledu. Z typografického hlediska jsem změnila přednastavenou volbu písma u tohoto textu. Patkové písmo totiž není vhodné pro krátké nápisy, slouží dobře spíše při dlouhých textech. Proto jsem písmo změnila na bezpatkové. Zvolila jsem si písmo Calibri. V budově jsem si nafotila chodby, které budou v modelu vidět. Focení bylo potřeba, abych mohla přesně určit všechny barvy, umístění dveří, oken, barvu koberců, schodů, prostě takových dat, které nejsou zakreslena v plánu budovy. Bohužel to znamenalo pro práci zdržení, protože pořizovat fotografie můžu jen s povolením majitele. Takže jsem budovu navštívila opět několikrát, než jsem mohla začít fotit. Nafotila jsem potřebné části chodeb, některé pouze pro moji inspiraci, a další zpracování do 3D modelu. Některé fotografie, jako například v chodbě, kde je skleněný průhled na dvůr, jsou použité celé, nebo jejich části ve 3D modelu. Fotografie jsem pořídila svým fotoaparátem značky Olympus. Získané fotografie jsem dále zpracovala opět v programu SketchUp, vzhledem k tomu, že jsem v jednotlivých patrech nepoužívala oblé stěny, pouze rovné, a členitější, nebyl již problém s vkládáním textur. Tedy pomocí nástroje Plechovky barev jsem vložila například na místo, kde mají mít dveře upravenou fotografii daných dveří. Z fotek jsem si taky ujasnila barvy, které se v chodbách vyskytují. Například že sedačky v 1. patře mají zelenou barvu, v přízemí, že je podlaha z dlažby a v ostatních patrech je koberec. Důležité bylo zachování stejných velikostí u dveří, které mají ve skutečnosti také stejnou výšku. Proto jsem využila možnost nastavení velikosti dveří jako textury, a podle ní jsem vždy přizpůsobila velikost dveří. Tím jsem mohla vynechat složité měření pomocí nástroje „Metr“ nebo „Dimenze“. Práce s těmito nástroji není složitá, ale pracné je její následné odstranění, především u nástroje „Metr“. Vzniklý malý bod lze totiž jen velmi špatně označit a poté smazat. Jeden z posledních kroků byl stejný jako u modelu celé budovy, a to odstranění černých linií, vytvořených při modelování. Což obnášelo klikání pravým tlačítkem myši na linie a ze zobrazených možností vybrat „Hide“ (způsobí, že vybraný objekt není vidět, i když není odstraněn). Jediné, z čeho jsem linie neodstranila, jsou texty ve 3D. Linie zvyšují jejich čitelnost.

VLASTNÍ ŘEŠENÍ

32

Každé z pater jsem vytvořila samostatně, protože podobnosti pater byly minimální, jak můžete vidět v animacích, což je další pokračování práce. Náhled jednotlivých pater si můžete prohlédnout v přílohách. V příloze D uvidíte náhled na přízemí, první patro je v příloze E, a v příloze F je patro druhé a třetí. 4.2.1

Animace 3D objektů a vytvoření videa

Po dokončení všech 3D objektů (budova a jednotlivá patra budovy), jsem stále ještě v programu SketchUp vytvořila animaci. Po otevření hotového modelu jsem zvolila „Scene“, nástroj, který pomocí klíčových snímků zanimuje prostorový náhled modelu. Po zvolení nástroje se objeví malé okno nástroje, kde se budou zobrazovat zvolené klíčové snímky. Nové snímky jsem vytvářela kliknutím na tlačítko znaku plus a už před tím jsem měla nastavený náhled na model tak, jak jsem chtěla, aby byl v animaci. Takto jsem postupovala u všech dalších snímků, které se seřazovaly v takovém pořadí, jako jsem je vytvářela. Zobrazovaly se nad pracovní plochou, v podobě záložek. Spuštění celé animace následuje po kliknutí pravým tlačítkem myši na první záložku, a zvolením možnosti „Play animation“. Pro budovu z vnější části jsem zvolila 13 klíčových snímků, pro průchod budovou to bylo okolo 25 klíčových snímků. Tato animace je bohužel bez zvuku a velkou nevýhodou je její neplynulost. Záběry tvoří vždy krajní klíčové snímky a mezi nimi se kamera pohybuje plynule, ale v klíčovém snímku se vždy na chvíli pozastaví. Tento výstup se mi nezdál pro práci dostačující, proto jsem v aplikaci, Adobe After Effects (obr. 7) chtěla odstranit některé části klíčového snímku a tím zajistila plynulost videa. Aplikace Google SketchUp ale vytvořila video ve formátu *.avi, což je formát, který Adobe After Effects nepřijímá jako vhodný formát. Tedy jsem formát *.avi převedla do *.wmv, s použitím aplikace aTube Catcher. Tato aplikace převádí různé audiovizuální formáty na jiné. Ke stříhání vlastního videa jsem využila nástroj ve složce Edit a následně Split layer, čímž se v časové ose video rozdělilo, a bylo možné odstranit nepotřebné části. Poté jsem vybrala hudbu na internetové stránce http://www.sounddogs.com/catsearch.asp?Type=2. A vložila hudbu do videa. Hudba vhodně střídala rytmus a je také dynamická, rozhodla jsem se ji dále neupravovat, pouze jsem ji vložila do časové osy. Stačilo, abych hudbu importovala do Adobe after Effects, a odtud ji jednoduše tažením myši přetáhla do prostoru vedle časové osy. Aby bylo video kompletní, nesmí mu chybět titulky. V nich je napsáno téma této práce, mé jméno, zdroj hudby a rok vytvoření videa.

VLASTNÍ ŘEŠENÍ

33

Obr. 7

Screenshot Adobe After Effects

Titulky jsou důležitou částí animace. Proto jsem jim věnovala velkou pozornost. Je dobré si promyslet využití barev, zvolenou barvu, velikost a typ písma. Jako barvu pozadí titulků jsem se rozhodla použít tematicky barvy fakulty, která v budově především sídlí, tedy bílé pozadí s růžovým textem. Text titulků je krátký, proto opět jako v 3D textu v modelu použiji bezpatkové písmo. Zvolila jsem si písmo Calibri, pro zachování stejného typu písma jako ve vlastních animacích. Video bylo po této fázi hotové a připravené na rendrování. Toho jsem docílila rozbalením záložky File, dále Create proxy a zvolením vhodného nastavení pro jednotlivá videa. Například počet snímků, který je ve výchozí animaci 10 snímků za vteřinu. To je vhodné upravit už při zvolení nové kompozice. Dále jsem označila zvuk jako prvek, který má být ve videu obsažen. Rendrování všech videí proběhlo naštěstí na první pokus úspěšně.

4.3

Internetová stránka

Jelikož jedním z hlavních cílů práce je, aby vznikl její výstup ve formě webové stránky, tuto stránku je potřeba vytvořit. Protože jsem již zvyklá na práci v programu PSPad, který je vhodný pro vytváření webových stránek, vybrala jsem si právě jej. Pokud bych nechtěla používat PSPad, další možností je například jednoduše Poznámkový blok, který je v základním vybavení snad všech běžných počítačů. Po otevření programu jsem si otevřela nový soubor, vybrala možnost XHTML (vhodný je i HTML). Tyto kroky jsem udělala, protože vedou

VLASTNÍ ŘEŠENÍ

34

k zobrazení hlavičky html dokumentu, kde jsou důležité tagy6 pro existenci a fungování stránky (Obr. 8).

Obr. 8

Screenshot práce v aplikaci PSPad

Dále jsem vkládala pomocí HTML jazyka pozadí, text, obrázky, a videa z YouTube. Výslednou podobu internetové stránky v HTML jazyce si můžete prohlédnout v příloze A na konci práce. Vkládání videa z YouTube bylo velmi jednoduché. Stačilo jen mnou vytvořené video z animace vložit na YouTube, a poté na načtené video kliknout pravým tlačítkem myši a zvolit možnost Zkopírovat kód pro vložení na stránky. Opět i v této části práce bylo potřeba zamyslet se nad grafickou stránkou. Původně jsem chtěla zvolit pozadí, dle mého vkusu. Ale uvědomila jsem si, že pokud stránka bude veřejně přístupná, nejde o můj vkus, ale o způsob, jakým bude stránku vnímat uživatel. Proto je vhodnější zvolit barvy stránky na základě barev fakulty FRRMS, jsou to barvy bílá a fialovo-červená (medium violet red), a těmto barvám přizpůsobit grafiku stránky. Zjistila jsem si také, jaký význam přikládá těmto barvám Goethe. Bílá barva znamená čistotu, nevinnost, zimu, chlad. Druhá barva jím není popsaná, ale vypovídající je i význam barev, ze kterých je složená, tedy červená a fialová. Červená má znamenat vášeň, chybu, 6

Tag je (anglicky štítek, cedulka) pojem, využívaný ve webdesignu. Tagy označují části značek (správně elementů) v kódu HTML jazyka. (HAUSER, Marianne; HAUSER, Tobias; WENZ, Christian. HTML a CSS Velká kniha řešení)

VLASTNÍ ŘEŠENÍ

35

agresivitu, oheň, ale také prosperitu. Fialová barva značí luxus a řadí se do královských barev. Také písmo by mělo být sladěné s ostatními prvky na stránce. V animacích, jak již bylo výše zmíněno, jsou použita písma bezpatková, a to z důvodu, že nejde o dlouhý text. Na webové stránce se delší text sice nachází, ale není tak rozsáhlý, aby bylo nutné použít patkové písmo. Na základě těchto poznatků jsem se rozhodla na webové stránce použít písmo Verdana. Obrázky a videa jsou umístěna pod sebou s dostatečnými mezerami, aby do sebe opticky nezasahovala. Výsledná podoba v HTML jazyce je v úplné podobě v příloze A. 4.3.1

Zpřístupnění internetové stránky na webovém serveru

Dokončenou internetovou stránku je třeba ještě zpřístupnit na webu. Před tím, než jsem tak udělala, dala jsem veškeré související dokumenty se stránkou do jedné složky. (KOSEK J., HTML tvorba dokonalých www stránek). Protože některé zdroje co jsem našla v knižní podobě, byly ohledně umístění stránky na server poměrně dost zastaralé. Zvolila jsem možnost webového zdroje. Jako hostitele své stránky jsem si vybrala ic.cz a na stránkách jsem se registrovala. Na uvedený e-mail mi byly doručeny informace o jménech a heslu pro FTP. Pomocí FTP klienta a zadání hesla jsem zkopírovala složku s obrázky a mnou vytvořenou stránku v HTML jazyce. Poté jsem FTP odkaz uvedla do adresáře, určující místo zadání dat pro zobrazení internetové stránky. (Janovský D., Jak psát web [online]). Na obrázku (Obr. 9) je vidět, jak vypadají vložené soubory do FTP.

VLASTNÍ ŘEŠENÍ

36

Obr. 9

Screenshot FTP složky

Stránka je ke shlédnutí na internetové adrese http://orientacnisystemfrrms.ic.cz/ (Janovský D., Jak psát web [online]). Je zde možnost orientačního nahlédnutí na design internetové stránky v příloze B.

4.4

Analýza vstupu do odvětví

V tomto případě je potřeba pro analýzu podstoupit určitá zjednodušení. Omezila jsem odvětví tvorby orientačních systému pouze na společnosti, které mají stránky na webovém katalogu Seznam.cz. Tím se sice zkreslí výsledek analýzy, ale vzhledem k tomu, že je pro takové firmy důležitá prezentace na internetu, domnívám se, že toto zkreslení bude bezvýznamné. Většinou není vhodnou strategií zvolit nejvíce konkurenčně schopnou firmu dle postavení v žebříčku vytvořeném internetovými katalogy, firma si tuto službu mohla zaplatit a tím být na vyšší úrovni v žebříčku, nežli jiné firmy. Není to tedy zcela plnohodnotná informace. Ale vzhledem k faktu, že na to musela vydělat finanční prostředky, se vracím k názoru, že se postavení v katalogu dá brát jako vypovídající. Navíc v tomto žebříčku se umisťují také společnosti, které mají hodně návštěvníků svých stránek, což značí jejich atraktivnost pro zákazníky. Na trhu se vyskytuje nejvíce společností, které sice nabízejí orientační systém, ale mají tím na mysli spíše tabulky, značky, které se umisťují přímo do budovy. Neorientují se na grafickou tvorbu a individuálnost, jedinečnost orientačního systému. Takovou společnost, která by vytvářela orientační systém na míru, jsem objevila pouze jednu a to Accept, s.r.o. Většina z těchto firem se totiž

VLASTNÍ ŘEŠENÍ

37

zabývá orientačními systémy velmi povrchně, spíše to mají jako vedlejší činnost. Hlavní činnost jejich společností je reklama. Proto bych z hlediska hrozby rivality v odvětví doporučila do odvětví vstoupit. Zatím se nejedná o rozhodující stanovisko, pouze jeden z pěti pohledů. Oproti tomu, vstup nových konkurentů je jistě reálný, pokud budou společnosti se specializovanými pracovníky. Kapitálová náročnost vstupu je závislá na volbě právní formy, a především nalezení kvalifikovaných pracovníků. Tím se dokazuje, že před vstupem je velmi důležitá příprava dobré strategie. Přístup k zákazníkům nová společnost získá pomocí prezentace na internetu. Dobré by bylo odlišit nabídku od ostatních společností, například právě zavedením 3D grafiky do orientačních systémů, a tedy je rozšířit do elektronické podoby. Další možností je sledování veřejných společností, které poptávají většinou velké zakázky tvorby orientačních systému, jelikož spravují rozsáhlé budovy. V takovém případě musí společnost počítat s faktem, že pokud má získat danou veřejnou zakázku, musí se zúčastnit veřejného výběrového řízení. Zákazníci v tomto odvětví ovlivňují cenu minimálně, na trhu totiž není velké množství společností, které by nabízeli stejný produkt. Proto si mohou společnosti vytvářet ceny sami. Samozřejmě v rámci konkurence, která je na trhu, nejedná se o monopol, takže cenu firmy neurčují zcela samostatně. V takovém případě by ceny byly příliš vysoké. V tomto odvětví nejsou dodavatelé, kteří by dodávali nekvalitní, závadné produkty. Je tomu tak především proto, že společnosti potřebují hlavně software, který je vždy srovnatelný od jedné značky, to tvoří největší náklady společností. Poté firmy potřebují k produkci tisk, výrobu destiček, směrovek, infocedulek. Zde je kvalita zboží vcelku standardní. Podle výsledků analýzy bych při rozhodování zda vstoupit do odvětví volila možnost do odvětví vstoupit. Ve všech Porterových pěti hybných silách se zdá být vstup do odvětví relativně bezpečný.

ZÁVĚR

38

5 Závěr Cílem práce bylo vytvořit orientační systém ve 3D pro budovu Fakulty regionálního rozvoje a mezinárodních studií. K tomuto účelu jsem využila program SketchUp, pro tvorbu 3D modelů a následné animace. Vše jsem po dokončení vložila na internet, aby byl výstup práce veřejně přístupný. Můžete se podívat na adresu http://orientacnisystemfrrms.ic.cz/. Průběh práce byl několikrát pozdržen, neboť musel být změněn můj chtěný postup, a to protože majitelé budovy FRRMS nechtěli, aby data plánů budovy, nebo fotografie interiéru byly volně přístupné. Navíc k modelování pater jsem potřebovala fotografie jako zdroj pro práci, protože bych si takové množství pater nezapamatovala, jak jednotlivé chodby vypadají, a jaké barvy jsou tam obsaženy. I zde byla práce zpomalena, protože focení bez povolení tajemnice FRRMS mi bylo zakázáno. Tedy v mnoha případech mi bránily v získávání informací především takové administrativní, byrokratické záležitosti, které se ovšem nedají překonat jinou oficiální cestou. Grafická část práce na PC probíhala velmi bezproblémově. Ve SketchUp se modeluje opravdu intuitivně, a s pomocí nápovědy a webové stránky, která pomáhá při modelování je opravdu reálné, aby i začátečník zvládnul modelovat budovu. Internetovou stránku jsem nakonec vytvořila velmi jednoduchou, protože data v ní umístěná zabírají spoustu paměti, tedy není možné pamětí plýtvat. Pozadí stránky je dvoubarevné, text jen lehce formátovaný. Vložena jsou videa a obrázky, které tvoří dostatečně přehledný orientační systém.

5.1

Závěr ekonomické, manažerské části práce

Na internetové stránce sice naleznete informační systém, ale částí práce je také analýza vstupu do odvětví, která je jen v této práci. Jde o odvětví společností, které nabízejí orientační systémy. Analýza proběhla dle Portera (1947) a jeho analýzy pěti hybných sil, formujících strukturální atraktivitu odvětví. Na základě vzniklých výsledků vzniká rozhodnutí, jestli by bylo vhodné vstoupit s vytvořeným produktem na trh. Výsledek Porterovy analýzy pěti hybných sil vyšel pro vstup do odvětví pozitivně. Konkurence v odvětví není zbytečně moc rivalitní, nový konkurenti na trh sice mohou přijít, ale vzhledem k plánované diferencovanosti produktu společnosti, by měla být společnost dostatečně konkurenceschopná. Odběratelé a dodavatelé taky nejsou výrazným nebezpečím pro fungování firmy na trhu. Vstup do odvětví tedy na základě této analýzy doporučuji.

ZÁVĚR

5.2

39

Praktický přínos práce

Praktický přínos výstupu práce, tedy internetové stránky, je v užitnosti orientačního systému, který by se mohl ihned využívat pro Fakultu regionálního rozvoje a mezinárodních studií. Už teď se studenti, pokud se o vytvořené stránce dozví, budou moci online zjistit, kde najdou učebnu, kde jsou vyučovány předměty fakulty. Také, pokud si zjistí pomocí Univerzitního informačního systému, ve které místnosti najdou hledaného vyučujícího, tak podle získaného čísla zjistí, kde místnost najdou. Práce by mohla být ještě více využitelná, kdyby bylo možné zveřejnit více informací, ale spoustu dat, které jsem získala, nesmím zveřejnit.

5.3

Způsoby navázání na práci

Z předchozího odstavce vyplývá, že kdyby bylo možné data zveřejnit pouze v Univerzitním informačním systému Mendelovy univerzity, mohlo by být na internetové stránce mnohem více informací. Například 2D náhled by osvětlil některé detaily, které ve 3D modelu nemusí být zcela zřetelné. To samé platí pro fotografie učeben, které jsem také nesměla zveřejnit, také z bezpečnostních důvodů. Se spoluprácí s UIS by se práce mohla významně rozšířit. Další možností je vložení webové stránky na placenou doménu, kdy by byla větší šance, že se uživatel k této stránce dostane, i když nebude znát přesnou internetovou adresu. I když cílem práce byl orientační systém budovy, určený pro FRRMS, může se model kdykoli rozšířit i o části budovy, které náleží jiným fakultám, nebo o místnosti v zadní části budovy. V těchto místnostech jsou pokoje kolejí. I tato informace se může budoucím ubytovaným, nebo třeba jejich návštěvám hodit. Ale samozřejmě by tyto informace museli být nepřístupně široké veřejnosti. Opět se tedy dostávám ke stejné podmínce jako v předchozích případech. V ekonomické části práce se nabízí možnost vytvořit takovou analýzu, která by byla postavená na plně reálných a přesných podkladech. Tedy na průzkum celého trhu, všech firem, které tuto službu nabízejí. Tato práce má několik možností rozšíření, jistě by bylo vhodné, aby se někdy zrealizovali.

LITERATURA

40

6 Literatura GRASSEOVÁ, Monika, et al. Analýza podniku v rukou manažera: 33 nejpoužívanějších metod strategického řízení. 1. vydání. Brno: Computer Press, 2010. 325 s. ISBN 978-80-251-2621-9. Google SketchUp [online]. 2011 [cit. 2011-12-19]. Dokument ve formátu HTML. Dostupné z WWW: . Google SketchUp [online]. 2011 [cit. 2011-12-19]. Zákazníci. Dostupné z WWW: . HAUSER, Marianne; HAUSER, Tobias; WENZ, Christian. HTML a CSS Velká kniha řešení. 1. vydání. Brno: Computer Press, 2006. 912 s. ISBN 80-2511117-2. Jak psát web [online]. 2011 [cit. 2011-12-19]. Bezpečné barvy. Dostupné z WWW: . JANOVSKÝ, Dušan. Jak psát web [online]. 2011, 2. prosince 2011 [cit. 2011-1219]. Jak na web dostat stránky. Dostupné z WWW: . KOSEK, Jiří. HTML tvorba dokonalých www stránek: Podrobný průvodce. 1. vydání. Praha: GRADA Publishing, spol. s r.o., 1998. 296 s. ISBN 80-7169608-0. KOTLER, Philip a Kevin KELLER. Marketing management. 12. vydání. Praha: Grada Publishing, a.s., 2007, 792 s. ISBN 978-80-274-1359-5. POŠVÁŘ, Zdeněk; ERBES, Jiří. Management I. dotisk. Brno: Mendelova Univerzita, 2006. 156 s. ISBN 80-7157-633-6. POWELL, Thomas A.. Web design: Kompletní průvodce. 1. vydání. Brno: Computer Press, 2004. 818 s. ISBN 80-7226-949-6. TŮMA, Tomáš. Počítačová grafika a design: Průvodce začínajícího grafika. 1. vydání. Brno: Computer Press, 2007. 156 s. ISBN 978-80-251-1784-2. ŽÁRA, Jiří, A Kol. Moderní počítačová grafika. 2. vydání. Brno: Computer Press, 2004, s. 609. ISBN 80-251-0454-0.

PŘÍLOHY

41

Přílohy

VÝSLEDNÁ INTERNETOVÁ STRÁNKA ORIENTAČNÍHO SYSTÉMU V HTML

42

A Výsledná internetová stránka orientačního systému v HTML <meta http-equiv="content-type" content="text/html; charset=windows1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> Orientační systém FRRMS <style type="text/css"> h1 {color: mediumvioletred; font-style: Verdana;}

Orientační systém budovy FRRMS

Recommend Documents

Orientační systém budovy FRRMS