WEB design II

1. WEB design II

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áloupozí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ýlayout • Tabuľkový layout • Striktný 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 niesú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 priestorobmedzený 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, odkó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 elementovdiv, a však bezCSS 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 mobilnomzariadení (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ýraznezlož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šiezobrazovanie 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 rozsiahleplá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ťnanačí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 namysli stránku, kde je jednatabuľ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). TMW '2007

30. Ďakujem za pozornosť ... Doc. Ing. Juraj Vaculík, PhD.