Popis designu

Struktura

Každá stránka obsahuje levé menu, volitelně rychlé odkazy a hlavní část. Hlavní část je nahoře a dole uvozena šafránovým pruhem, který nalevo přechází do šedé. V horním pruhu je název stránek, v dolním může být odkaz na webmastera, informace o copyrightu nebo něco podobného, nebo taky vůbec nic.

Hlavní část

Na stránkách, kde je rozcestník, je hlavní část rozdělena na 2 sloupce. V pravém je rozcestník, v levém je nějaká obsažnější informace (úvodní text, aktuality nebo něco podobného). Týka se to stránek wwwindex.xhtml, faindex.xhtml, a sekce.xhtml.

Levé menu

Levé menu má pevnou šířku 135 px a mělo by obsahovat především seznamy s odkazy. K lepšímu zvýraznění odkazů se používá střídavě dvou barev – šedé a bílé a mezi nimi trojúhelníky. Shora začíná vždy bílá.

Rychlé odkazy

Rychlé odkazy (pokud se použijí) jsou nahoře v hlavní části. V rychlých odkazech se použije max. 5 z 27 dodaných ikonek. Ikonka by se neměla opakovat (jinak by kód nebyl validní). Při použití více než 5 ikonek, přesahuje šířka stránky 600 px. Ikonky v rychlých odkazech se rovněž střídají bílé a šedé a jsou odděleny trojúhelníky. Zleva začíná vždy bílá, kódují se ovšem v obráceném pořadí (zprava doleva), takže v kódu je bílá na konci. (Bohužel to nešlo provést nějak chytřeji, kvůli zobrazování v různých prohlížečích) Do rychlých odkazů se také vkládá odkaz na druhou jazykovou verzi.

Barvy

Používají se:

• šafránová v ikonách, prvku TH, prvku HR, v pruzích na začátku a konci stránky: RGB 255, 154, 49 (#ff9a31)
• tmavě červená v ikonách a odkazech po přejetí myši: RGB 153, 0, 0 (#990000)
• šedá v rámečcích tabulek a zkratek: RGB 153, 153, 153 (#999999)
• šedá v odkazech: RGB 102, 102, 102 (#666666)
• šedá v podkladu levého sloupce a rychlých odkazů: RGB 231, 231, 231 (#e7e7e7)
• bílá v podkladu stránky, podkladu levého sloupce a rychlých odkazů: RGB 255, 255, 255 (#ffffff)
• černá v textu: RGB 0, 0, 0 (#000000)

Písma

Písmo by mělo být Arial, Helvetica nebo jiné bezpatkové. Velikost písma je definovaná relativně, kromě písma v rychlých odkazech, kde je velikost 10px.

Obrázky

Obecné

• bgr_line.png šedo-šafránový podklad v horním pruhu a v pruhu oddělujícím rychlé odkazy
• bgr_line_bottom.png šedo-šafránový podklad v dolním pruhu
• fi_cz_logo.png značka fakulty
• list_white.png seznam na bílém podkladu
• list_gray.png seznam na šedém podkladu
• gray_white_horiz.png trojúhelník oddělující sekce levého menu
• white_gray_horiz.png trojúhelník oddělující sekce levého menu
• gray_white_vert.png trojúhelník oddělující ikonky rychlých odkazů
• white_gray_vert.png trojúhelník oddělující ikonky rychlých odkazů

Ikonky

Ikonky slouží k zobrazení rychlých odkazů. Vzhledem k tomu, že mi nebylo jasné, co všechno v rychlých odkazech může být, je jich 27 a snad dokáží pokrýt většinu myslitelných odkazů. Každá ikonka existuje ve 4 podobách – na bílém a šedém podkladu a ve variantě obyčejná a po přejetím myši. Toto rozdělení se promítá do jmen ikonek koncovkou _white, resp. _gray a _hi pro ikonky, které se zobrazují po přejetí myši. Následuje seznam jednotlivých ikonek s možným přiřazením odkazům:

• admin_gray.png, admin_gray_hi.png, admin_white.png, admin_white_hi.png administrativní server nebo vstup do autentizované části
• aktuality_gray.png, aktuality_gray_hi.png, aktuality_white.png, aktuality_white_hi.png aktuality, upozornění apod.
• bezdrat_gray.png, bezdrat_gray_hi.png, bezdrat_white.png, bezdrat_white_hi.png připojení do bezdrátové sítě
• cvt_gray.png, cvt_gray_hi.png, cvt_white.png, cvt_white_hi.png CVT
• czech_gray.png, czech_gray_hi.png, czech_white.png, czech_white_hi.png česká verze
• dokument_gray.png, dokument_gray_hi.png, dokument_white.png, dokument_white_hi.png dokument, přihláška, formulář
• domu_gray.png, domu_gray_hi.png, domu_white.png, domu_white_hi.png domovské stránky, budova
• english_gray.png, english_gray_hi.png, english_white.png, english_white_hi.png anglická verze
• heslo_gray_hi.png, heslo_gray.png, heslo_white_hi.png, heslo_white.png volba hesla
• informatika_gray_hi.png, informatika_gray.png, informatika_white_hi.png, informatika_white.png informatické kolokvium, informatický seminář, konference, apod.
• info_gray_hi.png, info_gray.png, info_white_hi.png, info_white.png informace
• katalog_gray_hi.png, katalog_gray.png, katalog_white_hi.png, katalog_white.png studijní katalog, dokumentace
• kontakt_gray_hi.png, kontakt_gray.png, kontakt_white_hi.png, kontakt_white.png kontakt
• lide_gray_hi.png, lide_gray.png, lide_white_hi.png, lide_white.png lidé na FI, lidé na MU, seznam studentů, zaměstnanců apod.
• materialy_gray_fi.png, materialy_gray.png, materialy_white_hi.png, materialy_white.png knihovna, studijní materiály, dokumentace
• mu_gray_hi.png, mu_gray.png, mu_white_hi.png, mu_white.png univerzita, IS MU
• obecna_gray_hi.png, obecna_gray.png, obecna_white_hi.png, obecna_white.png nezařaditelné odkazy
• obecna1_gray_hi.png, obecna1_gray.png, obecna1_white_hi.png, obecna1_white.png nezařaditelné odkazy
• pozor_gray.png, pozor_gray_hi.png, pozor_white.png, pozor_white_hi.png upozornění, důležité věci
• struktura_gray.png, struktura_gray_hi.png, struktura_white.png, struktura_white_hi.png struktura, katedry, hierarchie
• studijni_gray.png, studijni_gray_hi.png, studijni_white.png, studijni_white_hi.png studijní oddělení
• tech_gray.png, tech_gray_hi.png, tech_white.png, tech_white_hi.png technické informace
• uvt_gray.png, uvt_gray_hi.png, uvt_white.png, uvt_white_hi.png ÚVT
• vyuka_gray.png, vyuka_gray_hi.png, vyuka_white.png, vyuka_white_hi.png výuka, konference, přednáška, seminář, workshop
• vyveska_gray.png, vyveska_gray_hi.png, vyveska_white.png, vyveska_white_hi.png vývěska, zápisník, připomínka
• vyzkum_gray.png, vyzkum_gray_hi.png, vyzkum_white.png, vyzkum_white_hi.png věda, výzkum
• za512_gray.png, za512_gray_hi.png, za512_white.png, za512_white_hi.png na poslední chvíli, důležité, upozornění, rozvrh, harmonogram