Ábhar
- Buntáistí a bhaineann le dearadh le cód
- Sonraí ar dtús
- Maitheas soghluaiste saor in aisce
- Teanga choiteann a aimsiú
- Foghlaim níos tapa
- Atriall tapa
- Am níos tapa le seoladh
- Cén fáth HTML5?
- An tréith draíochta sonraí
- CSS3 - is é an Photoshop nua é
- Sass + Compass: draíochtúil blasta
- jQuery: ó, sea is féidir leat
- Creataí
- Smaointe deiridh
Foilsíodh an t-alt seo den chéad uair in eagrán 235 den iris .net - an iris is mó díol ar domhan do dhearthóirí gréasáin agus d’fhorbróirí.
Ní raibh fonn mór orm riamh níos mó oibre a dhéanamh ná mar is gá. Tá claonadh agam modhanna agus uirlisí a mheas bunaithe ar a gcumas mé a dhéanamh níos éifeachtaí. Cé chomh tapa agus a thugann siad táirge oibre dúinn? Cé chomh héifeachtach agus atá siad ag cumarsáid? An bhfanann siad as ár mbealach?
Thar na blianta, rinne mé mo phróiseas dearaidh agus mo uirlisí a choigeartú. Samhlaím go leanfaidh mé ag déanamh amhlaidh. Sin an cineál dearadh don teicneolaíocht agus don ngréasán. Tá an tionscal seo ag síorathrú; ní mór go dtiocfadh forbairt ar ár bpróiseas agus ar ár n-uirlisí freisin.
Éascaíonn HTML5 agus CSS3 níos mó den phróiseas dearaidh a aistriú suas an abhainn - amach ó Photoshop agus níos mó i dtreo dearadh beo, análaithe. De bharr uirlisí mar Foundation, Bootstrap, agus jQuery tá sé níos éasca teagmháil a dhéanamh le do phróiseas dearaidh.
Buntáistí a bhaineann le dearadh le cód
Ar dtús, níl mé ag moladh Photoshop, nó aon eagarthóir dearaidh amhairc eile a fhágáil ó do shreabhadh oibre. Ina áit sin, díreoidh mé ar na buntáistí a bhaineann leis an dearadh sin a aistriú go cód níos luaithe ná níos déanaí.
Sonraí ar dtús
Is é an rud a thaitin liom i gcónaí faoi dhearadh le HTML ná go spreagann sé smaoineamh ó thaobh sonraí ar dtús. I gcodarsnacht leis sin, agus cláir líníochta mar Illustrator, OmniGraffle, nó Balsamiq á n-úsáid agat, tosaíonn tú le bosca agus líonann tú é le sonraí.
I HTML tógann tú an DOM (samhail réad doiciméad), cosúil le tábla ábhair a thógáil. Is filleadh ar dhearadh faisnéise fíor é le hordlathais bhríocha. Tógann HTML5 céim eile leis trí eilimintí séimeantacha nua a chur leis: alt, roinn, ceanntásc, leataobh, buntásc agus mar sin de. Comhcheanglaíonn an cur chuige seo ar dtús sonraí go deas le dearaí sofhreagracha soghluaiste ar dtús.
Maitheas soghluaiste saor in aisce
Má tá tú á léamh seo, is dócha go bhfuil tú ag dearadh le haghaidh soghluaiste. Agus gach seans go mbeidh ort foirm nó dhó a dhearadh. Le HTML5, tá an t-ádh ort. Roimh HTML5, réimse téacs nó pasfhocal a bhí i do chineálacha ionchuir go mór mór. Thug HTML5 roinnt cineálacha ionchuir breise isteach, lena n-áirítear:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> ionchur type = "date-time">
Rud atá fíor-uamhnach faoi na cineálacha ionchuir uathúla breise seo ná go n-aithníonn brabhsálaithe soghluaiste ar iOS agus Android iad agus go ndéanann siad méarchlár atá feasach ar chomhthéacs a mhalartú go huathoibríoch - gan aon plug-ins nó hacks jQuery speisialta ag teastáil. Ó, agus mura bhfuil a fhios ag do bhrabhsálaí cad é ionchur type = "r-phost"> is ea, ansin ní mhainníonn sé ach ionchur téacs.
Teanga choiteann a aimsiú
“Tá sé uamhnach conas is féidir lenár ndearthóirí agus ár bhforbróirí oibriú sa teanga chéanna” - John Drago, forbróir feidhmchlár ag Inflection.
Féach an bhfuil eolas air seo. Tá mé i seomra comhdhála le leath-dhosaen devs feidhmchlár ar thaobh an fhreastalaí atá in ann ciorcail a chódú timpeall orm i Ruby, Python, Java nó .NET. Is mise an t-aon dearthóir. Déantar roinnt de mo mholtaí a dhíbhe ar dtús mar a bheith ró-chasta le cur i bhfeidhm. Siúilim suas go dtí an clár bán agus tosaím ag scríobh roinnt HTML agus CSS ar an gclár maidir le conas a d’fhéadfaí an dearadh a chur i bhfeidhm. Go tobann athraíonn ton an chomhrá agus deir duine de na forbróirí go drogallach, “Bhuel, sea - má dhéanaimid é ar an mbealach sin, d’fhéadfadh go n-oibreodh sé."
Tá níos mó comhráite le forbróirí tar éis níos mó de mo phróiseas dearaidh a aistriú go cód. Tá ciseal breise meas ann a thuilltear trí fhios a bheith agat conas do dhearaí a chur i gcód. Ní gá duit a bheith i do shaineolaí chun an meas sin a thuilleamh. Cé go bhfuil mo chuid scileanna HTML agus CSS láidir go leor, tá mo scileanna JavaScript measartha ar an mbealach is fearr. Agus nílim cúthail faoi sin a admháil. Fós féin, agus muid ag obair le forbróirí frontend, nó taobh an fhreastalaí, is buntáiste ollmhór é go bhféadfaimis labhairt i dteanga choiteann, nó bualadh le chéile leathbhealach.
Foghlaim níos tapa
Cé gur féidir le frámaí sreinge agus comhdhúile amhairc cuidiú le pleanáil, tá na déantáin statacha seo teoiriciúil. Cé mhéad uair a rinne tú iarracht idirghníomhaíocht a mhíniú do dhuine, gan ach freagra a thabhairt orthu, “Buille faoi thuairim go mbeidh orm é a fheiceáil.” Dá luaithe a gheobhaidh tú fréamhshamhla, is féidir le duine idirghníomhú leis, is luaithe a gheobhaidh tú taithí ar an dearadh agus féachaint an n-oibríonn smaointe.
Atriall tapa
Cathain a bhí an dearadh deireanach a mheaitseáil le táirgeadh a mheaitseáil go díreach le do chomplacht Photoshop? Beagnach in am ar bith. Le dearadh táirgí digiteacha, tarlaíonn athrú i gcónaí. Ina theannta sin, is féidir le hathruithe ar nós méid do cheannteidil a mhéadú ó 22pt go 24pt thar cúpla dosaen scáileán uaireanta a thógáil i Photoshop. Tugann Réada Cliste leibhéal éigin de dhearadh réad-dhírithe duit i Photoshop. Ar an drochuair, ní úsáideann an chuid is mó de na dearthóirí físe a bhfuil a fhios agam go leor Réada Cliste. Le CSS, toisc go spreagann sé cur chuige níos córasaí i leith dearadh, tógann athruithe clóghrafaíochta nóiméad seachas uaireanta.
Cad mar gheall ar na grádáin líneacha a athrú ar do chuid cnaipí go léir? Nó méid teorann? Cad mar gheall ar athrú ó choirnéil chearnacha go coirnéil chothromú 2px? I Photoshop, féadfaidh sé seo uaireanta a thógáil agus caithfidh tú é a chódú fós. Cuidíonn an cumas dearadh i gcód an turas cruinn a sheachaint le dul ar ais isteach i Photoshop chun an dearadh amhairc a atheagrú. Nuair a bhogann tú na hathruithe sin suas an abhainn go cód, ag úsáid CSS3 agus Sass (a chlúdóidh mé níos déanaí san alt seo) is féidir leo tarlú i bhfíor-am agus gan ach cúpla nóiméad a thógáil.
Am níos tapa le seoladh
Thar na blianta, agus mé ag aistriú níos mó de mo shreabhadh oibre dearaidh suas an abhainn go cód, tháinig feabhas mór orm - thart ar laghdú 20 go 30 faoin gcéad ar an am chun an mhargaidh. An níos mó a dhéanaim é seo, is lú ama a chaithim iarrachtaí dúblacha. Tá níos lú timthriallta á chaitheamh agam ag dul isteach i Photoshop nó Tinte ealaíne agus ansin ag athdhéanamh na hoibre i gcód.
Ag pointe áirithe caithfidh an dearadh comhéadan a dhéanamh le cineál éigin iardhátaithe, cibé acu is CMS, aip Rails nó rud éigin eile é. Toisc go bhfuil an chuid is mó de mo chuid oibre dearaidh i gcód, tarlaíonn comhtháthú níos luaithe ná níos déanaí. Cúpla bliain ó shin, chuaigh duine de mo chliaint, PointRoll, ó fhréamhshamhail go táirgeadh i gceann cúig lá.
Cén fáth HTML5?
Tá HTML5 níos éasca ná leaganacha roimhe seo de HTML. Tóg mar shampla an dearbhú cineál doiciméad. I leaganacha roimhe seo de HTML, rinne an DOCTYPE d'fhéach sé rud mar seo:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Agus bhí sé leagan éagsúla ann. Luckily an HTML5 DOCTYPE seo mar atá:
DOCTYPE HTML>
Dáiríre. Sin é. Shockingly simplí.
Agus leathanach caighdeánach HTML á chruthú, tá roinnt eilimintí comónta ann, mar shampla ceanntásc, príomhréimse ábhair, barra taobh agus buntásc. Táim cinnte go bhfaca tú rud mar seo roimhe seo:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Ní dhéanfaidh aon ní as an ngnáth ann. Ach nuair a bhíonn sé líonta le hábhar, casann an teimpléad seo anraith div. I gcodarsnacht leis sin, le heilimintí séimeantacha nua HTML5, faigheann tú rud i bhfad níos simplí agus níos éasca a scanadh, mar seo:
ceanntásc> nav> / nav> / header> article> leataobh> / leataobh> / alt> buntásc> / buntásc>
Féach ar sin. Rud a dhéanann ciall.
An tréith draíochta sonraí
Tagann HTML5 le hook uamhnach eile a thugann an cumas duit do bhrí shéimeantach féin a cheird: an sonraí-. Roimhe seo, má theastaigh uait rud éigin brí a shannadh d’eilimint DOM, bhí tú teoranta d’aitheantas, ranganna agus róil.
Ar an drochuair, caithfidh IDanna a bheith uathúil. Tá na ranganna uilíoch (yippee!), Ach má úsáidtear iad is féidir leo dul ina praiseach go tapa. Is sócmhainn tearcúsáidte iad róil a sholáthraíonn brí shuntasach don ARIA. Le déanaí, bhí mé ag úsáid sonraí- le haghaidh ardán anailíse rianaithe imeachta atá á fhorbairt againn ag Inflection.Is mór againn ár ndearaí a thástáil. Agus muid ag obair ar fheidhmchláir nó ar leathanaigh a bhfuil an-idirghníomhaíocht acu, ba mhaith linn léargas níos gránaí a bheith againn ar rannpháirtíocht na gcustaiméirí ar an leathanach.
Iontráil an sonraí-. Leis sin is féidir leat sannadh, pas a fháil agus Hook a dhéanamh i múnla brí ‘sainmhínigh do chuid féin’. Mar sin, mar shampla, is féidir leat é seo a dhéanamh:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "clár "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Is féidir linn éisteoir le JavaScript a cheangal leis an leathanach agus aon uair a osclaíonn custaiméir an cnaipe seo, nó a chliceálann air, is féidir linn an ghníomhaíocht sin a rianú. In áit a bheith in ann a rianú go ndearna duine éigin a chláraigh trí OAuth le Twitter, is féidir linn a fheiceáil go ndeachaigh siad thar Facebook, ansin Twitter, ansin LinkedIn, agus ansin shocraigh siad ar deireadh Twitter a roghnú dá samhail OAuth.
Samhlaigh é seo a leathnú chuig láithreán mar Pinterest, nó an dearadh Myspace nua ina dtarraingíonn agus a scaoilfidh custaiméirí tíleanna chun iad a athordú bunaithe ar ús. Nó b’fhéidir tíleanna a chur i bhfolach nach bhfuil suim acu iontu sonraí- cuireann tréith ar do chumas sraith bhreise de bhrí shéimeantach a cheangal nó a shannadh do rudaí is féidir leat a shainiú. I gcás suíomhanna agus aipeanna atá ag brath go mór ar Ajax osclaíonn sé deiseanna gan teorainn.
CSS3 - is é an Photoshop nua é
Thug CSS3 leibhéal iomlán nua de dhearadh cuma agus mothúchán a bhíodh ag teastáil chun íomhánna cúlra, slisní, agus an teicníc chlúiteach ‘doirse sleamhnáin’ a éileamh. Buíochas le Dia, sin uile an t-am atá thart.
Breathnaímid ar chnaipe mhaisiúil a dhéanamh le grádán líneach, coirnéil chothromú, scáth téacs a thugann éifeacht deas preasa litreach dó, agus glow ar hover. Déanfaidh foghlaim na dteicnící seo bealach fada. Is féidir gach ceann acu a úsáid go neamhspleách, nó i gcomhcheangail éagsúla chun tarraingt amach faoi aon cheann de na hotness amhairc atá ag claonadh ar an ngréasán inniu.
Ar dtús, déanaimis cúpla coigeartú ar an réamhshocrú cnaipe> agus ionchur type = "submit"> eilimintí. Ag glacadh leis go n-úsáideann tú ceann de na hathshocruithe caighdeánacha CSS, ní chuirfimid ach seomra beag méide agus análaithe leis.
/ * Cnaipí cnaipí, a bhfuil na cnaipí acu. ======================================= * * / cnaipe, ionchur [type = "submit"] {height: 2.7em; stuáil: .4em .7em; airde líne: 1.9; }
Stráice: Is féidir le cnaipí agus ionchuir a chuirtear isteach a bheith deacair iad a athbhunú. Fuair mé amach trí airde na líne a choigeartú go 1.6 nó níos mó, is féidir leat an hack a sheachaint go dteastaíonn div nó réise breise laistigh den cnaipe> tag.
Anois agus ár saincheist cnaipe ‘seasta’ againn, is féidir linn a .btn rang chun cnaipe deas glan a thabhairt dúinn le coirnéil chothromú, grádán líneach, imlíne, agus an cuma litreach sin.
.btn {taispeáint: inlíne-bloc; teorainn: 1px soladach # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; ga teorann: 4px; stuáil: .4em .7em; cúlra: # edeff2; cúlra: -webkit-grádán (líneach, 0% 0%, 0% 100%, ó (#fefefe), dath-stad (0.55, # edeff2), go (# e4e6e9)); cúlra: -moz-líneach-grádán (barr an lár, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-bosca-scáth: rgba (160,172,187, .7) 0 0 .2em 0; scáth-bhosca: rgba (160,172,187, .7) 0 0 .2em 0; dath: # 6c7786; cló-mhéid: 1.1em; scáth-théacs: #fefefe 1px 0 1px; airde líne: 1.375em; cúrsóir: pointeoir; }
Agus ansin éifeacht hover deas le glow subtle ag baint úsáide as an scáth-bhosca modh:
.btn: hover, .btn: fócas {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-bosca-scáth: # 129ceb 0 0 2px; scáth-bhosca: # 129ceb 0 0 2px; cúlra: # e6e9eb; cúlra: -webkit-grádán (líneach, 0% 0%, 0% 100%, ó (# f7f7f7), dath-stad (0.55, # f6f6f7), go (# e6e9eb)); cúlra: -moz-lineargradient (barr lár, # f7f7f7, # f6f6f7 55%, # e6e9eb); dath: # 45484b; scáth-théacs: rgb (255,255,255) 1px 1px 0; dath teorann: # c9c9c0; }
Anois, níl fonn mór orm an cód grádán líneach a scríobh. Tá sé fada agus mearbhall. Mar a fheiceann tú, níl an leagan do -moz, -webkit, agus an tsamhail chaighdeánach. Más mian leat leaganacha -o agus -ms a áireamh, beidh ort an cód a dhúbailt.
Tá dhá rogha eile ann. Is gineadóir CSS3 ceann acu; tá roinnt acu ar fáil ar an ngréasán, lena n-áirítear ColorZilla. Ach más mian leat do chluiche a mhéadú beagán, smaoinigh ar tumadóireacht isteach i Sass: in éineacht le Compass, is diasend é.
Sass + Compass: draíochtúil blasta
Is féidir leat stop a bheith ag súil le heagrán unicorn CSS4. Tá sé anseo agus tugtar Sass + Compass air. Seasann Sass do Bileoga Stíleanna Awesome Syntactically: sealbhaíonn tú na buntáistí traidisiúnta go léir a bhaineann le CSS3 leis an sólás breise a bhaineann le hathróga, meascáin, sínteoirí agus earraí maithe eile.
D'athghníomhaigh mé comhad CSS 5,000 líne le déanaí a raibh níos mó ná 30 athrú ar an scáth céanna gorm. Le Sass, chuir mé an cód seo in ionad gach athraithe:
dath: $ gorm;
Trí shainiú $ gorm i mo _variables.scss comhad, is féidir liom dath réamhshocraithe a chruthú ar féidir le gach comhad CSS nó SCSS tagairt a dhéanamh dó. Is féidir le duine ar bith a scríobhann CSS úsáid a bhaint as $ gorm agus gan a bheith buartha faoi eyedropper a úsáid, cód heicsidheachúlach, nó dath RGB, RGBA nó HSL a fháil.
Cuimhnigh an cód grádán líneach sin? In ionad roinnt línte cód a scríobh, cad faoi seo:
cúlra @include (grádán líneach (# b1cfdc, # 7a9cac));
Lig do Sass agus Compass an t-ardú trom a dhéanamh agus an chomhréir cheart a ghiniúint duit: déanta. Ligean le rá gur mhaith leat leagan níos dorcha nó níos éadroime de dhath. D’fhéadfá an t-eyedropper a bhogadh timpeall i Photoshop, nó díreach na horduithe éadroma / dorcha i Sass a úsáid:
cúlra @include (grádán líneach (dorchaigh ($ litegray, 2%), dorchaigh ($ as-bán, 5%)));
Cruthóidh sé sin grádán líneach le dorchadas 2% $ lite-liath agus dhorchaigh 5% as bán. Voil! Ní gá duit fiú na cóid HEX nó RGB.
jQuery: ó, sea is féidir leat
Tá admháil le déanamh agam. JavaScript a úsáidtear chun imeaglú orm. Ansin fuair mé jQuery. Ní mhaím gur gúrú JavaScript mé, ach táim muiníneach go leor gur féidir liom aistriú faoi aon chineál aistrithe, nó feidhm a theastaíonn uaim chun jQuery a úsáid.
Tóg, mar shampla, an cumas ionchur tánaisteach uimhir theileafóin a thaispeáint ar an scáileán trí nasc Cuir Uimhir Nua a chliceáil. Agus jQuery á úsáid agat, ní dhéanann tú ach é seo a scríobh:
// - Nochtadh forásach - // $ (’. Uimhir nua’). Cliceáil (feidhm () {$ (’. Alt-uimhir’). FadeIn (‘tapa’);});
Ag lorg rud éigin níos airde? Is dócha go bhfuil breiseán ann dó. Tá iompraíochtaí bunúsacha éasca agus tá sé furasta teagmháil a dhéanamh le jQuery.
Creataí
Dhá cheann de na creataí is láidre sa lá atá inniu ann ná Foundation agus Bootstrap. Anois, sula ndéanann tú creataí CSS a dhíbhe, lig dom rud a chur ort. An úsáideann tú jQuery? Ruby ar Rails? Django? Gach creat.
Díreach cosúil le jQuery agus RoR, rugadh Foundation agus Bootstrap as a aithint go bhfuil roinnt mhaith rudaí a dhéanaimid arís agus arís eile (mar shampla athshocruithe, clóghrafaíocht, greillí, foirmeacha, cnaipí, nav agus liostaí). Tugann Foundation agus Bootstrap tacaíocht do dhearaí sofhreagracha trí ranganna cúntóra a úsáid. Tá an dá dhoiciméadú go maith agus rinneadh tástáil bóthair orthu, ionas gur féidir leat iad a úsáid le muinín.
Príomhdhifríocht amháin idir an dá cheann: Tá Bootstrap bunaithe ar an gcóras LESS le haghaidh réamhphróiseáil CSS, ach tá Foundation bunaithe ar Sass. Is fearr liom Sass ná LESS mar gheall ar a chumais bhreise, ach déanann Sass agus LESS squash CSS traidisiúnta ná píosaí.
Smaoineamh deireanach amháin ar chreataí. Dóibh siúd nach bhfuil ag iarraidh an bloat breise de chreat duine eile a oidhreacht, smaoinigh ar cheann atá ann cheana a phiocadh agus é a bhaint de na cnámha loma, nó piocadh silíní ó chúpla ceann chun do cheann féin a rolladh. Slí amháin nó slí, níl aon chúis ann i ndáiríre chun tosú ón tús gach uair.
Smaointe deiridh
Ag iarraidh níos mó smachta ar an gcaoi a n-éiríonn le do dhearadh sa deireadh? Bog níos mó próiseas suas an abhainn go cód. Tugann HTML5 ciall éigin don DOM sa deireadh. Riddance maith go nonsensical DOCTYPEs agus divitis. Is é CSS3 an Photoshop nua: grádáin líneacha, borderradius, agus scáthchruth bosca FTW! Agus le huirlisí mar Bootstrap, Foundation, Sass agus jQuery, ní raibh sé riamh éasca dearadh a aistriú suas an abhainn go cód.
Faigh amach 55 sampla iontach de HTML5 thall ag Creative Bloq.
