Návrhářství stránek je snad ještě pracnější, než samotná jejich tvorba. I když samozřejmě jen v některých ohledech...

Základem takového návrhu je uvědomit si potenciál jazyka HTML = co je např. nemožné - neboli co na stránkách nebude moct být...

Při tvorbě takřka profesionálních stránek je potřeba uvažovat navíc ještě v těchto třech směrech:

„Čtverce":

Nechci nějak urážet průměrného surfaře, který toho o tvorbě stránek moc neví, ale většinou tito lidé nemají vůbec představu, jak vypadá takové „tělo stránky", neboli místo, kde je všechno „nějak" zakomponováno... Pokud k nim nepatříte, přeskočte prosím tento odstavec... Nejjednodušeji by se taková html stránka mohla definovat jako „systém čtverců", jež jsou nějak uspořádané na dalším čtverci - monitoru... Každý, kdo má „nějaké" to cítění designu se s něčím takovým ale nesmíří... Každého „neznalce" napadají různé „roztodivné" a „roztahané" designy (např. špice, jež je zakončením hlavní nabídky jde do druhého konce obrazovky, ..). Takové věci lze udělat složitým způsobem, který je ale jen jakýmsi „obejitím" či „optickým klamem" ušitým na surfaře... O tom se zmíním níže (viz. podsouvací technologie)... Každý, kdo stránky navrhuje by tedy měl počítat s touto jistou omezeností a alespoň v základu nevkládat do stránek náročné grafické komponenty...

(nahoru)

Čtverce lze částečně obejít tkzv. „podsouvací technologií" ( = již zmíněné vrstvy). Jde o způsob, kdy zadáte jednu z prostorových částí objektu v záporné hodnotě (neboli definujete např. „konec objektu" v jeho skutečném středu a následný objekt se tak předsune na něj...). Samo o sobě to větší význam nemá, ale použijete-li tento postup zároveň s transparentními barvami např. obrázků, může vzniknout různými kombinacemi velice zajímavý a propracovaný design... Bohužel není tato technologie podporována stejným stylem u všech prohlížečů, takže si v „plné šíři" mohou tyto funkce vychutnat pouze uživatelé MSIE... Navíc, pokud umístíte obrázek s odkazem a ten se překrývá s jiným, vznikne vám okolo link-čtverec (u textu takové to „podtržení")... Obejít to lze docela jednoduše stylopisem, který zruší odlišení odkazu od ostatního textu stránky. Moc autorů to ale nepoužívá...

(nahoru)

Rozvržení a optimalizace stránek:

Rozvržení stránek je velice náročné; zvlášť pokud máte rozsáhlé stránky nedoporučuji mít menu-tlačítka přes půl obrazovky.

Každý máme nějaký hadware a software, ale moc lidí nemá stejnou konfiguraci - naopak se třeba zásadně liší... Problém tedy nastává v otázce - jak bude stránka vypadat na počítači někoho jiného??? Základním faktorem pro takové zobrazení je rozlišení a prohlížeč (typ, verze), dále počet barev, javascripty, jazykové kódování, ... Udělat stránky které by fungovaly na každém počítači nejde, ale lze surfaře alespoň „trknout", že něco není v pořádku a upozornit ho, na jakou konfiguraci byly stránky tvořeny...

Pokud se stránky tak tak „vejdou" do rozlišení 1600x1200, představte si, jak asi budou vypadat v 800x600, tedy rozlišením polovičním a na starších počítačích (133Mhz,16Mb RAM,grafika VGA/CGA) nejvyšším možným... Nejpoužívanější rozlišení je podle statistik dnes 1024x768, v nichž nejčastěji tvořím i já. Chcete-li ale jiné, mohu se přizpůsobit...

Velkým „žroutem místa" na stránce je samotný prohlížeč - všechny ty lišty a panely... Např. nejrozšířenější prohlížeč MS Internet Explorer zabírá v základu při rozlišení 800x600 celou čtvrtinu obrazovky!!! Když k tomu připočítám další čtvrtku na reklamu a ještě jednu na menu, nezbyde toho na zobrazení toho nejdůležitějšího - samotné stránky mnoho... Odstranit sice lišty jdou (jednoduše), ale zjistil jsem, že velké procento uživatelů neví ani o tkzv. „chanel-módu" neboli „smrsknuté" liště de/aktivované klávesou F11. Tvůrce stránek nemůže proti uživatelovu prostředí skoro nic udělat. Jedinou „spásu" nabízejí javascripty, které dokáží otvírat nová okna buď jako F11-kované (např. http://www.sweb.cz/fotbalbigy), přes celou obrazovku (např. http://www.sweb.cz/black-fire/desire) nebo s jedinou lištou (ta, jak je tam napsáno „jméno stránky - MSIE") (např. u fotek). A nebo na nějaké úvodní stránce zkuste uživatele upozornit o nutnosti změn... Z vlastních zkušeností ale vím, že to „nikdo nečte"...

Informace o optimalizaci (jaké rozlišení je pro stránky nejlepší) se obvykle umísťuje podle důležitosti. Fungují-li vaše stránky bez problémů ve všech rozlišeních stejně (dosáhnete toho jedině jednoduchostí - tedy např. jen text), píše se optimalizace na závěr stránek, malým písmem někam ke „copyrightům" a odkazům na webmastera. Pokud má ale rozlišení zásadní význam pro zobrazení, píše se obvykle do nějakého základního úvodu - ještě před načtením samotných stránek spolu s návodem pro „neznalé surfaře". Doporučuji umístění nějaké výrazné výzvy nebo zpříjemnění v podobě javascriptů (např. zamezení vstupu bez správného rozlišení nebo věčně vyskakující tabulka s výzvou;-)).

Pozor!!!: Nechte dost prostoru na zobrazení stránky! Pokud se vám vejdou všechna menu bez problémů, ale na samotné zobrazení stránky zbývá jen 5 řádků, má to velice nepříjemný efekt na návštěvníky... (Mám-li uvést takový nelibý příklad, zkuste „dětský chat" na http://www.alik.cz při rozlišení 800x600. Budete rádi, že přečtete vzkazy 3 lidí, což přispívá velkou měrou k ohromné nepřehlednosti... pozn. pro SILCOM multimedia: Jinak pěkný design;-))

Problémem uživatelů s vypnutými javascripty se zabývat nebudu. Pokud už se někdo uchýlí k takovému zpátečnickému kroku, který svazuje autorům stránek už tak svázané ruce kvůli inkompatibilitě prohlížečů, má k tomu jistě pádný důvod (já o žádném tedy nevím...) a těžko své nastavení „jen tak" změní...

(nahoru)

Velikost:

Když člověk tvoří stránky, většinou (vždycky) probíhá jejich primární testování (jestli vůbec a jak to vypadá, ...) na počítači tvůrce - tedy ve stavu „off-line" neboli „ne z internetu". Má to výhodu rychlejšího a snazšího přístupu. A právě v té rychlosti nastává problém - počítač má totiž data na svém HD, kam máte přístup téměř okamžitý, ale z internetu většina lidí stahuje mnohonásobně pomaleji (o tomto problému naleznete více v popisu technologií jež používám) - proto je potřeba omezit datově náročnou grafiku na únosnou mez (nikdo přece nechce dlouho čekat, až se načte stránka a přitom platit „těžké peníze" za připojení). Návrhář tedy musí přemýšlet i o množství dat (každý asi ví, „co kolik" zabírá) a různě kombinovat texty s grafikou... Proto nejsou „únosná" celoobrazovková ozvučená intra se spoustou obrázků... Sice to krásně vypadá, ale nikdo nejspíš nevydrží čekat...

(nahoru)

Pozor na znakové entity:

Píšete-li html kód bez pomoci nějakého editoru, dávejte si pozor na „znakové entity"!!! Jde o znaky, které jsou definované např. jako inicializace proměnné v toku kódu HTML a proto dochází k chybám... Jde o velice častý problém. Níže uvádím tabulku zápisů těchto znaků náhradním systémem symbolů (tabulka není úplná, ale obsahuje všechny často používané znaky):

(Znakových entit je mnohem víc, seznam ?všech? najdete zde)
U editorů (např. MS FrontPage) se tím zabývat nemusíte - v „NORMAL módu" si tyto znaky přepisuje sám...

Nejčastější postup tvorby stránek:

1. Počáteční fáze - Předpokládám, že již víte, čemu (= jakému obsahu) své stránky věnujete. Proto následuje kresba základního stylu stránek (to, jak by měli vypadat), různé návrhy na obrázky, celkový design,...
2. Intro - Intro je "něco působivého na začátku", co má za úkol dobře naladit surfaře již na prahu Vašich stránek. Jde asi o nejzábavnější část, která je umístěná zde na začátku kvůli budoucí "psychické stabilitě" tvůrce.
3. Systém - Nejnáročnější na stránkách je přehlednost - je potřeba stránky nejen dobře a přehledně zorganizovat a dát "klikání" řád, ale je potřeba myslet i na systém souborů - to, co surfař nevidí, ale Vám může způsobit velký zmatek...
4. Texty - S těmi Vám nikdo asi nepomůže - leda s pravopisem a stylistikou, ale jinak jde samozřejmě o nejdůležitější součást stránek - to text sděluje Vaše poselství surfaři...
5. Ucelení - Nejdůležitější krok, kdy většina amatérů "odpadne". Musíte totiž "dát dohromady" všechny předešlé části a vytvořit z nich souvislý celek, který se pak bude rovnou přenášet do jazyku HTML...
6. Dodatky - To je soubor informací, které budou na Vašich návrzích figurovat jako "náhradní verze již vytvořeného". Je to prostě "vylepšení" pramenící z "půlnočních nápadů" a možná verze některých součástí...
7. TVORBA STRÁNEK = PŘENOS DO HTML
8. Problémy a aktualizace - V obou případech jde o úpravy potřebné ať již k aktuálnosti obsahu sdělení stránek nebo k dotažení některých chyb, objevených při chodu stránek (upozornění od návštěvníků, či Vaše nápady na vylepšení). Jde o nezbytnou součást - nic nefunguje samo ;-)

Součástí všech kroků následujících po kroku 7 jsou samozřejmě také rozsáhlá testování, která závisí na individuální situaci...

A aby toho nebylo málo, ještě přidávám několik důležitých zásad:

1. Nikdy nepodceňujte design - tvoří náladu na Vašich stránkách - pokud bude špatná, nikdo na nich nestráví příliš mnoho času i přes zajímavé sdělení...
2. Děláte-li návrh stránek, nejde si jen "sednout k papíru a tužce" a vytvořit rozsáhlou bezchybnou práci - to nedokáže ani ten nejlepší profesionál, mají-li stránky "za něco stát"... Musíte o návrhu a jeho vylepšeních přemýšlet „kudy chodíte", nechat se inspirovat na ulici, v přírodě, ve vaně i posteli,... Prostě mít u sebe neustále papír na poznámky a zanést si každý detail do konečné podoby návrhu...

Na závěr bych Vás poprosil ještě o hlasování v mé kratičké anketě týkající se návrhů stránek, děkuji...

Jakékoli další dotazy týkající se návrhů stránek mi zašlete prosím e-mailem (black-fire@seznam.cz) a já zařadím zajímavé názory či dotazy s odpověďmi do textů této stránky...