Turinys
- Privalumai projektuojant naudojant kodą
- Pirmiausia duomenys
- Mobilusis gėris nemokamai
- Bendros kalbos ieškojimas
- Mokykis greičiau
- Spartus kartojimas
- Greitesnis laikas pradėti
- Kodėl HTML5?
- Stebuklingi duomenys- atributas
- CSS3 - tai naujasis „Photoshop“
- Sass + kompasas: stebuklingai skanu
- jQuery: o, taip, tu gali
- Karkasai
- Paskutinės mintys
Šis straipsnis pirmą kartą pasirodė 235 žurnalo „.net“ žurnale - perkamiausiame pasaulyje žurnale, skirtame interneto dizaineriams ir kūrėjams.
Niekada nebuvau didelis mėgėjas dirbti daugiau nei reikia. Aš linkęs vertinti metodus ir priemones, remdamasis jų sugebėjimu padaryti mane ar mano komandą efektyvesnę. Kaip greitai mus pasiekia veikiantis produktas? Ar jie efektyviai bendrauja? Ar jie nesilaiko mūsų kelio?
Per daugelį metų koregavau savo projektavimo procesą ir įrankius. Įsivaizduoju, kad tai darysiu ir toliau. Tai yra technologijos ir interneto projektavimo pobūdis. Ši pramonė nuolat tobulėja; mūsų procesas ir priemonės taip pat turi tobulėti.
HTML5 ir CSS3 palengvina didesnio dizaino proceso perėjimą prie „Photoshop“ ir labiau prie gyvo, kvėpuojančio dizaino. Tokie įrankiai kaip „Foundation“, „Bootstrap“ ir „jQuery“ leidžia labiau pritaikyti jūsų dizaino procesą kodui.
Privalumai projektuojant naudojant kodą
Pirma, aš nepritariu „Photoshop“ ar bet kokio kito vizualinio dizaino redaktoriaus pašalinimui iš jūsų darbo eigos. Vietoj to, aš sutelksiu dėmesį į naudą, kurią tas dizainas perkels į kodą anksčiau nei vėliau.
Pirmiausia duomenys
Kuriant HTML naudojimą man visada patiko tai, kad tai skatina galvoti iš duomenų perspektyvos. Priešingai, naudodami piešimo programas, tokias kaip „Illustrator“, „OmniGraffle“ ar „Balsamiq“, pradėsite nuo langelio ir užpildykite jį duomenimis.
HTML sukursite DOM (dokumento objekto modelį), panašiai kaip kurdami turinį. Tai grįžimas prie tikro informacijos dizaino su prasmingomis hierarchijomis. HTML5 žengia dar vieną žingsnį, pridėdamas naujų semantinių elementų: straipsnis, skyrius, antraštė, šonas, poraštė ir pan. Šis požiūris „pirmiausia duomenys“ puikiai derinamas su pirmiausia mobiliaisiais, greitai reaguojančiais dizainais.
Mobilusis gėris nemokamai
Jei tai skaitote, tikriausiai kuriate mobiliesiems. Ir yra tikimybė, kad turėsite susikurti formą ar dvi. Naudojant HTML5 jums pasisekė. Iki HTML5 įvesties tipai buvo beveik teksto arba slaptažodžio laukai. HTML5 pristatė keletą papildomų įvesties tipų, įskaitant:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Tai, kas tikrai nuostabu dėl šių papildomų, unikalių įvesties tipų, yra tai, kad „iOS“ ir „Android“ mobiliosios naršyklės juos atpažįsta ir automatiškai keičia kontekstą suprantančią klaviatūrą - nereikia jokių specialių „jQuery“ papildinių ar įsilaužimų. O jei jūsų naršyklė nežino, kas yra įvesties tipas = "el. paštas"> yra, tada jis kaip numatytąjį teksto įvestį.
Bendros kalbos ieškojimas
„Nuostabu, kaip mūsų dizaineriai ir kūrėjai gali dirbti ta pačia kalba“ - John Drago, „Inflection“ programų kūrėjas.
Pažiūrėkite, ar tai skamba pažįstamai. Aš esu konferencijų salėje su pusšimčiu serverio pusės programų kūrėjų, kurie gali užkoduoti aplink mane esančius ratus Ruby, Python, Java ar .NET. Aš esu vienintelis dizaineris. Keli mano pasiūlymai iš pradžių atmetami kaip pernelyg sudėtingi įgyvendinti. Einu prie lentos ir pradedu lentoje rašyti HTML ir CSS, kaip būtų galima įgyvendinti dizainą. Staiga pasikeičia pokalbio tonas ir vienas iš kūrėjų nenoriai sako: „Na, taip - jei taip elgsimės, tai gali veikti“.
Daugiau mano projektavimo proceso perkėlimas į kodą pagerino pokalbius su kūrėjais. Yra dar vienas pagarbos sluoksnis, pelnytas žinant, kaip kurti savo dizainą kodu. Norint užsitarnauti tokią pagarbą, nereikia būti ekspertu. Nors mano HTML ir CSS įgūdžiai yra tvirti, mano „JavaScript“ įgūdžiai geriausiu atveju yra vidutiniški. Ir aš nesidroviu to pripažinti. Vis dėlto dirbant su „frontend“ ar serverio pusės kūrėjais tai, kad galime kalbėti bendra kalba arba susitikti pusiaukelėje, yra didžiulis pranašumas.
Mokykis greičiau
Nors vieliniai rėmai ir vaizdiniai kompozitai gali padėti planuoti, šie statiniai dirbiniai yra teoriniai. Kiek kartų bandėte kam nors paaiškinti sąveiką, kad tik jis atsakytų: „Manau, turėsiu tai pamatyti“. Kuo greičiau pasieksite prototipą, su kuo žmonės galės bendrauti, tuo greičiau galėsite patirti dizainą ir pamatyti, ar idėjos veikia.
Spartus kartojimas
Kada paskutinį kartą į gamybą pristatytas galutinis dizainas tiksliai atitiko jūsų „Photoshop Comp“? Beveik niekada. Kuriant skaitmeninį gaminį, pokyčiai vyksta nuolat. Be to, „Photoshop“ gali trukti kelias valandas, pvz., Antraštių dydžio padidinimas nuo 22pt iki 24pt keliuose dešimtyje ekranų. Išmanieji objektai suteikia tam tikro lygio objektų dizainą „Photoshop“. Deja, dauguma mano pažįstamų vizualinių dizainerių nepakankamai naudoja išmaniuosius objektus. Naudojant CSS, kadangi tai skatina sistemingesnį požiūrį į dizainą, tipografiniai pakeitimai užtrunka kelias valandas, o ne valandas.
Ką apie linijinių gradientų pakeitimą ant visų mygtukų? Arba sienos dydis? Kaip būtų, jei pakeistumėte kampus iš kvadrato į 2 taškus suapvalintus? „Photoshop“ tai gali užtrukti kelias valandas, ir jūs vis tiek turite ją koduoti. Gebėjimas kurti kodą padeda išvengti grįžimo į „Photoshop“, kad būtų pakartotas vizualinis dizainas. Perkėlus tuos pakeitimus į kodą, naudojant CSS3 ir „Sass“ (kuriuos aptarsiu vėliau šiame straipsnyje), jie gali įvykti realiuoju laiku ir užtrukti tik kelias minutes.
Greitesnis laikas pradėti
Per daugelį metų, kai perėjau daugiau savo projektavimo darbo eigos į kodą, patyriau realų patobulėjimą - maždaug 20–30 procentų sumažėjo laikas, kol jis pasirodė rinkoje. Kuo daugiau tai darau, tuo mažiau laiko praleidžiu dubliaudamas. Aš praleidžiu mažiau ciklų eidamas į „Photoshop“ ar „Fejerverkus“ ir paskui kartodamas darbą kode.
Tam tikru momentu dizainas turi sąveikauti su tam tikro tipo vidine įranga, nesvarbu, ar tai TVS, ar „Rails“ programa, ar dar kažkas. Kadangi dauguma mano projektavimo darbų yra kodiniai, integracija įvyksta anksčiau nei vėliau. Prieš porą metų vienas iš mano klientų „PointRoll“ per prototipą perėjo į gamybą per penkias dienas.
Kodėl HTML5?
HTML5 yra lengviau nei ankstesnės HTML versijos. Paimkime, pavyzdžiui, dokumento tipo deklaraciją. Ankstesnėse HTML versijose DOCTYPE atrodė maždaug taip:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // LT" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Buvo šešios skirtingos versijos. Laimei, HTML5 DOCTYPE atrodo taip:
! DOCTYPE HTML>
Rimtai. Viskas. Šokiruojančiai paprasta.
Kuriant standartinį HTML puslapį yra keletas bendrų elementų, tokių kaip antraštė, pagrindinė turinio sritis, šoninė juosta ir poraštė. Esu įsitikinęs, kad jau matėte kažką panašaus:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" šoninė juosta "> / div> / div> div id =" footer "> / div>
Ten nieko neįprasto. Bet užpildžius turinį, šis šablonas virsta div sriuba. Priešingai, naudojant naujus HTML5 semantinius elementus, gausite daug paprasčiau ir lengviau nuskaityti, pavyzdžiui:
antraštė> nav> / nav> / antraštė> straipsnis> nuošalyje> / nuošalyje> / straipsnis> poraštė> / poraštė>
Pažiūrėk į tai. Kažkas, kas turi prasmę.
Stebuklingi duomenys- atributas
HTML5 yra dar vienas nuostabus kabliukas, suteikiantis galimybę sukurti savo semantinę prasmę: duomenys-. Anksčiau, jei norėjote priskirti ką nors prasmingo DOM elementui, apsiribojote tik ID, klasėmis ir vaidmenimis.
Deja, asmens dokumentai turi būti unikalūs. Klasės yra universalios (yippee!), Tačiau jas naudojant greitai gali virsti netvarka. Vaidmenys yra nepakankamai panaudotas turtas, turintis reikšmingą reikšmę ARIA. Neseniai duomenis naudoju įvykių stebėjimo analizės platformai, kurią kuriame „Inflection“.Mes esame dideli savo dizaino testavimo gerbėjai. Dirbdami programose ar puslapiuose, kuriuose yra daug interaktyvumo, norėtume išsamiau susipažinti su klientų įtraukimu puslapyje.
Įveskite duomenys-. Juo galite priskirti, perduoti ir prisijungti prie „apibrėžkite savo“ prasmės modelio. Pavyzdžiui, galite tai padaryti:
įvesties tipas = "mygtukas" 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 ">
Mes galime prie puslapio pridėti klausytoją su „JavaScript“ ir bet kada, kai klientas užveda pelės žymeklį ar spusteli šį mygtuką, galime stebėti tą veiklą. Užuot tik galėję sekti, kad kažkas per „OAuth“ užsiregistravo per „Twitter“, galime pastebėti, kad jie užvedė pelės žymeklį virš „Facebook“, tada „Twitter“, tada „LinkedIn“ ir galiausiai nusprendė pasirinkti „Twitter“ savo OAuth modeliui.
Įsivaizduokite, kad tai išplėsite į tokią svetainę kaip „Pinterest“ arba naują „Myspace“ dizainą, kuriame klientai vilkite ir upuść plyteles, kad jas pertvarkytų pagal susidomėjimą. Arba galbūt slepia plyteles, kuriomis jie nesidomi duomenys- atributas suteikia galimybę pridėti arba priskirti papildomą semantinės prasmės sluoksnį dalykams, kuriuos galite apibrėžti. Svetainėms ir programoms, kurios labai priklauso nuo „Ajax“, tai atveria neribotas galimybes.
CSS3 - tai naujasis „Photoshop“
CSS3 atnešė visiškai naują išvaizdos ir pojūčio dizainą, kuriam anksčiau reikėjo foninių vaizdų, griežinėlių ir liūdnai pagarsėjusios „stumdomų durų“ technikos. Laimei, visa tai jau praeitis.
Pažvelkime, kaip pagaminti puošnų mygtuką su linijiniu gradientu, užapvalintais kampais, teksto šešėliu, suteikiančiu jam gražų raidžių spaudos efektą ir švytėjimą ant pakabos. Išmokus šių metodų, teks ilgą kelią. Kiekvienas iš jų gali būti naudojamas atskirai arba įvairiais deriniais, kad būtų galima išgauti bet kurią dabartinę žiniatinklio tendenciją.
Pirmiausia atlikime kelis numatytojo nustatymo pakeitimus mygtukas> ir įvesties tipas = "pateikti"> elementai. Darant prielaidą, kad naudojate vieną iš standartinių CSS nustatymų, mes tiesiog pridėsime šiek tiek dydžio ir kvėpavimo kambario.
/ * Mygtukų mygtukai, kurių mygtukai yra. ========================================= * * / mygtukas, įveskite [type = "pateikti"] {aukštis: 2.7em; paminkštinimas: .4em .7em; linijos aukštis: 1,9; }
Protipas: Pateikti mygtukai ir įvestys gali būti sudėtingi. Radau, pakoregavęs linijos aukštį iki 1,6 arba didesnio, galite išvengti papildomo div arba span mygtukas> žyma.
Dabar mes „išsprendėme“ savo mygtuko problemą, mes galime sukurti .btn klasę, kad suteiktų mums gražų švarų mygtuką suapvalintais kampais, linijinį nuolydį, kontūrą ir tą aukšto spaudimo išvaizdą.
.btn {display: inline-block; kraštas: 1px solid # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; krašto spindulys: 4px; paminkštinimas: .4em .7em; fonas: # edeff2; fonas: -webkit-gradientas (tiesinis, 0% 0%, 0% 100%, nuo (#fefefe), spalvos sustabdymas (0.55, # edeff2) iki (# e4e6e9)); fonas: -moz-tiesinis gradientas (centre viršuje, #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; langelis-šešėlis: rgba (160,172,187, .7) 0 0 .2em 0; spalva: # 6c7786; šrifto dydis: 1.1em; teksto šešėlis: #fefefe 1px 0 1px; linijos aukštis: 1,375em; žymeklis: rodyklė; }
Tada gražus pelės žymeklis su subtiliu spindesiu naudojant dėžutė-šešėlis metodas:
.btn: užveskite pelės žymeklį, .btn: sutelkkite dėmesį {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; langelis-šešėlis: # 129ceb 0 0 2px; fonas: # e6e9eb; fonas: -webkit-gradientas (tiesinis, 0% 0%, 0% 100%, nuo (# f7f7f7), spalvos sustabdymas (0.55, # f6f6f7) iki (# e6e9eb)); fonas: -moz-lineargradient (centre viršuje, # f7f7f7, # f6f6f7 55%, # e6e9eb); spalva: # 45484b; teksto šešėlis: rgb (255,255,255) 1px 1px 0; kraštinės spalva: # c9c9c0; }
Dabar nesu didelis mėgėjas rašyti tiesinio gradiento kodą. Tai ilgas ir painus. Kaip matote, įtraukiau tik versiją -moz, internetinis rinkinysir standartinį modelį. Jei norite įtraukti -o ir -ms versijas, turėsite padvigubinti kodą.
Yra dar dvi galimybės. Vienas iš jų yra CSS3 generatorius; žiniatinklyje yra keletas, įskaitant „ColorZilla“. Bet jei norite šiek tiek paspartinti savo žaidimą, apsvarstykite galimybę pasinerti į „Sass“: kartu su „Compass“ tai yra dievobaimingumas.
Sass + kompasas: stebuklingai skanu
Galite nustoti tikėtis CSS4 vienaragio leidimo. Tai čia ir jis vadinamas „Sass + Compass“. „Sass“ reiškia „Syntactically Awesome Stylesheets“: jūs paveldite visus tradicinius CSS3 pranašumus su pridėtais kintamųjų, mišinių, plėtiklių ir kitų gėrybių džiaugsmais.
Neseniai pertvarkiau 5000 eilučių CSS failą, kuriame buvo daugiau nei 30 to paties mėlyno atspalvio variantų. Naudodamas „Sass“, visus variantus pakeičiau šiuo kodu:
spalva: $ mėlyna;
Apibrėždamas $ mėlyna Mano _kintamieji.scss failą, galiu sukurti numatytąją spalvą, į kurią gali kreiptis kiekvienas CSS arba SCSS failas. Kiekvienas, rašantis CSS, gali naudotis $ mėlyna ir nereikia jaudintis dėl akių lašintuvo naudojimo, šešiakampio kodo, RGB, RGBA ar HSL spalvos radimo.
Prisimeni tą tiesinio gradiento kodą? Užuot parašius kelias kodo eilutes, kaip tai padaryti:
@ įtraukti foną (tiesinis gradientas (# b1cfdc, # 7a9cac));
Leiskite „Sass“ ir „Compass“ sunkiai pakelti ir sugeneruoti jums tinkamą sintaksę: padaryta. Tarkime, kad norite tamsesnės ar šviesesnės spalvos versijos. Galite perkelti akių lašintuvą aplink „Photoshop“ arba tiesiog naudoti „Sass“ komandas „Šviesinti“ / „Tamsinti“:
@įtraukti foną (tiesinis gradientas (tamsėti ($ litegray, 2%), tamsinti ($ beveik baltas, 5%)));
Tai sukurs tiesinį gradientą, kurio tamsumas bus 2% $ lite-pilka o 5% patamsėjo beveik baltos spalvos. Voil! Jums net nereikia HEX ar RGB kodų.
jQuery: o, taip, tu gali
Turiu prisipažinti. „JavaScript“ mane gąsdino. Tada radau „jQuery“. Nepretenduosiu būti „JavaScript“ guru, bet esu tikras, kad galiu pasinaudoti bet kokiu perėjimu ar funkcija, kurios man reikia norint naudotis „jQuery“.
Paimkime, pavyzdžiui, galimybę ekrane rodyti antrinio telefono numerio įvestį spustelėjus nuorodą Pridėti naują numerį. Naudodami „jQuery“, paprasčiausiai parašykite tai:
// - Progresyvus atskleidimas - // $ (’. Naujasis skaičius’). Spustelėkite (function () {$ (’. Alt-number’). FadeIn (’greitai’);});
Ieškote kažko pažangesnio? Tikriausiai yra jo papildinys. Pagrindinis elgesys yra lengvas, o sudėtingas - su „jQuery“.
Karkasai
Dvi patikimiausios sistemos yra „Foundation“ ir „Bootstrap“. Dabar, prieš atmesdami CSS sistemas, leiskite man ko nors paklausti. Ar naudojatės „jQuery“? Rubinas ant bėgių? Django? Visos sistemos.
Kaip ir „jQuery“, „RoR“, „Foundation“ ir „Bootstrap“ gimė pripažinus, kad yra nemažai dalykų, kuriuos darome vėl ir vėl (pvz., Atstatymai, tipografija, tinkleliai, formos, mygtukai, naršymas ir sąrašai). „Foundation“ ir „Bootstrap“ siūlo pagalbą reaguojantiems dizainams, naudojant pagalbininkų klases. Abu šie dokumentai yra gerai dokumentuoti ir išbandyti keliuose, todėl galite jais drąsiai naudotis.
Vienas esminis skirtumas tarp šių dviejų: „Bootstrap“ yra pagrįstas LESS sistema, skirta CSS išankstiniam apdorojimui, o „Foundation“ - „Sass“. Man labiau patinka „Sass“, o ne „LESS“ dėl papildomų galimybių, tačiau tiek „Sass“, tiek „LESS“ tradicinius CSS sutraukia į gabalus.
Paskutinė mintis apie rėmus. Tiems, kurie nenori paveldėti papildomo kažkieno rėmo, apsvarstykite galimybę rinkti esamą ir nuplėšti iki plikų kaulų, arba vyšnių rinkti iš kelių, kad susiveltumėte patys. Šiaip ar taip, nėra pagrindo kaskart pradėti nuo nulio.
Paskutinės mintys
Norite geriau kontroliuoti, kaip jūsų dizainas pagaliau pasirodys? Perkelkite daugiau procesų prieš kodą. HTML5 galiausiai suteikia tam tikrą prasmę DOM. Geras pašaipa beprasmiam DOCTYPEs ir divitas. CSS3 yra naujas „Photoshop“: linijiniai gradientai, pasienio spindulys ir langelių šešėliai FTW! Su tokiais įrankiais kaip „Bootstrap“, „Foundation“, „Sass“ ir „jQuery“ dizainas niekada nebuvo lengvesnis.
„Creative Bloq“ galite rasti 55 nuostabius HTML5 pavyzdžius.
