spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Peter Druska 30.9.2010, článok je súčasťou seriálu Modelovanie webového sídla
Hodnoť článok:
0 0

Modelovanie webového sídla

Vytvoriť webové sídlo na zákazku klienta je dodnes chápané ako zapracovanie všetkého, čo si klient želá. Malo by to tak byť, no vo webových technológiách narážame na obmedzenia, ktoré musia byť odkomunikované a vysvetlené, aby bol klient maximálne spokojný aj vtedy, keď nie všetky želania je možné splniť.

V tomto smere je nutné od nás, ako cechu webových majstrov, patrične s klientom komunikovať o trendoch a opatrne i citlivo ho dostať do problematiky, ktorá momentálne vládne svetu webového dizajnu. Oboznámiť ho s obmedzeniami, ktoré na nás číhajú.

Tak, ako i automobily majú svoje obmedzenia (športovým autom nepôdjete do terénu a servis na ňom neurobí úpravy, aby mohlo jazdiť aj v polmetrovom blate), tak i poslanie a účel webového sídla má isté obmedzenia, čo do použitia. Takto treba k tvorbe i pristupovať a správne to klientovi oznámiť.

Moja teória prezentovaná na žilinskom BarCamp-e 11.9.2010 preskočiť vytváranie návrhu webového sídla v grafickom editore a tvoriť priamo CSS/HTML sa stretla so značnou kritikou a diskusiou. Verím, že zasiahla mnohých do centra ega v tom zmysle, že sa zrazu ocitli nepotrební v procese vývoja. Chápem to, aj ja by som sa tak cítil, no netreba vešať hlavu na klinec. Každý, kto sa cíti byť grafikom a pracuje na grafických návrhoch webových stránok je užitočný a potrebný v tomto procese. Stačí sa len spojiť s kóderom CSS/HTML, prípadne naučiť novú vec. Profesionálny grafik s tým nebude mať problém a pomôže to celej spoločnosti. Taktiež naopak, profesionálny kóder by si mal vedieť osvojiť princípy grafického dizajnu.

Grafik nemusí hneď ovládať CSS na profesionálnej úrovni, stačí vedieť, aké sú obmedzenia a pracovať priamo s kóderom a dodávať mu jednotlivé časti grafického návrhu, nie ako celok. Všetci by sme sa mali snažiť získať z každej oblasti ľudskej činnosti, s ktorou naša práca súvisí, časť vedomostí, aby tok práce bol čo najviac plynulý. Prečo o tomto probléme hovorím?
Chcem ukázať riešenie, ako zefektívniť čas na prácu, ako získať relatívne veľa času na premyslenie konceptu a nestratiť ho pri konzultáciách o obrázku, ktorý nezvýrazní nedostatky v používateľskom rozhraní.

Stav dnes
Aký je stav dnes? Už sme to naznačili v odsekoch vyššie:

1) klient má záujem o vytvorenie webového sídla,
2) webový dizajnér pošle sériu otázok, ktoré potrebuje k prvému návrhu,
3) klient odpovie a špecifikuje problém,
4) grafik posiela prvý návrh (skica, alebo hrubý náčrt v grafickom editore),
5) body 4, 5 sa opakujú, kým nie je návrh schválený,
6) grafický návrh je schválený a posúva sa ďalej kóderovi, ktorý komunikuje s grafikom, zväčša nie s klientom,
7) návrh je zapracovaný ako šablóna CSS/HTML,
8) webové sídlo je hotové a nasadené.

Schválne som vynechal nakódovanie skriptov a databázovej vrstvy, tie nie sú pre naše rozprávanie dôležité momentálne, čím ich dôležitosť nezjednodušujem, ale nemusíme si to momentálne komplikovať.
Prečo chcem inovovať vyššie popísaný postup? Chýba mu totiž interakcia, celková tvorba pocitov zo sídla a spätná väzba. Čo tým myslím?

Interakciou a spätnou väzbou myslím možnosť vyskúšať si prácu s hrubým návrhom ešte skôr, ako dostane detailnú grafiku. Či sa tie odkazy správajú tak, ako si klient želá, že hlavička by mala klikať tiež, len nie na úvodnej stránke. Či sa ten formulár dá prejsť pomocou tabulátora, alebo či je to len zmes chaotických preskokov.

Bodov interakcie používateľa (teraz klient) s webovým sídlom a jeho stránkami je množstvo. Výhodou tohto riešenia je to, že niektoré chyby sa odladia skôr, ako si webový dizajnér myslí.

Tvorbou pocitov zo sídla myslím vnemy, aké zanecháva kliknutie na odkaz, odoslanie formulára, otvorenie obrázku. Či stránka dáva vhodnú spätnú väzbu pre používateľa a podobne. Stránky sa musia podvedome dobre používať a mali by sa v čo najväčšej miere samo vysvetľovať - opakujúce sa prvky, ktoré používateľ už spoznal a s ich pomocou vysvetľovať prvky ešte nespoznané.

V podstate nehrá úlohu zložitosť dizajnu, ale jeho použiteľnosť. Kým „plagát“, ako nazývam grafický návrh z Photoshop-u, Illustrator-a, Gimp-u alebo iného grafického editora je len na ohúrenie svojimi prvakmi, odleskami, niečo ako nálepka o počte farieb bežného displeja. Žiaľ, bežný používateľ nemá záujem o okrasy, ale o funkcie. Funkcie sa z obrázku, z plagátu vyčítať nedajú. Je pravda, že web sa tak dá predať, ale reálne poklikanie si na jednotlivé prvky umocní dojem z výsledku a vytvorí relevantnú diskusiu. Môže to byť napríklad webové sídlo postavené čisto na typografii bez jediného obrázku nakresleného v grafickom editore. Rozdiel medzi plagátom a klikateľným sídlom je v tom, že ten druhý umožní obchytať si ho, kým plagát len láka a skrýva tajomstvá, risk.

Týmto neodsudzujem prácu grafikov, ich prínos je obrovský a inšpiratívny. Ukazujem, o čo všetko sa CSS/HTML model webovej stránky líši od grafického návrhu vo Photoshop-e alebo inom.

Navrhovaný model

Navrhované modelovanie webového sídla priamo v CSS/HTML umožňuje takýto postup:

1) klient má záujem o vytvorenie webového sídla,
2) webový dizajnér vyrobí návrh v prehliadači (konzultácie s grafikom, grafik robí úpravy), ktorý poskytne klientovi a ten si ho môže poklikať, pozrieť, ohmatať,
3) klient dá spätnú väzbu,
4) body 2, 3 sa opakujú, kým nie je návrh schválený,
5) schválený návrh sa doplní o „motor“, o pozadie pracujúce so skriptami a databázami (ak treba).

Vďaka skráteniu procesu „podávania si horúcej kaše“ sa získa množstvo času, ktorý môže byť investovaný do podrobného spracovania detailov, ktoré ako spätnú väzbu poskytuje klient. V tomto prípade figuruje ako prvý používateľ, testujúci a ukazuje nám cestu, ako bude webové sídlo používať. Toto plagát nikdy nedosiahne.

Kritika
Tento model sa stretol s kritikou hlavne v tom smere, či už nejaké webové sídlo takto vzniklo. Áno, vzniklo, ja aj kolegovia sme už týmto spôsobom pracovali a existujú s ním reálne skúsenosti. Preto som sa ich opýtal, ako vnímajú tento proces tvorby a pridal svoje postrehy.

Erik Nota

Záleží na konkrétnom projekte. Charakter produktu napovedá aký nástroj je vhodné použiť. Na začiatku cesty ku hotovému webu je papier, niekde v tretine obrázok z editora a HTML/CSS šablóna väčšinou s konečným produktom priamo susedí.

Práca v grafickom editore je práca s obrazom - formou. Editor bol navrhnutý pre tvorbu statických posolstiev (plagát). Je v ňom jednoduché robiť rozhodnutia ohľadne farieb a tvarov, či kompozície. Je v ňom skoro nemožné naznačiť a navrhovať interaktivitu. HTML na opačnej strane je dieťaťom hypermédií. Interaktivita je jeho primárna vlastnosť. Umožňuje priamo ukázať informácie v „pohybe“. Formát (pracovná plocha), farebný gamut, fyzická veľkosť produktu je pri printových médiách jasne definovaná a nemenná. Web si ľudia prezerajú na nespočetnom množstve rôznych zariadení rôznej veľkosti a s rozdielnym rozlíšením a kvalitou obrazovky.

Samozrejme, existujú weby ktoré sú plagátom a nie je žiadny dôvod netvoriť ich pomocou podobných postupov ako v printe. Dizajn je ale spojením formy a funkcie a vždy berie do úvahy obmedzenia technológie. Ak by dizajnér navrhoval stoličku, alebo architekt navrhoval dom bez toho aby bral obmedzenia technológie do úvahy, neskočilo by to dobre. A to bez ohľadu ako pôsobivo by to na monitore vyzeralo. Tak ako printový grafický dizajnér musí poznať technológiu tlače a jej obmedzenia, je jeho webový kolega povinný poznať technológie, s ktorými on pracuje.

Aby som to zhrnul, web by mal dizajnér vytvárať pomocou nástrojov webdizajnu (HTML a CSS). Obrázky zase pomocou nástrojov na ich tvorbu (grafický editor). Získa tak priamy náhľad (nátlačok) svojej práce v prirodzenom prostredí prehliadača a odstráni väčšinu nedostatkov dizajnu, ktoré by v grafickom editore jednoducho prehliadol.

Števo Bačkor

Problém v súčasnosti nastáva, keď použijeme príliš veľa „photoshopu“. V procese vizuálneho návrhu webu nastáva čas, kedy je potrebné uzavrieť brainstorming vo „fotošope“ a nápady prehodiť do podoby HTML/CSS.

Môže byť kriticky dôležité, aby tento prechod spadal do kompetencie webdizajnéra (teda operátora „photoshopu“, grafického návrhára). To znamená, že web navrhuje autonómna entita znalá nie len mágie „fotošopu“, ale tiež čara HTML a CSS. Photoshop nebol a nie je stvorený pre tvorbu webu, pokiaľ nebude implementovať vymoženosti kaskádových štýlov, resp. vlastnosti prehliadačov (napr. relatívne rozmery elementov voči canvas, vlastnosti dedičnosti a teda štruktúrovanie, väzby medzi dokumentami, …).

Vyššie citovaní ľudia tvoria webové sídla postupom v článku opísaným. Tento komplexný problém chcem časom rozpísať podrobnejšie, venovať sa každému jeho bodu, aby sa podarilo vytvoriť celkový rámec od komunikácie s klientom, cez obmedzenia, ktoré webová tvroba zahŕňa, a ktoré často klient chce prekračovať, až po tok práce v tíme. Nebude to cesta jednoduchá, nebude lineárna, verím, že nebude ani márna. V konečnom dôsledku by sa z toho mala vytvoriť akási norma určujúca pravidlá webového dizajnu.

Peter Druska Peter Druska

Vyše 13 rokov som robil CSS/HTML šablóny webových sídiel ako Pokec.sk, Azet.sk a iných. Robil som vlastné iOS appky, neskôr som prešiel programovať najskôr do Starbug.eu, neskôr do Inloop.eu. Pomedzi to som učil chvíľu na gymnáziu, no odišiel som, pretože som bol myslením nekompatibilný. Po inloope som prešiel do firmy become.sk, kde mám za úlohu vybudovať oddelenie mobilného vývoja. Tomu sa teraz venujem naplno, popri tom robím aj vývoj pre iOS. Tu sme založili značku Bedots.eu.


Hodnoť článok:
0 0

0 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

Zajtra.sk > Programovanie > CSS/HTML > Modelovanie webového sídla


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama