MASARYKOVA UNIVERZITA Fakulta informatiky

Vizuální styl společnosti Rezidence Lázně Bělohrad a.s. DIPLOMOVÁ PRÁCE

Bc. Jiří Novák, 2009

Prohlášení Prohlašuji, že tato práce je mým původním autorským dílem, které jsem vypracoval samostatně. Všechny zdroje, prameny a literaturu, které jsem při vypracování používal nebo z nich čerpal, v práci řádně cituji s uvedením úplného odkazu na příslušný zdroj .......................................... Bc. Jiří Novák

Poděkování Děkuji Doc. Mgr. Vítězslavu Švalbachovi za vedení, pomoc a ochotu v průběhu realizace této diplomové práce. Děkuji rovněž RNDr. Jaroslavu Ráčkovi, Ph.D. za konzultace k informatické části této práce.

Shrnutí Tato diplomová práce je celkovým shrnutím vědomostí, které jsem získal při studiu navazujícího magisterského studia na Fakultě informatiky ve specializaci Grafický design. Obsahuje teoretické části týkající se grafického designu a vizuální komunikace, na které vždy navazuje jejich praktické použití při tvorbě vizuálního stylu společnosti Rezidence Lázně Bělohrad a.s. Všechny grafické návrhy, které jsou v práci diskutovány, budou realizovány a použity k propagaci společnosti.

Klíčová slova Piktogram, značka, logotyp, jednotný vizuální styl, grafický manuál, internetová prezentace, systém pro správu obsahu, CMS, TYPO3, TypoScript, WebML, WebRatio, PHP, CSS, XHTML, přístupnost webu, použitelnost webu, optimalizace pro vyhledávače.

Obsah 1. Úvod

3

1.1 Cíl práce

3

1.2 Realizace

3

2. Značka a logotyp

4

2.1 Historie značky

4

2.2 Funkce značky

6

2.3 Klasifikace značky

6

2.4 Kritéria dobré značky

7

2.5 Grafický manuál

9

2.6 Značka Rezidence Lázně Bělohrad

9

3. Firemní identita

11

3.1 Historie

11

3.2 Struktura firemní identity

11

3.3 Jednotný vizuální styl Rezidence

13

3.4 Technická realizace

16

4. Orientační systém

19

4.1. Historie

19

4.2 Orientační systém v interiéru

19

4.3 Orientační systém v exteriéru

21

5. Internetová prezentace

22

5.1 Analýza prezentace

22

5.2 WebML - Web Modeling Language

22

5.3 Strukturální model WebML

23

5.4 Hypertextový model WebML

24

5.5 Prezentační model

25

5.7 Analýza prezentace Rezidence

26

1

6. CMS sytém TYPO3

31

6.1 Představení CMS TYPO3

31

6.2 Instalace systému

31

6.3 Konfigurace systému

32

6.4 Tvorba webu Rezidence

36

7. Použitelnost a přístupnost webu

39

7.1 Použitelnost internetové prezentace

39

7.2 Přístupnost internetové prezentace

39

7.3 Testování webových stránek

43

Závěr

46

Literatura

47

Přílohy

49

2

1. Úvod 1.1 Cíl práce Cílem této diplomové práce je vytvoření vizuálního stylu společnosti Rezidence Lázně Bělohrad a.s., která vznikla za účelem revitalizace zámku ve městě Lázně Bělohrad na rezidenční bydlení pro seniory. Základem práce je vytvoření značky společnosti vycházející z piktogramu zámku. Ke značce je vytvořen rozsáhlý grafický manuál definující použití značky a jednotný vizuální styl firmy. Dále se v práci zabývám propagací projektu pomocí informačního letáku a internetové prezentace. Vzhledem k věku potenciálních klientů musí internetová prezentace splňovat požadavky na přístupnost webu i pro hendikepované návštěvníky. V poslední části prezentace je vytvořen orientační systém rezidence a okolí.

1.2 Realizace K vytvoření značky, grafického manuálu a orientačního sytstému rezidence byl použit program CorelDRAW  12. Analýza internetové prezentace odpovídající standardu WebML vznikla prostřednictvím programu WebRatio. Prezentační model prezentace byl zhotoven programem Adobe Photoshop CS4. Internetová prezentace je realizována redakčním systémem TYPO3 a její vzhled pomocí CSS.

3

2. Značka a logotyp 2.1 Historie značky Historie značky, tak jak ji známe z dnešní doby, začíná již v 19. století a úzce souvisí s rozvojem průmyslu a obchodu. V této době vznikalo mnoho nových společností a bylo nutné je od sebe odlišit. Již před vznikem značky byly od sebe odlišovány různé výrobky a řemesla a to prostřednictvím piktogramů, ideogramů a heraldiky. Piktogramy, jako popis určitého předmětu, zvířete či osoby, se objevují ve střední době kamenné (9000 – 5000 p. n. l.) a byly základem vzniku obrázkového písma. To nebylo ještě v pravém slova smyslu písmo, protože se nevztahovalo k určitému jazyku. Piktogram vznikal na základě dokonalé znalosti reálného předmětu a začal působit jako prostředek komunikace mezi lidmi. Ve vývoji obrazové komunikace najdeme také mnemogramy (grafické prvky sloužící k lepší zapamatování), vlastnické značky (sloužící ke značení dobytka) a petrogramy (různým způsobem na sebe navršené kameny dávající určitý význam na základě dohody), které ale k vývoji písma nikdy nevedly. O další rozvoj piktogramů se postarala potřeba rychlé komunikace. Písaři museli poměrně rychle a hlavně jednoznačně zapsat určitou informaci. To vedlo ke zjednodušování piktogramů a jejich schematizaci. V různých částech světa se používaly k zápisu odlišné typy materiálů (Egypt – dláto a kámen, Mezopotámie – pisátko a hlína, Čína – štětec a papír) a tím vznikali rozličné tvary piktogramů.

obrázek 2.1: Historické piktogramy

Při tvorbě piktogramů je zapotřebí dodržovat určité kroky. Jednotlivé kroky na sebe bezpodmínečně navazují, nelze je vynechat ani zaměnit jejich pořadí. [1]. ▪▪ Sběr informací o reálnem předmětu. Jedná se o shromáždění materiálů, podle kterého budeme piktogram vytvářet. Materiály mohou být fotografie, kresby, technické výkresy apod. 4

V této fázi je důležité vybrat kvalitní předlohu, protože ta ovlivní výsledek celé práce. ▪▪ Analýza tvarů zobrazovaného reálného předmětu. Rozložení předmětu na základní geometrické tvary jakými jsou bod, přímka, obdélník, kruh elipsa nebo trojúhelník. Současně s rozkladem probíhá zkoumání úhlů a poměrů jednotlivých ploch. ▪▪ Syntéza tvarů a ploch. Syntézou opětovně rozložíme obraz předmětu, ale tentokrát již ve zjednodušené geometrické formě. Následuje stylizace a další zjednodušování obrazu vynecháváním podrobností. ▪▪ Práce s nadsázkou. V této fázi zvýrazňujeme dominantní prvky, prověřujeme vztah mezi šířkou a výškou předmětu a upravujeme jejich poměr. ▪▪ Vytvoření definitivní podoby piktogramu. Porovnáním různých variant z předchozího kroku vybereme tu nejlepší, u které provedeme finální korekturu. Dalšími předchůdci značky jsou ideogramy a heraldika. Ideogramy se skládají z jednotlivých znaků představující slova. Graficky znázorňují to, co slovo ve skutečnosti znamená. Vznikají kombinací dvou nebo více znaků. Heraldika se vyjadřuje třemi obsahově výtvarnými principy [1] ▪▪ Zobrazením reálného předmětu v různé míře stylizace nebo písma či ideogramů. ▪▪ Abstraktními tvary, které odkazují na reálné předměty. ▪▪ Plochami, které dělily znak do jednotlivých polí. Jako základní podložka, na které se plochy aplikovaly, se postupem času vyvinul erb. Ten znázorňoval nejvíce používaný nosič zobrazení – tzv. skutečný štít. Tyto středověké snahy by se dali považovat za předchůdce firemní identity. Znaky byly aplikovány nejen na štíty, ale i na zbraně, pečetě a látky. Součástí heraldiky byly i barvy a oblečení tedy vše, co dnes v firemním image definujeme. Zvláštní postavení v heraldice mají japonské rodové znaky. Na rozdíl od Evropy nesložili pouze k vojenským účelům, ale byly aplikovány na předměty denní potřeby: šaty, hřebeny, zrca-

obrázek 2.2: Monogramy (vlevo) , Heraldika, japonské rodové znaky (vpravo)

dla, dopisy nebo čajové servisy. [1]. Mezi předchůdce značky řadíme také monogramy, které sloužili v raném středověku jako podpis panovníků. Z dnešního pohledu jsou monogramy předchůdci malých logotypů. Ke značení dobytka a stupně ryzosti drahých kovů se používali cejchy, které můžeme považovat za předchůdce dnešní značky.

5

2.2 Funkce značky Značka, logotyp nebo jejich kombinace představuje určitý subjekt, kterým je například společnost, osoba, akce nebo výrobek. Slouží pro jednoznačnou identifikaci tohoto subjektu a pro jeho komunikaci s okolím. Značka jako symbol reprezentuje činnost firmy a jejím pasivním i aktivním používáním se dostává do povědomí veřejnosti, která si tak dělá představu o této firmě. Kvalita značky (obsahová i grafická) má velkou vypovídající hodnotu o úrovni firmy a ta bývá podle značky často posuzována. Je v zájmu většiny společností (hlavně těch větších), aby věnovali návrhu značky velkou pozornost a nechali si ji vytvořit profesionálními grafickými studii. Značka je pro společnost natolik důležitá, že je třeba ji chránit proti zneužití a také proti změnám. Proti zneužití je třeba ji registrovat na patentovém úřadě. Značka je poté potřeba opatřena ochrannými symboly ® (Registred) nebo ™ (Trade Mark). Proti změnám je chráněna definicemi a podmínkami v grafickém manuálu. Měla by zde být uvedena hlavně konstrukce značky a její přípustné varianty. V dnešní době by měla být značka dobře dostupná v elektronické podobě ve všech svých variantách. Proto umísťují společnosti značku ve vektorovém formátu na svou internetovou prezentaci, kde si ji může kdokoliv stáhnout. Při nedostupnosti její elektronické varianty často dochází ke skenování značky ze špatných předloh a jejímu následnému převedení (překreslení) do vektorové grafiky. Toto je velmi neprofesionální postup a většinou vede k deformaci a zkreslení původní značky.

2.3 Klasifikace značky Podle použití obrazových a písmových prvků můžeme značku rozdělit na sedm odlišných skupin. [1] 1) Obrazová značka (piktogram, symbol) 2) Písmová značka (logotyp) 3) Malý logotyp (monogram) 4) Kombinace značky a úplného logotypu 5) Hybridní značka

a/ logotyp s integrovanou obrazovou značkou



b/ malý logotyp s integrovanou obrazovou značkou

6) Typografický logotyp

a/ prostý



b/ s individualizovaným prvkem

7) Kombinace značky a typografického logotypu 6

obrázek 2.3: Klasifikace značky

2.4 Kritéria dobré značky Při návrhu kvalitní značky by mělo být dodrženo několik kritérií. Základem je originalita značky nebo logotypu. Použitý tvar by neměl být podobný jiné značce ani její části. Vzhledem k tomu, že k této podobnosti může dojít neúmyslně, měla by být značka zaregistrována na patentovém úřadě, kde by na případnou shodu měli upozornit. Dalším požadavkem je jednoduchost a zkonstruovatelnost značky. Podle jednoduchosti návrhu a jejího snadného zkonstruování poznáme dobrou značku. Zapamatovatelnost značky je dalším vyžadovaným rysem, který souvisí s jejím použitím pro komunikaci s veřejností. Dále nesmíme opomenout jednoznačnost, tzn. že by značka neměla evokovat několik výrazů – neplnila by tak svoji funkci. Dokonalost grafického projevu, jež je dalším kritériem, bere většina lidí za samozřejmost, ale praxe je mnohdy zcela opačná. Dále je nutná vyrovnanost grafických prvků. Zde jde hlavně o vhodné zvolení šířky použitých křivek nebo odpovídajících mezer tak, aby si značka zachovala svoji čitelnost a význam i při maximálním povoleném zmenšení nebo zvětšení. 7

Značka musí mít také svoji černobílou variantu. Její tvar nesmí být závislý na barevném provedení a po jejím převedení do černobílé musí být zachován její tvar a jednoznačnost. Dalším kritériem je plastické provedení související s aplikací na reklamní a propagační tiskoviny. Posledním požadavkem je aplikovatelnost značky na různých materiálech, například vyšití značky na firemní uniformu a podobně.

konstrukce značky

ochranná oblast značky a logotypu

Konstrukce značky je znázorněna v grafické síti. Tvar vychází z reálného vzhledu zámku a proto zde nejsou definovány jednotlivé poměry. Všechny použité křivky mají stejnou sílu tahu a piktogram je souměrný podle vertikály. Nejmenší použitelná šířka značky je 14mm. Je zakázáno používat menší velikost, protože by se značka stala nečitelnou.

Pro zachování celkového vzhledu značky je definována ochranná oblast, ve které nesmí být umístěna jiná grafika, text či obrázek.

a

a

a 3/2 a

3/2 a

14 mm

popis vizuálního stylu

obálky

Vizuální styl společnosti Rezidence Lázně Bělohrad a.s. je tvořen šedou přechodovou plochou překrytou nepravidelnými křivkami. Přechod je vertikální od tmavší (80% černé) ke světlejší (65% černé) barvě. U každé z merkantilních tiskovin je přesně definována výška šedého přechodového pruhu a poměr kde končí křivky a začíná text “Rezidence Lázně Bělohrad”. Pro vizuální styl společnosti je použito písmo rodiny Helvetica Neue CE.

Pro potřeby společnosti jsou navrženy dva typy obálek. Pro obchodní korespondenci je obálka formátu DL bez průhledného okénka, výška šedého přechodového pruhu je 28 mm a poměry vzájemných vzdáleností jsou znázorněny níže. Pro zasílání propagační brožury je obálka o rozměrech 180 x 160 mm výška šedého přechodového pruhu je 34 mm a poměry vzájemných vzdáleností jsou znázorněny níže.

3a a a

REZIDENCE Lázně Bělohrad

Helvetica Neue CE Light, 9,5pt, 20% prostrkání,

Na kopečku 769, Praha 8 tel.: +420 234 687 445 [email protected]

Helvetica Neue CE, 7pt, 15% prostrkání,

REZIDENCE Lázně Bělohrad

2a

4a a a

REZIDENCE Lázně Bělohrad Na kopečku 769, Praha 8 tel.: +420 234 687 445 [email protected]

Helvetica Neue CE Light, 9,5pt, 20% prostrkání, Helvetica Neue CE, 7pt, 15% prostrkání,

80% černé

REZIDENCE Lázně Bělohrad

2a

65% černé 2a

obrázek 2.4: Grafický manuál

8

2.5 Grafický manuál Každá značka by měla mít přesně definované jednotlivé použití, aby byl zachovám vizuální styl firmy. Tyto pravidla jsou standardně popsána v grafickém manuálu značky. Základem manuálu je část o značce, kde se definuje konstrukce a kodifikace značky. Dále pak černobílá, barevná případně inverzní varianta. Neměla by zde chybět definice ochranného prostoru, který vymezuje oblast kolem značky, do kterého nesmí zasahovat jiná grafika nebo text, aby nebyl narušen charakter značky a minimální velikost značky, určující hranici čitelnosti značky. V další části manuálu je ukázán vizuální styl společnosti a jeho použití na merkantilních tiskovinách jako jsou vizitky, hlavičkový papír, obálky a podobně. Může zde být definován styl potisku reklamních předmětů, firemního oblečení nebo jiných specifických předmětů. Já jsem například v grafickém manuálu Rezidence definoval cedulku na dveře „nerušit„. a celý orientační systém budovy a jejího okolí, který je popsán v samostatné části. V poslední části manuálu je definováno firemní písmo, případně náhradní písmo používané například pro elektronickou komunikaci a popis přiložených souborů. Na CD nebo DVD, které musí být součástí grafického manuálu jsou soubory jednotlivých variant značky, značky a logotypu v odpovídajících grafických formátech, zdrojové a tiskové soubory, případně šablony merkantilních tiskovin. Přiložena by měla být i písma a elektronická verze manuálu.

2.6 Značka Rezidence Lázně Bělohrad Při návrhu značky Rezidence Lázně Bělohrad jsem jako první začal zpracovávat piktogram vycházející z předního pohledu na budovu zámku. Po několikanásobném zjednodušování piktogramu jsem vybral právě tento jako výsledný návrh pro realizaci značky. Na obrázku 2.5 je znázorněn proces zjednodušování piktogramu zámku do finální podoby. Vzhledem k vertikální souměrnosti budovy jsem jako první zpracoval poměrně podrobné schéma poloviny budovy, kterou jsem následně zrcadlil. V první fázi zjednodušení jsem odstranil horizontální pruhy na fasádách a rozdělení okenic. Následovalo zvětšení přesahů střech a přesné rozmístění oken. Pro větší čitelnost jsem se v další fázi rozhodl udělat vystupující části budovy inverzní (černou) barvou. Pro finální variantu piktogramu jsem odstranil trojúhelníky znázorňující přesah fasády do střechy a upravil velikosti vstupních dveří a oken v prvním patře budovy. V průběhu testování na základě kritérií dobré značky jsem zjisti drobné nedostatky čitelnosti značky při jejím zmenšení, které jsem vyřešil zesílením obrysových tahů. Jelikož ze značky není zřejmé, o který zámek nebo budovu se jedná, vytvořil jsem kombinaci značky a logotypu. Ta vznikla přidáním nápisu REZIDENCE Lázně Bělohrad. Zde je na první řádku nápis „Rezidence“ vysázený z verzálek a na druhém řádku je nápis „Lázně Bělohrad“ Logotyp je vysázen z písma Rockwell CE. Má původní představa byla použít dobové (barokní) 9

písmo, které by mělo nejblíže k historii zámku. K piktogramu se však nehodilo protože všechny barokní písma (Baskerville, Bookman, ITC Century, Fournier) mají rozdílnou kresbu pro hlavní a vedlejší tahy a kulatý přechod k serifům. Zmiňovaná písma se proto nebyla vhodná pro stylizaci mé značky. Vyzkoušel jsem několik bezserifových písem, ale stále jsem s výsledkem nebyl spokojen. Nakonec jsem se rozhodl použít již zmiňované písmo Rockwell CE, které má velké kolmé serify a podobnou šířku hlavních a vedlejších tahů. Toto písmo spadá do rodiny lineárních serifových písem s rovnými serify (egyptienka). Vzniklo v roce 1934 v americkém studiu Monotype Corporation. Nápis logotypu je zarovnaný na středovou osu.

obrázek 2.5: Vývoj značky Rezidence Lázně Bělohrad

10

3. Firemní identita 3.1 Historie Firemní identita (Corporate Identity) zahrnuje vlastnosti a způsoby prezentace, které definují určitou organizaci a zároveň ji od jiných odlišují. Je to způsob, jakým společnost komunikuje jak vně tak uvnitř firmy. Firemní identita se tvoří pomocí vizuálního stylu firmy, jednotným způsobem komunikace, rituály v oblasti firemní kultury a je výrazně ovlivněna produktem firmy, jeho úrovní a službami s ním spojenými.[2]. Historicky se firemní identita objevuje v armádě nebo církvi. Počátky firemní identity, tak jak ji známe z dnešní doby najdeme v Americe ve 40. letech minulého století. Poprvé je pak definována tamtéž v 50. letech a její přesná definice se pak zrodila v 80. letech. V této době vznikají první větší projekty zaměřené na firemní identitu.

3.2 Struktura firemní identity Firemní identita se dělí na čtyři základní odvětví, které se podílí rovnoměrně na její tvorbě.

CORPORATE IDENTITY CORPORATE COMMUNICATION

CORPORATE CULTURE

CORPORATE DESIGN

PRODUCT

obrázek 3.1: Struktura Corporate Identity

Corporate Communication (jednotná komunikace) definuje jednotný styl komunikačních aktivit směrem k veřejnosti. Snaží se budovat pozitivní postoj k organizaci v podniku i mimo něj. Důležité je nezapomínat na komunikaci uvnitř organizace. Protože pokud se zaměstnanci cítí být součástí úspěšného celku, vystupuje společnost lépe i v očích veřejnosti. Jednotná komunikace v sobě zahrnuje následující komunikační disciplíny: [2] 11

▪▪ Public Relations – vztahy s veřejností, vztahy mezi subjekty ▪▪ Corporate Advertising – jednotná reklama značky nebo produktu pomocí médií ▪▪ Propagace stanovisek – vyjadřování stanovisek k otázkám veřejného zájmu ▪▪ Veřejná vystoupení – způsob vystoupení vedoucích pracovníků firmy ▪▪ Human Relations – komunikace na trh práce ▪▪ Investor Relations – komunikace s obchodními partnery formou výročních a obchodních zpráv ▪▪ Employee Communications – vnitřní systém informovanosti uvnitř firmy ▪▪ University Relations – komunikace se školami, zakázky školám na výzkum ▪▪ Goverment Relations – komunikace s rozhodujícími osobami ve vysokých úřadech ▪▪ Industry Relations – vztahy s oborovými partnery průmyslu ▪▪ Minority Relations – společensko i politicko-hospodářský prostor života národnostních menšin či různých komunit Corporate Culture (firemní kultura) utváří atmosféru firmy a definuje souhrn představ a přístupů, které jsou pro ni typické a rozhodují o její úspěšnosti. Projevuje se v chování uvnitř organizace v rozdílných oblastech. Jsou to nepsaná pravidla ovlivňující chování lidí a způsobu řešení záležitostí. Definuje určitou stupnici hodnot – co je a co není pro firmu důležité, dále pracovní atmosféru, styl řízení a uplatňování autority. Pro úspěch společnosti je třeba nejen definovat jak se mají zaměstnanci chovat, ale také se zajímat o jejich názory a zajistit tak zpětnou vazbu. Corporate Design (vizuální styl společnosti) je základním a nejvíce viditelným nositelem image tvořící firemní identitu. Hlavním prvkem vizuálního stylu je značka společnosti, její definice a pravidla zacházení. Dále jsou definovány následující prvky. [2] ▪▪ Rastr – grafický formát, podnikové tiskoviny, stanovuje rozmístění adresy, oslovení, proporce a další prvky firemního designu. ▪▪ Písmo, typografie – zprostředkovává sdělení, mělo by působit jasně, být snadno čitelné, přehledné a vyvážené. ▪▪ Barva – signál v komunikaci, slouží především k orientaci a k opětovnému poznání sdělení jeho příjemcem. ▪▪ Architektonický design – obraz podniku spoluvytvářejí také podnikové budovy a prostory, vzhled dopravních prostředků či vizuální příklady odívání nebo jiné identifikace zaměstnanců. Design výrobků má v marketingu stejnou hodnotu jako jeho propagace. ▪▪ Zvláštní opatření, jiné prostředky firemního designu – aktivity, které vystupují v komunikacích podniku samostatně nebo kumulovaně v souborech, např. akce různého typu, expozice na výstavách, sponzoring. 12

Produkt má širší význam než pouze výrobek. Je to celková firemní nabídka, výrobky nebo služby organizace. Úroveň produktu a jeho vlastnosti se společně s jednotnou komunikací a jednotnou kulturou, realizovanými v rámci jednotného designu, podílejí na tvorbě image subjektu. [4]

3.3 Jednotný vizuální styl Rezidence Při tvorbě vizuálního stylu jsem vycházel z podnikatelského záměru investora a z analýzy potenvizitky cionálních klientů. Jak již bylo řečeno, základním stavebním kamenem vizuálního stylu je značka. Tu v případě Rezidence tvoří piktogram budovy. Tu by měli tvořit poměrně bohatí senioři, a proto Vizitka je navržena na klasický rozměr 90 x 50 mm, výška šedého přechodového pruhu je 33 mm a poměry je základem vizuálního stylu luxus a pohodlí. Tento záměr jsem se snažil vytvořit grafickým návzájemných vzdáleností jsou znázorněny níže. Pro lepší čitelnost je na přední straně vizitky použita pouze značka vrhem a dále použitými výrobními technologiemi a materiály, kterým se budu věnovat dále. Po bez logotypu. Vizitky budou mít speciální povrchovou úpravu v podobě parciálního laku. Plochy pro parciální lak jsou na přiloženém CD. značce je dalším prvkem vizuálního stylu obdélník s barevným přechodem od 80 % černé do 65 % černé na němž jsou umístěny nepravidelné křivky světle šedé (40 % černé) barvy. Šedou barvu jsem zvolil kvůli její dobré aplikovatelnosti na sklo (kouřové zašedlé sklo) a také proto, že nebude rušit v orientačních systémech restaurovaný barokní interiér viz. déle. V grafickém manuálu definuji několik základních merkantilních tiskovin, které v následujících odstavcích stručně popíši.

5a

a a a

REZIDENCE Lázně Bělohrad

Helvetica Neue CE, 9,5pt, 20% prostrkání

Na kopečku 769, Praha 8 tel.: +420 234 687 445 [email protected] Helvetica Neue CE, 7pt, 15% prostrkání, 80% řádkování

obrázek 3.2: Vizitka s definicí vizuálního stylu

Vizitka společnosti bude sloužit hlavně k obchodním účelům souvisejícím s provozem společnosti, nikoliv k získání nových klientů. Zvolil jsem u ní klasický formát 90 x 50 mm. Kvůli dobré čitelnosti je na její přední straně použita pouze značka nikoliv spojení značky a logotypu. Pro propagaci, merkantilní tiskoviny a orientační systém jsem zvolil jiný typ písma než je použito v logotypu. Je jím písmová rodina Helvetice Neue CE a z ní hlavně řezy Thin a Light. U vizitek, stejně jako u hlavičkového papíru a obálek je přesně definován poměr překrytí šedé plochy 13 www.rezidence-belohrad.cz Helvetica Neue CE Light, 7pt, 15% prostrkání,

křivkami a umístění textu tak, jak ukazuje obrázek 3.2. Technická realizace vizitek bude na 300 g matnou křídu. Z přední strany bude vizitka opatřena lesklým parciálním lakem po celé šedé ploše kromě křivek. Dále bude parciálním lakem zvýrazněn piktogram. Toto zajistí opravdu luxusní vzhled vizitek. Vzhledem k poměrně vysoké ceně parciálního laku bude zadní strana opatřena pouze matným laminem ochraňující potisk před poškrábáním. Technologie parciálního laku bude vysvětlena v kapitole technické realizace. U hlavičkového papíru je definován stejný poměr šedé plochy překryté křivkami a umístění textu jako u vizitek. Papír má formát A4 na výšku. V jeho patičce jsou umístěny veškeré kontakty společnosti včetně IČO, DIČ a informací o registraci společnosti. Pro snadné skládání dokumentů do poštovní obálky jsem tenkými čárkami určil místo pro ohyb. Technicky bude hlavičkový papír realizován na 90 g kancelářský papír s parciálním lakem v horní šedé části stejně jako tomu je u vizitky. hlavičkový papír Hlavičkový papír je formátu A4, výška šedého přechodového pruhu je 38 mm a poměry vzájemných vzdáleností jsou znázorněny níže. Pro lepší manipulaci jsou na hlavičkovém papíře naznačena místa ohybu.

5a

a a

REZIDENCE Lázně Bělohrad

Helvetica Neue CE Light, 14pt, 20% prostrkání,

Helvetica Neue CE, 9pt, 20% prostrkání,

REZIDENCE Lázně Bělohrad a.s.

Na kopečku 769, 180 00 Praha 8, +420 234 687 445, [email protected], www.rezidence-belohrad.cz IČO 28203071 DiČ: CZ28203071

REZIDENCE Lázně Bělohrad

2a

2a

Helvetica Neue CE Light, 7pt, 10% prostrkání,

2a

obrázek 3.3: Hlavičkový papír s definicí vizuálního stylu

Obálky budou formátu DL bez průhledného okénka pro zasílání dopisů, faktur a ostatní obchodní korespondence a dále formátu 180 x 160 mm pro rozesílání propagační brožury potenciál14

ním klientům. Jelikož tento rozměr obálky není běžný, bude vyroben na zakázku. Grafický návrh i zde zachovává stejný styl jako u ostatních merkantilních tiskovin jen umístění značky společnosti není vpravo, ale je zarovnána na levý okraj textu. Obě obálky budou opatřeny parciálním lakem. Další poměrně specifickou tiskovinou, kterou jsem v rámci firemní identity zpracovával je visačka na dveře „NERUŠIT“. Grafický návrh opět vychází ze základní šedé přechodové barvy překryté křivkami. Nápis „NERUŠIT“ jsem z důvodu dobré čitelnosti vysázel z verzálek. Ve spodním bílém pruhu je na střed umístěna značka Rezidence. Technicky bude visačka realizována podobně jako vizitka na 300 g křídu mat a i zde bude použita technologie parciálního laku. Vhledem ke tvaru a možnosti poškození visačky bych doporučoval opatřit obě strany podkladovým matným laminem. Tato povrchová úprava by měla papír zpevnit a ochrání jej před roztržením v úzké oblasti záhybu.

Pro propagaci Rezidence jsem vytvořil návrh brožury. Ten opět obsahuje prvky jednotného vizuálního stylu. Rozměr brožury je 170 x 150 mm, desky s vnitřními listy budou svázány vazbou V1 na levém hřbetu tiskoviny. U této vazby je nutné, aby celkový visačka na dveřepočet stran byl dělitelný čtyřmi. Titulní ještěnailustrační zde povrch dveře má vlastnífotografie. výsekovou formu, I která je nabude přiloženém CD. Rozměry visačky jsou 215 x 75 m obálky strana obsahuje kromě korporátní grafikyVisačka opatřen parciálním lakem. Rozvržení vnitřních stran bude symetrické, na jedné straně bude vždy Pro potřeby společnosti jsou navrženy dva typy obálek. Pro obchodní korespondenci je obálka formátu DL bez průhledného okénka, výška šedého přechodového pruhu je 28 mm a poměry vzájemných vzdáleností jsou znázorněny níže.do Pro zasílání propagační brožury je obálka o rozměrech 180 x 160 mm výška šedého text zarovnaný bloku a na protilehlé straně ilustrační obrázek vztahující se k textu. přechodového pruhu je 34 mm a poměry vzájemných vzdáleností jsou znázorněny níže.

3a a a

REZIDENCE Lázně Bělohrad

Helvetica Neue CE Light, 9,5pt, 20% prostrkání,

Na kopečku 769, Praha 8 tel.: +420 234 687 445 [email protected]

Helvetica Neue CE, 7pt, 15% prostrkání,

REZIDENCE Lázně Bělohrad

2a

4a a a

REZIDENCE Lázně Bělohrad Na kopečku 769, Praha 8 tel.: +420 234 687 445 [email protected]

Helvetica Neue CE Light, 9,5pt, 20% prostrkání, Helvetica Neue CE, 7pt, 15% prostrkání,

NERUŠIT

REZIDENCE L á z n ě B ě l o h ra d

REZIDENCE Lázně Bělohrad

2a

2a

obrázek 3.4: Obálka (vlevo), visačka na dveře (vpravo)

15

3.4 Technická realizace Pro tisk merkantilních i propagačních tiskovin bude použit ofsetový tisk, kterým je v dnešní době vyráběna většina firemních tiskovin. Technologicky jde tisk z plochy, kde jsou jednotlivé tisknoucí i netisknoucí prvky na povrchu tiskové formy ve stejné výšce. Tisk je založen na tom, že tisknoucí prvky přijímají barvu a odpuzují vodu. Z tiskových podkladů z počítače – nejčastěji PDF1 souboru je vytvořen film, který musí splňovat tyto základní požadavky: [3] ▪▪ Separace – Každá barva CMYK2 je samostatně osvícena na vlastním výtažku filmu. Také každá přímá barva musí mít svůj vlastní film. Pro správné spojení separací jednotlivých barev musí být tisková data opatřena soutiskovými značkami. Ty jsou buď součástí tiskového souboru nebo jsou přidány při přípravě filmů. ▪▪ Stranové převrácení filmu – černá emulze musí být při správné orientaci obrazu ze spodní strany filmu. ▪▪ Natočení jednotlivých rastrů – běžné úhly pro jednotlivé barvy jsou: 15° azurová, 75° purpurová, 0° žlutá, 45° černá. ▪▪ Kvalita filmů – osvitová jednotka musí být správně zkalibrovaná, aby výsledná denzita filmů byla dostačující. Samotný tisk se neprovádí z filmů, ale z tiskových desek. Deska s povrchovou emulzí se spolu s filmem vloží do pneumatického kopírovacího rámu, kde je po odsátí vzduchu zaručen dokonalý kontakt filmu a desky. Působením UV záření dochází k chemické změně struktury emulze a tyto neosvětlená místa jsou při mytí desky odplavena. Tím na povrchu tiskové desky vznikne předloha k tisku. Při tisku dochází k navlhčení desek, kde vlhkost zůstává na netisknoucích místech. Soustavou navalovacích válců je na povrch desky přiváděna rovnoměrná vrstva tiskové barvy, která se uchytí v místech tisku. Barva z desky je tlakem přenesena na ofsetový válec a něj dále na tiskový materiál. Tiskový stroj se skládá ze tří základních částí. Prvním z nich je nakladač, který podává jednotlivé archy papíru na dopravník. Pro podávání je ve většině případů používán pneumatický systém. Hlavní částí stroje je tisková jednotka skládající se s formového válce, na který se uchycuje tisková deska, dále ofsetového (přenosového) válce sloužícího k přenosu obrazu na materiál a tlakového válce zajištujícího kontakt přenosového válce a papíru. V tiskové jednotce najdeme dále barevník, nanášející barvu na povrch desky a vlhčící zařízení, které zvlhčuje povrch netisknoucích míst. Na výstupu stroje se nachází vykladač, který ukládá vytištěné archy. Podklady k tisku jsou většinou předávány v formátu PDF, v barevném prostoru CMYK. V dnešní době většina tiskáren vyžaduje dokumenty splňující určitou normu (PDF/X–1a:2001, PDF/X–3:2002 nebo PDF/X–4:2008). Normy zaručují důležité vlastnosti jakými jsou kvalita vlo1 PDF (Portable Documet Format) univerzální formát pro dokumenty umožňující jejich přenos mezi různými počítačovými platformami. 2 CMYK (Cyan Magenta Yellow Black) označuje barevný prostor používaný pro tisk

16

žených obrazových předloh, barevný prostor nebo zda má dokument přiložené všechny použitá písma. Tato kontrola odhaluje většinu chyb již v grafickém studiu při exportu dat.

Barevník

Formový válec Přenosný válec

Tiskové jednotky

Vlhčící zařízení Papír Tlakový válec

Vykladač

Nakladač

obrázek 3.5: Detail tiskové jednotky (vlevo), ofsetový tiskový stroj (vpravo)

Při tisku do okrajů tiskového formátu (na spad) by měl být přesah grafiky alespoň 3 mm na všech stranách. Pravý okraj tisku je definován ořezovými značkami. Mimo tyto značky obsahují tisková data barevné kalibrační pruhy a soutiskové značky. Ty slouží pro přesné spojení filmů jednotlivých barev. Pokud nejsou data připravována na výsledný tiskový formát stroje, dodávají se tyto značky až v tiskárně při vyřazení jednotlivých stran na tiskový arch. Jak již bylo zmíněno výše budou pro luxusní vzhled použity tiskoviny s parciálním lakem. Tato technologie pokryje určitá, předem definovaná místa tisku vrstvou laku. Ten může být lesklý nebo matný. Existuje několik technologií nanášení laku na povrch tiskoviny. U celoplošných laků se v dnešní době nejvíce používá ofsetový tisk – lak je zde přidán jako další barva. Pro parciální laky je využívána technika sítotisku – vtlačování tiskové barvy sítem na potiskovaný materiál. Síto, které je potaženo světlo citlivou vrstvou je překryto filmem s tiskovou předlohou a poté osvíceno. Osvícená místa jsou zpevněna a neosvícená se následně vyplaví vodou. Tisknoucí prvky jsou tedy nevykrytá místa na sítu. Samotný tisk je poměrně jednoduchý – síto se upne do rámu, rozlije se na něj barva (lak), který je pomocí pohyblivé stěrky protlačován na tiskový materiál. Výsledná kvalita tisku (ostrost a jemnost obrazu) závisí na kvalitě síta. Sítotiskem se dají potisknout různé materiály a proto je velice oblíbený při potisku reklamních předmětů. Data k parciálnímu lakování jsou připravována stejně jako pro ofsetový tisk. Místa, která mají být pokryta lakem, jsou v souboru vyznačena jednou z tiskových barev (většinou černé). Data se opět exportují do samostatného PDF souboru. Pro speciální tvar visaček na dveře bude zapotřebí vyrobit výsekovou formu. Základem výsekové formy je dřevěná deska, která musí být rovná, aby pracovala rovnoměrně. Do desky se podle definovaného tvaru vyřízne nebo laserem vypálí drážka na nože. Ty mohou být buď sekací, nařezávací, perforovací nebo rýhovací. Nejdůležitější při výrobě raznice je přesné napojení nožů na sebe. V některých místech je vysekávaný tvar rozdělen úmyslně – jde o zámky, které zaručí,

17

že vyražená forma nezůstane ve stroji, ale na archu. Z tohoto archu je již manuálně „vyloupnuta“ později. Samotné vysekávání se provádí na výsekovém automatu, kam je forma upnuta. Následuje velmi přesné nastavení celého stroje tak, aby výsek padl na připravené tiskové podklady. S tím souvisí i příprava tiskových podkladů. Je zde třeba, jako při klasickém ořezu archu, počítat s drobnými nepřesnostmi. Tisková data musejí mít přesah (spad) alespoň 3 mm na každé straně (po celém obvodu).

REZIDENCE Lázně Bělohrad

obrázek 3.6: Předloha pro parciální lak vizitky

NERUŠIT

NERUŠIT

REZIDENCE

REZIDENCE

L á z n ě B ě l o h ra d

L á z n ě B ě l o h ra d

Řezací nože Zámky

obrázek 3.7: Visačka – tisková předloha, předloha pro parciální lakování, předloha raznice

18

4. Orientační systém 4.1. Historie Orientační systémy spadají do environmentálního grafického designu. Ten začíná vznikat v Americe kolem roku 1900. Vyplňuje mezeru mezi architekturou a grafickým designem. Obě tyto disciplíny zažívají v této době velkého rozmachu díky rozvoji průmyslu a obchodu. Mezi první instituce potřebující komplexnější zpracování orientačního systému patřily vysoké školy. V rozlehlém prostoru univerzitních kampusů, kde se pohybují tisíce studentů je orientační systém nutností. Průmyslová revoluce ovlivnila i další oblast veřejného života a to zejména dopravu. Začínají vznikat velká železniční nádraží a letiště. I zde je zapotřebí dobře navigovat cestující tak, aby rychle našli svůj cíl. Druhá vlna rozvoje začíná v 50. letech, kdy se po válce ekonomika pomalu vzpamatovává a budují se velké administrativní a multifunkční budovy. S postupem času se mění i materiály, na které je orientační systém aplikován. Dříve se využívalo hlavně kamene nebo leptaného skla. Tyto technologie však byly a jsou poměrně nákladné a dnes se od nich začíná ustupovat. V dnešním rychlém světě se často i po několika letech mění typ využití budov a proto se přechází k levnějším materiálům zejména plastům.

4.2 Orientační systém v interiéru Při návrhu orientačního systému jsem vycházel z jednotného vizuálního stylu. Pro lepší čitelnost a aplikovatelnost jsem u některých prvků orientačního systému vynechal motiv s křivkami. Tyto křivky mohou být po dohodě s architektem použity na různých místech jako dekorace, pro orientační systém jsou však velmi složité. Jelikož bude zámek revitalizován do původní podoby, snažil jsem se, aby grafika orientačního systému ani použité materiály nerušily a do rekonstrukce zapadly. Dalším kritériem návrhu byla dobrá čitelnost a dostupnost systému s ohledem na věkový průměr klientů a jejich případné hendikepy. Zde šlo hlavně o umístění orientačních map tak, aby byly bez problémů dostupné i pro vozíčkáře. To jsem vyřešil umístěním plánů jednotlivých pater vedle sebe na skleněnou desku na podstavci viz obrázek 4.1. Veškeré aplikace v interiéru jsou na skleněných tabulích, nápisy, mapy a šipky budou realizovány samolepkou případně pískováním skla. Sklo jsem vybral z důvodu poměrně luxusního vzhledu a možnosti jeho dobrého nasvětlení. Pro navození korporátní šedé barvy budou prvky orientačního systému na kouřovém skle. 19

obrázek 4.1: Ilustrace pohledu na orientační systém (vlevo), orientační plán prvního patra Rezidence

Do interiéru jsem navrhl plány rozvržení místností v jednotlivých patrech budovy. V přízemí vedle recepce budou plány všech podlaží včetně západního a východního křídla přístavby a vedle výtahů pak v jednotlivých patrech plány odpovídající aktuálnímu podlaží. Rozměry každé desky, na které bude grafika plánu umístěna, je 730 x 900 mm. Vzhledem k nepříliš velké rozmanitosti typů místností jsem v plánech rozlišil pouze pokoje od ostatních společenských místností a technického zázemí. Dále jsem navrhl dva typu štítků na dveře. Pokoje mají na štítku pouze číslo místnosti, společenské místnosti a technické zázemí mají v levém horním rohu číslo místnosti a níže nápis označující její využití. Zde jsem použil motiv s křivkami, které budou na sklo vypískovány nebo nalepeny fólií imitující pískované sklo. Rozměry štítku jsou 210 x 148 mm. Ke společenským místnostem jako je restaurace, salónky atd. jsem vytvořil směrové poutače. Jejich umístění do interiéru bude muset být ještě konzultováno s architektem. Ukazatele se skládají ze dvou částí – textové a směrové. V textové je název místnosti, zarovnaný na spodní okraj šipky, která je ve směrové části. Pro lepší orientaci budou směrové poutače vnitřně osvětleny, proto musí být text i šipka realizovány fólií nalepenou na podkladovém skle. Jinak by při nasvětlení nebyla zaručena dostatečná čitelnost informace.

11

06

RESTAURACE

obrázek 4.2: Štítky na dveře

20

4.3 Orientační systém v exteriéru Exteriér Rezidence se skládá z menšího parku ležícího před vstupem do zámku a zámecké zahrady. Na zahradě stojí dvě budovy – oranžerie, která bude využívána jako výstavní prostor a kavárna a dále sýpka, u které není prozatím jistý účel využití. Do parku u příjezdu k Rezidenci jsem navrhl uvítací desku se značkou Rezidence, která bude z kamene. Pro ulehčení orientace jsem ke stavbám na zámecké zahradě vytvořil piktogramy, které budou použity na směrových cedulích a plánech. Plán zahrady bude umístěn stejně jako ostatní na skleněné desce o rozměrech 730 x 900 mm. Na plánu jsou vyznačeny chodníky a budovy ležící na zahradě. Technicky bude deska realizována stejně jako v interiéru, jen fólie musí být odolné povětrnostním podmínkám a UV záření. Grafický návrh směrových cedulí bude stejný jako v interiéru, rozměr bude o něco větší – 1000 x 200 mm. Ke spodnímu okraji nápisu bude umístěn piktogram budovy, na kterou poutač směruje.

ORANŽERIE

RESTAURACE obrázek 4.3: Směrové poutače

21

5. Internetová prezentace 5.1 Analýza prezentace Poslední dobou se internetové prezentace stávají rozsáhlými a poměrně složitými softwarovými produkty a ve webovém prostředí vznikají kompletní firemní informační systémy, elektronické obchody nebo systémy pro elektronické bankovnictví. Návrh takových systému a možnost jejich správy se již neobejde bez analýzy. Při tvorbě klasického softwaru jsou k dispozici mnohé metodologie ať již strukturované SA/SD3 nebo objektové OMT4 nebo UML5. Mají velmi dobře zpracovány nástroje pro datové modelování v podobě Class diagramů (UML) nebo entitně relačních diagram (SA/SD), funkční modelování pomocí diagramů datových toků i dynamické modelování v podobě stavových diagramů a diagramů aktivit. Webové prezentace jsou ale do značné míry závislé na dobré funkčnosti a ergonomii uživatelského rozhraní a hlavně na dobré navigaci v hypertextových odkazech. To klasické metodiky neřeší, a proto vznikly nové metodiky určené přímo pro webové vývojáře. Jsou jimi OOHDM6 nebo WebML (Web Modeling Language).

5.2 WebML - Web Modeling Language Pro analýzu prezentace Rezidence jsem si vybral mladší metodologii WebML. Ta vznikla v roce 2000 na katedře elektroniky a informatiky na univerzitě v Miláně. Hlavní výhodou při návrhu systému pomocí WebML je možnost od sebe oddělit informační obsah prezentace od struktury a navigace a konkrétního vzhledu uživatelského rozhraní. Metodika WebML podporuje podobně jako ostatní webově orientované metodiky tři základní modely návrhu: strukturální (konceptuální) model, hypertextový model a prezentační model. Dohromady tvoří celek, který za pomoci příslušného CASE nástroje může vygenerovat základní kostru webu. Toto nejen urychlí práci při budování systému, ale vývojáři ho ocení zejména při jeho aktualizaci. 3 SA/SD (Structured Analysis/Structured Design) je metodika pro strukturovaný návrh informačních systémů, která rozděluje popisovaný problém na menší části. 4 OMT (Object-Oriented Modeling) označuje metodiku pro objektový popis vývoje informačních systémů. 5 UML (Unified Modeling Language) je jazyk pro popis objektově orientovaného návrhu informačních systému. 6 OOHDM (Object-Oriented Hypermedia Design Method) je objektově orientovaná metodologie pro návrh hypertextových aplikací.

22

STRUKTURÁLNÍ MODEL

HYPERTEXTOVÝ MODEL

PREZENTAČNÍ MODEL

obrázek 5.1: Typy modelů metodologie WebML

Pro implementaci metodologie WebML byl přímo jejími autory vytvořen komplexní CASE nástroj WebRatio. Pro moji analýzu a návrh jsem využil jeho zkušební verze dostupné na oficiálních stránkách projektu7. Uživatelské rozhraní WebRatia je rozděleno do čtyř základních částí a celkově působí velmi příjemným dojmem. V horní části se nachází hlavní menu s nástrojovou lištou umožňující přístup ke všem nástrojům, funkcím a nastavením. Vlevo je takzvaný Project Tree představující hierarchické zobrazení všech součástí projektu, pod kterým se zobrazují vlastnosti objektu, který je právě aktivní. V pravé části je hlavní pracovní plocha, ve které se vytvářejí samotné modely. Pod touto plochou se nachází takzvané Debug okno, ukazující chyby v návrhu nebo výsledky kontroly konzistence. V následujících odstavcích podrobně popíši tvorbu jednotlivých modelů.

5.3 Strukturální model WebML Strukturální neboli konceptuální datový model slouží k návrhu datové struktury. Vychází ze standardních Class diagramů skládajících se z entit, jejich vztahů (relací) a atributů. Entita označuje určitou skupinu mající stejnou datovou strukturu a jednotlivé objekty jsou pak instancí této skupiny. Každá entita je dána svým názvem a sadou atributů. Ty mají přiřazeny svůj datový typ, které jsou ve WebML následující: Integer, Float, String, Text, Date, Time, Boolean, Blob. Tyto datové typy jsou navrženy tak, aby nebyly závislé na konkrétním databázovém návrhu. Při generování konkrétní databázové struktury budou tyto typy nahrazeny příslušnými ekvivalenty databázového systému. Každá entita má automaticky vygenerovaný atribut s názvem OID (object identification). Je to přirozené číslo jednoznačně identifikující všechny instance. To se opět po převodu do daného typu databáze nahradí odpovídajícím způsobem (např. v relačních databázích na primární klíč). Relace neboli vazby mezi entitami jsou ve WebML povoleny pouze binární (mezi dvěma entitami). Toto omezení vychází z možnosti nahradit jakoukoli N-ární vazbu pomocí N binárních. 7 http://www.webratio.com

23

5.4 Hypertextový model WebML Hypertextový model je nejdůležitějším prvkem celé metodiky, protože jeho pomocí se definuje chování celé webové prezentace. Popisuje jednotlivé stránky, jejich složení a navigaci mezi nimi. Součástí modelu jsou hypertextové odkazy ukazující propojení informačního obsahu a jednotlivých stránek. Dle specifikace WebML se může hypertextový model skládat z více pohledů. Pohled definuje jaké informace jsou dostupné uživatelům v jednotlivých rolích podle přístupových práv. Hypertextový model se skládá z kompozičního modelu, který ukazuje, z jakých částí se stránka skládá a navigačního modelu, který popisuje způsob navigace mezi jednotlivými stránkami.

5.4.1 Kompoziční model Kompoziční model popisuje logickou strukturu uživatelského rozhraní. Skládá se z elementů soužících k publikování určitého obsahu na stránce takzvaných Unit. Rozlišujeme několik základních typů Unit: [3]: ▪▪ Data Units: prezentují informace o jedné instanci vybrané entity (například jeden výrobek v e-shopu) ▪▪ Multidata Units: prezentují informace o skupině instancí dané entity (například všechno zboží dané kategorie) ▪▪ Index Units: představují seznamy instancí entity, které jsou primárně určené k účelům navigace ▪▪ Scroller Units: tvoří mechanismus přístupu k jednotlivým instancím nebo skupinám instancí vybrané entity (například stránkování v seznamu zboží) ▪▪ Entry Units: slouží pro modelování vstupů, tedy prvků pro příjem dat od uživatele (například vyhledávací formulář)

5.4.2 Navigační model Navigační model zachycuje navigaci mezi jednotlivými stránkami webové prezentace. Ty jsou propojeny odkazy, které mohou být kontextové nebo bezkontextové. Bezkontextové odkazy propojují jednotlivé webové stránky, mezi kterými se nepřenášejí žádné parametry. Naopak kontextové odkazy mezi dvěma Units přenášejí parametr, kterým je například OID a záznam s tímto identifikátorem se načte na příslušné stránce z databáze. V navigačním modelu může být použit běžný link (černá linka se šipkou) nebo OK (zelená linka se šipkou) a KO (červená linka se šipkou). OK link zobrazuje cestu při úspěchu akce (připojení k databázi, ověření přístupu atd.) naopak KO link ukazuje, kam bude uživatel přesměrován, když se tato akce nepovede. Kompoziční a navigační model se zakreslují do jednoho diagramu a jejich spojením vzniká hypertextový model. Ten má díky své jednoduchosti a přehlednosti velkou vypovídací hodnotu a je z něj ihned jasné, co se na které stránce nachází a kam se lze prokliknout. 24

5.5 Prezentační model Prezentační model ukazuje jakým způsobem budou rozmístěny jednotlivé prvky prezentace nezávisle na grafickém výstupu. Model vytvořený v programu WebRatio uloží toto rozmístění do XML8, ze kterého je možné vygenerovat výstupní kód pomocí technologie XSLT9. Výhodou tohoto modelu je možnost velmi rychlé změny rozmístění prvků na stránce a jeho podrobení uživatelskému testování. U uživatelů se postupem času ustálila pravidla, kde na stránce očekávají určité prvky. Testování a úprava tohoto modelu vede k lepší orientaci na stránce a uživatelé tak rychle najdou požadované informace.

5.6 Implementační nástroje a vývojový proces WebML Jak již bylo řečeno výše, pro implementaci metodiky WebML byl autory vytvořen program WebRatio. Existují i další nástroje, ve kterých lze jednotlivé modely vytvořit. ▪▪ Site Designer je základním nástrojem. Umožňuje vytvořit strukturální, hypertextový a uživatelský model. ▪▪ Presentational Designer umožňuje navrhovat vzhled a rozmístění grafických prvků na webové stránce. Pro snadnější používání obsahuje Preview Function, která umožňuje navržené grafické schéma okamžitě prohlížet. ▪▪ Site Manager je nástroj, který umožňuje webové sídlo vytvořené metodologií WebML spravovat a instalovat při jeho provozu. Vývojový proces metodiky WebML je zobrazen na obrázku 5.2 a jednotlivé metody jsou z velké části stejné s ostatními známými metodami softwarového vývoje například UML.

POŽADAVKY NA SYSTÉM

DEFINICE POŽADAVKŮ STRUKTURÁLNÍ MODEL HYPERTEXTOVÝ MODEL PREZENTAČNÍ MODEL TESTOVÁNÍ A HODNOCENÍ

IMPLEMENTACE VÝVOJ ÚDRŽBA A HODNOCENÍ

obrázek 5.2: Vývojový proces metodiky WebML 8 XML (eXtensible Markup Language) je obecný značkovací jazyk umožňující vytvoření konkrétního značkovacího jazyka. 9 XSLT (eXtensible Stylesheet Language Transformations) je transformace sloužící pro převod zdrojových dat z formátu XML do jiného značkovacího jazyka.

25

5.7 Analýza prezentace Rezidence 5.7.1 Základní požadavky a struktura prezentace Práce na každé internetové prezentaci by měla začínat sběrem informací, které zde budou prezentovány. a jejich vyhodnocením. Dobrá dostupnost a snadnost získání informací je hlavním posláním každého webu. Základním cílem stránek Rezidence je představit tento projekt a služby, které nabízí. Hlavní poskytovanou službou je rezidenční bydlení pro seniory s celodenní péčí lékařského personálu. Ta je doplněna masážemi, rehabilitací a dalšími doprovodnými programy. Vzhledem k blízkosti lázní bude část kapacity Rezidence využívána pro krátkodobé léčebné pobyty. Dále budou prostory zámku nabízet pořádání různých kulturních akcí, kdy půjde hlavně o výstavy, koncerty a odborné přednášky. K tomuto účelu bude sloužit převážně zastřešený dvůr zámku a také oranžerie ležící na zahradě. Z těchto informací jsem vytvořil strukturu prezentace a seznam hlavních funkcionalit. Stránky budou mít dvě menu – hlavní a technické. Hlavní menu tvoří základní navigační prvek prezentace a jeho struktura je následující: ▪▪ O Rezidenci --současnost (krátký text k aktuální podobě a funkci zámku + fotografie) --historie (delší text k historii zámku, majitelům, přestavbám atd. + fotografie) ▪▪ Nabízené služby --rezidenční bydlení pro seniory (text) --zdravotní péče (text) --rehabilitace a wellness (text) --léčebné pobyty (text) ▪▪ Fotogalerie --interiér (galerie fotografií z interiéru + popis) --exteriér (galerie fotografií z exteriéru + popis) --okolí (galerie z okolí zámku, turistické zajímavosti, lázně, golf + popis) --akce (fotografie z pořádaných kulturních akcí – omezený přístup pouze pro přihlášené)

26

▪▪ Kulturní program --koncerty (výpis pořádaných koncertů) --výstavy (výpis pořádaných výstav) --přednášky (výpis pořádaných přednášek) ▪▪ Kontakt --kontaktní údaje --formulář Technické menu je umístěno většinou ve spodní části stránek a obsahuje odkazy na technické informace týkající se prezentace jako je provozovatel webu, mapa stránek, případně možnost vytisknout stránky ve formátu vhodném pro tisk (bez grafického pozadí a jiných prvků). Pro web Rezidence jsem navrhl následující strukturu technického menu: ▪▪ O Webu – obsahuje informace o provozovateli prezentace, technickém řešení atd. ▪▪ Mapa stránek – obsahuje strukturovaný výpis veškerých stránek a podstránek webu, slouží pro lepší orientaci , ukazuje celkový přehled o rozsahu prezentace. ▪▪ Styl pro slabozraké – slouží k přepnutí webu do speciálního grafického režimu vhodného pro slabozraké návštěvníky.

5.7.2 Strukturální model Prezentace bude mít dvě úrovně autentizovaného přístupu. Prvním je přístup do administračního prostředí redakčního systému (backendu). Zde může oprávněný uživatel měnit nastavení systému, přidávat nové funkcionality, měnit vzhled i obsah prezentace. Tito uživatelé jsou rozděleni do skupin podle úrovně oprávnění (viz. technická realizace). Druhý typ přístupu je do neveřejných částí prezentace (frontendu). K obsahu této části mohou přistoupit pouze registrovaní uživatelé, kteří jsou opět rozděleni do skupin. Strukturální (datový) model prezentace vychází z reálného uspořádání tabulek databáze redakčního systému TYPO3. Do modelu jsem znázornil pouze nejdůležitější atributy jednotlivých entit, skutečná databáze jich má mnohem více. Stručný popis jednotlivých entit: ▪▪ be_user – definuje uživatele administrační části, který je jednoznačně určen svým OID a dalšími atributy jsou přístupové jméno, heslo a e-mail. ▪▪ be_group – definuje skupinu, do které uživatel patří, každá skupina je určena OID a dále názvem skupiny. V systému TYPO3 je implicitně definována skupina „admin„. ▪▪ module – definuje přístup pro skupinu uživatelů do jednotlivých částí (modulů) systému. ▪▪ pages – zde jsou definovány jednotlivé stránky prezentace, jejich název a autor 27

▪ tt_content – definuje obsah stránek a typ tohoto obsahu, důležitým atributem je hidden, určující zda je tento obsah zveřejněn či nikoli. Tento parametr je často využíván při plnění nebo aktualizaci stránek. Systém administrátorovi umožňuje prohlédnou tento obsah bez nutnosti zveřejnění. ▪ tt_news – definuje novinky zobrazované na stránkách. Systémem novinek je v této prezentaci vytvořen program kulturní akcí. ▪ tt_news_cat – definuje kategorii novinek (kulturních akcí). Kategorie jsou na webu využívány pro filtrování akcí. ▪ fe_user – definuje uživatele, kteří mají přístup k autentizovaným částem prezentace ▪ fe_group – každý uživatel patří do určité skupiny, pro kterou je definován přístup k obsahu.

obrázek 5.3: Strukturální model

5.7.3 Hypertextový model Jak již bylo napsáno výše, hypertextový model vzniká spojením kompozičního a navigačního modelu. V kompozičním modelu Rezidence je pět základních stránek vycházejících ze struktury prezentace a čtyři podstránky. Každá ze stránek kromě detailu obrázku obsahuje hlavičku, hlavní menu, technické menu a kalendář akcí. V prezentaci jsou tyto Units umístěny na levé straně, která zůstává neměnná, viz. grafický návrh prezentace. Ze základních Unit, které program WebRatio nabízí jsem využil následující: Data Unit (většina zobrazených dat), Multi Data Unit (výpis dostupných galerií), Scroller Unit (listování v záznamech galerie a jednotlivých obrázcích), Index Unit (hlavní a technické menu a seznam článků), Event Calendar Unit (kalendář kulturních akcí), a Entry Unit (přihlašovací a kontaktní formulář). 28

obrázek 5.4: Ukázka části hypertextového modelu

Vzhledem k dostupnosti hlavního i technického menu ze všech stránek i podstránek, vynechal jsem v navigačním modelu vzájemné propojení těchto stránek a zobrazil pouze vazbu na jednotlivé podstránky. OK a KO linky popsané v kapitole 5.4.2 Navigační model jsem využil na stránce galerie pro přihlášení uživatelů. OK link nasměruje po úspěšném přihlášení uživatele na chráněné galerie z pořádaných kulturních akcí, v případě neúspěchu budou přesměrováni zpět na stránku s přihlašovacím formulářem. Na obrázku 5.4 je část hypertextového modelu zachycujícího stránky galerie a detail obrázku. Celý hypertextový model je zobrazen v příloze této práce.

5.7.4 Prezentační model Vzhledem ke grafickému zaměření této práce jsem k vytvoření prezentačního modelu nevyužil žádnou z modelovacích technik podporující metodologii WebML, ale program Adobe Photoshop CS4. Připravil jsem si zde šablonu obsahující složky Hlavička, Menu, Navigace, Obsah, Patička a Prohlížeč. Tyto složky odpovídají jednotlivým místům v modelu i následnému grafickému návrhu prezentace. Složka Prohlížeč obsahuje printscreen okna internetového prohlížeče. Prototyp a následně grafický návrh prezentace umístěný v tomto okně přiblíží lépe objednateli webu výslednou podobu. Další výhodou tohoto umístění je zobrazení modelu v poměru 1:1. Objednatel tedy může vidět skutečnou šířku prezentace, velikosti písma a poměr volných ploch okolo prezentace. Tímto se předejde následným složitým úpravám vzhledu po implementaci grafiky. Šířku prezentace jsem zvolil 750 px. Zobrazí se tedy celá i do nejmenšího dnes používaného 29

rozlišení na PC, kterým je 800 x 600 px. Prezentační model je navržen do okna mající rozlišení 1024x 768 px, které je mezi uživateli nejvíce zastoupeno (cca 30 %). Údaje o procentuální zastoupení jednotlivých rozlišení jsem čerpal ze statistik přístupů na Google Analytics viz obrázek níže.  

Prezentační model obsahuje pozice s názvy Značka (obrázek značky společnosti odkazující na titulní stranu), Hlavní menu 1..5, Kalendář akcí (grafické znázornění kalendáře s vyznačenými dny konání akcí), Technické menu 1..3, CZ/EN (textový přepínač pro volbu lokalizace prezentace), A- A A+ (grafický přepínač velikosti písma v prezentaci), Image foto (ilustrační obrázky představující Rezidenci, které se prolínají pomocí FLASH technologie), Text prezentace (ukázka velikosti nadpisu a běžného textu). Rozmístění těchto prvků ukazuje následující obrázek.

obrázek 5.5: Výpis statistiky přístupů – rozlišení obrazovky návštěvníků

obrázek 5.6: Prezentační model

30

6. CMS sytém TYPO3 CMS je anglická zkratka pro Content Management System (systém pro správu obsahu). Tyto systémy umožňují svým uživatelů spravovat obsah internetové prezentace bez znalosti značkových a programovacích jazyků za pomoci určitého webového rozhraní. Většina firemních prezentací a větších webů je dnes postavena na některém CMS. U implementace těchto systému jsou většinou větší náklady při zavádění systému, ale následné náklady na správu jsou zanedbatelné.

6.1 Představení CMS TYPO3 TYPO3 je jedním z nejrozsáhlejších a nejkomplexnějších systému pro správu obsahu. Celý je postaven na programovacím jazyce PHP v kombinaci s MySQL10 databází. Je k dispozici zdarma a lze s ním nakládat podle GPL11 licence. TYPO3 rozlišuje dva typy přístupů k systému. Jako frontend je označován samotný web, tedy to, co vidí běžní návštěvníci a backend – systém samotný a webové rozhraní pro jeho správu. Podoba frontendu se generuje na základě použité šablony, ve které jsou pomocí značek definovány oblasti označující jaká data budou na tomto místě zobrazena. Tyto značky jsou, podobně jako značky v HTML, párové. Počáteční i koncová značka má tvar . Syntaxe zápisu značky je shodná jako zápis komentáře v HTML, samotnou šablonu tedy nenaruší a při nahrávání stránek jsou značky nahrazeny dynamicky načítaným obsahem z databáze. Základní funkcionality systému lze rozšířit pomocí doplňků. Je jich více než 1500 a jsou dostupné ke stažení na domovských stránkách projektu12. Základní obsah, který lze pomocí TYPO3 vložit, tvoří text, text s obrázky, pouze obrázky, odrážkový seznam a tabulka. Mezi speciální prvky patří odkazy na soubory, multimedia (Flash, animace, audio nebo video soubory), mapa stránek nebo HTML kód. Dále je možné vložit e-mailový, vyhledávací a přihlašovací formulář.

6.2 Instalace systému Minimální požadavky pro běh systému nejsou nijak velké. Stačí Windows, Unix nebo Linux HTTP server (ideálně Apache), dále PHP verze 4 nebo vyšší, 100MB diskového prostoru na 10 MySQL je multiplatformní databázový systém, který využívá dotazovacího jazyka SQL (Structured Query Language) 11 GPL (General Public License) je licence pro svobodný software. 12 http://www.typo3.org

31

serveru a PHP musí mít povoleno používat alespoň 16MB paměti. Pro dobré fungování některých rozšíření a doplňkových funkcí je vhodné mít na serveru nainstalované a povolené knihovny ImageMagic, GD a FreeType a Apache rozšíření mod_gzip a mod_rewrite. Před samotnou instalací je třeba založit MySQL databázi, ve které instalace systému vytvoří odpovídající tabulky. Dalším krokem je stažení instalačního balíčku systému z oficiálních stránek projektu a jeho rozbalení na server. Z důvodu bezpečnosti musíme ručně upravit soubor typo3/install/index.php, kde zapsání // před slovo die zakomentujeme tento řádek bránící spuštění instalace. Pak stačí do internetového prohlížeče zadat adresu prezentace a postupovat podle pokynů. V prvním kroku vyplníme údaje, přístupy a umístění databáze, v následujícím vybereme databázi, kterou jsme před instalací vytvořili a v posledním kroku do ní nahrajeme přednastavené tabulky. Pro úplné dokončení instalace je třeba smazat instalační adresář typo3/install.

6.3 Konfigurace systému 6.3.1 Rozhraní administrace Rozhraní administrace se skládá ze tří základních částí.[4] ▪▪ Lišta modulů - slouží jako nejvyšší úroveň pro volbu příslušných modulů, se kterými může administrátor pracovat ▪▪ Navigační lišta - zobrazuje navigaci ve zvoleném modulu. Při volbě modulu Stránka je zde zobrazena stromová struktura celé prezentace ▪▪ Detailní náhled - představuje vlastní pracovní okno. V této části probíhá editace obsahu, nastavování parametrů atd. Lišta modulů je rozdělena do pěti částí: Web, Soubory, User tools, Admin tools a Nápověda. Následuje přehled a krátký popis nejdůležitějších modulů: [5] ▪▪ Stránka (obsah stránky). Tento modul umožňuje vytvářet a editovat webové stránky, ukazuje statistiku přístupů pro jednotlivé stránky, umožňuje spravovat různé jazyky i sloupce obsahu na stránce a speciální obsah stránek, jako je třeba návštěvní kniha nebo položky zboží v obchodu. ▪▪ Záznamy (seznam databázových záznamů). Modul Web > Seznam poskytuje základní přístup k záznamům na každé straně. Jiné moduly jsou specializovány zejména na určité operace na určitých databázových tabulkách, tento modul poskytuje přímý přístup k základním záznamům dostupným uživateli.

32

obrázek 6.1: Rozhraní administrace systému TYPO3

▪ Přístup (přístupová práva ke stránkám). Nastavení přístupových práv je zásadní pro kontrolu přístupu uživatelů backendu ke stránkám. Můžete přiřadit uživatele a skupinu jako vlastníky stránky a pro každého nastavit přístupová práva. ▪ Template (šablony stránek). Tento modul slouží ke správě šablon za pomocí speciálního skriptovacího jazyka TypoScript. ▪ Seznam souborů. Toto je systém administrace souborů v TYPO3. Dovoluje vám přistupovat k souborům. Tímto modulem můžete nahrávat, kopírovat, přesunovat a odstraňovat soubory ze serveru. ▪ Uživatelé (Administrace uživatelů backendu). Modul administrace uživatelů poskytuje přehled o všech uživatelích backendu. Můžete je seskupovat podle vlastností, aby bylo možné monitorovat jejich přístupová práva, mounty souborů, TSconfig, skupiny uživatelů atd. ▪ Správce ext. (Správa extenzí TYPO3). Spravuje extenze TYPO3, které zahrnují doplňky, moduly, rozšíření tříd, konfigurační kódy apod. z centrálního depozitáře

6.3.2 Implementace šablon Tvorba šablony se dá rozdělit do několika kroků. Prvním je grafický návrh vzhledu prezentace, dále vytvoření statické šablony, tedy převedení grafického návrhu do HTML stránky a definice CSS. Dalším krokem je doplnění konfiguračních značek do statické šablony. Jak již bylo řečeno výše, značky jsou párové a mají následující syntaxi: . 33

Předposledním krokem je vytvoření struktury stránek v navigační liště. Každá šablona je totiž vázána k nějaké stránce. Následuje poslední a asi nejtěžší krok z tohoto postupu. Je jím vytvoření šablonového záznamu v pseudojazyce TypoScript. Definují se zde za pomocí speciální syntaxe vlastnosti objektů, které jsou následně převedeny do HTML kódu. Tímto způsobem je vytvořen výsledný obsah stránky. Následující obrázek ukazuje část kódu napsaného v TypoScriptu.

obrázek 6.2: Ukázka nastavení šablony systému TYPO3

6.3.3 Instalace doplňků Do systému TYPO3 lze velmi snadno nainstalovat doplněk. O vše se postará modul Správce extenzí v sekci Admin tools. Po kliknutí na tento modul, stačí v horní části pracovního okna vybrat z roletky volbu Import extensions a dále tlačítkem Procházet vybrat z disku předem stažený instalační balíček. Rozšíření se implicitně instalují do adresáře ../typo3conf/ext/. Po úspěšné instalaci je nový doplněk zobrazen v odpovídající kategorii v přehledu nainstalovaných rozšíření. Z tohoto přehledu můžeme doplněk konfigurovat, odinstalovat nebo si přečíst manuál popisující jeho funkce a možnosti nastavení. Každé rozšíření má svůj status, podle toho v jaké fázi vývoje se nachází. Pro implementaci na funkčních webech se doporučuje používat pouze rozšíření se statusem Stable (stabilní). Ostatní statusy jsou Alpha, Beta, Test a Experimental.

6.3.4 Přístupová práva Redakční systém TYPO3 má velmi dobře propracován systém přístupových práv. Ty se nenastavují přímo jednotlivých uživatelům, ale celým skupinám. Výjimku tvoří základní uživatel admin, 34

který má přístup do všech částí systému. Přidávání uživatelů backendu a jejich skupin umožňuje modul Uživatelé. Nejprve se musí vytvořit uživatelská skupina a té nastavit v sekci Access List přístup k jednotlivých modulů a nastavením systému. Další úroveň přístupu se nastavuje v modulu Přístup. Zde lze definovat jaký obsah může odpovídající skupina uživatelů měnit. Pro každou stránku se nastavuje pět úrovní editace. ▪ Ukázat stránku: Ukázat/Kopírovat stránku a obsah. ▪ Upravit obsah: Změnit/Přidat/Odstranit/Přesunout obsah. ▪ Upravit stránku: Změnit/Přesunout stránku, např. změnit titul stránky atd. ▪ Odstranit stránku: Odstranit stránku a obsah. ▪ Nové stránky: Vytvořit novou stránku pod touto stránkou. Nastavení se provádí kliknutím na obrázek, který se nachází se na pozici odpovídající nastavované úrovni viz.následující obrázek. Obdobný systém existuje i pro uživatele frontendu. I ti jsou rozděleni do skupin, kterým se nastavují přístupová práva. Vytvořit skupiny a uživatele frontendu lze ve stromové struktuře navigační lišty pod záložkou Frontend Users and Groups. Zde se opět nejprve vytvoří skupina a následně jednotlivý uživatelé. Každé položce obsahu poté může určit, které ze skupin bude tento obsah zobrazen. TYPO3 podporuje také využití toku dokumentů. Redaktor nemůže svůj článek zveřejnit, ale pouze vytvořit. O jeho zveřejnění se po kontrole a schválení obsahu postará nadřízený administrátor. Výhodou systému je i možnost prohlédnutí zatím nepublikovaného obsahu přímo ve stránkách.

obrázek 6.3: Ukázka nastavení přístupových práv systému TYPO3

35

6.4 Tvorba webu Rezidence 6.4.1 Výběr vhodného hostingu Pro realizaci internetové prezentace Rezidence bylo nutné zvolit vhodný hosting. Pro jeho výběr je zapotřebí vzít v úvahu několik základních parametrů. Jedním ze základních je volba platformy, kde jsou běžně poskytována dvě řešení. Prvním a nejčastěji využívanou platformou je Unix, která většinou obsahuje webový server Apache13, jazyk PHP a databáze MySQL a PostgreSQL14. Výhody této platformy jsou jednoduchost jazyka PHP a nízké pořizovací náklady na software. Většina internetových prezentací využívá právě této platformy. Druhou nabízenou platformou je Microsoft. Ta bývá využívána hlavně na velké korporátní prezentace, pro které jsou robustní nástroje firmy Microsoft vyvinuty. Tyto aplikace bývají napsány v programovacím jazyce ASP nebo .NET. Nevýhodou tohoto řešení jsou značné náklady na software. Systém TYPO3 využívá PHP, a proto bude web Rezidence hostován na Unixové platformě. Dalším parametrem je velikost nabízeného prostoru na serveru a maximální velikost databáze. TYPO3 potřebuje ke svému běhu maximálně 100MB prostoru, který v dnešní době nabízejí prakticky všechny hostingové firmy. Velikost databáze bývá u většiny z nich omezena velikostí celého hostingového programu. Konektivita (rychlost připojení serveru k internetu) a maximální velikost přenesených dat jsou další vlastnosti, které je nutné brát v úvahu. Vhledem k poměrně úzce zaměřenému okruhu potencionálních návštěvníků webu Rezidence nečekám velkou návštěvnost ani velké množství přenesených dat. Rozsah poskytované technické podpory je další z klíčových parametrů při výběru hostingové firmy. Jelikož je provoz prezentace nepřetržitý, musí být i technická podpora 24 hodin denně 7 dní v týdnu. Důležitá je také úroveň této podpory. Tu lze většinou posoudit až praktickými zkušenostmi. Osobně mám zkušenosti s několika webhostingovými firmami působícími na českém trhu a na základě těchto zkušeností jsem se rozhodoval mezi společností IGNUM (podle mého názoru nejlepší společností v této oblasti) a společností Savana. Nakonec po zvážení nabízených služeb a eny jsem rozhodl pro levnější řešení – tedy společnost Savana. U ní jsem zaregistroval i doménu projektu rezidence-belohrad.cz a residence-belohrad.cz. Na přání budoucího provozovatele prezentace jsem jako hlavní zvolil doménu residence-belohrad.cz a druhou nastavil jako alias (všechny požadavky na tuto doménu budou přesměrovány na hlavní).

13 Apache je multiplatformní HTTP server s otevřeným zdrojovým kódem. 14 PostgreSQL je relační databázový systém, který využívá dotazovacího jazyka SQL (Structured Query Language)

36

6.4.2 Instalace systému a doplňků Před samotnou instalací jsem si v konfiguračním rozhraní vytvořil novou MySQL databázi s názvem typo3rezidence. Dále jsem pro hosting nastavil použití skriptovacího jazyka PHP verze 5 a aktivoval htaccess15 pro tuto doménu. Vzhledem k tomu, že obsah prezentace nemůže být v této podobě zveřejněn na skutečné adrese, vytvořil doménu třetího řádu typo3.residence-belohrad.cz, na které jsem prezentaci vytvořil. Do připraveného adresáře typo3 jsem pomocí FTP nakopíroval soubory z instalačního balíčku a standardně systém nainstaloval. Dalším krokem bylo nainstalovat potřebné doplňky. Pro většinu obsahu si při realizaci vystačím s běžnými funkcemi systému. Pro zápis kulturních akcí jsem zvolil systém novinek (rozšíření tt_news). O výpis těchto akcí formou kalendáře se postará rozšíření News Calendar. Toto rozšíření pro svůj chod potřebuje podporu technologie AJAX16, musel jsem tedy doinstalovat další rozšíření – xAjax. Pro hezké zobrazení náhledů obrázku z galerií jsem použil rozšíření Perfect Lightbox2. Dalším doplňkem byl TMailform, kterým jsem vytvořil kontaktní formulář v menu Kontakt. Posledním doplňkem umožňující změnu velikosti písma je CSS styled content.

6.4.3 Tvorba šablony Tvorba šablony pro systém TYPO3 lze rozdělit do tří částí. V první se vytvořil soubor index. html, ve kterém jsem definoval jednotlivé oblasti