Mendelova univerzita v Brně Provozně ekonomická fakulta Dokumentace k projektu Kvetoucí kaktusy Chalupová Lenka LS 2012 Webový Design
Obsah 1. Úvod a cíl práce... 3 2. Informační architektura... 3 2.1. Rozdělení obsahu na kategorie... 3 2.2. Schématické znázornění struktury informací - diagram... 4 3. Rozvržení... 4 3.1. Grafické zobrazení rozvržení hlavní stránky... 4 3.1. Znázornění mřížky... 6 4. Barevné řešení... 6 5. Technické řešení... 7 5.1. Způsob pozicování prvků... 7 5.2. Použité grafické nástroje... 7 6. Závěr... 8 7. Seznam obrázků... 9
1. Úvod a cíl práce Pro téma webová prezentace zájmového sdružení jsem si zvolila Klub kaktusářů Zlín. Hlavním důvodem výběru bylo zvolit nový design pro jejich stávající webové stránky. Slouží jím především pro sdělení informací o klubu, členech, hlavnímu majiteli a akcích pořádaných klubem a fotografií. Webová stránka je zaměřena na kaktusy a sukulenty a je také laděna do jemných přírodních barev. Projekt byl zpracován v jazyce HTML za pomocí kaskádových stylů a java scriptu. Obrázek 1:Původní vzhled 2. Informační architektura 2.1. Rozdělení obsahu na kategorie Webová stránka obsahuje hlavní stránku, na kterou se lze dostat kliknutím na logo klubu a další čtyři stránky (Aktuality, Moje maličkost, Archiv, Seznam členů Klubu kaktusářů Zlín). Stránka Moje maličkost obsahuje dvě podkategorie (O mně, Náš pes) další podkategorie má stránka Náš pes (Mandy a Cherry, Cherry má štěňátka). Archiv je rozdělen na jednotlivé roky a ty jsou rozděleny na měsíce. Na stránce Seznam členů KKZ obsahuje členy klubu, na které se můžeme podívat na informace o nich kliknutím na jejich jméno. Na každé stránce se nachází drobečková navigace, pomocí níž se můžeme orientovat, v které kategorii se zrovna nacházíme. Na jednotlivé stránky se dostaneme pomocí menu, u kterého některé položky nabízí po kliknutí podkategorie. Položky, které nabízí podkategorie, poznáme podle dvou šipek >>, které značí, že daná položka menu není konečná. Odkazy v menu jsou řešeny pomocí funkce v java scriptu, aby položka v menu zůstala rozevřena, když si ji návštěvník otevře. Hlavní stránka je uvítací, obsahuje proto fotografii a základní informaci o webové stránce. Aktuality obsahuje aktuální informace nejen pro členy klubu, ale i pro ostatní, kteří by měli zájem podívat se třeba na výstavu kaktusů klubu. 3
Moje maličkost obsahuje dvě kategorie předsedy klubu, jedná se o informace o něm samotném i o jeho psech. O mně nachází se zde informace o předsedovi klubu. Náš pes zde budeme moci vidět fotografie psů předsedy klubu Archiv stránka je rozdělena na jednotlivé roky, které obsahují informace za měsíce daného roku a také fotografie ze skleníků členů klubu a z různých klubových akcí. Seznam členů KKZ - zde může návštěvník najít seznam členů klubu a po kliknutí na jeho jméno se podívat na informace o něm a také na jeho osobní fotografie a fotografie jeho kaktusů. 2.2. Schématické znázornění struktury informací - diagram 3. Rozvržení Obrázek 2:Mapa stránek 3.1. Grafické zobrazení rozvržení hlavní stránky Webové stránky obsahují v menu i podkategorie, které se zobrazí po kliknutí na danou položku v menu. Různé podstránky se liší pouze v obsahu stránky. Odlišnost tedy mezi stránkami výrazná není, to můžeme porovnat i na drátěných modelech. 4
Obrázek 3:Drátový model hlavní stránky V záhlaví se vlevo nachází logo klubu, které je symbolem celých stránek. Poté v hlavičce najdeme název stránky a malý obrázek kvetoucího kaktusu. Dále vlevo se nachází menu, které má i podkategorie. Tyhle součásti jsou na všech podstránkách stejné, liší se jen tělo stránky, které se nachází vpravo pod hlavičkou. Na úvodní stránce se nachází pouze název a úvodní fotografie (viz. Obrázek3). Na dalších stránkách se nachází i drobečková navigace, která je hned pod hlavičkou, poté vždy nadpis, podnadpis a informace k dané podstránce. Na stránce aktualit můžeme vidět i obrázek, který se týká aktualit (viz. Obrázek4). 5
3.1. Znázornění mřížky Obrázek 4:Drátěný model stránky-aktuality Pro úhlednější text je zarovnán do bloku. Menu je zarovnané vlevo pod logem. A tělo stránky je zarovnané k pravému okraji pod hlavičkou po celé její zbylé šíři. 4. Barevné řešení Barvy byly zvoleny hlavně tak, aby byly v duchu celého loga (viz.obrázek5). Odstíny zelené byly vybrány, jako přírodní barvy, které se pro tohle téma hodí. V menu jsou odstíny zelené s bílým textem. Nadpisy stránek jsou červeně, podle květu kaktusu z loga. Název stránky byl vyřešen černou barvou, také podle loga. 6
Obrázek 5:Logo klubu 5. Technické řešení Při vytváření webových stránek bylo použito programu PsPad a grafiický program Correl Draw. Vzhled byl tvořen pomocí kaskádových stylů CSS, které jsou v jazyce HTML volány pomocí tagu <div> a menu bylo vyřešeno pomocí funkci napsaných v javascriptu. Bylo zde hlavně řešeno menu, které se po kliknutí rozbalí, vyřešilo se to pomocí javascriptu, ve kterém se napsali funkce, pro zobrazování a skrytí daných položek. Také po vybrání dané položky v menu, aby položka zůstala viditelná napsala se funkce pro otvírání nových stránek v části telo. 5.1. Způsob pozicování prvků Při pozicování prvků bylo využito tří hlavních součástí a to hlavičky, menu a těla webové stránky. Celá stránka je umístěna na střed prohlížeče. V hlavičce stránky je logo zarovnané k levému okraji celé hlavičky a má absolutní pozici. Dále hlavička obsahuje hlavně název stránky, který je zde jako nadpis první úrovně <h1> a u něj je dále i malý obrázek kvetoucího kaktusu. Celé menu je zarovnané k levému okraji a je v něm použito odkazů bez dekorace. Menu je v podstatě zarovnáno podle loga klubu, které se nachází v hlavičce stránky. Odkazy menu v první úrovni jsou přes celou šířku menu, podkategorie druhé úrovně jsou posunuté o 20px zleva do zbytku šířky menu a podkategorie třetí úrovně jsou posunuté o 40 px zleva také do zbytku šířky menu. Mezi jednotlivými položky menu je rozestup 5px. Tělo stránky je zarovnané k pravému okraji stránky, a zabírá zbytek šířky pod hlavičkou stránky. Text je soustředěn do bloku. 5.2. Použité grafické nástroje Jak již bylo zmíněno, byl využit grafický program Corel Draw, ver kterém byl upraven obrázek kaktusu. Logo a ostatní obrázky byly použity již z výchozí webové stránky a nebyly již nijak upravovány. Pomocí programu Corel Draw byl také vytvořen drátěný model, který byl využit při tvorbě vzhledu stránek 7
6. Závěr Pro lepší vzhled by byla možnost využít více grafických programu a vytvořit v něm i různé obrázky pro použití ke vzhledu tlačítek pozadí a hlavičky. Vzhled byl zvolen jednoduchý i vzhledem k účelu stránek, protože tyhle stránky navštěvují spíše starší lidé a i majitel stránky je starší osoba. Také byla snaha přizpůsobit vzhled do barev loga a především sladění do jemných přírodních barev. Stránky jsou k nahlédnutí na: https://akela.mendelu.cz/~xchalup7/wd/projekt2/kaktusy_a_sukulenty.html Obrázek 6:Náhled stránky-aktuality Obrázek 7:Náhled stránky-archiv rok 2012 8
7. Seznam obrázků OBRÁZEK 1:PŮVODNÍ VZHLED... 3 OBRÁZEK 2:MAPA STRÁNEK... 4 OBRÁZEK 3:DRÁTOVÝ MODEL HLAVNÍ STRÁNKY... 5 OBRÁZEK 4:DRÁTĚNÝ MODEL STRÁNKY-AKTUALITY... 6 OBRÁZEK 5:LOGO KLUBU... 7 OBRÁZEK 6:NÁHLED STRÁNKY-AKTUALITY... 8 OBRÁZEK 7:NÁHLED STRÁNKY-ARCHIV ROK 2012... 8 9