Fakulta informatiky, Masarykova univerzita v Brně

Read Me

Poznámky k stylu

Kontextové menu a rychlé odkazy

Design obsahuje rychlé odkazy (jeden řádek nahoře), které jsou společné pro všechny stránky. Měli by obsahovat pouze nejduležitější odkazy, vzhledem k limitaci šířkou stránky.

Druhou možností navigace v stránkách je kontextové menu. Jeho příklad je obsažen v stránce obecna.xhtml. Mělo by sloužit k odkazování na související stránky a případně do vyšších úrovní.

Tisk

Definice stylu obsahuje odlišení pro @media screen a @media print, grafická hlavička, menu a rychlé odkazy se netisknou, je li při tisku povolena grafika, do pravého horního rohu je pouze umístěno logo fakulty.

Prezentace bez stylu

Pro prezentaci jinou než na obrazovce (@media screen) obsahuje styl třídu "alternate", pomocí které je možno dodat textovou reprezentaci grafickým nebo stylystickým prvkum. Při použití stylu jsou tyto "alternate" reprezentace neviditelné. Kupříkladu kontextové menu používa <span class="alternate> pro oddělovače, které by byli při grafické prezentaci nadbytečné, ale které umožňují kompaktní prezentaci v textovém přehlížeči.

Použitá grafika

Obsah grafiky je minimální, většina efektú je dosažená minimalistickými vzory pro pozadí nebo definicemi CSS. Jediným grafickým prvkem větším než 1KB je logo fakulty. Používá se ve dvou variantách, jednou pro prezentaci v prohlížečích bez podpory, resp. s vypnutou podporou stylu, a podruhé pro použití v navrhovaném designu. Obě verze mají velikost do 6KB, přičemž se v daném okamžiku používa nejvíc jedna.

Všechny grafické prvky byli vytvořeny ve volně dostupném programu GIMP a jsou k dispozici ve zdrojovém formátu XCF. Grafika neobsahuje žádné texty kromě kruhového latinského nápisu, který pochází z originálního loga fakulty (fi-cz-logo.gif) a nepřekládá se.

Barevnost designu je založena na starých stránkách fakulty (oldfi.cgi), definice barev se nachází v definici stylu CSS. Jako přechodová barva v hlavičce byla použita RGB #ffe120. Pro stipple efekt v hlavičce byla použita RGB #c92100 s pruhledností vuči přechodu v pozadí. Pro základní pozadí dokumentu je použit stipple efekt s barvou RGB #f5f5f5 střídající se s bílou. Pro pozadí kontextového menu je použita tmavší RGB #ebebeb také v kombinaci s bílou.

Soubory s grafickými prvky

Poznámky k jednotlivým stránkám

Všechny stránky obsahují společnou vrchní část s logem, názvem a rychlými odkazy. Následuje volitelné kontextové menu, a pak samotný obsah stránky, uzavřený v tagu <div id="content">...</div>. Značkování uvnitř obsahu je minimální. Používá pouze sémantické tagy a několik málo sémantických tříd. V případě potřeby není problém dodefinovat nové třídy, ze zbytkem stylu by neměli nijak interferovat.

fadmin.xhtml

Jako předloha byla použita momentální stránka fadmin.fi.muni.cz. Bylo upraveno značkování a odstraněny externí odkazy ze spodní části. Tyto mohou být v novém designu vloženy do kontextového menu jako textové odkazy.