Tarkib
- Kod bilan loyihalashtirishning afzalliklari
- Avval ma'lumotlar
- Mobil yaxshilik bepul
- Umumiy tilni topish
- Tezroq o'rganing
- Tez takrorlash
- Ishga tushirish uchun tezroq vaqt
- Nima uchun HTML5?
- Sehrli ma'lumotlar - atribut
- CSS3 - bu yangi Photoshop
- Sass + Compass: sehrli tarzda mazali
- jQuery: oh, ha qila olasiz
- Ramkalar
- Yakuniy fikrlar
Ushbu maqola birinchi marta veb-dizaynerlar va ishlab chiquvchilar uchun dunyodagi eng ko'p sotilgan jurnal .net jurnalining 235-sonida paydo bo'ldi.
Men hech qachon kerak bo'lgandan ko'ra ko'proq ish qilishning ashaddiy muxlisi bo'lmaganman. Men usullarni va vositalarni meni yoki jamoamni yanada samarali qilish qobiliyatiga qarab baholashga moyilman. Ular bizni ishlaydigan mahsulotga qanchalik tez etkazishadi? Ular muloqot qilishda qanchalik samarali? Ular bizning yo'limizdan qolishadimi?
Ko'p yillar davomida men dizayn jarayonim va asboblarimni sozladim. Men buni davom ettirishimni tasavvur qilaman. Bu texnologiya va Internetni loyihalashning tabiati. Ushbu sanoat doimo rivojlanib bormoqda; bizning jarayonimiz va vositalarimiz ham rivojlanishi kerak.
HTML5 va CSS3 dizayn jarayonining ko'p qismini yuqori oqimga o'tkazishni osonlashtiradi - fotoshopdan uzoqroq va yashash uchun mo'ljallangan dizaynga. Foundation, Bootstrap va jQuery kabi vositalar sizning dizaynerlik jarayoningizning ko'proq qismini kodni yanada qulayroq qilishiga imkon beradi.
Kod bilan loyihalashtirishning afzalliklari
Birinchidan, men sizning ish oqimingizdan fotoshopni yoki boshqa har qanday vizual dizayn muharririni tashlab qo'yishni qo'llab-quvvatlamayman. Buning o'rniga, men ushbu dizaynni tezroq kodga o'tkazish afzalliklariga e'tibor qarataman.
Avval ma'lumotlar
HTML bilan loyihalashtirish menga har doim yoqqan narsa shundaki, u birinchi ma'lumot nuqtai nazaridan fikrlashga undaydi. Aksincha, Illustrator, OmniGraffle yoki Balsamiq kabi rasm dasturlaridan foydalanib, siz qutichadan boshlaysiz va ma'lumotlar bilan to'ldirasiz.
HTML-da siz DOM (hujjat ob'ekti modeli) ni yaratasiz, masalan, tarkibni tuzish kabi. Bu mazmunli ierarxiyalar bilan haqiqiy ma'lumot dizayniga qaytish. HTML5 uni yangi semantik elementlar qo'shilishi bilan bir qadam oldinga olib chiqadi: maqola, bo'lim, sarlavha, chetga, altbilgi va boshqalar. Ma'lumotlarga nisbatan birinchi yondashuv birinchi navbatda mobil, sezgir dizaynlashtirilgan bilan yaxshi birlashtirilgan.
Mobil yaxshilik bepul
Agar siz buni o'qiyotgan bo'lsangiz, ehtimol siz mobil telefonlar uchun dizayn qilyapsiz. Va ehtimol siz bir yoki ikkita shaklni loyihalashingiz kerak bo'ladi. HTML5 bilan sizga omad kulib boqadi. HTML5-ga qadar sizning kiritish turlaringiz deyarli matn yoki parol maydoni bo'lgan. HTML5 bir qator qo'shimcha kiritish turlarini taqdim etdi, jumladan:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Ushbu qo'shimcha, noyob kirish turlarining dahshatli jihati shundaki, iOS va Android-dagi mobil brauzerlar ularni taniydilar va kontekstdan xabardor bo'lgan klaviaturani avtomatik ravishda almashtirishadi - maxsus jQuery plaginlari va xakerlari talab qilinmaydi. Oh, va agar sizning brauzeringiz nima ekanligini bilmasa kiritish turi = "elektron pochta"> bo'lsa, u holda u faqat matn kiritish uchun standart hisoblanadi.
Umumiy tilni topish
"Bizning dizaynerlarimiz va ishlab chiquvchilarimiz bir xil tilda qanday ishlashlari juda ajoyib" - Jon Drago, Inflection dastur ishlab chiqaruvchisi.
Bu tanish bo'lib tuyuladimi yoki yo'qmi, qarang. Men Ruby, Python, Java yoki .NET-da atrofimdagi doiralarni kodlashi mumkin bo'lgan yarim o'nlab dasturiy ta'minot bilan ishlaydigan konferentsiya zalida bo'laman. Men yagona dizaynerman. Dastlab bir nechta takliflarim amalga oshirish uchun juda murakkab bo'lganligi sababli bekor qilindi. Men doskaga chiqaman va dizaynni qanday amalga oshirish mumkinligi haqida doskada bir nechta HTML va CSS yozishni boshlayman. To'satdan suhbat ohanglari o'zgaradi va ishlab chiquvchilardan biri istamay: "Ha, ha - agar biz buni shunday qilsak, u ish berishi mumkin", deb aytadi.
Dizayn jarayonimning ko'proq qismini kodga o'tkazish ishlab chiquvchilar bilan suhbatlarni yaxshiladi. O'zingizning dizayningizni kodda qanday ishlashni bilib, qo'shimcha hurmat qatlami mavjud. Bunday hurmatni qozonish uchun mutaxassis bo'lish shart emas. HTML va CSS mahoratim qat'iy bo'lsa-da, JavaScript-ni mahoratim eng yaxshi darajada o'rtacha. Va buni tan olishdan uyalmayman. Shunga qaramay, frontend yoki server tomonidagi ishlab chiquvchilar bilan ishlashda biz umumiy tilda gaplashishimiz yoki yarim yo'lda uchrashishimiz juda katta afzallik.
Tezroq o'rganing
Simli ramkalar va vizual kompozitsiyalar rejalashtirishda yordam berishi mumkin bo'lsa-da, bu statik asarlar nazariy ahamiyatga ega. Biror kishiga o'zaro munosabatni tushuntirishga necha marta urinib ko'rdingiz, faqat "Men buni ko'rishim kerak" deb javob berishlari kerak edi. Prototipga qanchalik tez erishsangiz, odamlar o'zaro ta'sir qilishi mumkin bo'lgan narsa, siz dizaynni tezroq bilib olasiz va g'oyalar ish beradimi-yo'qligini bilib olasiz.
Tez takrorlash
Oxirgi marta qachon ishlab chiqarishga yuborilgan yakuniy dizayn sizning Photoshop komp-ga to'liq mos keldi? Deyarli hech qachon. Raqamli mahsulot dizayni bilan o'zgarish doimo sodir bo'ladi. Bundan tashqari, bir nechta o'nlab ekranlarda sarlavhalar hajmini 22pt dan 24ptgacha oshirish kabi o'zgarishlar fotoshopda bir necha soat davom etishi mumkin. Aqlli ob'ektlar sizga fotoshopda ob'ektga yo'naltirilgan dizaynning ba'zi darajasini beradi. Afsuski, men biladigan vizual dizaynerlarning aksariyati Smart Objects-dan etarli darajada foydalanmaydi. CSS bilan, chunki u dizaynga nisbatan tizimli yondashuvni rag'batlantiradi, tipografik o'zgarishlar soat o'rniga bir necha daqiqani oladi.
Sizning barcha tugmachalaringizdagi chiziqli gradyanlarni o'zgartirish haqida nima deyish mumkin? Yoki chegaraning kattaligi? Kvadrat burchaklardan 2 pikselli yumaloq burchaklarga o'tish haqida nima deyish mumkin? Photoshop-da, bu bir necha soat davom etishi mumkin va siz hali ham uni kodlashingiz kerak. Kodda loyihalash qobiliyati vizual dizayn bo'yicha takrorlash uchun Photoshop-ga qaytib borishdan qochishga yordam beradi. Ushbu o'zgarishlarni CSS3 va Sass-dan foydalangan holda yuqoriga qarab kodga o'tkazganingizda (men ushbu maqolada keyinroq aytib o'taman) ular real vaqtda sodir bo'lishi mumkin va atigi bir necha daqiqa davom etadi.
Ishga tushirish uchun tezroq vaqt
Ko'p yillar davomida men o'zimning ish oqimimning ko'p qismini kodga o'tkazganimda, men haqiqatan ham yaxshilanishni boshdan kechirdim - bozorga chiqish vaqtining taxminan 20-30 foizga qisqarishi. Buni qanchalik ko'p qilsam, takroriy harakatlarga kamroq vaqt sarflayman. Fotoshop yoki Fireworks dasturiga kirish uchun kamroq tsikllarni o'tkazyapman va keyin ishni kodda takrorlayman.
Biron bir vaqtda dizayn CMS, Rails ilovasi yoki boshqa narsalar bo'lsin, qandaydir bir turdagi backend bilan interfeysga ega bo'lishi kerak. Dizayn ishimning aksariyati kodda bo'lgani uchun, integratsiya tezroq sodir bo'ladi. Bir necha yil oldin, mening mijozlarimdan biri PointRoll besh kun ichida prototipdan ishlab chiqarishga o'tdi.
Nima uchun HTML5?
HTML5 HTMLning oldingi versiyalariga qaraganda osonroq. Masalan, hujjat turi deklaratsiyasini olaylik. HTML ning oldingi versiyalarida DOCTYPE shunga o'xshash ko'rinishga ega edi:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // UZ" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Va oltita turli xil versiyalar mavjud edi. Yaxshiyamki HTML5 DOCTYPE quyidagicha ko'rinadi:
! DOCTYPE HTML>
Jiddiy. Bo'ldi shu. Ajablanarli darajada sodda.
Standart HTML-sahifani yaratishda bir qator umumiy elementlar mavjud, masalan, sarlavha, asosiy tarkib maydoni, yon panel va altbilgi. Ishonchim komilki, siz ilgari shunga o'xshash narsalarni ko'rgansiz:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
U erda odatiy narsa yo'q. Ammo tarkib bilan to'ldirilgandan so'ng, bu shablon div sho'rvasiga aylanadi. Aksincha, HTML5-ning yangi semantik elementlari bilan siz skanerlashda juda sodda va osonroq narsani olasiz, masalan:
header> nav> / nav> / header> maqola> chetga> / chetga> / maqola> footer> / footer>
Buni qarang. Mantiqiy narsa.
Sehrli ma'lumotlar - atribut
HTML5 sizga o'zingizning semantik ma'noingizni yaratish qobiliyatini beradigan yana bir ajoyib kanca bilan birga keladi ma'lumotlar. Ilgari, agar siz DOM elementi uchun mazmunli narsani tayinlashni xohlasangiz, siz identifikatorlar, sinflar va rollar bilan cheklanasiz.
Afsuski, identifikatorlar noyob bo'lishi kerak. Sinflar universal (yippi!), Lekin ulardan foydalanish tezda tartibsizlikka aylanishi mumkin. Rollar ARIA uchun muhim ma'no beradigan foydalanilmagan aktivdir. Yaqinda men ma'lumotlardan foydalanmoqdaman - biz Inflection-da ishlab chiqayotgan voqealarni kuzatish tahlil platformasi uchun.Biz dizaynlarimizni sinovdan o'tkazishning katta muxlislarimiz. Katta interfaollikga ega bo'lgan dasturlarda yoki sahifalarda ishlayotganda, biz sahifadagi mijozlar bilan aloqalarini yanada aniqroq tushunishni istaymiz.
Ni kiriting ma'lumotlar. Shu bilan siz "o'zingizning o'zingiz belgilang" ma'no modelini belgilashingiz, o'tishingiz va unga ulanishingiz mumkin. Masalan, siz buni qilishingiz mumkin:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "registr "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Biz sahifaga JavaScript bilan tinglovchini biriktirishimiz mumkin va mijoz istalgan vaqtda uni bosib o'tganda yoki ushbu tugmani bosganida biz ushbu faoliyatni kuzatib boramiz. Biror kishining Twitter-da OAuth orqali ro'yxatdan o'tganligini kuzatib borish o'rniga, ular Facebook, keyin Twitter, keyin LinkedIn va so'ngra OAuth modeli uchun Twitter-ni tanlashga qaror qilishganini ko'rishimiz mumkin.
Tasavvur qiling, buni Pinterest kabi saytga yoki mijozlar qiziqish asosida qayta tartiblash uchun plitkalarni sudrab tashlaydigan yangi Myspace dizayni. Yoki ehtimol ular qiziqmagan plitkalarni yashirish ma'lumotlar atribut siz aniqlay oladigan narsalarga qo'shimcha semantik ma'no qatlamini biriktirish yoki belgilashga imkon beradi. Ajaxsga ishonadigan saytlar va ilovalar uchun bu cheksiz imkoniyatlarni ochib beradi.
CSS3 - bu yangi Photoshop
CSS3 tashqi ko'rinishini loyihalashning mutlaqo yangi darajasini keltirib chiqardi, bu avvalgi fon rasmlari, bo'laklari va mash'um "toymasin eshiklar" texnikasini talab qiladi. Shukurki, bularning barchasi o'tmishda qoldi.
Keling, chiziqli gradyanli, burchaklari yumaloqlangan, chiroyli harflarni bosish effektini beradigan matn soyasi va harakatlanishda porlashi bilan chiroyli tugma yasashni ko'rib chiqamiz. Ushbu texnikani o'rganish uzoq yo'lni bosib o'tadi. Ularning har biri mustaqil ravishda yoki turli xil kombinatsiyalarda, bugungi kunda Internetdagi trendning har qanday vizual issiqligini tortib olish uchun ishlatilishi mumkin.
Birinchidan, sukut bo'yicha bir nechta tuzatishlar kiritamiz tugmachasi> va kiritish turi = "submit"> elementlar. Siz CSS-ning standart holatini tiklashlardan birini ishlatgan deb taxmin qilsangiz, biz shunchaki o'lcham va nafas olish xonasini qo'shamiz.
/ * Tugmachalar tugmachalari, tugmachalari kimga tegishli. * * / tugma, kirish [type = "submit"] {balandlik: 2.7em; to'ldirish: .4em .7em; chiziq balandligi: 1,9; }
Protip: Tugmalar va yozuvlar qayta tiklash uchun hiyla-nayrang bo'lishi mumkin. Chiziq balandligini 1,6 yoki undan kattaroq qilib sozlash orqali topdim, siz qo'shimcha div yoki intervalgacha kerak bo'ladigan hackdan qochishingiz mumkin. tugmachasi> yorliq.
Endi biz tugmachani "tuzatdik", biz yaratamiz .btn bizga burchaklari yumaloq, chiziqli gradient, kontur va shrift ko'rinishidagi chiroyli toza tugmachani berish uchun sinf.
.btn {displey: inline-block; chegara: 1px qattiq # d4d4cc; -moz-chegara-radiusi: 4px; -webkit-border-radiusi: 4px; chegara radiusi: 4px; to'ldirish: .4em .7em; fon: # edeff2; fon: -webkit-gradient (chiziqli, 0% 0%, 0% 100%, dan (#fefefe), color-stop (0.55, # edeff2), (# e4e6e9) gacha); fon: -moz-lineer-gradient (tepa qismi, #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; rang: # 6c7786; shrift hajmi: 1.1em; matn soyasi: #fefefe 1px 0 1px; chiziq balandligi: 1.375em; kursor: ko'rsatgich; }
Va keyin ingichka porlashi bilan yoqimli hover effekti soya usul:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; fon: # e6e9eb; fon: -webkit-gradient (chiziqli, 0% 0%, 0% 100%, dan (# f7f7f7), color-stop (0.55, # f6f6f7), (# e6e9eb) gacha)); fon: -moz-lineargradient (markazning tepasi, # f7f7f7, # f6f6f7 55%, # e6e9eb); rang: # 45484b; matn soyasi: rgb (255,255,255) 1px 1px 0; chegara-rang: # c9c9c0; }
Endi, men chiziqli gradient kodini yozishning katta muxlisi emasman. Bu uzoq va chalkash. Ko'rib turganingizdek, men faqat uchun versiyasini qo'shdim -moz, -webkitva standart model. -O va -ms versiyalarini qo'shmoqchi bo'lsangiz, kodni ikki baravar oshirishingiz kerak bo'ladi.
Yana ikkita variant mavjud. Ulardan biri CSS3 generatoridir; Internetda bir nechta, shu jumladan ColorZilla mavjud. Ammo agar siz o'z o'yiningizni biroz kuchaytirmoqchi bo'lsangiz, Sass-ga sho'ng'ishni o'ylab ko'ring: Compass bilan birlashganda, bu xudo bergan narsadir.
Sass + Compass: sehrli tarzda mazali
Siz CSS4 unicorn nashriga umid qilishni to'xtatishingiz mumkin. Bu erda va Sass + Compass deb nomlangan. Sass Syntactically Awesome Stylesheets degan ma'noni anglatadi: siz CSS3-ning barcha an'anaviy afzalliklarini o'zgaruvchilar, mixinlar, kengaytirgichlar va boshqa yaxshiliklar qo'shilganligi bilan meros qilib olasiz.
Yaqinda bir xil ko'k rangda 30 dan ortiq o'zgarishga ega bo'lgan 5000 qatorli CSS faylini qayta tikladim. Sass bilan men har qanday o'zgarishni ushbu kod bilan almashtirdim:
rang: $ ko'k;
Belgilash orqali $ ko'k mening _variables.scss Fayl, men har bir CSS yoki SCSS fayli murojaat qilishi mumkin bo'lgan standart rangni yaratishim mumkin. CSS yozadigan har kim foydalanishi mumkin $ ko'k ko'z tomchisi yordamida, olti burchakli kodni yoki RGB, RGBA yoki HSL ranglarini topishda tashvishlanmang.
Bu chiziqli gradient kodini eslaysizmi? Bir nechta satr kodlarini yozish o'rniga, bunga qanday qilib:
@include background (chiziqli-gradient (# b1cfdc, # 7a9cac));
Sass va Compass og'ir yuklarni ko'tarib, siz uchun to'g'ri sintaksis hosil qilsinlar: bajarildi. Aytaylik, siz rangning quyuqroq yoki engilroq versiyasini xohlaysiz. Siz ko'z tomchisini Photoshop-da aylantira olasiz yoki Sass-da ochish / qorayish buyruqlaridan foydalanishingiz mumkin:
@include fon (chiziqli-gradient (qorayish ($ litegray, 2%), qorayish ($ off-oq, 5%)));
Bu 2% qoraygan chiziqli gradient hosil qiladi $ lite-grey va 5% qoraygan sarg'ishroq oq rang. Voy! Sizga HEX yoki RGB kodlari ham kerak emas.
jQuery: oh, ha qila olasiz
Mening e'tirofim bor. Meni qo'rqitish uchun ishlatiladigan JavaScript. Keyin jQuery-ni topdim. Men JavaScript gurusi ekanligimni da'vo qilmayman, lekin jQuery-dan foydalanishim kerak bo'lgan har qanday o'tish yoki funktsiyani tortib olishim mumkinligiga juda ishonaman.
Masalan, Yangi raqam qo'shish havolasini bosish orqali ekranda ikkinchi darajali telefon raqamini kiritish qobiliyatini oling. JQuery-dan foydalanib, siz shunchaki yozasiz:
// - Progressive ochish - // $ ('. New-number'). Click (function () {$ ('. Alt-number'). FadeIn ('fast');});
Yana rivojlangan narsani qidiryapsizmi? Ehtimol, buning uchun plagin mavjud. JQuery yordamida asosiy xatti-harakatlar oson va murakkab xatti-harakatlarga erishish mumkin.
Ramkalar
Bugungi kunda eng ishonchli ikkita ramka - bu Foundation va Bootstrap. Endi, CSS ramkalarini bekor qilishdan oldin, sizdan bir narsa so'rashga ijozat bering. JQuery-dan foydalanasizmi? Ruby on Rails? Django? Barcha ramkalar.
Xuddi jQuery va RoR singari, Foundation va Bootstrap bizni qayta-qayta qiladigan narsalarning (masalan, asl holatini tiklash, tipografiya, katakchalar, shakllar, tugmalar, nav va ro'yxatlar) juda ko'p sonli narsalar borligini anglashdan kelib chiqqan. Foundation va Bootstrap ikkalasi ham yordamchi sinflar yordamida sezgir dizaynlarni qo'llab-quvvatlaydi. Ikkalasi ham yaxshi hujjatlashtirilgan va yo'l sinovlaridan o'tgan, shuning uchun siz ulardan ishonch bilan foydalanishingiz mumkin.
Ikkala asosiy farqning biri: Bootstrap CSS-ni qayta ishlash uchun LESS tizimiga asoslangan, fond esa Sass-ga asoslangan. Qo'shimcha imkoniyatlari tufayli men Sassni KAM emas deb bilaman, ammo Sass ham, LESS ham an'anaviy CSS-ni parcha-parcha qilib qo'yishadi.
Kadrlar haqida so'nggi fikr. Birovning ramkasining ortiqcha shishishini meros qilib olishni istamaydiganlar uchun, mavjud bo'lganini tanlab, yalang'och suyaklarga yalang'ochlash yoki o'zingizni aylantirish uchun gilosni yig'ib olish haqida o'ylab ko'ring. Qanday bo'lmasin, har safar noldan boshlash uchun hech qanday sabab yo'q.
Yakuniy fikrlar
Sizning dizayningiz oxir-oqibat qanday paydo bo'lishi ustidan katta nazoratni xohlaysizmi? Ko'proq jarayonlarni yuqoriga qarab kodga o'tkazing. HTML5 nihoyat DOMga ma'lum ma'no keltiradi. Bema'nilik uchun yaxshi riddance DOCTYPEs va divit. CSS3 - bu yangi Photoshop: chiziqli gradientlar, borderradius va box-soyalar FTW! Bootstrap, Foundation, Sass va jQuery kabi vositalar bilan dizaynni yuqoriga qarab kodga o'tkazish hech qachon oson bo'lmagan.
Creative Bloq-da HTML5-ning 55 ta ajoyib namunalarini kashf eting.
