Nilalaman
- Mga pakinabang sa pagdidisenyo gamit ang code
- Una ang data
- Mobile kabutihan nang libre
- Paghanap ng isang karaniwang wika
- Matuto nang mas mabilis
- Mabilis na pag-ulit
- Mas mabilis na oras upang ilunsad
- Bakit HTML5?
- Ang mahiwagang data- katangian
- CSS3 - ito ang bagong Photoshop
- Sass + Compass: mahiwagang masarap
- jQuery: oh, oo kaya mo
- Mga Framework
- Pangwakas na saloobin
Ang artikulong ito ay unang lumitaw sa isyu ng 235 ng .net magazine - ang pinakamabentang magazine sa buong mundo para sa mga web designer at developer.
Hindi pa ako naging isang tagahanga ng paggawa ng anumang mas maraming trabaho kaysa sa kinakailangan. May posibilidad akong suriin ang mga pamamaraan at tool batay sa kanilang kakayahang gawing mas epektibo ako, o ang aking koponan. Gaano kabilis nila tayo madadala sa isang gumaganang produkto? Gaano kabisa ang mga ito sa pakikipag-usap? Lumalayo ba sila sa atin?
Sa paglipas ng mga taon, naayos ko ang aking proseso ng disenyo at mga tool. Iniisip kong ipagpapatuloy ko ito. Iyon ang likas na katangian ng pagdidisenyo para sa teknolohiya at web. Ang industriya na ito ay patuloy na nagbabago; ang aming proseso at kasangkapan ay kailangang umunlad din.
Ginagawang mas madali ng HTML5 at CSS3 na ilipat ang higit pa sa proseso ng disenyo ng paitaas - malayo sa Photoshop at higit pa patungo sa isang pamumuhay, disenyo ng paghinga. Ang mga tool tulad ng Foundation, Bootstrap, at jQuery ay gumagawa ng paglipat ng higit sa iyong proseso ng disenyo upang mas madaling lapitan ang code.
Mga pakinabang sa pagdidisenyo gamit ang code
Una, hindi ako nagtataguyod ng pagbagsak ng Photoshop, o anumang iba pang editor ng visual na disenyo mula sa iyong daloy ng trabaho. Sa halip, ituon ko ang mga pakinabang ng paglipat ng disenyo sa code nang mas maaga kaysa sa paglaon.
Una ang data
Ang bagay na lagi kong nagustuhan tungkol sa pagdidisenyo gamit ang HTML ay hinihikayat nito ang pag-iisip mula sa isang pananaw sa data. Sa kaibahan, ang paggamit ng mga programa sa pagguhit tulad ng Illustrator, OmniGraffle, o Balsamiq, nagsisimula ka sa isang kahon at pinunan ito ng data.
Sa HTML binubuo mo ang DOM (dokumento ng modelo ng bagay), uri ng kagaya ng pagbuo ng isang talaan ng mga nilalaman. Ito ay isang pagbabalik sa totoong disenyo ng impormasyon na may mga makahulugang hierarchy. Ang HTML5 ay kumukuha ito ng isang hakbang sa karagdagang pagdaragdag ng mga bagong elemento ng semantiko: artikulo, seksyon, header, tabi, footer at iba pa. Ang diskarte sa unang data na ito ay mahusay na pinaghalo sa mobile, tumutugon na mga disenyo.
Mobile kabutihan nang libre
Kung binabasa mo ito, malamang na nagdidisenyo para sa mobile. At malamang na magkakaroon ka ng disenyo ng isang form o dalawa. Sa HTML5, swerte ka. Bago ang HTML5, ang iyong mga uri ng pag-input ay halos isang patlang ng teksto o password. Ipinakilala ng HTML5 ang isang bilang ng mga karagdagang uri ng pag-input, kasama ang:
uri ng pag-input = "email"> uri ng pag-input = "tel"> uri ng pag-input = "url"> uri ng pag-input = "petsa"> uri ng pag-input = "petsa ng oras">
Ano ang talagang kahanga-hanga tungkol sa mga karagdagang, natatanging uri ng pag-input ay ang mga mobile browser sa iOS at Android na makilala ang mga ito at awtomatikong magpalitan ng isang may kaalamang kontekstong keyboard - nang walang kinakailangang mga espesyal na plug-in o hack ng jQuery. Oh, at kung hindi alam ng iyong browser kung ano ang an uri ng pag-input = "email"> ay, pagkatapos ay nagde-default lamang ito sa isang input ng teksto.
Paghanap ng isang karaniwang wika
"Kahanga-hanga kung paano gagana ang aming mga tagadisenyo at developer sa parehong wika" - John Drago, developer ng application sa Inflection.
Tingnan kung pamilyar ito. Nasa isang silid ako sa pagpupulong na may isang kalahating dosenang mga devs ng application sa server na maaaring mag-code ng mga bilog sa paligid ko sa Ruby, Python, Java o .NET. Ako lang ang taga-disenyo. Ang ilan sa aking mga mungkahi ay paunang naiwaksi bilang masyadong kumplikado upang maipatupad. Lumalakad ako hanggang sa whiteboard at nagsisimulang magsulat ng ilang HTML at CSS sa pisara para sa kung paano maipatupad ang disenyo. Biglang nagbago ang tono ng pag-uusap at atubili na sinabi ng isa sa mga developer, "Buweno, oo - kung gagawin natin ito sa ganoong paraan, maaari itong gumana."
Ang paglipat ng higit pa sa aking proseso ng disenyo sa code ay napabuti ang mga pag-uusap sa mga developer. Mayroong isang idinagdag na layer ng paggalang na nakuha sa pamamagitan ng pag-alam kung paano gawin ang iyong mga disenyo sa code. Hindi mo kailangang maging dalubhasa upang makamit ang paggalang na iyon. Habang ang aking mga kasanayan sa HTML at CSS ay solidong solid, ang aking mga kasanayan sa JavaScript ay walang katamtaman. At hindi ako nahihiya na aminin iyon. Gayunpaman, kapag nagtatrabaho kasama ang frontend, o mga tagabuo ng panig ng server, ang katotohanang maaari kaming magsalita sa isang karaniwang wika, o makamit ang kalahati, ay isang malaking kalamangan.
Matuto nang mas mabilis
Habang ang mga wireframes at visual na pinaghalo ay maaaring makatulong sa pagpaplano, ang mga static artifact na ito ay panteorya. Ilang beses mo bang sinubukan ang pagpapaliwanag ng isang pakikipag-ugnay sa isang tao, upang lamang sila ay tumugon, "Sa palagay ko makikita ko ito." Ang mas maaga kang makarating sa isang prototype, isang bagay na maaaring makipag-ugnay ng mga tao, mas maaga mong maranasan ang disenyo at makita kung gumagana ang mga ideya.
Mabilis na pag-ulit
Kailan ang huling oras ng isang pangwakas na disenyo na naipadala sa produksyon na tugma nang eksakto sa iyong Photoshop comp? Halos hindi kailanman. Sa disenyo ng digital na produkto, patuloy na nangyayari ang pagbabago. Bukod dito, ang mga pagbabago tulad ng pagdaragdag ng laki ng iyong mga heading mula 22pt hanggang 24pt sa kabuuan ng isang dosenang mga screen ay maaaring tumagal ng oras sa Photoshop. Nagbibigay sa iyo ang Mga Smart Object ng ilang antas ng disenyo na nakatuon sa object sa Photoshop. Sa kasamaang palad, ang karamihan sa mga visual designer na alam kong hindi gumagamit ng sapat na Mga Smart Object. Sa CSS, dahil hinihimok nito ang isang mas sistematikong diskarte sa disenyo, tatagal ng ilang minuto ang mga pagbabago sa typographic sa halip na oras.
Paano ang tungkol sa pagbabago ng mga linear gradient sa lahat ng iyong mga pindutan? O ang laki ng isang hangganan? Paano ang tungkol sa pagbabago mula sa mga parisukat na sulok sa 2px bilugan? Sa Photoshop, maaari itong tumagal ng ilang oras at kailangan mo pa ring i-code ito. Ang kakayahang mag-disenyo sa code ay nakakatulong na maiwasan ang round trip na bumalik sa Photoshop para sa pag-iterate sa visual na disenyo. Kapag inilipat mo ang mga pagbabagong iyon sa paitaas sa code, gamit ang CSS3 at Sass (na tatalakayin ko sa paglaon sa artikulong ito) maaari silang mangyari sa real-time at tatagal lamang ng ilang minuto.
Mas mabilis na oras upang ilunsad
Sa paglipas ng mga taon, sa paglipat ko ng higit sa aking disenyo ng daloy ng trabaho hanggang sa code, naranasan ko ang isang tunay na pagpapabuti - tungkol sa isang 20 hanggang 30 porsyento na pagbawas sa oras sa merkado. Habang ginagawa ko ito, mas kaunting oras ang ginugugol ko sa mga pagsisikap sa pagdoble. Gumagastos ako ng mas kaunting mga pag-ikot sa pagpunta sa Photoshop o Fireworks at pagkatapos ay ulitin ang gawain sa code.
Sa ilang mga punto ang disenyo ay kailangang makipag-ugnay sa ilang uri ng backend, kung iyon ay isang CMS, Rails app o iba pa. Tulad ng karamihan sa aking gawaing disenyo ay nasa code, ang pagsasama ay nangyayari nang mas maaga kaysa sa paglaon. Ilang taon na ang nakalilipas, ang isa sa aking mga kliyente, ang PointRoll, ay nagpunta mula sa prototype hanggang sa produksyon sa limang araw.
Bakit HTML5?
Ang HTML5 ay mas madali kaysa sa mga nakaraang bersyon ng HTML. Halimbawa, ang deklarasyon ng uri ng dokumento. Sa nakaraang mga bersyon ng HTML, ang DOCTYPE ganito ang hitsura:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
At mayroong anim na magkakaibang bersyon. Sa kabutihang palad ang HTML5 DOCTYPE ganito ang hitsura:
! DOCTYPE HTML>
Grabe. Ayan yun. Nakakagulat na simple.
Kapag lumilikha ng isang karaniwang pahina ng HTML, mayroong isang bilang ng mga karaniwang elemento, tulad ng isang header, pangunahing nilalaman na lugar, sidebar at footer. Sigurado akong nakakita ka ng tulad nito dati:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Wala sa labas ng ordinaryong doon. Ngunit sa sandaling napunan ng nilalaman, ang template na ito ay lumiliko sa sopas. Sa kaibahan, sa mga bagong elemento ng semantiko ng HTML5, nakakakuha ka ng isang bagay na mas simple at mas madaling i-scan, tulad nito:
header> nav> / nav> / header> artikulo> tabi> / tabi> / artikulo> footer> / footer>
Tingnan mo yan Isang bagay na may katuturan.
Ang mahiwagang data- katangian
Ang HTML5 ay may kasamang isa pang kahanga-hangang kawit na nagbibigay sa iyo ng kakayahang makabuo ng iyong sariling kahulugan ng semantiko: ang data-. Dati, kung nais mong magtalaga ng isang bagay na makabuluhan sa isang elemento ng DOM, limitado ka sa mga ID, klase, at tungkulin.
Sa kasamaang palad, ang mga ID ay dapat na natatangi. Ang mga klase ay pandaigdigan (yippee!), Ngunit ang paggamit sa mga ito ay maaaring maging isang gulo. Ang mga tungkulin ay isang underutilized na asset na nagbibigay ng makabuluhang kahulugan para sa ARIA. Kamakailan lamang, gumagamit ako ng data- para sa isang platform ng pagsubaybay sa kaganapan ng analytics na binuo namin sa Inflection.Malaking tagahanga namin ng pagsubok sa aming mga disenyo. Kapag nagtatrabaho sa mga application o pahina na mayroong maraming pakikipag-ugnay, nais naming magkaroon ng higit pang butil na pananaw sa pakikipag-ugnayan ng customer sa loob ng pahina.
Pumasok sa data-. Gamit ito maaari kang magtalaga, pumasa, at mag-hook sa isang 'tukuyin ang iyong sariling' modelo ng kahulugan. Kaya, halimbawa, magagawa mo ito:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> input type =" button "data-id =" naka-link "dataregion =" main "data-event =" register ">
Maaari naming ikabit ang isang tagapakinig na may JavaScript sa pahina at anumang oras na lumipas ang isang customer, o mag-click sa pindutan na ito, masusubaybayan namin ang aktibidad na iyon. Sa halip na subaybayan lamang na ang isang tao ay nakarehistro sa pamamagitan ng OAuth sa Twitter, maaari nating makita na pinasadya nila ang Facebook, pagkatapos ang Twitter, pagkatapos ng LinkedIn, at pagkatapos ay nagpasya na pumili ng Twitter para sa kanilang modelo ng OAuth.
Gunigunihin ang pagpapalawak nito sa isang site tulad ng Pinterest, o ang bagong disenyo ng Myspace kung saan i-drag at i-drop ng mga customer ang mga tile upang ayusin muli ang mga ito batay sa interes. O posibleng nagtatago ng mga tile na hindi nila interesado. Ang data- nagbibigay-daan sa iyo ang katangian na maglakip o magtalaga ng isang karagdagang layer ng kahulugan ng semantiko sa mga bagay na maaari mong tukuyin. Para sa mga site at app na umaasa nang husto sa Ajax magbubukas ito ng walang limitasyong mga pagkakataon.
CSS3 - ito ang bagong Photoshop
Nagdala ang CSS3 ng isang bagong bagong antas ng pagdidisenyo ng hitsura at pakiramdam na ginamit upang mangailangan ng mga imahe sa background, mga hiwa, at ang sikat na diskarteng 'sliding door'. Sa kabutihang palad, lahat iyan ay isang bagay ng nakaraan.
Tingnan natin ang paggawa ng isang magarbong pindutan na may isang linear gradient, bilugan na mga sulok, anino ng teksto na nagbibigay dito ng isang magandang epekto sa pag-press ng titik, at isang glow on hover. Malayo ang malalaman ng mga diskarteng ito. Ang bawat isa sa kanila ay maaaring magamit nang nakapag-iisa, o sa iba't ibang mga kumbinasyon upang mahila ang anuman sa kasalukuyang biswal na init na nagte-trend sa web ngayon.
Una, gumawa tayo ng ilang mga pagsasaayos sa default pindutan> at uri ng pag-input = "isumite"> mga elemento. Ipagpalagay na gumamit ka ng isa sa mga karaniwang pag-reset ng CSS, magdagdag lamang kami ng isang maliit na sukat at silid ng paghinga.
/ * Mga pindutan ng mga pindutan, na kung saan nakuha ang mga pindutan. =________________________________________ * * / button, input [type = "submit"] {taas: 2.7em; padding: .4em .7em; taas ng linya: 1.9; }
Protip: Ang mga pindutan at pag-input na isinumite ay maaaring maging nakakalito sa restyle. Natagpuan ko sa pamamagitan ng pag-aayos ng taas ng linya sa 1.6 o higit pa, maiiwasan mo ang pag-hack na nangangailangan ng sobrang div o span sa loob ng pindutan> tag
Ngayon ay naayos na namin 'ang aming isyu sa pindutan, makakagawa kami ng isang .btn klase upang bigyan kami ng magandang malinis na pindutan na may mga bilugan na sulok, isang linear na gradient, balangkas, at ang hitsura ng letterpress.
.btn {display: inline-block; hangganan: 1px solid # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: .4em .7em; background: # edeff2; background: -webkit-gradient (linear, 0% 0%, 0% 100%, mula sa (#fefefe), color-stop (0.55, # edeff2), hanggang (# e4e6e9)); background: -moz-linear-gradient (tuktok sa tuktok, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; kulay: # 6c7786; laki ng font: 1.1em; text-shadow: #fefefe 1px 0 1px; taas ng linya: 1.375em; cursor: pointer; }
At pagkatapos ay isang magandang epekto sa pag-hover na may isang banayad na glow gamit ang box-shadow pamamaraan:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; background: # e6e9eb; background: -webkit-gradient (linear, 0% 0%, 0% 100%, mula sa (# f7f7f7), color-stop (0.55, # f6f6f7), hanggang (# e6e9eb)); background: -moz-lineargradient (tuktok sa gitna, # f7f7f7, # f6f6f7 55%, # e6e9eb); kulay: # 45484b; text-shadow: rgb (255,255,255) 1px 1px 0; border-color: # c9c9c0; }
Ngayon, hindi ako isang malaking tagahanga ng pagsulat ng linear gradient code. Mahaba ito at nakalilito. Tulad ng nakikita mo, isinama ko lang ang bersyon para sa -moz, -webkit, at ang karaniwang modelo. Kung nais mong isama ang mga bersyon na -o at -ms, kakailanganin mong i-doble ang code.
Mayroong dalawang iba pang mga pagpipilian. Ang isa ay isang generator ng CSS3; maraming magagamit sa web, kabilang ang ColorZilla. Ngunit kung nais mong itaas ang iyong laro nang kaunti, isaalang-alang ang pagsisid sa Sass: na sinamahan ng Compass, ito ay isang pagkadiyos.
Sass + Compass: mahiwagang masarap
Maaari mong ihinto ang pag-asa para sa CSS4 unicorn edition. Narito na at tinatawag itong Sass + Compass. Ang Sass ay kumakatawan sa Syntactically Kahanga-hanga na Mga Estiloheet: namana mo ang lahat ng tradisyunal na mga benepisyo ng CSS3 na may idinagdag na mga kagalakan ng mga variable, mixins, extender at iba pang mga goodies.
Kamakailan-lamang na pinatunayan ko ang isang 5,000-line CSS file na mayroong higit sa 30 mga pagkakaiba-iba sa parehong lilim ng asul. Sa Sass, pinalitan ko ang bawat pagkakaiba-iba ng code na ito:
kulay: $ asul;
Sa pamamagitan ng pagtukoy $ asul sa aking _variable.scss file, makakalikha ako ng isang default na kulay na maaaring sanggunian ng bawat CSS o SCSS file. Maaaring gumamit ng sinumang sumulat ng CSS $ asul at hindi mag-alala tungkol sa paggamit ng isang eyedropper, paghahanap ng isang hex code, o RGB, RGBA o HSL na kulay.
Naaalala ang linear gradient code na iyon? Sa halip na magsulat ng maraming linya ng code, paano ito:
@ isama ang background (linear-gradient (# b1cfdc, # 7a9cac));
Hayaan ang Sass at Compass na gawin ang mabibigat na nakakataas at makabuo ng tamang syntax para sa iyo: tapos na. Sabihin nating nais mo ang isang mas madidilim o magaan na bersyon ng isang kulay. Maaari mong ilipat ang eyedropper sa Photoshop, o gamitin lamang ang gumaan / magpapadilim ng mga utos sa Sass:
@ isama ang background (linear-gradient (magpapadilim ($ litegray, 2%), magpapadilim ($ off-white, 5%)));
Lilikha iyon ng isang linear gradient na may 2% na dumidilim $ lite-grey at 5% dumilim mamuti-muti. Voil! Hindi mo rin kailangan ang mga HEX o RGB code.
jQuery: oh, oo kaya mo
Meron akong confession na gagawin. Ginagawa ng pananakot ako ng JavaScript. Pagkatapos ay nakita ko ang jQuery. Hindi ako mag-aangkin na maging isang gurong JavaScript, ngunit tiwala ako na makakakuha ako ng halos anumang uri ng paglipat, o pag-andar na kailangan ko upang magamit ang jQuery.
Dalhin, halimbawa, ang kakayahang magpakita ng isang pangalawang input ng numero ng telepono sa screen sa pamamagitan ng pag-click sa isang link na Magdagdag ng Bagong numero. Gamit ang jQuery, isulat mo lang ito:
// - Progresibong ihayag - // $ (‘. Bagong-numero’). I-click (pagpapaandar () {$ (’. Alt-number’). FadeIn ('mabilis');});
Naghahanap ng isang bagay na mas advanced? Marahil ay may isang plug-in para dito. Ang mga pangunahing pag-uugali ay madali at ang mga kumplikado ay madaling lapitan ng jQuery.
Mga Framework
Dalawa sa mga pinaka-matatag na balangkas ngayon ay ang Foundation at Bootstrap. Ngayon, bago mo ibasura ang mga framework ng CSS, hayaan mo akong magtanong sa iyo. Gumagamit ka ba ng jQuery? Ruby sa Riles? Django? Lahat ng mga balangkas.
Tulad ng jQuery at RoR, Foundation at Bootstrap ay isinilang sa pagkilala na mayroong isang patas na bilang ng mga bagay na paulit-ulit nating ginagawa (tulad ng pag-reset, typography, grids, form, pindutan, nav at mga listahan). Ang Foundation at Bootstrap ay parehong nag-aalok ng suporta para sa mga tumutugong disenyo sa pamamagitan ng paggamit ng mga klase ng helper. Ang parehong ay mahusay na dokumentado at nasubukan sa kalsada, kaya maaari mong gamitin ang mga ito nang may kumpiyansa.
Isang pangunahing pagkakaiba sa pagitan ng dalawa: Ang Bootstrap ay batay sa KURANG system para sa pag-preprocess ng CSS, samantalang ang Foundation ay batay sa Sass. Mas gusto ko ang Sass sa KURANG dahil sa mga karagdagang kakayahan nito, ngunit kapwa ang Sass at LESS squash ng tradisyonal na CSS sa mga piraso.
Isang huling naisip sa mga balangkas. Para sa mga hindi nagnanais na manahin ang labis na balangkas ng balangkas ng ibang tao, isaalang-alang ang pagpili ng isang mayroon na at hubadin ito sa mga walang laman na buto, o pagpili ng seresa mula sa ilan upang i-roll ang iyong sarili. Alinmang paraan, talagang walang dahilan upang magsimula sa simula sa tuwing.
Pangwakas na saloobin
Nais mo ba ng higit na kontrol sa kung paano nagwakas ang iyong disenyo? Ilipat ang higit pang mga proseso sa upstream sa code. Ang HTML5 sa wakas ay nagdudulot ng ilang kahulugan sa DOM. Magandang riddance sa nonsensical DOCTYPEs at divitis. Ang CSS3 ay ang bagong Photoshop: mga linear gradient, borderradius, at box-shadows FTW! At sa mga tool tulad ng Bootstrap, Foundation, Sass at jQuery, ang paglipat ng disenyo ng paitaas hanggang sa code ay hindi kailanman naging madali.
Tuklasin ang 55 kamangha-manghang mga halimbawa ng HTML5 sa Creative Bloq.
