Saturs
- Ieguvumi projektēšanai ar kodu
- Vispirms dati
- Mobilais labestība par brīvu
- Kopīgas valodas atrašana
- Uzziniet ātrāk
- Ātra atkārtošana
- Ātrāks palaišanas laiks
- Kāpēc HTML5?
- Burvju datu atribūts
- CSS3 - tas ir jaunais Photoshop
- Sass + kompass: maģiski garšīgi
- jQuery: ak, jā, tu vari
- Rāmji
- Pēdējās domas
Šis raksts pirmo reizi parādījās žurnāla .net 235. numurā - pasaulē vislabāk pārdotajā tīmekļa dizaineru un izstrādātāju žurnālā.
Es nekad neesmu bijis liels ventilators, lai veiktu vairāk darba nekā vajadzīgs. Man ir tendence novērtēt metodes un rīkus, pamatojoties uz to spēju padarīt mani vai manu komandu efektīvāku. Cik ātri viņi mūs noved pie strādājoša produkta? Cik efektīvi viņi sazinās? Vai viņi paliek ārpus mūsu ceļa?
Gadu gaitā esmu pielāgojis savu dizaina procesu un rīkus. Es iedomājos, ka turpināšu to darīt arī turpmāk. Tāds ir tehnoloģiju un tīmekļa dizaina raksturs. Šī nozare nepārtraukti attīstās; jāattīstās arī mūsu procesam un rīkiem.
HTML5 un CSS3 atvieglo vairāk dizaina procesa pāreju augšpus straumes - prom no Photoshop un vairāk uz dzīvu, elpojošu dizainu. Tādi rīki kā Foundation, Bootstrap un jQuery padara jūsu dizaina procesu vairāk pieejamu kodam.
Ieguvumi projektēšanai ar kodu
Pirmkārt, es neatbalstu Photoshop vai jebkura cita vizuālā dizaina redaktora nomešanu no jūsu darbplūsmas. Tā vietā es koncentrēšos uz priekšrocībām, kas saistītas ar šī dizaina pārvietošanu kodā ātrāk nekā vēlāk.
Vispirms dati
Kas man vienmēr ir paticis, veidojot HTML, ir tas, ka tas mudina domāt no datu viedokļa. Turpretī, izmantojot tādas zīmēšanas programmas kā Illustrator, OmniGraffle vai Balsamiq, jūs sākat ar rūtiņu un aizpildiet to ar datiem.
HTML veidojat DOM (dokumenta objekta modeli), līdzīgi kā izveidojot satura rādītāju. Tā ir atgriešanās pie patiesa informācijas noformējuma ar nozīmīgām hierarhijām. HTML5 sper soli tālāk, pievienojot jaunus semantiskos elementus: raksts, sadaļa, galvene, maliņa, kājene un tā tālāk. Šī pieeja datiem vispirms lieliski apvienojas ar mobilajiem, ātri reaģējošajiem dizainiem.
Mobilais labestība par brīvu
Ja jūs to lasāt, jūs, iespējams, plānojat mobilajām ierīcēm. Iespējams, ka jums būs jāveido forma vai divas. Izmantojot HTML5, jums veicas. Pirms HTML5 ievadīšanas veidi bija gandrīz vai nu teksta, vai paroles lauki. HTML5 ieviesa vairākus papildu ievades veidus, tostarp:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Šajos papildu, unikālajos ievades veidos patiešām ir lieliski, ka mobilās pārlūkprogrammas iOS un Android ierīcēs tos atpazīst un automātiski maina kontekstuāli informētu tastatūru - nav nepieciešami īpaši jQuery spraudņi vai hacki. Ak, un, ja jūsu pārlūkprogramma nezina, kas ir ievades tips = "e-pasts"> ir, tad tas tikai noklusē teksta ievadi.
Kopīgas valodas atrašana
"Tas ir lieliski, kā mūsu dizaineri un izstrādātāji var strādāt vienā valodā" - Džons Drago, lietojumprogrammu izstrādātājs Inflection.
Skatiet, vai tas izklausās pazīstami. Es atrodos konferenču telpā ar pusduci servera puses lietojumprogrammu izstrādātājiem, kuri var kodēt ap mani Ruby, Python, Java vai .NET. Es esmu vienīgais dizainers. Daži no maniem ieteikumiem sākotnēji tiek noraidīti kā pārāk sarežģīti īstenošanai. Es eju pie tāfeles un sāku uz tāfeles rakstīt dažus HTML un CSS, lai varētu ieviest dizainu. Pēkšņi sarunas tonis mainās, un viens no izstrādātājiem negribīgi saka: "Nu, jā - ja mēs to darīsim tā, tas varētu darboties."
Vairāk mana dizaina procesa pārvietošana kodā ir uzlabojusi sarunas ar izstrādātājiem. Ir zināms papildu cieņas līmenis, kas nopelnīts, zinot, kā veidot savus dizainus kodā. Lai nopelnītu šo cieņu, jums nav jābūt ekspertam. Lai gan manas HTML un CSS prasmes ir ļoti stabilas, manas JavaScript prasmes labākajā gadījumā ir viduvējas. Un es nekautrējos to atzīt. Tomēr, strādājot ar frontend vai servera puses izstrādātājiem, tas, ka mēs varam runāt kopējā valodā vai satikties pusceļā, ir milzīga priekšrocība.
Uzziniet ātrāk
Kaut arī stiepļu rāmji un vizuālie kompozīti var palīdzēt plānošanā, šie statiskie artefakti ir teorētiski. Cik reizes esat mēģinājis kādam izskaidrot mijiedarbību, tikai lai viņš atbildētu: "Laikam man tas būs jāredz." Jo ātrāk jūs nonākat pie prototipa, ar ko cilvēki var mijiedarboties, jo ātrāk jūs varat piedzīvot dizainu un redzēt, vai idejas darbojas.
Ātra atkārtošana
Kad pēdējoreiz galīgais dizains, kas tika piegādāts ražošanai, precīzi atbilda jūsu Photoshop comp? Gandrīz nekad. Izmantojot digitālo produktu dizainu, izmaiņas notiek nepārtraukti. Turklāt izmaiņas, piemēram, virsrakstu lieluma palielināšana no 22pt uz 24pt pāris desmitiem ekrānu, Photoshop var aizņemt vairākas stundas. Viedie objekti nodrošina zināmu objektu orientēta noformējuma līmeni programmā Photoshop. Diemžēl lielākā daļa man zināmo vizuālo dizaineru nepietiekami izmanto viedos objektus. Izmantojot CSS, tā kā tas veicina sistemātiskāku pieeju dizainam, tipogrāfiskās izmaiņas prasa stundas, nevis stundas.
Kā ir ar visu pogu lineāro gradientu maiņu? Vai apmales lielums? Kā būtu ar maiņu no kvadrātveida stūriem uz 2 pikseļiem noapaļotiem? Programmā Photoshop tas var aizņemt stundas, un jums tas joprojām ir jākodē. Spēja veidot kodu palīdz izvairīties no atgriešanās Photoshop, lai atkārtotu vizuālo noformējumu. Pārvietojot šīs izmaiņas augšpusē kodā, izmantojot CSS3 un Sass (ko es aplūkošu vēlāk šajā rakstā), tās var notikt reāllaikā un aizņemt tikai dažas minūtes.
Ātrāks palaišanas laiks
Gadu gaitā, pārnesot vairāk savas dizaina darbplūsmas augšpusē uz kodu, es piedzīvoju reālus uzlabojumus - par 20 līdz 30 procentiem mazāk laika, līdz tas nonāca tirgū. Jo vairāk es to daru, jo mazāk laika es pavadu pūļu dublēšanā. Es pavadu mazāk ciklu, dodoties uz Photoshop vai Fireworks, un pēc tam atkārtoju darbu kodā.
Kādā brīdī dizainam ir jāsaskaras ar kāda veida aizmuguri, neatkarīgi no tā, vai tā ir CMS, Rails lietotne vai kas cits. Tā kā lielākā daļa manu dizaina darbu ir kodā, integrācija notiek ātrāk nekā vēlāk. Pirms pāris gadiem viens no maniem klientiem, PointRoll, piecās dienās pārgāja no prototipa uz ražošanu.
Kāpēc HTML5?
HTML5 ir vieglāk nekā iepriekšējās HTML versijas. Veikt, piemēram, dokumenta tipa deklarāciju. Iepriekšējās HTML versijās DOCTYPE izskatījās apmēram šādi:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Un bija sešas dažādas versijas. Par laimi HTML5 DOCTYPE izskatās šādi:
! DOCTYPE HTML>
Nopietni. Tieši tā. Šokējoši vienkārši.
Veidojot standarta HTML lapu, ir vairāki kopīgi elementi, piemēram, galvene, galvenā satura zona, sānjosla un kājene. Esmu pārliecināts, ka esat redzējis kaut ko līdzīgu šim:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sānjosla "> / div> / div> div id =" kājene "> / div>
Nekas tur neparasts. Bet, kad tas ir piepildīts ar saturu, šī veidne kļūst par div zupu. Turpretī ar HTML5 jaunajiem semantiskajiem elementiem jūs saņemat kaut ko daudz vienkāršāku un vieglāk skenējamu, piemēram:
header> nav> / nav> / header> raksts> malā> / malā> / raksts> kājene> / kājene>
Paskaties uz to. Kaut kas jēga.
Burvju datu atribūts
HTML5 nāk ar vēl vienu lielisku āķi, kas dod jums iespēju izveidot savu semantisko nozīmi: dati-. Iepriekš, ja vēlaties DOM elementam piešķirt kaut ko nozīmīgu, jūs aprobežojāties tikai ar ID, klasēm un lomām.
Diemžēl ID ir jābūt unikāliem. Nodarbības ir universālas (jipī!), Taču to izmantošana var ātri pārvērsties par jucekli. Lomas ir nepietiekami izmantots aktīvs, kas ARIA nozīmē nozīmīgu nozīmi. Nesen es datus izmantoju notikumu izsekošanas analīzes platformai, kuru mēs izstrādājam Inflection.Mēs esam lieli mūsu dizaina testēšanas fani. Strādājot ar lietojumprogrammām vai lapām, kurās ir daudz interaktivitātes, mēs vēlētos iegūt detalizētāku ieskatu par klientu iesaistīšanos lapā.
Ievadiet dati-. Ar to jūs varat piešķirt, nodot un piesaistīt nozīmes modeli “definēt savu”. Piemēram, jūs varat to izdarīt:
ievades tips = "poga" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Mēs varam pievienot lapai klausītāju ar JavaScript, un ikreiz, kad klients atrodas virs vai noklikšķina uz šīs pogas, mēs varam izsekot šai darbībai. Tā vietā, lai spētu tikai izsekot, ka kāds, izmantojot OAuth, reģistrējies vietnē Twitter, varam redzēt, ka viņi virzīja kursoru virs Facebook, pēc tam Twitter, pēc tam LinkedIn un pēc tam beidzot nolēma savam OAuth modelim izvēlēties Twitter.
Iedomājieties, kā to paplašināt līdz vietnei, piemēram, Pinterest, vai jaunajam MySpace dizainam, kur klienti velk un nomet flīzes, lai tos pārkārtotu, pamatojoties uz interesi. Vai arī iespējams slēpt flīzes, kuras viņus neinteresē dati- atribūts ļauj pievienot vai piešķirt papildu semantiskās nozīmes slāni lietām, kuras varat definēt. Vietnēm un lietotnēm, kas lielā mērā paļaujas uz Ajax, tas paver neierobežotas iespējas.
CSS3 - tas ir jaunais Photoshop
CSS3 parādīja pilnīgi jaunu izskatu un izjūtas dizainu, kam agrāk bija nepieciešami fona attēli, šķēles un bēdīgi slavenā “bīdāmo durvju” tehnika. Par laimi, tas viss ir pagātne.
Apskatīsim, kā izveidot iedomātu pogu ar lineāru gradientu, noapaļotiem stūriem, teksta ēnu, kas tai piešķir jauku burtu nospiešanas efektu, un mirdzumu uz kursora. Apgūstot šīs metodes, būs tāls ceļš. Katru no tiem var izmantot neatkarīgi vai dažādās kombinācijās, lai izvilktu gandrīz jebkuru pašreizējo vizuālo karstumu, kas mūsdienās ir tendence.
Vispirms izdarīsim dažus noklusējuma iestatījumus poga> un ievades tips = "iesniegt"> elementi. Pieņemot, ka izmantojat kādu no standarta CSS atiestatījumiem, mēs vienkārši pievienosim nelielu izmēru un elpošanas telpu.
/ * Pogu pogas, kurām ir pogas. ========================================= * * / poga, ievadiet [type = "iesniedz"] {augstums: 2.7em; polsterējums: .4em .7em; līnijas augstums: 1,9; }
Protips: Iesniegtās pogas un ievades var būt sarežģīti pārveidot. Es atklāju, ka, pielāgojot līnijas augstumu līdz 1,6 vai lielākam, jūs varat izvairīties no uzlaušanas, ja poga> tagu.
Tagad mēs esam "izlabojuši" savu pogu problēmu, mēs varam izveidot .btn klasei, lai dotu mums jauku tīru pogu ar noapaļotiem stūriem, lineāru gradientu, kontūru un augstspiediena izskatu.
.btn {display: inline-block; apmale: 1px solid # d4d4cc; -moz-pierobežas rādiuss: 4px; -webkit-border-rādiuss: 4px; apmales rādiuss: 4px; polsterējums: .4em .7em; fons: # edeff2; fons: -webkit-gradients (lineārs, 0% 0%, 0% 100%, no (#fefefe), krāsu apturēšana (0,55, # edeff2) līdz (# e4e6e9)); fons: -moz-lineārs-gradients (centra augšdaļa, #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; krāsa: # 6c7786; fonta lielums: 1.1em; teksta ēna: #fefefe 1px 0 1px; līnijas augstums: 1,375em; kursors: rādītājs; }
Pēc tam jauks kursora efekts ar izsmalcinātu mirdzumu, izmantojot kaste-ēna metode:
.btn: virziet kursoru, .btn: fokuss {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; fons: # e6e9eb; fons: -webkit-gradients (lineārs, 0% 0%, 0% 100%, no (# f7f7f7), color-stop (0.55, # f6f6f7), līdz (# e6e9eb)); fons: -moz-lineargradient (centra augšdaļa, # f7f7f7, # f6f6f7 55%, # e6e9eb); krāsa: # 45484b; teksta ēna: rgb (255,255,255) 1px 1px 0; apmales krāsa: # c9c9c0; }
Tagad es neesmu liels lineārā gradienta koda rakstīšanas cienītājs. Tas ir garš un mulsinošs. Kā redzat, esmu iekļāvis tikai versiju -moz, -tīmekļa komplektsun standarta modeli. Ja vēlaties iekļaut -o un -ms versijas, kods būs jā dubulto.
Ir divas citas iespējas. Viens no tiem ir CSS3 ģenerators; tīmeklī ir pieejami vairāki, tostarp ColorZilla. Bet, ja vēlaties mazliet pastiprināt savu spēli, apsveriet iespēju ienirt Sassā: apvienojumā ar Compass tas ir ļoti labs.
Sass + kompass: maģiski garšīgi
Jūs varat pārtraukt cerēt uz CSS4 vienradža izdevumu. Tas ir šeit, un to sauc par Sass + Compass. Sass nozīmē Syntactically Awesome Stylesheets: jūs pārmantojat visas CSS3 tradicionālās priekšrocības, pievienojot mainīgo, miksu, paplašinātāju un citu labumu priekus.
Nesen pārveidoju 5000 rindiņu CSS failu, kurā bija vairāk nekā 30 tā paša zilā toņa variācijas. Ar Sass katru variantu aizstāju ar šo kodu:
krāsa: $ zila;
Nosakot $ zils manā _variables.scss failu, es varu izveidot noklusējuma krāsu, uz kuru var atsaukties katrs CSS vai SCSS fails. Ikviens, kurš raksta CSS, var izmantot $ zils un nav jāuztraucas par acu pilinātāja izmantošanu, sešstūra koda vai RGB, RGBA vai HSL krāsas atrašanu.
Vai atceraties šo lineārā gradienta kodu? Tā vietā, lai rakstītu vairākas koda rindiņas, kā būtu ar šo:
@ iekļaut fonu (lineārs-gradients (# b1cfdc, # 7a9cac));
Ļaujiet Sass un Compass veikt smagu celšanu un ģenerēt jums pareizo sintaksi: izdarīts. Pieņemsim, ka vēlaties tumšāku vai gaišāku krāsas versiju. Varat pārvietot acu pilinātāju apkārt Photoshop vai vienkārši izmantot Sass apgaismošanas / tumšināšanas komandas:
@ iekļaut fonu (lineārs-gradients (tumšāks ($ litegray, 2%), tumšāks ($ gandrīz balts, 5%)));
Tas radīs lineāru gradientu ar 2% aptumšotu $ lite-pelēks un 5% aptumšojās gandrīz balts. Voil! Jums pat nav nepieciešami HEX vai RGB kodi.
jQuery: ak, jā, tu vari
Man ir jāatzīstas. JavaScript mani mēdza iebiedēt. Tad es atradu jQuery. Es nepretendēšu uz JavaScript guru, taču esmu diezgan pārliecināts, ka varu izvilkt gandrīz jebkura veida pāreju vai funkciju, kas man nepieciešama jQuery izmantošanai.
Veikt, piemēram, iespēju ekrānā parādīt sekundārā tālruņa numura ievadi, noklikšķinot uz saites Pievienot jaunu numuru. Izmantojot jQuery, jūs vienkārši uzrakstiet šo:
// - Progresīvais atklājums - // $ (’. New-number’). Noklikšķiniet (function () {$ (’. Alt-number’). FadeIn (’fast’);});
Vai meklējat kaut ko progresīvāku? Iespējams, tam ir spraudnis. Pamata uzvedība ir vienkārša, un sarežģīta ir pieejama ar jQuery.
Rāmji
Divi no visstiprākajiem rāmjiem mūsdienās ir Foundation un Bootstrap. Tagad, pirms atlaižat CSS ietvarus, ļaujiet man kaut ko pajautāt. Vai jūs izmantojat jQuery? Rubīns uz sliedēm? Django? Visi ietvari.
Tāpat kā jQuery un RoR, arī Foundation un Bootstrap ir radušies, atzīstot, ka ir diezgan daudz lietu, ko mēs darām atkal un atkal (piemēram, atiestatīšana, tipogrāfija, režģi, formas, pogas, navigācija un saraksti). Fonds un Bootstrap abi piedāvā atbalstu atsaucīgiem dizainiem, izmantojot palīgu klases. Abi ir labi dokumentēti un ir pārbaudīti uz ceļa, tāpēc jūs varat tos droši izmantot.
Viena būtiska atšķirība starp abiem: Bootstrap pamatā ir LESS sistēma CSS priekšapstrādei, savukārt Foundation - Sass. Es dodu priekšroku Sass, nevis LESS, pateicoties tā papildu iespējām, taču gan Sass, gan LESS tradicionālo CSS skvoša gabalos.
Pēdējā doma par ietvariem. Tiem, kuri nevēlas pārmantot kāda cita ietvara papildu uzpūšanos, apsveriet iespēju izvēlēties jau esošu un atkailināt līdz kailiem kauliem, vai ķiršiem izvēlēties dažus, lai savītu. Jebkurā gadījumā nav iemesla katru reizi sākt no nulles.
Pēdējās domas
Vai vēlaties lielāku kontroli pār to, kā jūsu dizains beidzot izrādās? Pārvietojiet vairāk procesu augšup pa kodu. HTML5 beidzot rada zināmu jēgu DOM. Laba ņirgāšanās par nejēdzīgu DOCTYPEs un divīts. CSS3 ir jaunais Photoshop: lineārie gradienti, robežas rādiuss un lodziņu ēnas FTW! Izmantojot tādus rīkus kā Bootstrap, Foundation, Sass un jQuery, dizaina pārvietošana pirms koda nekad nav bijusi tik vienkārša.
Atklājiet 55 pārsteidzošus HTML5 piemērus vietnē Creative Bloq.
