Technologie pro publikování na webu 1 Tvorba webu v praxi Technologie pro publikování na webu 1 Ing. Jiří Štěpánek

Tvorba statického kódu Proces vzniku webu 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 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

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

Začátek kresby – pozadí, doplňující prvky pozadí. 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í. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Kresba těla stránky, loga (nadpisu), pruhu pro menu, pozadí sloupce Návrh vzhledu - kresba Kresba těla stránky, loga (nadpisu), pruhu pro menu, pozadí sloupce Použití vodících čar Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

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

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

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

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

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 background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; V grafickém editoru je pak třeba provést řez pozadí zvlášť – při tomto řezu je viditelnost obsahové části vypnuta. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

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