Webový dizajn

Webový dizajn alebo webový design alebo webdesign je súhrnom výsledných spracovaní návrhov a požiadaviek pre koncept, funkčné riešenie a vzhľad webovej lokality, ktorý má byť funkčne spôsobilý pre zobrazenie a interpretáciu webovými prehliadačmi, alebo inými grafickými užívateľskými rozhraniami (skr.: GUI – "graphical user interface").

Príklad webovej stránky, ktorej dizajn je založený na využití kaskádových štýlov (CSS).

Prvé čo si návštevník stránky všimne je prirodzene vzhľad stránky: rozvrhnutie jednotlivých častí, farebnosť, obrázky, animácie, atď. – jedným slovom Web Dizajn. Práve toto vytvára prvý – najdôležitejší dojem.

Pri tvorbe webového dizajnu využívame:

• Značkovacie jazyky [Markup languages] (napríklad HTML, XHTML a XML)
• Webové štýly [Style sheet languages] (napríklad CSS a XSL)
• Skriptovanie na strane klienta [Client-side scripting] (napríklad JavaScript)
• Skriptovanie na strane servera [Server-side scripting] (napríklad PHP a ASP)
• Databázy [Database technologies] (napríklad MySQL a PostgreSQL)
• Multimédia [Multimedia technologies] (napríklad Flash)

Samozrejme, existuje množstvo iných kódovaní, jazykov a možností ako zapísať stránku, no tieto sú asi najpoužívanejšie a najrozšírenejšie.

Webové stránky môžu byť statické, alebo môžu byť naprogramované ako dynamické stránky, ktoré sa automaticky prispôsobujú vzhľadom alebo obsahom, v závislosti na množstve faktorov.

Prístupný webový dizajn

S cieľom sprístupniť sa musia byť webové stránky prispôsobené určitým „prístupnostným“ princípom. Tieto sú známe ako WCAG a sú zoskupené do nasledujúcich hlavných oblastí:

• Použitie sémantických značiek, ktoré zaistia zmysluplnú štruktúru pre dokument (t. j. webová stránka). Potom môžu byť rozpoznané inými webovými službami na iných webových stránkach. Štandardy pre sémantický web sú nastavené cez IEEE.
• Poskytnutie alternatívnych textov pre netextové objekty (napr. obrázky, multimédiá)
• Použitie hyperliniek (odkazov), ktoré dávajú zmysel, aj keď sú vytrhnuté z kontextu. (napr. vyhnite sa odkazom ako sú "Kliknite tu.")
• Nepoužívajte rámy (tzv. frames)

Použite radšej CSS ako HTML tabuľky pre rozvrhnutie stránky. Použitím tabuliek pre dizajn často spôsobíme nezrozumiteľnosť informácie pre tzv. užívateľských agentov (eng. user agents)

História

Tim Berners-Lee uverejnil to, čo je považované za prvé internetové stránky, v auguste 1991. Berners-Lee bol prvý, ktorý skombinoval internetovú komunikáciu (email a Usenet) s hypertextom (išlo len o prezeranie informácií uložených v jednom počítači). Webové stránky sú písané v značkovom jazyku nazývanom HTML, no predošlá verzia HTML bola veľmi jednoduchá, dávala dokumentu len základnú štruktúru (nadpisy a odseky) a možnosť prepojenia pomocou hypertextov. Tým sa líšila od existujúcich foriem komunikácie – užívatelia mohli ľahko prejsť zo stránky na stránku prostredníctvom odkazov.

Ako sa web a web dizajn vyvíjal, značkový jazyk sa menil. Stal sa zložitejším a flexibilnejším, pričom pribudla možnosť pridávať na stránku objekty, ako sú obrázky alebo tabuľky. Tabuľky boli pôvodne určené len na zobrazenie tabuľkových informácií, onedlho sa začali využívať aj ako tzv. „neviditeľné usporiadanie“, teda rozmiestnenie objektov na stránke. S príchodom kaskádových štýlov (CSS) sa stalo „tabuľkové rozloženie“ zastaraným. Skriptovania a konštrukčné štandardy W3C sa zmenili a vylepšili spôsob tvorenia Webu. S pokrokom webu boli založené desiatky tisíc firiem, ktoré sa venujú práve web dizajnu.

Základný postup pri tvorbe webu

Koncept webovej stránky

Základný koncept webovej stránky obsahuje požiadavky na jej funkčné a informačné rozloženie. Požiadavky na koncept stránky sa odlišujú od jej funkčného zamerania. Je rozdiel medzi funkčným rozložením tzv. webovej informačnej vizitky, informačným portálom, blogovacím systémom, diskusným fórom, internetovým obchodom a pod.

Copywriting

Tento výraz sa nedá presne a jednoslovne preložiť, ale voľne môžeme túto činnosť nazvať písanie textov pre web. Ide o to, aby ste dokázali v najkratšom a najzrozumitelnejšom texte osloviť svojho zákazníka. Tým by ste ho mali presvedčiť, aby nakúpil práve u vás.

Grafický návrh

Hlavnou úlohou je, na základe požiadaviek a pripomienok zákazníka, vytvoriť výslednú podobu webovej prezentácie. Platí tu jedna dôležitá zásada – grafická podoba musí rešpektovať účel a zameranie celého webu.

Kódovanie

V tejto fáze máme jedinú (niekedy nie jednoduchú) úlohu. Pripravený obrázok (grafický návrh) správne rozrezať a pomocou určených technológií (XHTML, CSS) ho predložiť internetovým prehliadačom ako šablónu. Vždy sa musíme snažiť o to, aby sa táto šablóna zobrazila rovnako vo všetkých dostupných prehliadačoch. Inak povedané, musíme vytvoriť zdrojový kód.

Programovanie

Keď je šablóna pripravená, dostáva sa na rad (pre väčšinu ľudí najzložitejšia) ďalšia vývojová fáza. Práve v tejto fáze do hotového tela (šablóna) vkladáme dušu! To má za následok, že po vyplnení formulára vám bude doručený mail, alebo možnosť komentovať články a mnoho iných vecí. Jednoducho povedané, zaisťujeme, aby celý web fungoval ako má.

Technológie

XHTML + CSS

Tieto jazyky slúžia na vytvorenie grafického rozhrania stránky ale aj na optimalizáciu pre vyhľadávače – SEO.

PHP, ASP

Skutočné programovacie jazyky. Tvoria funkčné moduly väčsiny dostupných stránok. Ich kód sa spracúva na strane servera, čo znamená, že v prehliadači vidíte iba výsledok ich práce.

Databázy

K funkciám PHP (ASP) neodmyslitelne patrí aj používanie databáz. SQL je jazyk umožňujúci komunikáciu medzi aplikáciou a databázou (toto neplatí iba pri webe). Vo webdesigne sa najčastejšie používa MySQL (na linux serveroch) alebo MS SQL (na Windows serveroch). Poznáme aj rône iné databázy, ale tie sa pri práci s webom využívajú podstatne menej.

JavaScript

Skriptovací jazyk – používa sa na rôzne drobnosti, ako napr. zisťenie rozlíšenia monitora – na rozdiel od PHP sa spracúva na strane klienta – teda vo vašom PC (a vy si môžete pozrieť jeho zdrojový kód).

Dizajn stránok

Pre typické webovej stránky sú základné aspekty designu:

• Obsah: Témy a informácie na stránke by mali súvisieť so zameraním stránky a s oblasťou, pre ktorú bola stránka vytvorená.
• Použiteľnosť: Stránka by mala byť zrozumiteľná pre návštevníkov svojim rozhraním a jednoduchou navigáciou.
• Vzhľad: Grafika a text by mali mať spoločný znak, mali by patriť do jedného štýlu. Štýl by mal byť profesionálny a zaujímavý.
• Viditeľnosť: Stránka sa musí dať ľahko nájsť cez väčšinu, ak nie všetky, veľké vyhľadávače a reklamné média.

Webové stránky sa zvyčajne skladajú z textu a obrázkov. Prvá stránka webu je známa ako index. Niektoré webové stránky používajú tzv. Titulnú stránku (Splash Page). Titulná stránka zahŕňa uvítaciu správu, výber jazyka alebo regiónu, alebo vylúčenie zodpovednosti za obsah, atď. Každá webová stránka je HTML súbor, ktorý má svoju vlastnú URL. Po vytvorení každej webovej stránky, sú stránky spravidla spojené pomocou navigačného menu zložené z hypertextových odkazov.

Keď je webová stránka dokončená, musí byť zverejnená, aby bola viditeľná pre verejnosť prostredníctvom internetu. Slúži nám k tomu FTP klient. Po uverejnení, môže web master použiť rôzne techniky na zvýšenie návštevnosti – "predloženie" webovej stránky vyhľadávačom ako Google, Bing a Yahoo alebo výmena odkazov s inými webovými stránkami.

Požiadavky

Webová stránka je informačný systém, ktorého súčasti sú niekedy označované ako front-end a back-end. Viditeľný obsahu (napr. rozloženie stránky, užívateľské rozhranie, grafika, text, audio) je známy ako front-end. Back-end zahŕňa štruktúru zdrojového kódu, neviditeľné priebehy skriptov, a server-side komponenty, ktoré spracúvajú výstup z front-endu. V závislosti na veľkosti projektu môže byť vývoj webových aplikácií vykonávaný prostredníctvom web mastra, alebo môže manažér projektu dohliadať na členov skupiny s odbornými zručnosťami pri tvorbe webu.

Problémy

Rýchlym technologickým vývojom sa komplikuje získavanie a zavádzanie vhodných prostriedkov na udržanie "modernosti" webu.

Prostredie

Rozloženie je dvojsečná zbraň: je vizuálnym zobrazením toho, čo tvaruje web designer. Na druhej strane, je prostriedkom na doručovanie obsahu návštevníkovi. Web design obsahuje viac krížení medzi mnohými vrstvami technickej a sociálnej sféry, náročné kreatívne smery, grafické prvky a určité formy sociálnej organizácie, rozdielne ciele a metódy riešenia, efektívne nasadenie systému vzdelávania, softvéru a vedenie tímu počas procesu návrhu.

Spolupráca

Predošlý web design nezahŕňal mnoho podstatných vecí. Webové stránky boli z veľkej časti len statické on-line katalógy alebo zložky spojené s databázou, ktoré neboli prepojené s podnikom a jeho projektami. Informácie boli uvedené na web, no aktualizácia údajov, komunikácia firmy so stránkou a prostredníctvom nej aj so zákazníkmi boli takmer rarita.

Forma vs. funkcie

Webový vývojár môže venovať väčšiu pozornosť tomu, ako stránka vyzerá a zanedbávať napr. SEO optimalizáciu, čitateľnosť textu, ľahkú navigáciu stránok alebo to, ako ľahko návštevníci nájdu stránku. V dôsledku toho vznikajú rozpory medzi dizajnérmi, kde niektorí chcú viac grafických prvkov na úkor kľúčových slov, zoznamov s odrážkami a textových odkazov, ktoré sú potrebné pre vyhľadávacie roboty. Pretože niektorá grafika slúži okrem estetiky aj na komunikačné účely, tak funkčnosť stránky môže závisieť od nápadov na grafický dizajn, rovnako ako od profesionálneho písania stránky.

Použitím veľkého množstva grafiky sa môže načítavanie webovej stránky veľmi spomaliť, čo žiaden návštevník nemá rád. Tento problém sa vyriešil vznikom vysoko-rýchlostného internetu a využívaním vektorovej grafiky. Ale je tu ešte stále ambícia na zvýšenie prenosovej rýchlosti a "umelecká výzva" minimalizovať množstvo grafických prvkov a ich veľkosť (objem dát). Táto úloha je ešte umocnená tým, že zvýšenie prenosovej rýchlosti spôsobilo využívanie väčších rozmerov grafických súborov.

Zariadenia

Na webe nemá dizajnér žiadnu kontrolu nad viacerými faktormi: veľkosť okna a typ prehliadača, vstupné zariadenie (operačný systém, myš, dotykový displej, hlasový príkaz, text, mobilný telefón atď.) a veľkosť, dizajn a ďalšie vlastnosti písma, ktoré majú používatelia k dispozícii (nainštalované) a prednastavené na ich zariadení. Unikátne výrobky a zariadenia sú ďalšou komplikáciou, pretože prehliadač na nich zobrazí rovnaký obsah rôzne.

Web design bez tabuliek

Keď Netscape Navigator 4 dominoval trhu prehliadačov, obľúbené riešenie rozloženia webovej stránky pre návrhárov bola forma tabuliek. Často jednoduché veci na stránke by si vyžadovali desiatky tabuliek vnorených do seba. Mnohé webové šablóny v Dreamweaveri a ostatných WYSIWYG editoroch ešte dnes používajú tieto techniky. NN4 nepodporoval CSS v dostatočnej miere.

Po skončení vojny prehliadačov, vďaka dominantným prehliadačom ako je Internet Explorer (kompatibilnejší s W3C), začali návrhári využívať CSS ako alternatívny spôsob rozvrhnutia stránok. CSS zástancovia hovoria, že tabuľky by mali byť použité len na tabuľkové dáta. Pomocou CSS (namiesto HTML tabuľky) roboty vyhľadávačov pochopia, čo sa deje vo webovej stránke, keďže ide o sémanticke značkovanie. Všetky moderné webové prehliadače podporujú CSS s rôznymi stupňami obmedzenia.

Ale jednou z hlavných nevýhod CSS je, že každý prehliadač má svoje "maniere", ktoré spôsobujú mierne odlišné zobrazenie stránky. Toto je obzvlášť problém, pretože nie každý prehliadač podporuje rovnaké príkazy CSS. Existujú spôsoby, ako aplikovať rôzne štýly v závislosti na prehliadači a jeho verzií, ale začlenenie týchto výnimiek je ťažké, pretože štýly je potrebné aktualizovať na viacerých miestach.

Kvôli nedostatočnej informovanosti je pre dizajnérov, ktorí sú zvyknutí na tabuľkové rozvrhnutie, vývoj webových stránok v CSS často len akýmsi pokusom napodobniť to, čo možno urobiť s tabuľkami. Napríklad, bolo pomerne ťažké produkovať niektoré konštrukčné prvky, ako sú vertikálne polohy alebo objekty na celú šírku obrazovky v prevedení s použitím absolútnej pozície. S hojnosťou zdrojov CSS, ktoré sú dnes k dispozícii on-line, sa vyžaduje trochu viac, ako len správne použitie štruktúrovaného značkovacieho jazyka CSS 2.1 a CSS 3.

V týchto dňoch je veľa dostupných CSS rozvrhnutí pre moderné prehliadače. Ale, niektorí ľudia aj naďalej používajú staré prehliadače a návrhári musia vziať v úvahu zobrazenie stránok aj pre nich. Najčastejšie využívaný starý prehliadač je Internet Explorer 6, ktorý drží World Wide Web ďalej od pokroku k CSS. Ale W3 Consortium urobila CSS v kombinácii s XHTML štandardom pre web design.