Sisu
- Koodiga kujundamise eelised
- Esiteks andmed
- Mobiilne headus tasuta
- Ühise keele leidmine
- Õppige kiiremini
- Kiire kordamine
- Kiirem aeg käivitamiseks
- Miks just HTML5?
- Maagiline andmete atribuut
- CSS3 - see on uus Photoshop
- Sass + kompass: maagiliselt maitsev
- jQuery: oh, jah, saate
- Raamid
- Lõpumõtted
See artikkel ilmus esmakordselt ajakirja .net - maailma enimmüüdud ajakirja veebidisaineritele ja arendajatele - 235. numbris.
Ma pole kunagi olnud suur fänn, et teha rohkem tööd kui vaja. Ma kipun hindama meetodeid ja tööriistu, lähtudes nende võimest muuta mind või minu meeskonda efektiivsemaks. Kui kiiresti jõuavad nad meid toimiva toote juurde? Kui tõhusad nad suhtlemisel on? Kas nad jäävad meie teelt kõrvale?
Aastate jooksul olen oma disainiprotsessi ja tööriistu kohandanud. Kujutan ette, et jätkan seda ka edaspidi. See on tehnoloogia ja veebi kujundamise olemus. See tööstus areneb pidevalt; ka meie protsess ja tööriistad peavad arenema.
HTML5 ja CSS3 hõlbustavad suurema osa kujundusprotsessi üleminekut ülesvoolu - eemal Photoshopist ja rohkem elava, hingava kujunduse poole. Sellised tööriistad nagu Foundation, Bootstrap ja jQuery muudavad suurema osa teie disainiprotsessist koodide jaoks ligipääsetavamaks.
Koodiga kujundamise eelised
Esiteks ei poolda ma Photoshopi või mõne muu visuaalse kujunduse redaktori kukutamist teie töövoos. Selle asemel keskendun selle kujunduse koodidesse viimise eelistele varem kui hiljem.
Esiteks andmed
HTML-i kujundamisel on mulle alati meeldinud see, et see julgustab mõtlema andmete esmase vaatenurga alt. Seevastu joonistusprogrammide nagu Illustrator, OmniGraffle või Balsamiq kasutamisel alustate kastiga ja täidate selle andmetega.
HTML-is koostate DOM-i (dokumendi objektimudel), umbes nagu sisukorra koostamine. See on tagasipöördumine sisulise hierarhiaga tõelise teabekujunduse juurde. HTML5 astub sammu edasi uute semantiliste elementide lisamisega: artikkel, jaotis, päis, kõrvale, jalus ja nii edasi. See andmete esmane lähenemine sobib suurepäraselt mobiilseadmete esmase reageerimisvõimega kujundusega.
Mobiilne headus tasuta
Kui loete seda, kujundate tõenäoliselt mobiilseadmetele. Ja on tõenäoline, et peate kujundama vormi või kaks. HTML5-ga on teil õnne. Enne HTML5 olid teie sisendtüübid üsna teksti- või parooliväljad. HTML5 tutvustas mitmeid täiendavaid sisendtüüpe, sealhulgas:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Nende täiendavate unikaalsete sisendtüüpide puhul on tõeliselt vinge see, et iOS-i ja Androidi mobiilibrauserid tunnevad need ära ja vahetavad automaatselt kontekstiteadliku klaviatuuri - selleks pole vaja spetsiaalseid jQuery pistikprogramme ega häkke. Oh, ja kui teie brauser ei tea, mida sisendi tüüp = "email"> on siis vaikimisi tekstisisestus.
Ühise keele leidmine
"See on suurepärane, kuidas meie disainerid ja arendajad saavad töötada ühes keeles" - John Drago, Inflectioni rakenduste arendaja.
Vaadake, kas see kõlab tuttavalt. Olen konverentsiruumis, kus on pool tosinat serveripoolset rakenduse arendajat, kes saavad mu ümber Ruby, Python, Java või .NET ringe kodeerida. Olen ainus disainer. Mõni minu ettepanek lükati esialgu tagasi kui liiga keeruline rakendamine. Kõnnin tahvli juurde ja hakkan tahvlile kirjutama HTML-i ja CSS-i, kuidas disaini saaks rakendada. Järsku muutub vestlustoon ja üks arendajatest ütleb vastumeelselt: "Noh, jah - kui me seda niimoodi teeme, võib see töötada."
Suurema osa minu disainiprotsessist koodidesse viimine on parandanud vestlusi arendajatega. Lisandub lugupidamine, kui saate teada, kuidas oma kujundusi koodis kujundada. Selle austuse saamiseks ei pea olema ekspert. Kuigi minu HTML- ja CSS-oskused on väga kindlad, on JavaScripti oskused parimal juhul keskpärased. Ja ma ei ole selle tunnistamise pärast häbelik. Sellegipoolest on eesmise või serveripoolse arendajaga töötamisel tohutu eelis see, et saame rääkida ühises keeles või kohtuda poolel teel.
Õppige kiiremini
Ehkki traadiraamid ja visuaalsed komposiidid võivad planeerimisel abiks olla, on need staatilised esemed teoreetilised. Mitu korda olete proovinud kellelegi suhtlust selgitada, et see vastaks: "Ma pean seda vist nägema." Mida kiiremini jõuate prototüübini, milleta saavad inimesed suhelda, seda varem saate kogeda disaini ja vaadata, kas ideed töötavad.
Kiire kordamine
Millal viimati tootmisse tarnitud lõplik kujundus täpselt teie Photoshopi kompaktiga sobis? Peaaegu mitte kunagi. Digitaalse tootedisaini korral toimuvad muutused pidevalt. Lisaks võivad Photoshopis muutused, näiteks paarkümmend ekraanil pealkirjade suuruse suurendamine 22-lt 24-le, võtta tunde. Nutikad objektid pakuvad teile Photoshopis mingil tasemel objektorienteeritud kujundust. Kahjuks ei kasuta enamik minu tuttavaid visuaalseid disainereid nutikaid objekte piisavalt. CSS-i puhul, kuna see julgustab kujundama süsteemsemalt, lähenevad tüpograafilised muudatused tundide asemel minutitele.
Aga kõigi oma nuppude lineaarsete gradientide muutmine? Või piiri suurus? Kuidas oleks vahetada ruudukujulistest nurkadest 2px ümardatuteks? Photoshopis võib see võtta tunde ja peate selle ikkagi kodeerima. Koodina kujundamise oskus aitab vältida visuaalse kujunduse kordamiseks Photoshopi tagasiminekut. Kui teisaldate need muudatused koodiga ülesvoolu, saavad CSS3 ja Sassi (mida käsitlen edaspidi käesolevas artiklis) abil need toimuda reaalajas ja võtta vaid paar minutit.
Kiirem aeg käivitamiseks
Aastate jooksul, kui viisin suurema osa oma disaini töövoogudest ülesvoolu koodidesse, kogesin tõelist paranemist - turule jõudmise aeg vähenes umbes 20–30 protsenti. Mida rohkem ma seda teen, seda vähem aega kulutan jõupingutuste dubleerimisele. Kulutan vähem tsükleid Photoshopi või ilutulestikku ja kordan siis tööd koodiga.
Mingil hetkel peab disain olema liideses teatud tüüpi taustaprogrammiga, olgu see siis CMS, Rails rakendus või midagi muud. Kuna suurem osa minu kujundustööst on koodis, toimub integreerimine varem kui hiljem. Paar aastat tagasi läks üks minu klientidest PointRoll viie päevaga prototüübilt tootmisele.
Miks just HTML5?
HTML5 on lihtsam kui HTML-i varasemad versioonid. Võtame näiteks dokumendi tüübi deklaratsiooni. HTML-i eelmistes versioonides on DOCTYPE nägi välja umbes selline:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // ET" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Ja seal oli kuus erinevat versiooni. Õnneks HTML5 DOCTYPE näeb välja selline:
! DOCTYPE HTML>
Tõsiselt. See on kõik. Šokeerivalt lihtne.
Tavalise HTML-lehe loomisel on mitmeid ühiseid elemente, näiteks päis, peamine sisupiirkond, külgriba ja jalus. Olen kindel, et olete midagi sellist varem näinud:
div id = "päis> div id =" nav "> / div> / div> div id =" main "> div id =" külgriba "> / div> / div> div id =" jalus "> / div>
Seal pole midagi erakordset. Kuid kui see on sisuga täidetud, muutub see mall div supiks. Seevastu HTML5 uute semantiliste elementidega saate midagi palju lihtsamat ja hõlpsamini skannitavat:
päis> nav> / nav> / päis> artikkel> kõrvale> / kõrvale> / artikkel> jalus> / jalus>
Vaata seda. Midagi, mis on mõistlik.
Maagiline andmete atribuut
HTML5-ga on kaasas veel üks vinge konks, mis annab teile võimaluse kujundada oma semantiline tähendus: andmed-. Kui varem tahtsite DOM-elemendile midagi sisukat omistada, piirdusite ID-de, klasside ja rollidega.
Kahjuks peavad ID-d olema kordumatud. Klassid on universaalsed (yippee!), Kuid nende kasutamine võib kiiresti segaduseks muutuda. Rollid on alakasutatud vara, mis annab ARIA-le olulise tähenduse. Viimasel ajal olen kasutanud andmeid sündmuste jälgimise analüüsiplatvormi jaoks, mida arendame Inflectionis.Oleme oma disaini testimise suured fännid. Töötades rakenduste või lehtedega, millel on palju interaktiivsust, soovime saada põhjalikumat ülevaadet lehe klientide seotusest.
Sisestage andmed-. Sellega saate määrata, edasi anda ja ühendada tähenduse mudeli "määratle ise". Nii saate näiteks seda teha:
sisendi tüüp = "nupp" 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 ">
Saame lehele lisada JavaScripti kuulaja ja alati, kui klient selle nupu kohal viibib või sellel klõpsab, saame seda tegevust jälgida. Selle asemel, et saaksime jälgida ainult seda, et keegi registreerus OAuthi kaudu Twitteris, näeme, et nad hõljutasid kursorit Facebooki, seejärel Twitteri, seejärel LinkedIni kohal ja otsustasid seejärel lõpuks valida OAuthi mudeli jaoks Twitteri.
Kujutage ette selle laiendamist sellisele saidile nagu Pinterest või uus Myspace'i disain, kus kliendid lohistavad paanid, et neid huvide alusel järjestada. Või võib-olla peita plaadid, mis neid ei huvita andmed- atribuut võimaldab teil kinnitada või omistada täiendava semantilise tähenduse kihi asjadele, mida saate määratleda. Ajaxile tuginevate saitide ja rakenduste jaoks avaneb see piiramatud võimalused.
CSS3 - see on uus Photoshop
CSS3 tõi ilme ja tunde kujundamisel täiesti uue taseme, mis varem nõudis taustapilte, viilusid ja kurikuulsat liuguste tehnikat. Õnneks on see kõik minevik.
Heidame pilgu lineaarse gradiendiga, ümardatud nurkadega, tekstivarjuga, mis annab sellele kena kirjapressiefekti, ja hõljukil helendava uhke nupu valmistamise. Nende tehnikate õppimine läheb kaugele. Kõiki neid saab kasutada iseseisvalt või erinevates kombinatsioonides, et tõmmata peaaegu ükskõik milline praegune veebi trend.
Esmalt teeme mõned vaikesätted nupp> ja sisendi tüüp = "esita"> elemendid. Eeldades, et kasutate mõnda standardset CSS-i lähtestamist, lisame lihtsalt väikese suuruse ja hingamisruumi.
/ * Nuppude nupud, kelle nupud said. ========================================= * * / nupp, sisend [type = "esita"] {kõrgus: 2.7em; polsterdus: .4em .7em; joone kõrgus: 1,9; }
Protip: Esitatavad nupud ja sisendid võivad olla keeruline ümber kujundada. Leidsin, reguleerides joone kõrguse väärtusele 1,6 või rohkem, saate vältida häkkimist, et vajate nupp> silt.
Nüüd oleme oma nuppude probleemi lahendanud ja saame luua .btn klassist, et anda meile kena puhas nupp, millel on ümarad nurgad, lineaarne gradient, kontuur ja see kõrgtrükk.
.btn {display: inline-block; ääris: 1px tahke # d4d4cc; -moz-piiri-raadius: 4px; -veebikomplekt-raadiuse raadius: 4px; piiri raadius: 4px; polsterdus: .4em .7em; taust: # edeff2; taust: -webkit-gradient (lineaarne, 0% 0%, 0% 100%, alates (#fefefe), värvipeatus (0,55, # edeff2) kuni (# e4e6e9)); taust: -moz-lineaarne gradient (keskel üleval, #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; kast-vari: rgba (160,172,187, .7) 0 0, 2em 0; värv: # 6c7786; fondi suurus: 1.1em; teksti vari: #fefefe 1px 0 1px; joone kõrgus: 1,375em; kursor: osuti; }
Ja siis kena hõljuki efekt, millel on peen kuma, kasutades kast-vari meetod:
.btn: hõljutamine, .btn: fookus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; taust: # e6e9eb; taust: -webkit-gradient (lineaarne, 0% 0%, 0% 100%, alates (# f7f7f7), värvipeatus (0.55, # f6f6f7) kuni (# e6e9eb)); taust: -moz-lineaarne gradient (keskel üleval, # f7f7f7, # f6f6f7 55%, # e6e9eb); värv: # 45484b; teksti vari: rgb (255 255 255) 1px 1px 0; äärisvärv: # c9c9c0; }
Nüüd pole ma lineaarse gradiendi koodi kirjutamise suur fänn. See on pikk ja segane. Nagu näete, olen lisanud ainult versiooni -moz, -veebikomplektja standardmudel. Kui soovite lisada versiooni -o ja -ms, peate koodi kahekordistama.
On veel kaks võimalust. Üks neist on CSS3 generaator; veebis on mitu saadaval, sealhulgas ColorZilla. Kuid kui soovite oma mängu veidi kiirendada, kaaluge sukeldumist Sassi: kombineerituna Compassiga on see jumalakartus.
Sass + kompass: maagiliselt maitsev
Võite lõpetada lootuse CSS4 ükssarviku väljaandele. See on siin ja seda nimetatakse Sass + kompass. Sass tähistab süntaktiliselt ägedate stiililehti: saate päranduseks kõik CSS3 traditsioonilised eelised, lisades rõõmu muutujatest, mikseritest, pikendajatest ja muudest parimatest.
Tegin hiljuti ümber 5000-realise CSS-faili, millel oli sama sinise tooni üle 30 variatsiooni. Sassiga asendasin kõik variatsioonid selle koodiga:
värv: $ sinine;
Määratledes $ sinine Minu _muutujad.scss faili, saan luua vaikevärvi, millele saavad viidata kõik CSS- või SCSS-failid. Igaüks, kes CSS-i kirjutab, saab seda kasutada $ sinine ja ei pea muretsema silma tilguti kasutamise, kuuskoodi või RGB, RGBA või HSL värvi leidmise pärast.
Kas mäletate seda lineaarse gradiendi koodi? Mitme koodirea kirjutamise asemel, kuidas oleks:
@ lisada tausta (lineaarne gradient (# b1cfdc, # 7a9cac));
Las Sass ja Compass teevad raske tõste ja loovad teile õige süntaks: valmis. Oletame, et soovite värvi tumedamat või heledamat versiooni. Saate pilkupilti Photoshopis ringi liikuda või lihtsalt kasutada Sassi heledam / tumedam käske:
@ lisada taust (lineaarne gradient (tumedamaks ($ litegray, 2%), tumedamaks ($ valkjas, 5%)));
See loob lineaarse gradiendi, mille tumedus on 2% $ lite-hall ja 5% tumenenud valkjas. Voil! Teil pole vaja isegi HEX- ega RGB-koode.
jQuery: oh, jah, saate
Mul on teha ülestunnistus. JavaScripti abil mind hirmutati. Siis leidsin jQuery. Ma ei pretendeeri JavaScripti guruks, kuid olen üsna kindel, et suudan käivitada peaaegu igasuguse ülemineku või funktsiooni, mida mul jQuery abil vaja on.
Võtame näiteks võimaluse kuvada sekundaarse telefoninumbri sisend ekraanil, klõpsates lingil Lisa uus number. JQuery abil kirjutate lihtsalt selle:
// - Progressiivne paljastamine - // $ (’. Uus-number’). Klõpsake (function () {$ (’. Alt-number’). FadeIn (’kiire’);});
Kas otsite midagi täpsemat? Selle jaoks on tõenäoliselt pistikprogramm. Põhikäitumine on lihtne ja keeruline on jQuery abil ligipääsetav.
Raamid
Kaks kõige jõulisemat raamistikku on täna Foundation ja Bootstrap. Enne CSS-i raamistike tagasilükkamist lubage mul midagi küsida. Kas kasutate jQuery? Rubiin rööbastel? Django? Kõik raamistikud.
Täpselt nagu jQuery ja RoR, sündisid ka Foundation ja Bootstrap, et nad tunnistasid, et on üsna palju asju, mida teeme ikka ja jälle (näiteks lähtestamine, tüpograafia, ruudustikud, vormid, nupud, nav ja loendid). Nii Foundation kui ka Bootstrap pakuvad abistajaklasside abil tuge reageerivatele kujundustele. Mõlemad on hästi dokumenteeritud ja neid on maanteel testitud, nii et saate neid julgelt kasutada.
Üks oluline erinevus nende kahe vahel: Bootstrap põhineb CSS-i eeltöötluse süsteemil LESS, samas kui Foundation põhineb Sassil. Eelistan Sassit LESS-ile selle lisavõimaluste tõttu, kuid nii Sass kui LESS suruvad traditsioonilise CSS-i tükkideks.
Üks viimane mõte raamistike kohta. Neile, kes ei soovi kellegi teise raamistiku üleliigset pärandit saada, kaaluge olemasoleva raamistiku valimist ja paljaste luudeni riisumist või kirsside valimist mõne seast, et ise rullida. Mõlemal juhul pole tegelikult põhjust iga kord nullist alustada.
Lõpumõtted
Kas soovite suuremat kontrolli selle üle, kuidas teie disain lõpuks välja tuleb? Liigutage koodiga ülesvoolu rohkem protsesse. HTML5 toob DOM-ile lõpuks mingit mõtet. Hea naeruväärsus mõttetuks DOCTYPEs ja diviit. CSS3 on uus Photoshop: lineaarsed gradiendid, piiriraadius ja kasti varjud FTW! Ja selliste tööriistadega nagu Bootstrap, Foundation, Sass ja jQuery pole disaini ülesvoolu koodini viimine kunagi varem olnud nii lihtne.
Creative Bloqis leiate 55 hämmastavat HTML5 näidet.
