Blog Ako efektívne nakódovať svoj grafický návrh

Ako efektívne nakódovať svoj grafický návrh

Ako efektívne nakódovať svoj grafický návrh Sedím pri stole a práve dopisujem svoj prvý článok. Ako ho tak znovu čítam a korigujem dolieha ku mne z druhej miestnosti zvuk otvárajúcej sa plechovky redbulu prerušovaný dvoma známymi hlasmi:

  „Ja naozaj neviem ako napísať HTML a CSS“:, vraví dizajnér, „v škole ma naučili navrhnúť iba dizajn vo Photoshope.“

Nato sa ozve druhý, hrubší hlas so slovami: „Ja naozaj neviem ako doladiť dizajn a grafický návrh rozdeliť na obrázky“.

Jablká a hrušky

Ledva sa mi podarilo nevymazať celý svoj článok a začala som rozmýšľať, čo s tým urobiť. Kóderi a webdizajnéri očakávajú, že jeden druhému čítajú myšlienky. Webdizajnéri, ktorí nechápu kód a programátori, ktorí nemajú pochopenie pre designérske princípy. Výsledkom je proces, kde trpí najmä klient a firma stráca čas a peniaze.

Webdizajnéri zvyčajne tvoria grafiku bez toho, aby premýšľali o tom, ako sa bude stránka kódovať. Počas fázy dizajnu sa starajú o vzhľad stránky. Tak či tak, nemyslia na znovu použiteľnosť a funkčnosť. Webdizajnér vytvorí krásny grafický súbor častokrát bez toho, aby išiel hlbšie pod povrch a uvedomil si, že jeho prácu po ňom niekto prevezme.

Ako vyriešiť tento problém? Mám najať nového človeka, ktorý vie aspoň základy programovania, alebo sa mám spoľahnúť na kolegu programátora, ktorý mu všetko vysvetlí? Alebo objednať outsourcingovú spoločnosť, ktorá to spraví všetko za pár dní za nich? Alebo to všetko ostane na mne a budem riešiť zase dookola tie isté nedorozumenia?

Aby sme mohli v budúcnosti predísť situácii, akú som opísala vyššie, je dobré, aby obe strany mali aspoň základné znalosti práce toho druhého. Preto som sa rozhodla, že napíšem článok o tom, ako efektívne previesť váš grafický návrh z PSD súboru do výslednej HTML stránky a nebude to ani tak zložité, ako si na prvý pohľad niektorí myslia.

Každý dizajnér by mal vedieť aspoň základy HTML a CSS. Nebudem tu písať žiadny tutoriál s tagmi a triedami. HTML a CSS je naozaj veľmi jednoduché a pre tieto účely sa ho môžete naučiť zadarmo na W3Schools. Chcem vám iba ukázať, na čo sa máte pri učení zamerať, dať si pozor a ako si PSD návrh logicky pri programovaní rozčleniť.

Niektorí webdizajnéri sa obávajú, že sa zníži kvalita ich grafického návrhu pri kódovaní v HTML a CSS, aby bola stránka rýchlejšie načítaná, čo však v skutočnosti nie je pravda.  Existuje mnoho spôsobov inteligentného kódovania, ktoré umožňuje vytvárať používateľsky prívetivé rýchlo načítateľné webové prezentácie, ktoré spĺňajú kvalitu a vyhovujú sémantickým štandardom.

Rozdelenie grafického návrhu

Prvým krokom je vedieť, ktorú časť grafického návrhu rozdeliť na menšie celky a previesť do CSS. Ďalej je potrebné vedieť ako rozdeliť obrázky a hlavne ako ich optimalizovať z hľadiska kvality a rýchlosti, a ktoré prvky PSD súboru majú byť kódované čisto iba v HTML a ktoré v CSS.

Web si pomocou selektorov môžete rozdeliť napr. na:

  • wrapper – obsahuje všetky ostatné tagy,
  • header – obsahuje hlavičku stránky so základnými informáciami,
  • nav – reprezentuje navigačné menu s odkazmi na jednotlivé sekcie webu,
  • main – členený napr.na dva stĺpce, kde výška hlavného divu sa najčastejšie nastavuje automaticky, čím sa posúva v závislosti od obsahu. V HTML5 je možné main členiť na <articles>, <sections> a mnoho ďalších prvkov, podľa toho, čo je práve vhodné
  • footer – päta stránky reprezentuje spodnú časť stránky oddeľujúcu obsah stránky od väčšinou informácií o autorských právach, navigačných odkazov apod.
Ako efektívne nakódovať svoj grafický návrh

Zjednodušte si CSS

CSS (Cascading Style Sheets) slúžia na úpravu vzhľadu webových stránok. Hlavné je zistiť, ako používať CSS na dosiahnutie jednotlivých efektov, tak aby to bolo čo najefektívnejšie. Nie je dobré vytvárať príliš veľa nič nehovoriacich tried a selektorov. Potrebné je vytvoriť základný CSS modelkonkrétny jednotný štýl pre prednastavené HTML elementy. Potom až vytvárať dodatočné vlastné triedy a idčka.  Pre zlepšenie optimalizácie je vhodné výsledný súbor minimalizovať, čím sa výrazne zvýši rýchlosť jeho načítania. Dôležitá  je optimalizácia CSS a cross browserová podpora.

Venujte pozornosť poradiu jednotlivých prvkov

Je lepšie, keď sa načíta najskôr pozadie webstránky a štruktúra stránky a následne potom ostatné prvky. Ak však najprv definujete obsah, potom obrázky a štýl textu, môže sa spomaliť načítavanie stránky.

Návrh HTML stránky

HTML (HyperText Markup Language) slúži na vytváranie webových prezentácií a reprezentuje logickú štruktúru vášho grafického súboru. Na programovanie webových stránok používam vývojové prostredie Adobe ® Dreamweaver ®. Je výhodný tým, že umožňuje prepínať sa medzi návrhovým zobrazením a kódom, čím šetrí mnoho času, podporuje vývoj v HTML, CSS, PHP, ASP.NET a umožňuje jednoduché napojenie na databázu, má v sebe automaticky zabudovanú knižnicu jQuery a mnoho preddefinovaných tagov.

Web konečne opúšťa svet málo flexibilného HTML4 a začína používať HTML5 a CSS3 umožňujúce efektívnejšie formátovanie textu, vloženie videa a najmä prácu s grafikou. Vytvorený a „nasekaný“ PSD súbor do CSS pospájame v HTML súbore do logických celkov v náväznosti aj na prepojené podstránky, ktoré sa budú na webe nachádzať.

Smush. It

Užitočným nástrojom je Smush.it, ktorý umožňuje orezanie a rozdelenie obrázkov, čím sa znižuje veľkosť súboru bez straty kvality obrazu v priemere až o 40 %.

Overenie

Posledným a nemenej dôležitým krokom je overenie CSS a HTML kódu nielen na konci, ale aj v priebehu celého procesu kódovania.

Záver

Pamätajte si, že aj napriek tomu, že ste iba teraz začali kódovaním ako webdizajnér, na začiatku vám to pôjde pomalšie. Rovnako, ako keď ste začínali s webdizajnom. Stačí, keď viete HTML/CSS v základnej miere, aby ste mohli vytvárať webové rozhrania a návrhy. Môžete sa rozhodnúť, že nebudete priamo písať kód, ale aspoň spoznať základnú funkcionalitu tagov HTML a CSS, základné princípy tvorby webu a kompozíciu webového rozvrhovania prevedeného na internetových stránkach.

Ak však chcete, môžete sa naučiť písať efektívne a optimalizované HTML a CSS kódy, čomu však treba venovať trochu viac času.


Dobrý článok? Chceš dostávať ďalšie?

Už viac ako 6 200 ITečkárov dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.



Súhlasím so spracovaním mojich osobných údajov. ( Viac informácií. )

Tvoj email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžeš odhlásiť.

Junior / Senior Java Backend Software Engineer

JOB Position: Java Backend Software Engineer Contract type: TPP, Contract Location: Bratislava Salary Junior: 1500 EUR/Brutto Salary Senior: 2200 EUR/Brutto Rate: 3000 -4000 EUR/monthlyPrimary Job...

Senior Sieťový Špecialista

PRÁCA Pozícia: Sieťový špecialista Pracovný pomer:  TPP Miesto práce: Bratislava, on-site Plat: od 1700+ EUR/Brutto/mesačneHlavné zodpovednosti:Navrhuje architektúru, štruktúru a IP adresácie multiplatformových LAN/MAN/WAN sietí ...

Data Mining Expert

PRÁCA Pozícia: Data Mining Expert Pracovný pomer:  TPP Miesto práce: Bratislava, on-site Plat: od 2000+ EUR/Brutto/mesačneAké výzvy ťa čakajú?Vynikajúca pracovná príležitosť pre nadšenca práca...

Artificial Intelligence Consultant

JOB Position: Artificial Intelligence Consultant Contract type: Full-Time Location: Bratislava Salary: 2000 EUR/Brutto/monthsResponsibilities:conceptual processing and development of the new solutions in the area e.g....

Artificial Intelligence Expert

JOB Position: Artificial Intelligence Expert Contract type: Full-Time Location: Bratislava Salary: 2000 EUR/Brutto/monthsSuccessful adaptation of technologies like machine learning, deep learning, artificial inteligence will determine companies...

Senior Front-end / Angular Developer / Tvorba serverovej a aplikačnej logiky

PRÁCA Pozícia: FE/ Angular developer Pracovný pomer:  TPP, živnosť Miesto práce: Bratislava, Prievidza, Žilina Plat: od 1700+ EUR/Brutto/mesačneNáplň práce:Spolupráca na vývoji SW...

Senior .NET/Angular developer

PRÁCA Pozícia: .NET/Angular developer Pracovný pomer:  TPP Miesto práce: Bratislava, on-site Plat: od 1700+ EUR/Brutto/mesačneČo bude Vašou náplňou práce:spolupodieľanie sa na vývoji SW riešenia...

Campus cowork

Campus cowork je medzinárodný coworking v Bratislave s dvoma lokáciami. Campus MLYNY...

Čo sme stihli v roku 2019

Každý rok je niečím špeciálny a rok 2019 nie je výnimkou. V...

Srdečne ťa pozývame na stretnutie DDD Community – Analýza domény

Na začiatku nového roka sa zameriame na analytické uchopenie domény pomocou DDD....

Čítaj ďalej:

Dobrý článok? Chceš dostávať ďalšie?

Už viac ako 6 200 ITečkárov dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.

Súhlasím so spracovaním mojich osobných údajov. ( Viac informácií. )

Tvoj email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžeš odhlásiť.