YMUSY1

1. YMUSY1 Tvorba webu v praxi Ing. Monika Šimková

2. Proces vzniku webu

3. Návrh vzhledu • Grafický návrh webu se tvoří s ohledem na typ webu, preference zákazníka, požadovanou funkčnost a rozvržení. • Existují běžně používané standardy pro umisťování konkrétních prvků, např. • Přihlašovací formulář • Ikony jazykových mutací • Hlavní menu

4. Návrh vzhledu • V počáteční fázi se volí typ rozložení – v závislosti na množství a typu prezentovaných informací. • Následuje diskuse o barevném schématu, motivu stránek (logu). • Po předložení návrhu má možnost zákazník vyjádřit se k vizáži, mohou následovat úpravy (starou verzi layoutu nemazat !! ) • Po definitivním schválení se snažíme zákazníka od dalších kreativních úprav odradit

5. Návrh vzhledu • Ke grafickému zpracování se zpravidla používají bitmapové nebo vektorové editory umožňující rozložení do vrstev a snadný export dílčích oblastí • Adobe Photoshop • Adobe Illustrator • Corel produkty • Gimp (free)

6. Návrh vzhledu - kresba • Každý grafický prvek má svou vlastní vrstvu • Jednoduchá změna barvy nebo umístění • Jednoduché vypnutí viditelnosti prvku • Možnost provádět změny přímo před zákazníkem – rychlejší konsenzus (Zákazník většinou rychleji pochopí, že jeho změny nejsou k lepšímu ) • Snadná správa layoutu • Prvky stejného oddílu stránky se sdružují do složek

7. Návrh vzhledu - kresba Rozložení jednotlivých prvků do zvláštních vrstev (barva pozadí, přechod, doplňky – každý zvlášť) Začátek kresby – pozadí, doplňující prvky pozadí.

8. Návrh vzhledu - kresba Kresba těla stránky, loga (nadpisu), pruhu pro menu, pozadí sloupce Použití vodících čar

9. Návrh vzhledu - řezání • V momentě, kdy je grafický návrh hotový, je třeba ho rozřezat na části odpovídající oddílům či elementům stránky. • Řezání spočívá v definování obdélníkových oblastí, které se ukládají automaticky jako samostatné obrázky • Před řezáním je třeba provést optimalizaci každého řezu – volba formátu (gif, jpg, png) • Oddíly s malým počtem barev – gif, fotografie – jpg, grafika s 8bit alfa kanálem - png

10. Návrh vzhledu - řezání Tělo stránky – hlavní kontejner má pozadí definované obdélníkem o výšce 1px. Toto pozadí se opakuje vertikálně U pruhu pro hlavní menu platí ten samý princip, v tomto případě se definuje výška obdélníku stejná jako výška menu, šířka 1px – obrázek se opakuje na pozadí Prvky, které se na stránce neopakují se řežou celé ve stejných rozměrech, které zabírají na stránce (hlavička, patička, logo, motiv atd…) Obdélník pozadí má šířku 1px – v CSS je pozadí definováno barvou a právě tímto obrázkem, který se opakuje po celé šířce stránky. Obecně pro prvky reprezentující plochy se snažíme nalézt vzor, který se opakuje – menší obrázek znamená menší datový průtok a rychlejší načítání. (vlastnost background-repeat)

11. Důležitá pravidla řezání • Pro velké plochy se snažíme řezat nejmenší možný vzor • Jednobarevné plochy neřežeme vůbec – v CSS je definujeme barvou pozadí • Řezání se provádí při vypnutých vrstvách výplňkových prvků (texty, nadpisy – pokud nejde o grafický prvek, ilustrativní fotografie a podobně) • Před řezáním je třeba důsledně zvážit kompozici – to vyžaduje zkušenosti • Před ukládáním je třeba nastavit optimální formáty pro jednotlivé řezy

12. Tvorba statického kódu • Paralelně se tvoří XHTML a CSS kód pro jednotlivé typy podstran webu (úvodní strana, kontakty, o společnosti…) • Snahou je vždy vytvořit v první řadě stabilní layout ze základních oddílů stránky, který funguje ve všech požadovaných verzích různých prohlížečů • Poté se doplňují drobné a dekorativní prvky

13. Testování • Testování probíhá paralelně s psaním statického kódu. • V momentě, kdy je hotová základní kostra stránky, je třeba ji otestovat, případně opravit nekompatibility v zobrazení • Tímto postupem lze chyby najít rychle a rychle odstranit • Nejčastější chyby v zobrazení jsou způsobeny odlišným výpočtem místa ve starších IE (Box model) a opomenutím clear za plovoucími prvky

14. Testování • Pro IE nelze předpokládat jednotnou verzi prohlížečů cílových uživatelů, navíc každá verze má odlišné chyby v zobrazení. Řešení poskytuje například volně dostupný nástroj IE Tester, který obsahuje vykreslovací jádra všech běžně dostupných verzí IE (5.5 – 9b) • Pro ostatní prohlížeče (Opera, FF, Chrome) stačí statický kód testovat v aktuální verzi prohlížeče (automatické aktualizace) • Samozřejmou součástí testování je i testování validity XHTML podle použité normy a CSS kódu • Testovat by se mělo i chování jednotlivých elementů při nečekaně velkém obsahu (sesrverside skript vyhodí cybové hlášení apod.)

15. Hotový statický kód • Po otestování je statický XHTML kód předán do rukou programátora • Nasazování CMS (content management system), Redakčního systému, webové aplikace šité na míru… • Výstup webové aplikace je determinován statickým kódem – elementům se mění pouze obsah, nikoli formátování nebo struktura (fotogalerie – mění se pouze fotografie, ne vlastnosti boxů) • Webovými aplikacemi se zabývá TNPW 2 (vřele doporučuji )

16. Některé často řešené problémy • Problikávání pozadí u blokových odkazů při :hover (některé prohlížeče) • Důvodem je prodleva vznikající načtením nového pozadí ze serveru • Řešením je použití složeného pozadí na element s pevnou šířkou, při hover se pouze posune pozadí (background-position) 200px 200px

17. Některé často řešené problémy • Problém stejně vysokých sloupců • V CSS obecně nejde nařídit více sloupcům, aby jejich výška byla stejná – podle nejvyššího z nich. • Řešení pomocí JavaScriptu • Řešení pomocí hacků • Řešení pomocí nadřazeného kontejneru s vhodným pozadím - pouze optické řešení avšak nejčistší a nejčastěji používané.

18. Některé často řešené problémy Na tomto místě fakticky končí levý sloupec. Opticky to tak však nevypadá, protože pozadí není nastaveno levému ani pravému sloupci (jsou průhledné), ale nadřazenému obalovému divu, který se roztáhne podle nejvyššího sloupce

19. Některé často řešené problémy • Asymetrické pozadí • Nalevo i napravo od vycentrovaného layoutu je jiné pozadí • Toto pozadí se při zmenšování okna schová, nezobrazují se horizontální posuvníky.

20. Některé často řešené problémy

21. Některé často řešené problémy • Řešením je výřez naznačený na obrázku a použití výřezu jako pozadí, které je přichyceno k hornímu okraji a vycentrováno background: #f8f7e5url(wdw-bg.jpg)no-repeatcentertop; V grafickém editoru je pak třeba provést řez pozadí zvlášť – při tomto řezu je viditelnost obsahové části vypnuta.

22. Konec prezentace • Otázky?