Základní rozvržení

Fakulta informatiky
Masarykova univerzita v Brně

Struktura stránky

Obsah tohoto souboru je v mnohém stejný, jako u varianty 1AB. Případné rozdíly budou zvýrazněny.

Vzhledem k současnému obsahu webu Fakulty informatiky Masarykovy univerzity v Brně lze stránky rozdělit do dvou skupin. Stránky obsahující určitou formu navigace - zpravidla v podobě menu v levé části stránky. A stránky na kterých není tato navigace a tedy i prostor nutný. Oba dva druhy stránek však obsahují společné prvky designu - záhlaví a zápatí.

Společné prvky designu

Záhlaví

Záhlaví stránky tvoří jednak oblast pro jazykové mutace a dále hlavička obsahující název fakulty. Obě oblasti jsou zarovnány doprava.

Jazykové mutace

Oblast pro odkazy na jazykové mutace má šedý podklad, je zarovnána doprava a odkazy v ní jsou zobrazeny nepodtržené, tučně a tmavší barevnou variantou 1 pro všechny typy odkazů. Pro oživení byly v tomto případě ještě přidány "dvojtečky". Jde o v současné době hojně využívaný prvek, který však není nezbytný.

V případě potřeby mohou být do této oblasti umístěny další globální odkazy, jako je vyhledávání nebo mapa serveru.

Výpis kódu:

<div class="gray rightonly">
	<a href="#">:: cesky ::</a>
	<a href="#">:: english ::</a>
</div><!-- /gray rightonly -->

Hlavička

Hlavička stránek se od varianty 1AB a 1AC liší

Hlavička stránky je šedý pruh se šafránově žlutým okrajem. Pro zpestření je na pozadí použit obrázek. Jeho šířka je dána na celou stránku. Text v rámci hlavičky je bílý, tučný a jako jediný má nastaven patkové písmo pro odlišení od ostatních oblastí. Obsah hlavičky může být buď stejný na všech stránkách (Fakulta Informatiky Masarykova univerzita v Brně), nebo obsahovat nadpis stránky (název sekce, atd.). Osobně bych doporučila spíše první variantu a pro uvedení nadpisu využít prvek H1.

Výpis kódu:

<div class="fi_head rightonly">
   Fakulta informatiky<br />
   <span class="small">Masarykova univerzita v Brně</span>
</div><!-- /fi_head rightonly -->

Zápatí

Zápatí je umístěno pochopitelně ve spodní části stránky, je šedé, má výrazně zmenšené písmo a všechny odkazy by měly být černě. V návrhu bylo použito stávající struktury zápatí, obohacené o adresu fakulty a další kontakt.

Rozvržení stránek

Rozvržení stránek se od varianty 1AB a 1AC liší

Aby bylo dosaženo určitého vzhledu designu, je základní rozvržení stránky následující.

Oproti předchozím variantám jsou uvedeny prvky v záhlaví -- jazykové mutace a po té hlavička s názvem fakulty -- uvedeny v rámci vlastního těla dokumentu jako první prvky.

Poté následuje prvek <div class="obsah">, s vlastním obsahem stránky, dále levé menu - pokud je přítomno a nakonec patička.

<body>

<div class="glob">
  <div class="rel marg">
    <div class="out">
      <div class="float_left">
        <div class="center">

  <div class="gray rightonly">
	<a href="#">:: cesky ::</a>
	<a href="#">:: english ::</a>
  </div>

  <div class="fi_head rightonly">
    Fakulta informatiky<br />
     <small>Masarykova univerzita v Brně</small>
  </div>

  <div class="obsah">
	<!-- vlastni obsah stranky -->

 <!-- zde je vložen obsah stránky -->

	<!-- konec obsahu stranky -->
  </div><!-- /obsah -->
        </div> <!-- end centered div -->
        <div class="left">
          <div class="left_in">
		<!-- obsah leveho menu -->
               <div class="logoimg">
		<img src="http://www.fi.muni.cz/globfi/fid_images/logo_fi.gif" width="100" height="100" alt="Logo" />
               </div><!-- /logoimg -->

 <!-- zde je vložen obsah svislého levého menu -->

		
		<!-- konec obsahu leveho menu -->
          </div><!-- /left_in -->
        </div> <!-- /left -->
      </div><!-- /float_left -->
      <br class="clear" />  
    </div><!-- /out -->
  </div><!-- /rel -->

  <div class="paticka">
    <div class="rightonly">
      <a href="http://www.fi.muni.cz/index.cgi.cz.iso-8859-1"><img
	 src="http://www.fi.muni.cz/globfi/fid_images/logo_fi_small.gif" alt="Fakulta informatiky" /></a>
      <a href="http://www.muni.cz/"><img src="http://www.fi.muni.cz/globfi/fid_images/ic_s_mu.gif" alt="Masarykova univerzita" width="24" height="24" /></a>
    </div>
    <p>Fakulta informatiky MU Brno, Botanická 68a, 602 00 Brno, tel.: ++420-549 491 810, e-mail:<a href="mailto:info@fi.muni.cz" title="e-mail">info@fi.muni.cz</a></p>
  </div><!-- /paticka -->

</div><!-- /glob -->

</body></html>

Rozvržení stránek se od varianty 1AB liší

Z důvodů velkého a především proměnlivému počtu odkazů v případném menu nelze využít menu vodorovné. Proto je umístěno v levé části stránky, takže může libovolně narůstat.

Levé menu obsahuje vždy logo fakulty. Kromě toho může obsahovat vlastně libovolný text. V případě, že budou použity nadpisy velikosti 2, budou zobrazeny jako bílý text na šafránovém podkladu. Ostatní typy nadpisu budou mít stejný styl jako v jiných částech stránky. Odkazy v této části stránky nejsou podtrženy, nečíslované seznamy nemají grafické prvky.

Základní rozvržení i s menu lze vidět ve stránce layout_only.html.

Stránky neobsahující menu

Rozvržení stránek se od varianty 1AB liší

Základní rozvržení stránek bez menu využívá rozložení s menu. Pouze je logo fakulty zmenšeno, přesunuto na konec souboru a umístěno absolutně do levého horního rohu.

Základní rozvržení bez menu lze vidět ve stránce layout_narrow.html.

Další prvky v designu stránky

Rychlá navigace v rámci obsahu stránky.

Pro přidání další navigace na stránky slouží kombinace následujících tříd gray rightonly a v případě potřeby (především, pokud má být navigace umístěna hned pod hlavičkou, tedy je jako první prvek obsahu pak i třídu settop. Velikost prvku je dána velikostí obsahu.Velikost prvku je dána velikostí obsahu. Prvek by měl být uveden jako přímý potomek prvku obsah. Použití navigace lze vidět ve stránce layout_nav.html.

Rozdělení prostoru na dva sloupce

V některých případech je prostor na stránce lépe využit, pokud je rozdělen do více sloupců. K tomuto účelu je určena třída col2. Aby byl prostor správně rozdělen je třeba oba dva sloupce "zabalit" do dalšího prvku div. Prvek obsah tedy bude obsahovat následující strukturu:

    <div class="rel">
      <div class="col2">
        <!-- obsah prvního sloupce -->
      </div><!-- /col2 -->
      <div class="col2">
        <!-- obsah druhého sloupce -->
      </div><!-- /col2 -->
    </div><!-- /rel -->

Použití struktury lze vidět na stránce layout_2col.html, pro strukturu s levým menu a na stránce layout_2col_narrow.html.

Novinky a upozornění

Text je v obou případech doplněn barevným pruhem vpravo. A je ostatním textem obtékán

Pro případ, že bude třeba určitý text na stránkách vyčlenit, jsou připraveny třídy novinky a pozor. Vyčleněný text bude umístěn v pravé části stránky, jeho šířka je stanovena na 30% volného prostoru (tedy prostoru, který má prvek k dispozici) a měl by být použit buď se šedým pozadím nebo s pozadím barvy světlejší varianta 2. Pro upozornění spíše informačního typu (doplňující poznámky, vysvětlující text atd.) by mělo být použito především šedého pozadí:

<div class="gray novinky">
vyčleněný text 
</div><!-- /gray novinky -->

V případě, že se rozhodnete některému následujícímu prvku zabránit, aby danou novinku obtékal, použijte v něm třídu clear

Pokud je třeba uživatele na něco upozornit (změny, termíny, podmínky apod.) je vhodnější použít barevné pozadí:

<div class="pozor novinky">
vyčleněný text 
</div><!-- /pozor novinky -->

Použití lze vidět na stránce layout_nav.html.

:: nahoru ::

Obecné prvky návrhu

Barvy

Ve všech variantách jde o kombinaci šedé a barevných odstínů šafránově žluté. Při určování barev bylo vycházeno z barvy definované na současných stránkách.
#fff7ee, #fff7ee Světlejší varianta 1
#ffcc99, #ffcc99 Světlejší varianta 2
#ff9933, #ff9933 Základní barva
#bb6622, #bb6622 Tmavší varianta 1
#774411, #774411 Tmavší varianta 2

:: nahoru ::

Fonty

Při rozhodování o použitých fontech lze vzít v úvahu dvě hlediska: čitelnost textu a zažité zvyklosti v rámci společnosti či instituce. Vzhledem k tomu, že součástí zadání není grafický manuál FI MUNI Brno, vychází návrh při výběru typu (rodiny) písma z aktuálního návrhu stránek.

Ve skutečnosti existuje ještě druhá výjimka - pro specifické účely je v rámci elementu <pre> použito písmo typu monotype.

Až na jedinou výjimku by měl být obsah stránek zobrazován bezpatkovým písmem. Toto písmo je na obrazovce čitelnější. Z aktuálního návrhu byla převzata následující definice písem. Pokud je v grafickém manuálu FI MUNI Brno definována jako základní jiná rodina písem, lze ji na jediném místě předefinovat.

* {font-family: verdana,helvetica,arial,sans-serif;}

V samostatném kaskádovém stylu pro tisk by pak mělo být nastaveno jako výchozí písmo patkové.

Hlavička

Jedinou výjimku tvoří hlavička v záhlaví stránky pro odlišení byla vybrána jiná rodina písem. Tentokrát jde o písmo patkové. Opět lze - v případě, že je to v grafickém manuálu řečeno - přepsat definici na odpovídající rodinu písem.

Poznámky k vlastní realizaci

Aby bylo vyhověno podmínkám zadání byl popsaný desing "nasazen" na požadované stránky. V některý případech není bohužel struktura ze zadání příliš jasná a odlišuje se od stávajících stránek. Navíc lze předpokládat, že budoucí podoba stránek se bude lišit (především v případě tit.stránky www.fi.muni.cz., resp. fadmin.fi.muni.cz. Pči vlastním použití doporučuji vycházet spíše ze stránek začínajících na layout.

Zadávací dokumentace obsahuje několik podmínek, které není možné rozumným způsobem splnit současně.

Na jedné straně je vyžadováno, aby stránky byly plně validní XHTML 1.1 dokumenty a na druhé straně je požadavek, aby byly přístupné a v rámci (technických) možností i shodné pro co nejširší okruh prohlížečů. Bohužel nejrozšířenější prohlížeče společnosti Microsoft obsahuje několik chyb, které znemožní korektní zobrazení XHTML dokumentu. Existuje několik cest, jak je toto omezen možno obejít, ale ani jedna z nich není zcela korektní a ve svých důsledcích vede k porušení některého (nebo některých) bodů zadání. Nejčastější řešení (úmyslná chyba v kódu a tedy dokument, který není validní), podle zadání v žádném případě není přípustná. Proto jsme zvolili jiný kompromis a tím je použití přípony .html. V případě požadavku je možné šablony upravit i jiným způsobem.

V zadání soutěže je řečeno, že veškerá grafika má být uvedena ve formátu .png. Tato podmínka není splněna v případě loga fakulty, které bylo převzato ze stávajících stránek a je ve formátu gif. (Do loga nesmí být zasahováno a věřím, že existují vhodnější zdroje přímo na fakultě).

V zadání soutěže je řečeno, že stránky musí být funkční (relativní odkazy) - v případě loga fakulty a některý dalších grafických prvků převzatých ze stránek je použita adresa absolutní - pokud tedy bude počítač připojen k internetu, bude vše fungovat. V případě požadavku lze šablony upravit.

V zadání soutěže je řečeno, že designer garantuje všechna autorská práva. Což v případě loga fakulty nelze. Navíc byl na stránce fadmin.html použit stávající obsah, který obsahuje další prvky, kde nemám autorská práva - proto byly tyto obrázky ponechány jako "slepé" - na stránce se neobjeví a je to záměr.

Stránky dle zadání:

wwwindex.xhtml
fadmin.xhtml
sekce.xhtml
aplikace.xhtml
varianta2 - aplikace2.xhtml
informace.xhtml
obecna.xhtml Vysledná stránka neodpovídá zadání. Již puvodní text obsahoval parametry id. Dalši parametry id ani class navíc se v předepsaném těle stránky nevyskytují.
simplelist.xhtml
uzká varianta list.xhtml, varianta s menu

Fakulta informatiky MU Brno, Botanická 68a, 602 00 Brno, tel.: ++420-549 491 810, e-mail:info@fi.muni.cz

Struktura stránky

Společné prvky designu

Záhlaví

Jazykové mutace

Výpis kódu:

Hlavička

Výpis kódu:

Zápatí

Rozvržení stránek

Stránky obsahující menu

Stránky neobsahující menu

Další prvky v designu stránky

Rychlá navigace v rámci obsahu stránky.

Rozdělení prostoru na dva sloupce

Novinky a upozornění

Obecné prvky návrhu

Barvy

Fonty

Hlavička

Poznámky k vlastní realizaci

Stránky dle zadání:

Struktura stránky

Rozvržení stránek

Další prvky v designu stránky

Obecné prvky