15.11.2009 | Návody | Pridaj komentár

Ako pripraviť návrh webu pre kódera

Môj internetový kamarát nazývaný Shaggy, povolaním HTML kóder, povedal mi jedného dňa, že by som mala napísať nejaký článok o tom, ako pripraviť web stránku pre kódera, nakoľko je z podkladov jemu dodaných často zúfalý. Tak teda tu je. Tento návod nie je návodom pre retardérov, ktorí si práve otvorili Photoshop a táto skutočnosť ich inšpirovala k tomu, že si spravia kúl web. Je to skôr pripomenutie nejakých skutočností ľuďom, ktorí sa grafike venujú dlhšie, sú zorientovaní v programoch, len akurát grafický návrh webu nie je tou prácou, ktorú vykonávajú bežne, ale stretnú sa s ňou len kedy-tedy.

Štandardy nie sú, dohodnite sa

Ako pozerám, tak pozerám, žiadne štandardy pre dodávanie grafických podkladov na kódovanie nevidím. Možno je to preto, lebo takú web stránku vytvára obyčajne jeden človek, čo sa prepína z režimu grafik do režimu kóder a opačne. Alebo stránka vzniká ako spolupráca viacerých ľudí z jednej firmy. Čo je z hľadiska prípravy na export to isté ako one man show. V rámci firmy síce existujú funkčné pravidlá, ale ich funkčnosť je závislá od prostredia konkrétnej firmy. T. j. v prostredí inej firmy, používajúcej iné hardvérové a softvérové vybavenie, by tieto pravidlá nefungovali.

Vychádza mi z toho len jedno: grafik a kóder sa musia dohodnúť, do akého formátu exportovať zdrojové súbory. S najväčšou pravdepodobnosťou to bude nejaký privátny formát zachovávajúci vrstvy dokumentu, ako napríklad PSD (Adobe Photoshop), CPT (Corel Photo-Paint), XCF (GIMP) a i.

Ak každý z vás disponuje iným programovým vybavením (napríklad GIMP vs. Photoshop), nepotrebujete za každú cenu formát, ktorý podporuje vrstvy. Stačí formát s bezstratovou kompresiou – najvhodnejšie sa ukazuje PNG. Grafik pošle kóderovi viac súborov (stránku s vypnutým pozadím, stránku bez textov, stránku bez niektorých grafických prvkov atď.), s ktorými sa dá pracovať rovnako dobre, ako s vrstvami.

Ďalšou možnosťou je použitie viacvrstvového TIFFu. Grafické programy ako GIMP, Pixel, Paint.NET alebo Corel Photo-Paint nepodporujú export do TIFFu so zachovaním vrstiev (vrstvy budú zlúčené), takže by ste takéto TIFFko museli vytvoriť pomocou ďalšieho programu, určeného na konvertovanie súborov. To sa mi už vhodnejšie zdá použiť export do formátu PSD, resp. PNG.

Čo nenavrhnete, to na stránke nebude

Počítajte s tým, že web obyčajne nemá len úvodnú stránku (najčastejšie index.html). Aj jednoduchý web sa skladá z niekoľkých podstránok s rozdielnou štruktúrou. Inak bude vyzerať úvodná stránka, inak stránka s fotografiami, inak stránka s kontaktným formulárom. Ste to vy, kto musí určiť hover efekty na všetky tipy odkazov. Vy musíte navrhnúť, ako bude vyzerať nadpis a podnadpis článku. Vy riešite umiestnenie obrázka v texte, citáciu, zoznamy, tabuľky, galérie, ankety, formuláre... Vy dizajnujete komentáre pod článkom.

Mali by ste byť dôslední a na nič nezabudnúť. Kóder nie je povinný robiť niečo za vás. Ak neskôr zistíte, čo všetko vám na webe chýba, "dokódovanie" môže zvýšiť vaše predpokladané náklady.

Každý pixel je dôležitý

Asi najväčšou pliagou všetkých "printových" grafikov, ktorí sa pustia do tvorby webu, je nepresnosť. Na taký plagát grafik ukladá veci len tak (rozumej báj očko), ako mu to našepkáva jeho estetické cítenie a požiadavky klienta. Milimeter hore dole si nikto nevšimne. Lenže kóder nie je grafik. A už vôbec nie printový. Kódera si my grafici môžeme predstaviť ako Nea z Matrixu. Tam, kde my vidíme obrázok, on vidí šírku, výšku a pozíciu na osiach X a Y. Preto musí mať každý dôležitý objekt na našom návrhu svoju presne určenú veľkosť a presne určené miesto. Bohužiaľ, za dôležitý objekt môžeme v tomto prípade považovať aj medzeru. :D

Základný predpoklad na dosiahnutie presnosti je ten, že stránku vytvárame v mierke 1:1, v rozlíšení 72 dpi. Pri umiestňovaní prvkov sledujeme pravítka a pomáhame si vodiacimi linkami a mriežkou.

Vodiace linky v programe GIMP. Kliknite na obrázok pre zväčšenie.

Zobrazenie mriežky v programe GIMP vám uľahčí ukladanie prvkov presne na pixel. Kliknite na obrázok pre zväčšenie.

Ak nemáte chuť neustále škúliť na pravítko a v duchu prerátavať, môžete si pomôcť jednoduchým trikom. Napríklad ak sa snažíte dodržať rovnakú vzdialenosť (napr. 20 px) medzi tlačítkami, pomôže vám pomocný štvorec v tomto rozmere, ktorý umiestnite za každé tlačítko. Takto bez prepočítavania rýchlo uložíte všetky tlačítka na 20 px od seba.

Umiestnenie pomocných štvorcov v programe GIMP. Kliknite na obrázok pre zväčšenie.

Prácu obom stranám výrazne uľahčí zaokrúhľovanie rozmerov na desiatky pixelov. Takže napríklad miesto rozmeru tlačítka 213 x 11 px použijete 210 x 10 px.

Používajte "web-safe fonts"

Pre všetky texty, ktoré nebudú mať grafickú podobu, by ste mali použiť tzv. "web-safe fonts". Teda bezpečné fonty, ktoré sa zobrazia správne na všetkých bežne používaných operačných systémoch. Tieto fonty by ste mali aplikovať na hlavný text. Nie je to nevyhnuté pri tlačítkach, resp. logu. Je dôležité výrazne oddeliť bezpečné fonty od tých, ktoré budú mať grafickú podobu. Obyčajne sa to robí tak, že "bezpečný" text ponecháte bez vyhladzovania.

Vypnuté vyhladzovanie na hlavnom texte v programe GIMP. Menu bude vytvorené pomocou obrázkov, hoci sa bude tváriť ako text. Kliknite na obrázok pre zväčšenie.

Zoznam bezpečných fontov:

• Arial
• Arial Black
• Calibri
• Cambria
• Candara
• Comic Sans
• Consolas
• Constantia
• Corbel
• Courier
• Georgia
• Impact
• Lucida Console
• Nyala
• Palatino
• Segoe UI
• Segoe Print
• Segoe Script
• Tahoma
• Times
• Trebucher
• Verdana

Pozrieť si ich môžete na stránkach: Fonotéka, Fonotéka Windows Vista.

Samozrejme, existuje niekoľko spôsobov, ako bezpečne použiť na webe aj nebezpečné písma. :) Ak sa rozhodnete pre túto (podľa môjho názoru zbytočnú komplikáciu) možnosť, všetky použité fonty zbaľte a pošlite kóderovi spolu so zdrojovým súborom.

Pattern vyrábate vy

Pokiaľ používate v návrhu pattern (opakujúci sa vzor), je vašou povinnosťou dodať ho kóderovi zvlášť vo formáte PNG, orezaný tak, aby na seba nadväzoval. Samozrejme, musí sa zhodovať s tým, čo používate v zdrojovom súbore. Takže odporúčam postup najskôr vytvoriť pattern, až potom pozadie v návrhu. ;)

Ukážka patternu a jeho použitia v návrhu. Kliknite na obrázok pre zväčšenie.

Menej vrstiev je niekedy viac

Problém so záplavou nadbytočných vrstiev majú hlavne ľudia pracujúci s programom Adobe Photoshop. Je naozaj úžasné, čo všetko môžete s vrstvami robiť v tomto programe. Nezabudnite však na to, že kóder nie je grafik a z vašich 1500 vrstiev môže byť rozčarovaný. Snažte sa preto vrstvy optimalizovať a pred exportom ich pozlučujte tak, aby sa s každým objektom stále dalo manipulovať, no aby sa jeden objekt neskladal z viacerých vrstiev. Nezabudnite každú jednu vrstvu presne pomenovať. Pod presným pomenovaním myslím napríklad "tlacitko Hladaj" miesto "Vrstva 031". Dokonalú prehľadnosť dosiahnete vytvorením skupín vrstiev. Napríklad "Hlavicka", "Telo", "Paticka". Ak to samozrejme váš program umožňuje. Pred exportom nezabudnite všetky skupiny pozatvárať.

Vytvárajte funkčné náhľady

Ku všetkým zdrojovým súborom vytvorte náhľady. Funkcia náhľadu by sa dala opísať ako rýchla ukážka správneho zobrazenia webu pre všetky počítače. Kóder podľa vášho náhľadu zhodnotí obtiažnosť práce a určí sumu, za ktorú sa mu oplatí zapnúť počítač. Neskôr môže vami zaslaný zdrojový súbor s náhľadom porovnať a odhaliť prípadnú chybu ešte predtým, ako začne stránku rezať. Okrem toho slúži náhľad na ukážku grafického návrhu klientovi, u ktorého nepredpokladáme prítomnosť grafického editora na pevnom disku.

Z vyššie uvedeného teda vyplýva, že váš náhľad by mal byť uložený v nejakom štandardnom grafickom formáte. Mal by zobrazovať reálnu veľkosť web stránky a mal by byť dobre čitateľný, bez výraznej kompresie. Pri tom všetkom by sa mal otvoriť (načítať) rýchlejšie ako zdrojový súbor. Teda: Náhľad by mal byť uložený v mierke 1:1 vo formáte PNG. Nezabudnite, že všetky texty, ktoré nebudú mať na webe grafickú podobu, musíte na náhľade odlíšiť, a to tak, že im zrušíte vyhladzovanie.

Vytvorte aj špeciálny náhľadový obrázok s popisom použitých fontov.

Snažte sa o to, aby bolo vyznačenie použitých fontov prehľadné. Vyzerať môže napríklad takto. Kliknite na obrázok pre zväčšenie.

Alebo takto. Ak ste hnida a máte po ruke tablet. :P Kliknite na obrázok pre zväčšenie.

Toľko z mojej strany na tému "Ako pripraviť návrh webu pre kódera". Za pomoc pri spísaní najčastejších chýb ďakujem Shaggymu, ktorý mi ich zakaždým a neúnavne pripomínal. :D A všetkým komentátorom, ktorých postrehy som zapracovala do textu. Ak máte nejaké iné skúsenosti, alebo nápady ako export grafických návrhov na kódovanie štandardizovať, šup ho do komentárov.

Komentáre

Pridať komentár

Meno (povinné)
E-mail (povinné, nezobrazuje sa)
Web (nepovinné)
Text (povinné):

Ochrana proti spamu. Napíšte prosím číslicu sedem: