Dizaino karpymas yra dizaino sukodinimas į veikiantį ir gerai atrodantį HTML'ą (su CSS ir kažkiek JS).
Dizaineris sukuria dizainą, tas yra sukarpomas į statišką interneto puslapį, backend programuotojas prideda puslapiui dinamiškumo.
Dar kartais vadinamas PSD to HTML, nes istoriškai dizainas buvo "piešiamas" fotošope, išsaugomas PSD formatu ir tada paverčiamas į HTML'ą.
Žodis karpymas atsidaro, nes senovėje tekdavo iš fotošopo failo iškirpti visokiausių paveikslėlių ir iš jų sulipdyti internetinį puslapį. Populiarėjant plokščiam dizainui, realių paveikslėlių iškirpti reikėdavo vis mažiau, bet pavadinimas išliko.
Kadaise web designeriai patys dizainą ir kurdavo, ir kodindavo. Webui sudėtingėjant, atskilo kodinimo dalis, kuri patapo front end development - naršyklėj veikiančio kodo rašymas.
Galima dar paminėti, kad toliau plečiantis ir sudėtingėjant internetiniams puslapiams, dizaino karpymas patapo viena iš dviejų front end'o dalių. Kita yra stipriai JavaScript'u praturtinti puslapiai, dar kartais vadinami single page apps (SPA).
# Ką sprendžia ir kuo naudingi dizainų karpytojai
Nepatyrusiai akiai dizaino karpymas gali pasirodyti paprasta ir nesudėtinga internetų gamybos dalis. Tame yra tiesios, ypač kalbant apie nesudėtingus ar nedidelius puslapius.
Dizainą sukarpyti gali ir programuotojas kuriam tai nėra tiesioginis darbas ar mėgstama programavimo dalis. Kartais dizaino ir jo karpymo galima nesunkiai išvengti tiesiog nusiperkant HTML'o šabloną, kas yra visai geras sprendimas kokiam admin paneliui.
# Krovimosi ir veikimo greitis
Kalbant apie rimtesnius projektus, geras HTML'as yra ypatingai svarbus dėl daug priežasčių. Pati akivaizdžiausia yra krovimosi ir veikimo greitis.
Būtina gerai parašyti, pritaikyti ir optimizuoti kodą, kad puslapis veiktų greit. Tai ypač aktualu didėjant kodo kiekiui.
Lengva privelti “klaidų” pridedant per daug išorinių bibliotekų (tiek CSS, tiek JS), netinkamai parašyti CSS’ą (lėti selectoriai, per daug ar per mažai specifinės taisyklės, besikartojančios taisyklės), arba surašyti lėtą JS’ą.
# SEO (optimizavimas paieškos varikliams)
Teisingai surašytas HTML’as padeda robotams suvokti turinį. Tvarkingai sudėliota elementų hierarchija, tinkamai įterpti ir panaudoti paveikslėliai, užsikrovimo greitis daro geroką įtaką kaip paieškos variklių robotai reitinguoja aplankomus puslapius.
Dizainų karpytojai nebūtinai bus puslapio SEO meistrai, bet turi suvokti ko iš jų tikisi SEO dievai ir žinoti kaip tuos norus išpildyti.
# Pritaikymas neįgaliesiems (accessibility)
Internetas turi veikti visiems, net jei vartotojas prastai mato (arba visai nemato), girdi arba negali naudotis pele ir/ar klaviatūra.
Žiūrint grynai iš HTML'o pusės, situacija panaši į SEO. Svarbu tvarkingas HTML'as.
Tinkamai pritaikyti internetinius puslapius neįgaliesiems yra svarbus dizainų karpytojų įgūdis. Ne tik svarbus, bet ir atsakingas, taip pat dažnai reikalaujamas įstatymo (didesnėms organizacijoms).
# Senų naršyklių palaikymas
Tiek CSS'as, tiek JS'as pastoviai plečiasi, įgauna naujų feature'ų, bet žmonės vis naudoja senas naršykles, kuriose tų naujų funkcionalumų nėra.
Karpydamas dizainą, programuotojas turi šitai suvokti ir tinkamai spręsti šią problemą. Dažniausia pasitelkiamos kelios strategijos - tiesiog nenaudoti funkcionalumo kurio nėra palaikomose naršyklėse, naudoti pollyfill'us - kodo gabalus, kurie atkuria nesamą funkcionalumą, graceful degradation - kai puslapis nesulūžta net kai kažkoks funkcionalumas neveikia tam tikroj naršyklėj arba progressive enhancement - atvirkščias graceful degradation reikalas, kai esant galimybėms puslapis įgauna papildomo funkcionalumo.
# Animacijos
CSS'as yra pakankamai galingas įrankis pridėti animacijų internetiniam puslapiui. Pačių animacijų parašymas gali būti gan sudėtingas reikalas, o rimčiausias sprendžiama problema tikriausia bus pasiekti, kad to animacijos veiktų sklandžiai ir nelagintų.
# CSS kodo organizacija
CSS rašymas gali pasirodyti gan paprastas reikalas. Iš tikro, CSS kodo organizacija gali gan greit tapti sudėtingu ir daug pastangų reikalaujančiu procesu.
Šį punktą išskyriau, nes CSS'ą sudėtinga ištestuoti, jis gali pridaryti problemų ne tik su vizualine dalim, bet ir su funkcine, o netyčia "permušti" esamas taisyklės superlengva. Ypač kai reikia prisiliesti prie senesnio projekto arba tiesiog natūraliai augant ir didėjant CSS kiekiui.
# Darbai ir karjeros kelias
Savo karjerą pradėjau karpydamas dizainus. Tai buvo pakankamai lengvas ir tiesus būdas patekti tarp "tikrų" programuotojų.
Nors karpymas man patiko, jaučiau, kad teisingesnis kelias tęsti savo karjerą yra ne tapti karpymo ekspertu, o mokytis ką nors kitą. Pažiūrėjus į darbo rinką tinkamiausi pasirinkimai atrodė arba CMS'o (content management system), tokio kaip WordPress arba JavaScripto frameworko, tokio kaip tuo metu populiarus AngularJS mokymasis.
Dizaino karpymas neretai yra laikomas "paprastesniu" už kitus darbu. Ne retai kiti programuotojai nenori jo daryti ir kam nors atiduoda.
Darbas nėra sudėtingas, palyginus lengvai pramokstamas, bet dažnai gan varginantis, painus ir nuobodus (ypač "tikriems" programuotojams).
Grynai full time karpytojai įprastai galimi tik didesnėse komandose arba ten kur procesas tinkamai sudėliotas ir galima tam tikrus darbus skirti specializuotam karpytojui.
Pats karpymas gali būti ir dažnai būna papildomas kitais skillais: dizainu, CMS'ų ar JavaScript'o frameworkų išmanymu. Tokiu atveju labai realu būti karpytojais. Tarkim dirbi agentūroj kuri kepa WP svetaines. Jei gali ir sukarpyti dizainą ir užmauti WordPress'ą, esi universalus ir naudingas darbuotojas.
Pasitaiko kai karpytojai tampa tam tikros dalies ekspertais, tarkim acessability žinovais, CSS'o optimizacijos ir organizavimo ar bendrai performance'o specialistais. Tokios specializacijos gan nišinės ir tikriausia galimos arba freelancinant, arba didelėse organizacijose.
# Reikalingi sugebėjimai
Kaip jau minėjau dizainų karpymas yra sąlyginai nesudėtingai išmokstamas. Kartu tai svarbus, beveik visiems web devams reikalingas sugebėjimas, o tai pat geras būdas pradėti mokytis webo programavimo. Daug kam gali būti geras kelias pirmam darbui gauti.
Akivaizdu, kad svarbiausia turėti HTML, CSS ir JavaScript pagrindus. Pirmi du tikrai nėra sudėtingi, galima pramokti gan greit ir tobulinti juos jau darantis pirmus portfolio itemus.
Bijantiems javascripto galiu tik pasakyt, kad jo dizaino karpytojams gali reikti visai nedaug. Dažnai JS naudojimas apsiriboja kokios nors bibliotekos įterpimu ir nustatymų surašymu.
Taip pat reiktų suvokti kaip veikia on site SEO ar bent jau kaip tvarkingai, pagal SEO reikalavimus surašyti HTML'ą.
Būti susipažinus su pritaikymo neįgaliesiems rekomendacijomis (Web Content Accessibility Guidelines (WCAG)) ir suvokti kaip ir kada jas pritaikyti savo darbe.
Suvokti web dizaino (UI) pagrindus ir principus. Karpant dizainus ne retai tenka pačiam priimti didesnius ar mažesnius dizaino sprendimus.
Suprasti, kad jų parašytas kodas turės veikti ir senesnėse naršyklėse, žinoti kaip tinkamai parašyti kodą veikiantį visose palaikomose naršyklėse.
# Keleta diskutuotinų dalykų
Domėdamiesi dizainų karpymu tikriausia užtiksit įvairiausių nuomonių ar tendencijų. Apžvelkim jas.
# Pixel perfect
Kol visas webas veikė ant standartinio dydžio ekranų, interneto puslapiai irgi buvo vieno dydžio. Nebuvo reikalo keisti išvaizdos sumažėjus ar padidėjus ekranui, kaip dabar.
Todėl visas karpymas turėjo būti pixel perfect - kai veikiančio internetinio puslapio neįmanoma atskirti nuo dizaino paveikslėlio.
Tai buvo praktiška ir teisinga kol nepradėjom webo naudoti per šimtus (o gal tūkstančius) skirtingų aparatų ir ekranų dydžių.
Tada pasigirdo balsai, kad pixel perfect yra nesamonė ir atgyvena.
Mano galva, mes vis tiek turim išgauti kažką labai artimo idealiam dizaino atitikimui. Tikriausia taip bus tik tam tikrose rezoliucijose, bet mes vis tiek turim gerbti dizainerio sprendimus juos įgyvendindami.
Iš kitos pusės, geri dizaineriai suvokia, kad pixel perfect praktiškai neįmanomas ir "piešdami" user interfeisus į tai atsižvelgia.
# Darbo paieška
Gal jau pastebėjot ar greit pastebėsit, kad kiekvienas dizaino karpymo skelbimas sulaukia labai daug dėmesio ir norinčių pagelbėti.
Gali būti sudėtinga rasti darbą arba freelencinimo projektų, nes konkurencija yra didelė.
Kaip jau minėjau, patekimo barjeras čia mažas - išmokti nesudėtinga ir neužima per daug laiko, todėl dizainų karpymas galbūt neturėtų būti vienintelis sugebėjimas bandant patekti tarp programuotojų.
# Naudingas sugebėjimas
Dizainų karpymas yra laiko ir pastangų vertas reikalas. Tai turbūt vienas prieinamiausių būdų žengti pirmus žingsnius link programavimo, kuris išlieka naudingas nepaisant vėliau pasirinktos krypties.
