Vsebina
- Prednosti oblikovanja s kodo
- Najprej podatki
- Mobilni dobrote brezplačno
- Iskanje skupnega jezika
- Učite se hitreje
- Hitra ponovitev
- Hitrejši čas za zagon
- Zakaj HTML5?
- Magični atribut podatkov
- CSS3 - to je novi Photoshop
- Sass + Compass: čarobno okusen
- jQuery: oh, ja, lahko
- Okvirji
- Zadnje misli
Ta članek se je prvič pojavil v številki 235 revije .net - najbolje prodajane revije na svetu za spletne oblikovalce in razvijalce.
Nikoli nisem bil velik ljubitelj dela več dela, kot je bilo potrebno. Običajno ocenjujem metode in orodja na podlagi njihove sposobnosti, da naredim mene ali mojo ekipo učinkovitejšo. Kako hitro nas pripeljejo do delujočega izdelka? Kako učinkoviti so pri komunikaciji? Se nam ne ustavljajo?
Z leti sem prilagodil svoj postopek oblikovanja in orodja. Predstavljam si, da bom to počel še naprej. To je narava oblikovanja za tehnologijo in splet. Ta industrija se nenehno razvija; tudi naš proces in orodja se morajo razvijati.
HTML5 in CSS3 omogočata lažji prehod več procesa oblikovanja navzgor - stran od Photoshopa in bolj k živemu, dihalnemu oblikovanju. Orodja, kot so Foundation, Bootstrap in jQuery, omogočajo, da se več vašega postopka načrtovanja premakne k dostopnejšemu.
Prednosti oblikovanja s kodo
Prvič, ne zagovarjam izpuščanja Photoshopa ali katerega koli drugega urejevalnika vizualnega oblikovanja iz vašega delovnega procesa. Namesto tega se bom prej kot kasneje osredotočil na prednosti premikanja tega dizajna v kodo.
Najprej podatki
Stvar, ki mi je bila vedno všeč pri oblikovanju z HTML-jem, je, da spodbuja razmišljanje s perspektive, ki temelji na podatkih. Nasprotno pa z risarskimi programi, kot so Illustrator, OmniGraffle ali Balsamiq, začnete s poljem in ga napolnite s podatki.
V HTML konstruirate DOM (objektni model dokumenta), podobno kot gradnja kazala. Gre za vrnitev k pravemu informacijskemu oblikovanju s smiselnimi hierarhijami. HTML5 naredi korak naprej z dodajanjem novih semantičnih elementov: članek, odsek, glava, stran, noga itd. Ta pristop, ki temelji na podatkih, se lepo kombinira z odzivnimi dizajni, ki so prvi v mobilnih napravah.
Mobilni dobrote brezplačno
Če berete to, verjetno oblikujete za mobilne naprave. In velika verjetnost je, da boste morali oblikovati obrazec ali dva. Z HTML5 imate srečo. Pred HTML5 so bile vrste vnosa v veliki meri bodisi besedilno bodisi geslo. HTML5 je predstavil številne dodatne vrste vnosa, med drugim:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Pri teh dodatnih, edinstvenih vrstah vnosa je res čudovito, da jih mobilni brskalniki v sistemih iOS in Android prepoznajo in samodejno zamenjajo kontekstno zavedno tipkovnico - brez posebnih vtičnikov jQuery ali vdorov. Oh, in če vaš brskalnik ne ve, kaj input type = "email"> je, potem samo privzeto vnese besedilo.
Iskanje skupnega jezika
"Super je, kako lahko naši oblikovalci in razvijalci delajo v istem jeziku" - John Drago, razvijalec aplikacij pri Inflection.
Poglejte, ali se to sliši znano. Sem v konferenčni sobi s pol ducata razvijalcev aplikacij na strežniški strani, ki lahko kodirajo kroge okoli mene v Ruby, Python, Java ali .NET. Sem edini oblikovalec. Nekaj mojih predlogov je sprva zavrnjenih kot preveč zapletenih za izvedbo. Pridem do table in začnem na tablo pisati nekaj HTML in CSS, kako bi lahko izvedli zasnovo. Nenadoma se ton pogovora spremeni in eden od razvijalcev nejevoljno reče: "No, ja - če bomo to storili tako, bi lahko delovalo."
Če sem več svojega oblikovalskega postopka premaknil v kodo, sem izboljšal pogovore z razvijalci. Dodana plast spoštovanja si zasluži, če veste, kako oblikovati svoje modele v kodi. Za to spoštovanje ni treba biti strokovnjak. Čeprav so moje sposobnosti HTML in CSS trdne, pa so moje sposobnosti JavaScript v najboljšem primeru povprečne. In tega se ne sramujem priznati. Kljub temu je pri delu z razvijalci frontenda ali razvijalcev na strani strežnika dejstvo, da lahko govorimo v skupnem jeziku ali se srečamo na pol poti, velika prednost.
Učite se hitreje
Čeprav lahko žični okvirji in vizualni kompoziti pomagajo pri načrtovanju, so ti statični artefakti teoretični. Kolikokrat ste že poskusili nekomu razložiti interakcijo, le da je ta odgovoril: "Mislim, da bom moral to videti." Prej ko pridete do prototipa, s čimer lahko ljudje komunicirajo, prej lahko doživite oblikovanje in preverite, ali ideje delujejo.
Hitra ponovitev
Kdaj se je zadnji izdelek, ki je bil poslan v proizvodnjo, popolnoma ujemal z vašim Photoshop comp-om? Skoraj nikoli. Pri digitalnem oblikovanju izdelkov se spremembe nenehno dogajajo. Poleg tega lahko spremembe, kot je povečanje velikosti naslovov z 22 na 24 pik na nekaj ducatih zaslonov, v Photoshopu trajajo ure. Pametni predmeti vam omogočajo določeno raven objektno usmerjenega oblikovanja v Photoshopu. Na žalost večina vizualnih oblikovalcev, ki jih poznam, pametnih predmetov ne uporablja dovolj. Ker CSS spodbuja bolj sistematičen pristop k oblikovanju, tipografske spremembe trajajo minute namesto ur.
Kaj pa sprememba linearnih prelivov na vseh gumbih? Ali velikost obrobe? Kaj pa sprememba s kvadratnih vogalov na zaobljene 2px? V Photoshopu to lahko traja ure in še vedno ga morate kodirati. Sposobnost oblikovanja v kodi se izogne povratnemu povratku v Photoshop za ponovitev vizualnega oblikovanja. Ko te spremembe premaknete navzgor v kodo, se lahko z uporabo CSS3 in Sass (o katerih bom razpravljal kasneje v tem članku) zgodijo v realnem času in trajajo le nekaj minut.
Hitrejši čas za zagon
Z leti, ko sem več svojega delovnega procesa oblikovanja preusmeril navzgor v kodo, sem doživel resničen napredek - približno 20 do 30-odstotno zmanjšanje časa do prodaje. Bolj ko to počnem, manj časa porabim za podvajanje prizadevanj. Manj ciklov porabim za vstop v Photoshop ali Fireworks in nato delo ponavljam v kodi.
Na neki točki mora biti zasnova povezana z neko vrsto zaledja, ne glede na to, ali gre za CMS, aplikacijo Rails ali kaj drugega. Ker je večina mojega oblikovalskega dela v kodi, se integracija zgodi prej kot slej. Pred nekaj leti je ena od mojih strank, PointRoll, v petih dneh prešla iz prototipa v proizvodnjo.
Zakaj HTML5?
HTML5 je lažji od prejšnjih različic HTML. Vzemimo za primer izjavo o tipu dokumenta. V prejšnjih različicah HTML je DOKTIP je izgledalo nekako takole:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
In obstajalo je šest različnih različic. Na srečo HTML5 DOKTIP izgleda takole:
! DOCTYPE HTML>
Resno. To je to. Šokantno preprosto.
Pri ustvarjanju standardne strani HTML obstaja več pogostih elementov, kot so glava, glavno področje vsebine, stranska vrstica in noga. Prepričan sem, da ste že videli kaj takega:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Tam ni nič nenavadnega. Toda ko je predloga napolnjena z vsebino, se prelevi v divjo juho. Nasprotno pa z novimi semantičnimi elementi HTML5 dobite nekaj veliko preprostejšega in lažjega optičnega branja, na primer:
glava> nav> / nav> / glava> članek> na stran> / na stran> / članek> noga> / noga>
Poglej to. Nekaj, kar je smiselno.
Magični atribut podatkov
HTML5 ima še en čudovit kavelj, ki vam omogoča, da oblikujete svoj semantični pomen: podatki-. Če ste prej želeli elementu DOM dodeliti nekaj smiselnega, ste bili omejeni na ID-je, razrede in vloge.
Žal morajo biti osebni dokumenti enolični. Razredi so univerzalni (yippee!), Vendar se z njihovo uporabo lahko hitro spremeni v nered. Vloge so premalo izkoriščeno sredstvo, ki ARIA pomeni pomemben pomen. V zadnjem času uporabljam podatke - za platformo za analizo sledenja dogodkom, ki jo razvijamo pri Inflection.Mi smo veliki ljubitelji preizkušanja naših modelov. Pri delu z aplikacijami ali stranmi, ki imajo veliko interaktivnosti, bi radi imeli podrobnejši vpogled v sodelovanje strank na strani.
Vnesite podatki-. Z njim lahko dodelite, prenesete in se zaskočite v model pomena, ki ga določite sami. Tako lahko na primer naredite to:
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 =" linkedin "dataregion =" main "data-event =" register ">
Na stran lahko pritrdimo poslušalca z JavaScriptom in kadar koli kupec premakne kazalec ali klikne ta gumb, lahko sledimo tej dejavnosti. Namesto da bi lahko sledili le temu, da se je nekdo prek OAuth registriral s Twitterjem, lahko vidimo, da je lebdel nad Facebookom, nato Twitterjem, nato LinkedInom in se na koncu odločil, da bo Twitter izbral za svoj model OAuth.
Predstavljajte si, da to razširite na spletno mesto, kot je Pinterest, ali novo zasnovo Myspace, kjer stranke povlečejo in spustijo ploščice, da jih razvrstijo glede na zanimanje. Ali pa morda skrivanje ploščic, ki jih ne zanimajo podatki- atribut vam omogoča, da stvarem, ki jih lahko definirate, dodate ali dodelite dodatno plast pomenskega pomena. Za spletna mesta in aplikacije, ki se močno zanašajo na Ajax, odpira neomejene priložnosti.
CSS3 - to je novi Photoshop
CSS3 je prinesel povsem novo raven oblikovanja videza in občutka, ki je včasih zahteval slike v ozadju, rezine in razvpito tehniko "drsnih vrat". Na srečo je to vse preteklost.
Oglejmo si, kako narediti čudovit gumb z linearnim prelivom, zaobljenimi vogali, senco besedila, ki mu daje lep učinek tiskanja črk, in lesk ob lebdenju. Učenje teh tehnik bo daleč daleč. Vsako od njih je mogoče uporabiti samostojno ali v različnih kombinacijah, da izvlečete skoraj vsako trenutno vizualno vročino, ki je danes v trendu spleta.
Najprej nekaj prilagodimo privzetemu gumb> in input type = "submit"> elementi. Ob predpostavki, da uporabljate eno od standardnih ponastavitev CSS, bomo dodali le malo prostora za velikost in dihanje.
/ * Gumbi gumbi, katerih gumbi so. ========================================= * * / gumb, vnos [type = "submit"] {višina: 2.7em; oblazinjenje: .4em .7em; višina črte: 1,9; }
Protip: Gumbi in vhodi, ki so oddaje, so lahko zapleteni pri preoblikovanju. Ugotovil sem, da s prilagoditvijo višine črte na 1,6 ali več lahko preprečite, da bi bil potreben dodaten div ali razpon znotraj gumb> oznaka.
Zdaj smo že odpravili težavo z gumbi, lahko ustvarimo datoteko .btn v razredu, da dobimo lep čisti gumb z zaobljenimi vogali, linearnim prelivom, obrisom in videzom tiska.
.btn {prikaz: inline-block; obroba: 1px neprekinjeno # d4d4cc; -moz-polmer meje: 4 slikovne pike; -splet-meja-polmer: 4 slikovne pike; polmer obrobe: 4 slikovne pike; oblazinjenje: .4em .7em; ozadje: # edeff2; ozadje: -webkit-gradient (linearno, 0% 0%, 0% 100%, od (#fefefe), barvna zaustavitev (0,55, # edeff2) do (# e4e6e9)); ozadje: -moz-linearni gradient (srednji vrh, #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; barva: # 6c7786; velikost pisave: 1.1em; text-shadow: #fefefe 1px 0 1px; višina črte: 1.375em; kazalec: kazalec; }
In nato lep efekt lebdenja s subtilnim sijajem z uporabo škatla-senca metoda:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; ozadje: # e6e9eb; ozadje: -webkit-gradient (linearno, 0% 0%, 0% 100%, od (# f7f7f7), barvna zaustavitev (0,55, # f6f6f7) do (# e6e9eb)); ozadje: -moz-linearni gradient (sredina zgoraj, # f7f7f7, # f6f6f7 55%, # e6e9eb); barva: # 45484b; text-shadow: rgb (255,255,255) 1px 1px 0; barva obrobe: # c9c9c0; }
Zdaj nisem velik ljubitelj pisanja kode linearnega gradienta. Dolgo je in zmedeno. Kot lahko vidite, sem vključil samo različico za -moz, -spletni kompletin standardni model. Če želite vključiti različici -o in -ms, boste morali kodo podvojiti.
Obstajata še dve možnosti. Eden je generator CSS3; v spletu jih je na voljo več, med njimi tudi ColorZilla. Če pa želite svojo igro nekoliko okrepiti, razmislite o potapljanju v Sass: v kombinaciji s Compassom je to božja dar.
Sass + Compass: čarobno okusen
Ne morete več upati na izdajo samoroga CSS4. Tu je in imenuje se Sass + Compass. Sass je kratica Syntactically Awesome Styles Sheets: podedujete vse tradicionalne prednosti CSS3 z dodanimi radostmi spremenljivk, mešanic, podaljškov in drugih dobrot.
Pred kratkim sem predelal 5000-vrsticno datoteko CSS, ki je imela več kot 30 različic istega odtenka modre. S Sassom sem vsako različico zamenjal s to kodo:
barva: $ modra;
Z opredelitvijo modro v mojem _variables.scss datoteko, lahko ustvarim privzeto barvo, na katero se lahko sklicuje vsaka datoteka CSS ali SCSS. Vsak, ki piše CSS, lahko uporablja modro in vam ni treba skrbeti, da boste uporabili kapico, našli šestnajstiško kodo ali barvo RGB, RGBA ali HSL.
Se spomniš tiste linearne gradientne kode? Namesto da pišete več vrstic kode, kako je s tem:
@ vključi ozadje (linearni gradient (# b1cfdc, # 7a9cac));
Pustite, da Sass in Compass opravita težko delo in ustvarita pravilno skladnjo za vas: dokončano. Recimo, da želite temnejšo ali svetlejšo različico barve. Kapalko lahko premikate v Photoshopu ali preprosto uporabite ukaze za osvetlitev / zatemnitev v Sass:
@vključi ozadje (linearni preliv (zatemni ($ litegray, 2%), zatemni ($ umazano, 5%)));
To bo ustvarilo linearni gradient z 2% zatemnjeno $ lite-siva in 5% zatemnjeno umazano bela. Voil! Ne potrebujete niti kod HEX ali RGB.
jQuery: oh, ja, lahko
Moram priznati. JavaScript me je uporabljal za ustrahovanje. Potem sem našel jQuery. Ne bom trdil, da sem guru JavaScript, vendar sem precej prepričan, da lahko izvedem skoraj kakršen koli prehod ali funkcijo, ki jo potrebujem za uporabo jQuery.
Vzemimo na primer možnost prikaza vnosa sekundarne telefonske številke na zaslonu s klikom na povezavo Dodaj novo številko. Z uporabo jQuery preprosto napišete to:
// - Progresivno razkritje - // $ (’. New-number’). Click (function () {$ (’. Alt-number’). FadeIn (‘fast’);});
Iščete kaj bolj naprednega? Verjetno obstaja vtičnik zanj. Osnovno vedenje je enostavno, kompleksno pa je dostopno z jQueryjem.
Okvirji
Dva najmočnejša ogrodja danes sta Foundation in Bootstrap. Zdaj, preden opustite ogrodja CSS, naj vas nekaj vprašam. Ali uporabljate jQuery? Ruby on Rails? Django? Vsi okviri.
Tako kot jQuery in RoR sta se tudi Foundation in Bootstrap rodila iz zavedanja, da vedno znova in znova počnemo precej stvari (na primer ponastavitve, tipografija, mreže, obrazci, gumbi, nav in seznami). Foundation in Bootstrap ponujata podporo za odzivne modele z uporabo pomožnih razredov. Oba sta dobro dokumentirana in preizkušena na cesti, zato jih lahko uporabljate z zaupanjem.
Ena ključnih razlik med obema: Bootstrap temelji na sistemu LESS za predobdelavo CSS, medtem ko Foundation temelji na Sass. Zaradi svojih dodatnih zmožnosti imam raje Sass kot MANJ, vendar tako Sass kot LESS zmečkata tradicionalni CSS na koščke.
Še zadnja misel na okvire. Za tiste, ki ne želijo podedovati dodatnega napihnjenosti okvira nekoga drugega, razmislite o tem, da izberete obstoječega in ga slečete do golih kosti, ali pa nabiranje češenj od nekaj, da se sami zarolate. Kakor koli že, res ni razloga, da bi vsakič začeli iz nič.
Zadnje misli
Želite večji nadzor nad tem, kako se končno izkaže vaš dizajn? Premaknite več procesov gorvodno v kodo. HTML5 končno vnese nekaj smisla v DOM. Dobra osvoboditev do nesmiselnega DOKTIPs in divitis. CSS3 je novi Photoshop: linearni prelivi, obrob in polj-senci FTW! In z orodji, kot so Bootstrap, Foundation, Sass in jQuery, premikanje oblikovanja v smeri kode še nikoli ni bilo lažje.
Odkrijte 55 neverjetnih primerov HTML5 na spletnem mestu Creative Bloq.
