Përmbajtje
- Përfitimet për të hartuar me kod
- Të dhënat së pari
- Mirësia mobile falas
- Gjetja e një gjuhe të përbashkët
- Mësoni më shpejt
- Përsëritja e shpejtë
- Koha më e shpejtë për të nisur
- Pse HTML5?
- Atributi magjik i të dhënave
- CSS3 - është Photoshop i ri
- Sass + Busulla: e shijshme magjike
- jQuery: oh, po mundeni
- Kornizat
- Mendimet përfundimtare
Ky artikull u shfaq për herë të parë në numrin 235 të revistës .net - revista më e shitur në botë për krijuesit e faqeve në internet.
Unë kurrë nuk kam qenë një tifoz i madh për të bërë ndonjë punë më shumë sesa duhej. Kam prirjen të vlerësoj metodat dhe mjetet bazuar në aftësinë e tyre për të më bërë, ose ekipin tim, më efektive. Sa shpejt na çojnë në një produkt që punon? Sa efektivë janë ata në komunikim? A qëndrojnë ata larg nga rruga jonë?
Gjatë viteve, unë kam rregulluar procesin dhe mjetet e mia të dizajnit. Imagjinoj se do të vazhdoj ta bëj këtë. Kjo është natyra e dizajnimit për teknologjinë dhe rrjetin. Kjo industri vazhdimisht evoluon; procesi dhe mjetet tona duhet të evoluojnë gjithashtu.
HTML5 dhe CSS3 e bëjnë më të lehtë kalimin e më shumë procesit të dizajnit në rrjedhën e sipërme - larg Photoshop dhe më shumë drejt një dizajni të gjallë dhe të frymëmarrjes. Mjete të tilla si Foundation, Bootstrap dhe jQuery e bëjnë lëvizjen më të madhe të procesit tuaj të dizajnit për t'u koduar më të arritshme.
Përfitimet për të hartuar me kod
Së pari, unë nuk po mbështes rënien e Photoshop-it, ose ndonjë redaktor tjetër të dizajnit vizual nga rrjedha juaj e punës. Në vend të kësaj, unë do të përqendrohem në përfitimet e zhvendosjes së këtij dizajni në kod më shpejt sesa më vonë.
Të dhënat së pari
Gjëja që më ka pëlqyer gjithmonë në lidhje me hartimin me HTML është se inkurajon të menduarit nga një perspektivë e parë e të dhënave. Në të kundërt, duke përdorur programe vizatimi si Illustrator, OmniGraffle ose Balsamiq, filloni me një kuti dhe e mbushni atë me të dhëna.
Në HTML ju ndërtoni DOM (modeli i objektit të dokumentit), njëlloj si të ndërtoni një tabelë të përmbajtjes. Shtë një kthim në hartimin e informacionit të vërtetë me hierarki domethënëse. HTML5 e çon atë një hap më tej me shtimin e elementeve të reja semantike: artikulli, seksioni, kryefjala, mënjanë, fundi i faqes etj. Kjo qasje e parë e të dhënave bashkohet bukur me modelin e parë të lëvizshëm, të përgjegjshëm.
Mirësia mobile falas
Nëse po e lexoni këtë, ju me siguri po dizajnoni për celular. Dhe shanset janë që ju do të duhet të hartoni një ose dy formularë. Me HTML5, jeni me fat. Para HTML5, llojet e dhëna ishin pothuajse ose një fushë teksti ose fjalëkalimi. HTML5 prezantoi një numër të llojeve shtesë të hyrjes, duke përfshirë:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "data-time">
Ajo që është me të vërtetë e mrekullueshme për këto lloje shtesë të hyrjes unike është që shfletuesit celularë në iOS dhe Android i njohin ato dhe shkëmbejnë automatikisht një tastierë të vetëdijshme për kontekstin - pa kërkuar shtojca ose hak të veçantë jQuery. Oh, dhe nëse shfletuesi juaj nuk e di se çfarë është lloji i hyrjes = "email"> është, atëherë ajo vetëm si parazgjedhje e futjes së tekstit.
Gjetja e një gjuhe të përbashkët
"Awshtë e mrekullueshme se si dizajnerët dhe zhvilluesit tanë mund të punojnë në të njëjtën gjuhë" - John Drago, zhvilluesi i aplikacioneve në Inflection.
Shikoni nëse kjo tingëllon e njohur. Unë jam në një dhomë konferencash me një gjysmë duzine aplikacionesh në server, të cilët mund të kodojnë qarqet rreth meje në Ruby, Python, Java ose .NET. Unë jam projektuesi i vetëm. Disa nga sugjerimet e mia fillimisht janë hedhur poshtë si shumë të komplikuara për t'u zbatuar. Unë shkoj deri në tabelën e bardhë dhe filloj të shkruaj disa HTML dhe CSS në tabelë për mënyrën se si mund të zbatohet dizajni. Papritmas toni i bisedës ndryshon dhe një nga zhvilluesit me ngurrim thotë: "Epo, po - nëse e bëjmë në atë mënyrë, mund të funksionojë".
Zhvendosja e më shumë e procesit tim të dizajnit në kod ka përmirësuar bisedat me zhvilluesit. Ka një shtresë të shtuar respekti të fituar duke ditur se si të krijoni planet tuaja në kod. Ju nuk duhet të jeni ekspert për të fituar atë respekt. Ndërsa aftësitë e mia HTML dhe CSS janë mjaft të forta, aftësitë e mia JavaScript janë mesatare në rastin më të mirë. Dhe nuk jam i ndrojtur ta pranoj këtë. Akoma, kur punojmë me frontend, ose zhvillues nga ana e serverit, fakti që mund të flasim në një gjuhë të përbashkët, ose të takohemi në gjysmë të rrugës, është një avantazh i madh.
Mësoni më shpejt
Ndërsa kornizat me tel dhe përbërjet vizuale mund të ndihmojnë në planifikim, këto objekte statike janë teorike. Sa herë keni provuar t'i shpjegoni dikujt një ndërveprim, vetëm që ai të përgjigjet: "Unë mendoj se do të duhet ta shoh". Sa më shpejt të arrini në një prototip, diçka me të cilën njerëzit mund të bashkëveprojnë, aq më shpejt mund të përjetoni modelin dhe të shihni nëse idetë funksionojnë.
Përsëritja e shpejtë
Kur ishte hera e fundit që një dizajn përfundimtar që u dërgua në prodhim përputhej saktësisht me kompjuterin tuaj Photoshop? Pothuajse kurrë. Me dizenjimin e produktit dixhital, ndryshimi ndodh vazhdimisht. Për më tepër, ndryshime të tilla si rritja e madhësisë së titujve tuaj nga 22pt në 24pt nëpër dy dhjetëra ekranet mund të marrin orë në Photoshop. Objektet Smart ju japin një farë niveli të dizajnit të orientuar drejt objektit në Photoshop. Për fat të keq, shumica e dizenjuesve vizualë që unë njoh nuk përdorin sa duhet Objektet e Zgjuara. Me CSS, sepse inkurajon një qasje më sistematike të dizajnit, ndryshimet tipografike marrin minuta në vend të orëve.
Po në lidhje me ndryshimin e gradientëve linearë në të gjithë butonat tuaj? Apo madhësia e një kufiri? Po në lidhje me ndryshimin nga qoshet në katror në ato të rrumbullakosura 2px? Në Photoshop, kjo mund të zgjasë me orë dhe ju ende duhet ta kodoni. Aftësia për të hartuar në kod ndihmon në shmangien e vajtjes së kthimit në Photoshop për përsëritjen e modelit vizual. Kur i zhvendosni ato ndryshime në rrjedhën e sipërme në kod, duke përdorur CSS3 dhe Sass (të cilat do t'i trajtoj më vonë në këtë artikull) ato mund të ndodhin në kohë reale dhe zgjasin vetëm disa minuta.
Koha më e shpejtë për të nisur
Me kalimin e viteve, ndërsa kalova më shumë rrjedha e punës time të dizajnit në rrjedhën e sipërme në kod, unë përjetova një përmirësim real - rreth një ulje prej 20 deri në 30 përqind të kohës në treg. Sa më shumë që e bëj këtë, aq më pak kohë kaloj duke kopjuar përpjekjet. Po kaloj më pak cikle duke shkuar në Photoshop ose Fishekzjarre dhe pastaj duke përsëritur punën në kod.
Në një moment, dizenjimi duhet të ndërfaqet me një lloj backend, qoftë ky një aplikacion CMS, Rails apo diçka tjetër. Meqenëse shumica e punës sime të dizajnit është në kod, integrimi ndodh më shpejt sesa më vonë. Disa vjet më parë, një nga klientët e mi, PointRoll, kaloi nga prototipi në prodhim brenda pesë ditësh.
Pse HTML5?
HTML5 është më e lehtë se versionet e mëparshme të HTML. Merrni për shembull deklaratën e llojit të dokumentit. Në versionet e mëparshme të HTML, DOKTIPI dukej diçka e tillë:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Dhe kishte gjashtë versione të ndryshme. Për fat të mirë HTML5 DOKTIPI duket si kjo:
! DOCTYPE HTML>
Seriozisht Kjo eshte. Shockingly thjeshtë.
Kur krijoni një faqe standarde HTML, ka një numër elementësh të zakonshëm, të tilla si një kokë, zona kryesore e përmbajtjes, shiriti anësor dhe faqja. Jam i sigurt që keni parë diçka të tillë më parë:
div id = "header> div id =" nav "> / div> / div> div id =" kryesore "> div id =" shirit anësor "> / div> / div> div id =" footer "> / div>
Asgjë të jashtëzakonshme atje. Por sapo të plotësohet me përmbajtje, ky model kthehet në supë div. Në të kundërt, me elementet e reja semantike të HTML5, ju merrni diçka shumë më të thjeshtë dhe më të lehtë për t’u skanuar, si kjo:
header> nav> / nav> / header> artikulli> mënjanë> / mënjanë> / artikull> fundin>> fundin>
Shikoni atë. Diçka që ka kuptim.
Atributi magjik i të dhënave
HTML5 vjen me një tjetër goditje të mrekullueshme që ju jep mundësinë të krijoni kuptimin tuaj semantik: të dhëna-. Më parë, nëse dëshironit të caktonit diçka domethënëse për një element DOM, do të ishit të kufizuar në ID, klasa dhe role.
Fatkeqësisht, ID-të duhet të jenë unike. Klasat janë universale (yippee!), Por përdorimi i tyre mund të kthehet shpejt në një rrëmujë. Rolet janë një aktiv i papërdorur që japin kuptim të rëndësishëm për ARIA. Kohët e fundit, unë kam përdorur të dhëna- për një platformë analitike për ndjekjen e ngjarjeve që po zhvillojmë në Inflection.Ne jemi adhurues të mëdhenj të testimit të dizenjove tona. Kur punojmë në aplikacione ose faqe që kanë shumë ndërveprim, do të dëshironim të kishim një pasqyrë më të hollësishme të angazhimit të klientit brenda faqes.
Hyni në të dhëna-. Me të mund të caktoni, të kaloni së bashku dhe të lidheni me një model kuptimi meaning përcaktoni tuajin ’. Kështu, për shembull, mund ta bësh këtë:
lloji i hyrjes = "butoni" data-id = "facebook" dataregion = "kryesore" data-event = "regjistri"> lloji i input = "butoni" data-id = "twitter" dataregion = "kryesore" data-event = "regjistri "> lloji i hyrjes =" butoni "data-id =" linkedin "dataregion =" kryesore "data-event =" regjistrohu ">
Ne mund të bashkëngjitni një dëgjues me JavaScript në faqe dhe në çdo kohë që një klient kalon sipër, ose klikon këtë buton, ne mund ta gjurmojmë atë aktivitet. Në vend që të jemi në gjendje të gjurmojmë vetëm se dikush është regjistruar përmes OAuth me Twitter, ne mund të shohim se ai qëndronte pezull mbi Facebook, pastaj Twitter, pastaj LinkedIn dhe më në fund vendosi të zgjidhte Twitter për modelin e tyre OAuth.
Imagjinoni ta zgjeroni këtë në një sit si Pinterest, ose modelin e ri të Myspace ku klientët tërheqin dhe lëshojnë pllaka për t'i rirenditur ato bazuar në interes. Ose ndoshta fshehja e pllakave për të cilët nuk janë të interesuar të dhëna- atributi ju mundëson të bashkëngjitni ose caktoni një shtresë shtesë të kuptimit semantik për gjërat që mund të përcaktoni. Për faqet dhe aplikacionet që mbështeten shumë tek Ajax hap mundësi të pakufizuara.
CSS3 - është Photoshop i ri
CSS3 solli një nivel krejt të ri të modelimit të pamjes dhe ndjesisë që kërkonte dikur imazhe në sfond, feta dhe teknikën famëkeqe të doors dyerve rrëshqitëse ’. Fatmirësisht, e gjitha është një gjë e së kaluarës.
Le të hedhim një vështrim për të bërë një buton të zbukuruar me një gradient linear, qoshe të rrumbullakosura, hije teksti që i jep asaj një efekt të bukur shtypje shkronjash dhe një shkëlqim të pezull. Mësimi i këtyre teknikave do të shkojë shumë larg. Secili prej tyre mund të përdoret në mënyrë të pavarur, ose në kombinime të ndryshme për të nxjerrë pothuajse ndonjë nga nxehtësia aktuale vizuale që trendon internetin sot.
Së pari, le të bëjmë disa rregullime të parazgjedhura butoni> dhe lloji i input = "paraqesë"> elementet. Duke supozuar se përdorni një nga rivendosjet standarde të CSS, ne thjesht do të shtojmë një hapësirë të vogël për përmasat dhe frymëmarrjen.
/ * Butonat e butonave, butonat e të cilëve morën. ======================================== butoni * * /, hyrja [type = "paraqesë"] {lartësia: 2.7em; mbushje: .4em .7em; lartësia e vijës: 1.9; }
Protip: Butonat dhe hyrjet që janë dorëzime mund të jenë të ndërlikuara për t'u rimodeluar. Kam gjetur duke rregulluar lartësinë e vijës në 1.6 ose më të madhe, ju mund të shmangni kollitjen e nevojës për një ndarje shtesë ose hapësirë brenda butoni> etiketë
Tani ne kemi 'rregulluar' çështjen tonë të butonit, ne mund të krijojmë një .btn klasa për të na dhënë një buton të bukur të pastër me kënde të rrumbullakosura, një gradient linear, skicë dhe atë vështrim shtypës letre.
.btn {display: inline-block; bordura: 1px solide # d4d4cc; -moz-kufiri-rrezja: 4px; -rrezja e kufirit-uebkit: 4px; rrezja kufitare: 4px; mbushje: .4em .7em; sfond: # edeff2; sfondi:-gradient i webkit (linear, 0% 0%, 0% 100%, nga (#fefefe), ndalimi i ngjyrave (0,55, # edeff2), te (# e4e6e9)); sfondi: -moz-linear-gradient (krye në qendër, #fefefe, # edeff2 55%, # e4e6e9); -moz-kuti-hije: rgba (160,172,187, .7) 0 0 .2em 0; -ebekti-kuti-hije: rgba (160,172,187, .7) 0 0 .2em 0; kuti-hije: rgba (160,172,187, .7) 0 0 .2em 0; ngjyra: # 6c7786; madhësia e shkronjave: 1.1em; hije teksti: #fefefe 1px 0 1px; lartësia e vijës: 1.375em; kursori: tregues; }
Dhe pastaj një efekt i këndshëm rri pezull me një shkëlqim të hollë duke përdorur kuti-hije metoda:
.btn: rri pezull, .btn: fokus {-moz-kuti-hije: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; kuti-hije: # 129ceb 0 0 2px; sfond: # e6e9eb; sfondi:-gradient i webkit (linear, 0% 0%, 0% 100%, nga (# f7f7f7), ndalimi i ngjyrave (0,55, # f6f6f7), te (# e6e9eb)); sfondi: -moz-lineargradient (pjesa e sipërme e qendrës, # f7f7f7, # f6f6f7 55%, # e6e9eb); ngjyra: # 45484b; hije teksti: rgb (255,255,255) 1px 1px 0; ngjyra e kufirit: # c9c9c0; }
Tani, unë nuk jam një tifoz i madh për të shkruar kodin linear të gradientit. Longshtë e gjatë dhe konfuze. Siç mund ta shihni, unë kam përfshirë vetëm versionin për -moz, -ebekit, dhe modeli standard. Nëse dëshironi të përfshini versionet -o dhe -ms, do të duhet të dyfishoni kodin.
Ekzistojnë edhe dy mundësi të tjera. Njëri është gjenerator CSS3; ka disa në dispozicion në internet, duke përfshirë ColorZilla. Por nëse doni të rritni pak lojën tuaj, merrni parasysh zhytjen në Sass: kombinuar me Compass, është një dhuratë nga perëndia.
Sass + Busulla: e shijshme magjike
Ju mund të ndaloni së shpresuari për botimin njëbrirësh CSS4. Hereshtë këtu dhe quhet Sass + Busull. Sass qëndron për Stilet e Stileve Sintaktikisht të Mrekullueshme: ju trashëgoni të gjitha përfitimet tradicionale të CSS3 me gëzimet e shtuara të variablave, përzierjeve, zgjeruesve dhe të mirave të tjera.
Kohët e fundit unë riformatova një skedar CSS me 5,000 rreshta që kishte më shumë se 30 variacione në të njëjtën hije blu. Me Sass, unë zëvendësova çdo variacion me këtë kod:
ngjyra: $ blu;
Duke përcaktuar blu $ në timen _ndryshueshme.scss skedari, mund të krijoj një ngjyrë të paracaktuar që çdo skedar CSS ose SCSS mund ta referojë. Kushdo që shkruan CSS mund ta përdorë blu $ dhe nuk duhet të shqetësoheni për përdorimin e një pikatoreje të syve, gjetjen e një kodi magji, ose ngjyra RGB, RGBA ose HSL.
E mbani mend atë kod linear të gradientit? Në vend që të shkruash disa rreshta kodi, si mund të thuash:
@ përfshij sfondin (gradient-linear (# b1cfdc, # 7a9cac));
Lërini Sass dhe Compass të bëjnë ngritjen e rëndë dhe të gjenerojnë sintaksën e saktë për ju: bërë. Le të themi se doni një version më të errët ose më të lehtë të një ngjyre. Ju mund të lëvizni pikatoren në Photoshop, ose thjesht përdorni komandat e ndriçimit / errësimit në Sass:
@ përfshij sfondin (gradient-gradient (errësohet ($ litegray, 2%), errësohet ($ i bardhë, 5%)));
Kjo do të krijojë një gradient linear me një 2% të errësuar $ gri e vogël dhe 5% u errësua i bardhë. Zhurmë! Ju nuk keni nevojë as për kodet HEX ose RGB.
jQuery: oh, po mundeni
Kam një rrëfim për të bërë. JavaScript përdoret për të më frikësuar. Pastaj gjeta jQuery. Unë nuk do të pretendoj të jem një mësues feje JavaScript, por jam shumë i sigurt se mund të bëj çdo lloj tranzicioni ose funksioni që më duhet të përdor jQuery.
Merrni, për shembull, aftësinë për të shfaqur një hyrje dytësore të numrit të telefonit në ekran duke klikuar në një lidhje Shto numër të ri. Duke përdorur jQuery, ju thjesht shkruani këtë:
// - Zbulimi progresiv - // $ ('. Numri i ri'). Kliko (funksioni () {$ ('. Alt-numri'). FadeIn ('shpejtë');});
Po kërkoni diçka më të përparuar? Ka ndoshta një plug-in për të. Sjelljet themelore janë të lehta dhe ato komplekse janë të arritshme me jQuery.
Kornizat
Dy nga kornizat më të fuqishme sot janë Foundation dhe Bootstrap. Tani, para se të shkarkoni kornizat e CSS, më lejoni t'ju pyes diçka. A përdorni jQuery? Rubin në shinat? Django? Të gjitha kornizat.
Ashtu si jQuery dhe RoR, Foundation dhe Bootstrap kanë lindur nga njohja se ka një numër të drejtë të gjërave që ne bëjmë pa pushim (të tilla si rivendosjet, tipografia, rrjetet, format, butonat, nav dhe listat). Foundation dhe Bootstrap të dy ofrojnë mbështetje për dizajne të përgjegjshme përmes përdorimit të klasave ndihmëse. Të dy janë të dokumentuar mirë dhe janë testuar në rrugë, kështu që mund t'i përdorni me besim.
Një ndryshim kryesor midis të dyjave: Bootstrap bazohet në sistemin LESS për parapërpunimin e CSS, ndërsa Foundation bazohet në Sass. Unë preferoj Sass ndaj LESS për shkak të aftësive të tij shtesë, por të dy Sass dhe LESS kungojnë CSS tradicionale në pjesë.
Një mendim i fundit për kornizat. Për ata që nuk duan të trashëgojnë fryrjen shtesë të kornizës së dikujt tjetër, merrni parasysh të zgjidhni një ekzistuese dhe ta hiqni atë deri në kockat e zhveshura, ose të zgjidhni qershi nga disa për të rrokullisur tuajin. Sido që të jetë, me të vërtetë nuk ka asnjë arsye për të filluar nga e para çdo herë.
Mendimet përfundimtare
Dëshironi një kontroll më të madh se si del përfundimisht dizajni juaj? Zhvendos më shumë procese në rrjedhën e sipërme për të koduar. HTML5 më në fund sjell një kuptim në DOM. Largim i mirë për të pakuptimtë DOKTIPIs dhe divitit. CSS3 është Photoshop-i i ri: gradientët linearë, radiusi i kufijve dhe hijet e kutive FTW! Dhe me mjete të tilla si Bootstrap, Foundation, Sass dhe jQuery, zhvendosja e dizajnit në rrjedhën e sipërme në kod nuk ka qenë kurrë më e lehtë.
Zbuloni 55 shembuj mahnitës të HTML5 në Creative Bloq.
