Technologie pro publikování na webu 1
Tvorba webu v praxi
Ing. Jiří Štěpánek
Proces vzniku webu
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Grafický
návrh
•Návrh vzhledu výsledného webu
•Konzultace se zákazníkem, úpravy
Tvorba
statickéh
o kódu
•„Řezání“ grafického návrhu na části
•Formátování CSS, psaní XHTML
•Testování statického kódu na kompatibilitu zobrazení
Dynamika
•Programování aplikační logiky (PHP, ASP.NET, JSP…)
•Statický kód slouží jako šablona výstupu webové aplikace
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í menuTechnologie pro publikování na webu 1, Ing. Jiří Štěpánek
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
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
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)
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
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žekTechnologie pro publikování na webu 1, Ing. Jiří Štěpánek
Návrh vzhledu - kresba
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Začátek kresby – pozadí, doplňující
prvky pozadí.
Rozložení jednotlivých prvků
do zvláštních vrstev (barva pozadí,
přechod, doplňky – každý zvlášť)
Návrh vzhledu - kresba
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Použití vodících čar
Kresba těla stránky, loga
(nadpisu), pruhu pro menu, pozadí
sloupce
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 - pngTechnologie pro publikování na webu 1, Ing. Jiří Štěpánek
Návrh vzhledu - řezání
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
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)
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í
Tělo stránky – hlavní kontejner má pozadí definované obdélníkem o výšce 1px. Toto
pozadí se opakuje vertikálně
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…)
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
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
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
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
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
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
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 (sesrver side skript vyhodí cybové hlášení apod.)
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
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 )
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
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)
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
200px 200px
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é.
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Některé často řešené problémy
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
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
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.
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Některé často řešené problémy
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
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
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
V grafickém editoru je pak třeba provést řez pozadí zvlášť – při tomto řezu je viditelnost obsahové části vypnuta.
background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;
Konec prezentace
Otázky?
Příště: Ing. Martin Adámek Časté chyby v projektech, letmý přehled
základů PHP…
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek