Jak se dělají webové stránky

..aneb článek o tom, jak je dělám já =) První si musím uvědomit pro koho ten web vlastně dělám, zda to bude konzervativní web pro velkou firmu nebo jen malá webová vizitka třeba s nejbarevnějším designem. V tomto článku budu popisovat, jak jsem dělal web pro mateřskou školku. Takže klienta máme školku, tzn. design a barvy mají hodně velkou váhu protože se musí líbit dětem a především zaujmout rodiče.

 Barvy by měly bít živé ale zase ne křiklavé a taky by neměly vypadat nijak vyblitě. Takže jsem vybral jemnou zelenou na pozadí, růžovou (něco mezi růžovou a fijalovou, prostě taková ta barva „creamfields“ =) ) a modrou na logo. Pokud jste tak dobří, že nemusíte hledat nikde žádnou inspiraci, tak je to perfektní – někdy mám před očima vymyšlený celý web a někdy mě nenapadá ani jak začít.

Vzal jsem si papír, tužku a sedl jsem si ke stolu a načrtl si layout.

Vršek jsem měl už vymyšlený takže jsem to kreslil jen tak narychlo. Hlavně mi tam šlo o to si vypočítat to odsazení obrázků od vrchu a od levé strany abych mohl web nakódovat. Potom jsem si vytvořil ve PhotoFiltre návrh, kde co bude.

Tohle byl výsledek, hned jsem si obrázek rozřezal na jednotlivé soubory – dvě fotky, logo a pozadí. Fotky a logo jsem napozicoval s pomocí údajů z papíru a při ostrém nasazení do stránky jsem je ještě vyrovnal.

Menu je tvořeno pomocí javascriptu jQuery (výborná věcička) a funkce „.animate“. Pozadí se vlastně za určitou dobu jen posune nahoru a po odjetí kurzoru zase dolů.

Logo se mi v celkovém pohledu na web nelíbilo, protože působilo strašně jednoduše. Najel jsem si na dafont.com, sekce cartoon a hledání fontů, které jsou free for commercial use. Stáhl jsem tři fonty a vybral jsem si Gobbledegook – ten jsem použil na sousloví „Na Valtické“, „mateřská škola“ (ano, v návrhu jsem udělal chybu a napsal městská školka =) ) je kvůli „ě“ a „š“ jen upravený Arial.

Teď už jen spustit PSPad a začít kódovat. U tohoto designu šlo kódování hladce, u ničeho jsem se nesekl a vše funguje tak, jak má. Pokud bude klient web chtít, budu muset ještě naprogramovat spojení s databází kvůli novinkám. Ty si bude klient vypisovat sám v uživatelském rozhraní, které v případě zájmu o web naprogramuju. Nakonec jsem ještě doplnil text z lipsum.cz.

Když jsem to počítal, vyšlo mi, že jsem web dělal něco kolem 7-8 hodin. Výsledek můžete s návrhem porovnat na adrese navrhy.viktorhanacek.cz/skolka. Návrh chci jít předvést v pondělí, tak uvidím, zda se bude líbit.