Technologie pro publikování na webu 1

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


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)


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



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ášť)



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í


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


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


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


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.)


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 )


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


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é.




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


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.


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


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

Documents

Transcript of Technologie pro publikování na webu 1