Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Tvorba webu v praxi Ing. Jiří Štěpánek. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek Grafický návrh •Návrh vzhledu výsledného webu •Konzultace.

Podobné prezentace


Prezentace na téma: "Tvorba webu v praxi Ing. Jiří Štěpánek. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek Grafický návrh •Návrh vzhledu výsledného webu •Konzultace."— Transkript prezentace:

1 Tvorba webu v praxi Ing. Jiří Štěpánek

2 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ého 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

3  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 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

4  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

5  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

6  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 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

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

8 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

9  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 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

10 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…)

11  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

12  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

13  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

14  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

15  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

16  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

17  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

18 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  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

20

21  Ř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;

22  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


Stáhnout ppt "Tvorba webu v praxi Ing. Jiří Štěpánek. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek Grafický návrh •Návrh vzhledu výsledného webu •Konzultace."

Podobné prezentace


Reklamy Google