Poznate zaujimave weblogy?
Zostavuje sa slovenska bloggerska elita pre rok 2008
Minuly rok Vas zaujala, co nove bude teraz?
30. november 2006 12.30 WEB
Čo s tými 5 % vo fluidnom layoute
Veľmi radi sme si pomazali ego, až sa leskne, významom typografie na webe. Povýšili sme ju na jedinú modlu ohýbajúcu všetko ostatné vysielané obrazovkou k očiam nebohého návštevníka: Spravte najprv kostru s textom! Pohrajte sa s písmom! Otestujte čistý layout! A keď Vám zostane čas, vyplnte to troškou grafiky!
Práve posledná veta zostáva jablčným vínom sváru. Práve v tomto sa zamotávame v diskusiách o význame webu v komplementárnom spojení s vizuálnym zážitkom. V obrázkoch vkladaných ako púha (zároveň žiadaná, zároveň informačne zbytočná) ego vlastníka a autora masírujúca proprieta celku, ktorý hádžete ako svine perlám je tých zostávajúcich päť percent.
Najhlasnejšie skandovanie spojené s mexickými vlnami prichádza vo vetách ako je nemožné skĺbiť dokonalú webovú grafiku (povážte, že na 96 DPI webovej stránky voči 3-6 tisíckam DPI stránok časopisu Playboy) s viewport rešpektujúcim layoutom. Vraj to nejde. A ide to len s krvavými šrámami na koncepcií, vzhľade webu a hlavne na duši grafika.
Nejde ten 800 pixelov (pardón po novom 1024) široký obrázok "gumičkovať" a keby sa gumičkoval, tak sa vlastne poškodzuje. Strašné veci sa to dejú.
Skúsme teraz hľadieť na layout stránky vrátane grafiky ako na vrece plné objektov.
Pozrime sa na svoje výtvory na webe - iba pohľadom. Odlíšte jednotlivé prvky, objekty. Sú to skutočne objekty? aj tá efektne ohnutá fotografia otočená o 10 stupňov s tieňom cez ktorú je položené plniace pero? Je to objekt? Alebo je celý tento výjav akási kompozícia a objektom je akýsi obdĺžnik?
Nie je náhodou ten kruh s extra super ponukou nakoniec fyzicky zložený z dvoch dielov, ktoré ste prácne "naštelovali" k sebe ako dlaždičky?
Rozoznateľné objekty na stránke by mali byť skutočnými objektami v layoute.
Skutočné objekty rozmiestnite na stránke a určite im vo vzťahu k viewportu alebo k iným prvkom jasné pravidlá. Nastavte im medze voľnosti. To je zásadný rozdiel od postupu, kedy grafickú časť uložíme z Photoshopu ako JPEG.
Vytvorte aj objekty, ktoré nie je vidno. Ako príklad majme výjav, kde skala zakrýva slnečný kruh, sú tri objekty. Pozadie s horizontom, skala v popredí a slnko. Už nie je slnko necelý kruh. Ponechajme ho celé a objektom skala ho iba prekryme. Určime vzťah slnka k pozadiu, vzťah skaly k slnku.
Povedzme si, že slnko bude vždy niekoľko dĺžkových jednotiek od ľavého okraja kompozície. Skala bude vždy v strede kompozície.
Vo fixnom webe nemáme s kompozíciou problém - je to jedna fotka a bodka.
V adaptívnom layoute však menia objekty svoje vlastnosti. Pozadie sa rozširuje. V našom prípade sa rozširovaním pozadia mení vzdialenosť slnka a skaly. V jednom okamihu slnko vykukne spoza skaly celé. V inom sa úplne skryje.
Áno, je to pracné a náročné na fantáciu. Dokonca veľmi ťazko realizovateľné, pokiaľ podklad na web je jediný veľký jpeg.
Dokonca musíme myslieť aj na časti objektov, ktoré nie je v ideálnej kompozícií vidieť.
Po rozklade kompozície (skôr vo výtvarnom zmysle) by sme mali myslieť na už spomínané "neviditeľné" časti objektov a aj celkom skryté objekty.
Fyzicky objekty polohujeme prostriedkami CSS (ale aj v štruktúre HTML dokumentu). Môžeme tak slnko nastaviť na pozíciu absolute top center. Kopec na top right. Pozadie bude nejaký horizont v background top right aby nam kopec neputoval krajinou pri rozširovaní okna prehliadača. Logo stránky absolute top left.
Predstavili ste si to?
Horizont musíme navrhnúť najlepšie opakovací - aby pri napojení pravého okraja plynule naviazal na ľavý - niečo ako 360 stupňový horizont. Objekty ako logo, slnko a vrch vytvorime s priesvitným alfa kanálom.
Môj príklad je pomerne jednoduchý a ľahko sa skonštruuje aj v hlave.
Celkom určite však urobíte aj omnoho zložitejšie konštrukcie aj so spojením fixovaných pozadí, zložitých prekrytí objektov vo viac ako dvoch vrstvách.
Dosť sa to podobá práci s programom Adobe Photoshop pri práci s layers.
Pokiaľ ste nepostrehli prečo hovorím o 5 percentách, tak si prečítajte články
Fotografia z fotosearch.com
pošli do vybrali.sme.skKomentáre k obsahu príspevku:
Chcete napísať nesúhlasný komentár? Prosím, zvážte nasledovné: je šanca, aby niekto zmenil Váš názor alebo chcete iba trvať na svojom? V prvom prípade sú Vaše slová vítané.
Chcete urážať? Nepíšte sem urážky a invektívy. Každý, kto na týchto stránkach publikuje je automaticky (doplňte vhodný výraz). Takže už to všetci vopred vieme, čo si myslíte a preto sa neopakujte.
-
- A tvoj názor?
Podmienky pre Váš komentár: Tlačidlo na odoslanie stlačte 1x, v texte nenadávajte, nevkladajte linky za účelom SEO, nepropagujte, Váš text musí mať zmysel, neporušujete vlastnícke práva majiteľa tejto stránky, ste pravidelný čitateľ tejto stránky, komentujete príspevok (nie erupcie Slnka) a nemýlite si komentáre s kvákacími fórami a chatom. Používajte formátovanie TEXTILE najmä na odkazy! Rozumiete tomuto poučeniu? áno, nie alebo Týmto sa pošle komentár?
