WEB design II

TMW '2007 2

Layout stránok

Layout je rozvrhnutie stránky, udržuje ich logickú organizáciu nie len pre počítač, ale hlavne pre používateľa, ktorý vníma jednotlivé časti stránky ako logické celky (napríklad logo, navigačné menu, vlastný obsah, zápätie a ďalšie).

Každý tento celok by mal mať svoju stálou pozíciu, aby ho mohol používateľ rýchla a bez problémov nájsť očami, kedykoľvek to potrebuje.

Úlohou webdesignéra je čo najlepšie prvky na stránke rozmiestniť.

TMW '2007 3

Typy layout-ov

Rámcový layoutTabuľkový layoutStriktný DIV/CSS layout

TMW '2007 4

Rámcový layout

Začneme týmto prehistorickým, avšak napriek tomu dodnes používaným spôsobom tvorby stránok.

Základom je rámcová štruktúra, ktorá napríklad definuje, že navigačné menu je v zúženom ráme najčastejšie vľavo alebo hore a po kliknutí na položku v menu sa obsah načíta do hlavného rámca.

TMW '2007 5

Rámcový layout - výhody

Kód navigačného menu je na jedinom mieste, k jeho zmene stačí zmeniť jediný súbor. Toto je možné však dosiahnuť aj napríklad pomocou skriptov na strane serveru.

Navigačné menu stojí na mieste, takže na naň používateľ nemusí rolovať.

Používateľ môže veľkosť rámcov jednoducho prispôsobiť svojim požiadavkám (pokiaľ mu to stránka umožní).

TMW '2007 6

Rámcový layout - nevýhody

Môžu nastať problémy s tlačou, mnoho užívateľov nie sú schopní v prehliadači pri tlači nastaviť, aký rámec vlastne chcú vytlačiť.

Nie je možné vytvoriť odkaz na konkrétnu stránku (včítane rámcovej štruktúry), s tým súvisia aj možné problémy s pridaním vybranej stránky do "obľúbených" alebo s jej nastavením ako domovskej stránky.

Stránky s rámci nie sú indexované niektorými vyhľadávacími robotmi.

TMW '2007 7

Rámcový layout – nevýhody ...

Fulltextové vyhľadávače, ktoré indexujú dokumenty v rámcoch, potom pri vyhľadávaní ponúknu odkaz priamo na tento dokument - užívateľovi, ktorý na odkaz klikne, sa nenačíta rámcová štruktúra, takže potom vôbec neuvidí navigačné menu, a to výrazne znižuje použiteľnosť stránky.

Vlastný obsah aj menu majú svoj priestor obmedzený veľkosťou svojho rámca.

TMW '2007 8

Rámcový layout – nevýhody ...

V menu nie je možné (bez použitia JavaScriptu) zvýrazniť aktívnu položku, pretože v danom rámci zostáva stále rovnaký súbor.

Problémy na mobilných zariadeniach (PDA a podobne), ktoré rámce (väčšinou) nepodporujú.

TMW '2007 9

Rámcový layout ...

Podobne sme na tom, pokiaľ chceme používať vnorené rámce (iframes). Ty sú síce súčasťou stránky, avšak ich obsah je v oddelenom súbore a práca s ním môže opäť užívateľovi a indexom spôsobovať rovnaké problémy.

Rámcový layout nemusíme automaticky odsuzovať. Každý webdesignér by mal najskôr zvážiť všetky nevýhody, a pokiaľ zistí, že pre daný projekt nemajú veľký význam, môže rámce bez obáv použiť. Pre niektoré webové aplikácie naopak môžu byť rámce veľmi výhodné.

TMW '2007 10

Tabuľkový layout

Inou možnosťou, ako jednotlivé celky na stránke poziciovať, je „zneužitie“ tabuliek (table). Než sa rozšírili prehliadače s podporou CSS pozicovania, bola to jediná možnosť, ako umiestiť nejaký obsah na stránke vedľa seba.

Preto sa stal tabuľkový layout veľmi obľúbeným, a používa sa často dodnes, v dôsledku zmätenej situácie okolo CSS, ktoré pre mnohých nesplňuje očakávania.

TMW '2007 11

Tabuľkový layout - výhody

Jednoduchosť. Stačí trochu predstavivosti, zvážiť, ako chceme prvky umiestiť, vhodne použiť tabuľku a vypnúť zobrazenie okrajov a pozadie, vďaka čomu tabuľka nie je poznať.

Kompatibilita. Tabuľka pochádza z dôb pred CSS, sú dokonca staršie než rámce. Preto by sa riadne navrhnutá a napísaná tabuľka mala správne zobraziť aj na veľmi starých prehliadačoch.

TMW '2007 12

Tabuľkový layout - výhody

Tabuľky nám poskytujú pomerne široké možnosti, pričom mnoho z nich nemá svoj ekvivalent v CSS.

Dnes sa však bez nich webdesignéri obídu alebo využijú niektoré triky, ktorými je napodobia.

V CSS napríklad chýba vlastnosť ovplyvňujúca vertikálne zarovnanie vo vnútri bloku (vlastnosť vertical-align) a musí sa riešiť rôznymi fintami.

Taktiež tu v podstate stále nie sú (funkčné) vlastnosti, ktoré by nahradili funkciu tabuliek (umiestenie dvoch divov vedľa seba a zaistenie ich previazanosti - prispôsobenie šírky, výšky a podobne).

TMW '2007 13

Tabuľkový layout - nevýhody

Závislosť vzhľadu stránky na kóde. Dnešná doba požaduje vzájomné oddelenie kódu, významovo spätého s obsahom, od kódu, ktorý sa týka výhradne jeho vizuálneho znázornenie v prehliadači.

Tabuľka však jednoznačne hovorí "toto je prvý stĺpec a toto je druhý", ovplyvňuje teda vzhľad stránky a v HTML nemá čo robiť. (To však neplatí, pokiaľ chceme zobraziť skutočné "tabuľkové" dáta!)

TMW '2007 14

Tabuľkový layout - nevýhody

Neúspornosť kódu - uvedomme si ale, že neúspornosť kódu stránok s tabuľkovým layoutom nemusí súvisieť s tabuľkami ako takými, ale s tým, že autor zároveň nedostatočne využíva možností CSS, a v HTML tak nájdeme aj značky ako font, center a podobne.

Pomalosť - tabuľka sa totiž v niektorých prehliadačoch zobrazuje až keď získajú kompletný zdrojový kód, čo znamená, že sa stránka nezačne zobrazovať ihneď, ale až po úplnom načítaní.

TMW '2007 15

Striktný DIV/CSS layout

Pojem striktný preto, že myslíme tvorbu layoutu úplne bez použitia tabuliek. Tie sa používajú výhradne pre tabuľkové informácie.

Jedná sa o spôsob v dnešnej dobe veľmi moderný, hlavne v spojitosti s dodržaním poslednej striktnej verzie jazyka XHTML.

Miesto DIV/CSS by sme síce mohli písať len DIV, pretože obsah sa vkladá väčšinou do elementov div, a však bez CSS by sme žiadny plnohodnotný layout nevytvorili.

TMW '2007 16

Striktný DIV/CSS layout ...

Využívajú sa tu metódy nazývané CSS positioning.

Jednotlivé bloky sú obvykle vymedzené značkou div s atribútom id alebo class, ktorý výsek kódu nejako pomenuje, napríklad "header", "footer" a podobne.

Ich vzhľad je potom definovaný len pomocou CSS.

TMW '2007 17

DIV/CSS layout - výhody

Oddelenie obsahu od vzhľadu – kód je prehľadnejší a stručnejší, vďaka čomu sa načíta rýchlejšie.

Stránka vytvorená týmto spôsobom sa zobrazuje postupne s tým, ako sa načíta. Vďaka tomu môže používateľ vidieť na svojom monitore reakciu prehliadača takmer okamžite po kliknutí.

CSS je veľmi mocný nástroj, ktorý nám dovolí vykonávať na stránke pomerne veľa, vďaka tomu môže rozvrhnutie stránky vyzerať zaujímavo.

TMW '2007 18

DIV/CSS layout - výhody

Závislosť vzhľadu na platforme (médiu). Táto vlastnosť je veľmi významná, pretože vďaka niekoľkým CSS definíciám môže stránka vyzerať inak

na monitore (plnofarebná a využívajúca veľkosť obrazovky), inak

na mobilnom zariadení (užšie, s menej obrázkami a bez zbytočného plytvania miestom) a inak

vytlačená (opäť s upravenou šírkou stránky, menej farieb a podobne).

TMW '2007 19

DIV/CSS layout - nevýhody

Neúplná podpora zo strany prehliadačov. Rôzne browsery podporujú rôzne množiny

vlastností CSS rôznym spôsobom, a neexistuje žiadny prehliadač, ktorý by je podporoval presne podľa noriem W3C. Strata času a experimentovanie - rad rôznych

prehliadačov, a to ešte v niekoľkých rôznych verziách.

TMW '2007 20

DIV/CSS layout - nevýhody

Neprehľadnosť CSS kódu. Zatiaľ čo pri pohľade na dve vnorené tabuľky

je pomerne rýchle zrejmé, ako bude výsledok vyzerať, pri pohľadu na CSS definície trvá relatívne dlho, než si človek uvedomí, akým spôsobom stránka "funguje".

Obvykle pritom musí neustále prepínať medzi HTML a CSS kódom. Z tohto dôvodu je dobré zvyknúť si na dodržiavanie určitej štruktúry a poradie vlastností v CSS, značne si môžete uľahčiť neskoršiu orientáciu - rozdelenie kódu do viacerých súborov.

TMW '2007 21

Rýchlosť zobrazenia

Hlavní rozdiel spočíva v tom, že algoritmus pre formátovanie tabuliek je výrazne zložitejší než algoritmy pre zobrazovanie bežných jednoduchých konštrukcií v CSS.

A však aj CSS obsahuje zložité algoritmy, niektoré dokonca zložitejšie a náročnejšie než tie tabuľkové.

Výrazne rýchlejšie zobrazovanie stránky je možné dosiahnuť len pokiaľ je jej formátovanie pomerne jednoduché a lineárne.

TMW '2007 22

Rýchlosť zobrazenia ...

Ak obsahuje vnorené alebo veľmi rozsiahle plávajúce prvky, bloky, ktorých rozmery či pozície sa musia dopočítavať na základe formátovania iných prvkov, a podobné náročné konštrukcie, nemôžeme očakávať výraznejšie úspory.

Najrýchlejšie sa formátujú stránky lineárne (len bloky s position:static bez plávajúcich prvkov) a absolutne poziciované s určenými rozmermi - ak sa neurčia šírky pozicovaných prvkov, musia rozmery dopočítavať, musí čakať na načítanie celého / iného prvku

potom trvá zobrazenie dlhšie.

TMW '2007 23

Menší kód stránok

Pokiaľ hovoríme o tabuľkových weboch, nemáme obvykle na mysli stránku, kde je jedna tabuľka, pomocou ktorej autor rozdelil obsah do troch stĺpcov, a zvyšok je formátovaný pomocou CSS.

Ďaleko častejší je stále ten starý spôsob formátovania, kedy sú v bunkách tabuliek vložené ďalšie tabuľky, v nich niekedy ďalšie; zarovnávanie blokov je riešené atribútom align=..., pre štýl pozadia je tu bgcolor=... atď.

TMW '2007 24

Ideálna metóda

Ako obvykle, ani tu neexistuje. Najlepšia pre užívateľov je dnes zrejme DIV/CSS layout, a však pokiaľ je skutočne dobre vyvinutý a otestovaný.

Pokiaľ sa nájde užívateľ, ktorého prehliadač CSS nepodporuje dostatočne korektne a stránka by sa mohla rozpadnúť, môže mu byť prístup k CSS definíciám úplne zamedzený, takže sa mu zobrazí len obsah so základným formátovaním.

Je to oveľa lepšie, než nefunkčný polotovar, na ktorom dokonca môžu byť niektoré časti celkom neprístupné.

TMW '2007 25

Ideálna metóda ...

Pre začiatočníka je však tento spôsob tvorby veľmi náročný a v prípade nutnosti by mohol v niektorých prípadoch navyše využiť aj tabuľky.

Je si treba uvedomiť, že tabuľkový a DIV layout sa môžu vzájomne prelínať a ich spoločné použitie sa nevylučuje, aj keď tým prídeme o niektoré výhody striktného DIV/CSS layoutu.

TMW '2007 26

Design a webdesign

problém môže byť v tom, že niekto si pod pojmem design/návrh predstavuje len grafický design, teda to, ako výsledok vyzerá navonok.

Ale to samozrejme nie je pravda. Grafický design je jen malý zlomok celkového

designu — návrhár (t. j. designer) navrhuje produkt ako celok.

Rovnako ako v priemyslovom designe hrá aj vo webdesigne rolu celý rad faktorov

TMW '2007 27

Faktory dizajnu

Záleží na zámere webu, na cieľoch, ktoré majú stránky spĺňať, na parametroch cieľovej skupiny, na technologickej náročnosti, na prevádzkových nákladoch, požiadavkách na správu, údržbu atď.

TMW '2007 28

XHTML+CSS alebo Flash

Web a Flash sú celkom odlišné pojmy. Flash nie je web. Flash nie je webová technológia. Flash nie je druh webu. Nič takého ako webová stránka vo Flashi neexistuje.

Flash je samostatná technológia, ktorá nemá s webom nič spoločného.

Tie takzvané "webové stránky vo Flashi" nie sú nič iné než špeciálne binárne súbory, ktoré dokáže zobraziť len software spoločnosti Macromedia.

TMW '2007 29

Jazyk (X)HTML

Má nástroje, pomocou ktorých môže v stránke vyhradiť prázdny rámček pre akýsi jemu neznámy kód a umožniť následne nejakej cudzej aplikácii (pokiaľ je na koncovom zariadení nainštalovaná) jej v tomto rámčeku spracovať.

Tak sa do stránky dá vložiť aplikácia napísaná v Jave, 3D model, VRML scéna, hudobný sekvencér, flash - čokoľvek len musí byť nainštalovaný príslušný software (plug-in).

Ďakujem za pozornosť ...

Doc. Ing. Juraj Vaculík, PhD.