Мазмұны
- Кодпен жобалаудың артықшылықтары
- Алдымен деректер
- Ұялы жақсылық ақысыз
- Жалпы тіл табу
- Тезірек үйреніңіз
- Жылдам қайталау
- Іске қосу уақыты тезірек
- Неліктен HTML5?
- Сиқырлы деректер атрибуты
- CSS3 - бұл жаңа Photoshop
- Sass + Compass: сиқырлы түрде дәмді
- jQuery: иә, сіз жасай аласыз
- Фреймворктар
- Соңғы ойлар
Бұл мақала веб-дизайнерлер мен әзірлеушілерге арналған әлемдегі ең көп сатылатын журнал .net журналының 235 санында алғаш пайда болды.
Мен ешқашан қажеттіліктен артық жұмыс істеуге қатты жанкүйер болған емеспін. Мен әдістерді және құралдарды мені немесе менің тобымды тиімді ете алатын қабілеттеріне қарай бағалаймын. Олар бізді жұмыс істейтін өнімге қаншалықты тез жеткізеді? Олар қарым-қатынас жасауда қаншалықты тиімді? Олар біздің жолымыздан тыс қалады ма?
Осы жылдар ішінде мен дизайн процедурасын және құралдарды реттедім. Мен осылай жасай беремін деп елестетемін. Технология мен интернетті жобалау табиғаты осындай. Бұл сала үнемі дамып келеді; біздің процестеріміз бен құралдарымыз да дамуы керек.
HTML5 және CSS3 жобалау процесінің көп бөлігін ағынға қарай - фотошоптан алыстатуға және өмір сүруге арналған дизайнға ауыстыруды жеңілдетеді. Foundation, Bootstrap және jQuery сияқты құралдар сіздің дизайн процесінің көп бөлігін кодқа қол жетімді ету үшін жасайды.
Кодпен жобалаудың артықшылықтары
Біріншіден, мен сіздің жұмыс үрдісіңізден Photoshop бағдарламасын немесе визуалды дизайн редакторының кез-келгенін тастауға кеңес бермеймін. Оның орнына, мен бұл дизайнды кодқа көшірудің артықшылықтарына тезірек назар аударамын.
Алдымен деректер
HTML-мен дизайнды жасау маған ұнайтын нәрсе, ол бірінші кезекте дерек тұрғысынан ойлауға шақырады. Керісінше, Illustrator, OmniGraffle немесе Balsamiq сияқты сурет салу бағдарламаларын пайдаланып, сіз қораптан бастайсыз және оны мәліметтермен толтырасыз.
HTML-де сіз DOM (құжат нысанының моделі) құрасыз, мысалы, мазмұн кестесін құру. Бұл мағыналы иерархиялармен шынайы ақпараттық дизайнға оралу. HTML5 оны жаңа семантикалық элементтермен толықтырады: мақала, бөлім, тақырып, шетке, төменгі колонтитул және т.б. Бұл бірінші деректер ұялы, жауап беретін дизайнмен жақсы үйлеседі.
Ұялы жақсылық ақысыз
Егер сіз мұны оқып жатсаңыз, сіз ұялы телефонның дизайнын жасайтын шығарсыз. Сізге бір-екі форманы рәсімдеу керек шығар. HTML5 арқылы сіз сәттілікке қол жеткізесіз. HTML5-ке дейін сіздің енгізу түрлері мәтін немесе пароль өрісі болатын. HTML5 бірқатар қосымша енгізу түрлерін енгізді, соның ішінде:
input type = «email»> input type = «tel»> input type = «url»> input type = «date»> input type = «date-time»>
Бұл қосымша, бірегей енгізу түрлерінің таңқаларлығы - iOS және Android жүйелеріндегі мобильді браузерлер оларды таниды және контексттен хабардар пернетақтаны автоматты түрде ауыстырады - арнайы jQuery қосылатын модульдері мен хакерлері қажет емес. Егер сіздің браузеріңіз не екенін білмесе енгізу түрі = «электрондық пошта»> болып табылады, онда ол тек мәтінді енгізу үшін әдепкі болады.
Жалпы тіл табу
«Біздің дизайнерлер мен әзірлеушілердің бір тілде қалай жұмыс істейтіні таңқаларлық» - Джон Драго, Inflection қосымшасын жасаушы.
Мұның сізге таныс болып көрінетінін қараңыз. Мен Ruby, Python, Java немесе .NET-тегі шеңберлерді кодтай алатын, ондаған серверлік қосымшалармен конференц-залдамын. Мен жалғыз дизайнермін. Менің бірнеше ұсыныстарым бастапқыда өте күрделі деп алынып тасталды. Мен тақтаға шығып, дизайнды қалай жүзеге асыруға болатындығы туралы HTML мен CSS жазуды бастаймын. Кенеттен сөйлесу реңі өзгеріп, жасаушылардың бірі: «Иә, егер біз осылай жасасақ, ол жұмыс істей алады», - деп құлықсыздықпен айтады.
Менің дизайнымның көп бөлігін кодқа көшіру әзірлеушілермен сөйлесулерді жақсартты. Дизайнды кодта қалай жасау керектігін біліп, оған қосымша құрмет қабаты қосылды. Мұндай құрметке ие болу үшін сізге маман болу қажет емес. HTML мен CSS дағдыларым мықты болғанымен, JavaScript дағдыларым орташа деңгейде. Мен мұны мойындаудан тартынбаймын. Дегенмен, фронтпен немесе серверлік әзірлеушілермен жұмыс істегенде, біз жалпы тілде сөйлей алатынымыз немесе жарты жолда кездесетініміз үлкен артықшылық болып табылады.
Тезірек үйреніңіз
Сымсыз кадрлар мен визуалды композиттер жоспарлауға көмектесе алады, ал бұл статикалық артефактілер теориялық болып табылады. Біреумен қарым-қатынасты қанша рет түсіндіріп көрдіңіз, тек оған «Мен оны көруім керек» деп жауап беруі керек. Сіз прототипке неғұрлым тез жетсеңіз, адамдар бір-бірімен қарым-қатынас жасай алады, соғұрлым сіз дизайнды тезірек сезінесіз және идеялардың жұмыс істейтінін көре аласыз.
Жылдам қайталау
Photoshop бағдарламасына соңғы рет қашан өндіріске жіберілген соңғы дизайн сәйкес келді? Ешқашан дерлік. Өнімнің сандық дизайнымен өзгеріс үнемі жүреді. Сонымен қатар, бірнеше ондаған экрандардағы тақырыптарыңыздың өлшемін 22pt-тен 24pt-ке дейін арттыру сияқты өзгерістер Photoshop-та бірнеше сағатқа созылуы мүмкін. Ақылды нысандар сізге Photoshop бағдарламасында объектілік-дизайнның белгілі бір деңгейін береді. Өкінішке орай, мен білетін визуалды дизайнерлердің көпшілігі Smart Objects-ті жеткіліксіз пайдаланады. CSS-пен, ол жобалауға жүйелі көзқарасты шақырады, типографиялық өзгерістер бірнеше сағаттың орнына минут алады.
Барлық түймелердегі сызықтық градиенттерді өзгерту туралы не деуге болады? Немесе жиектің өлшемі ме? Квадраттық бұрыштардан 2рр дөңгелектелген бұрыштарға ауысу туралы не деуге болады? Photoshop-та бұл бірнеше сағатқа созылуы мүмкін және сіз оны кодтауыңыз керек. Кодта жобалау мүмкіндігі визуалды дизайнды қайталау үшін Photoshop-қа қайта оралу мүмкіндігін болдырмауға көмектеседі. Бұл өзгертулерді CSS3 және Sass (жоғарыда аталған мақалада қарастыратын боламын) көмегімен кодқа ауыстырған кезде олар нақты уақытта болуы мүмкін және бірнеше минутты алады.
Іске қосу уақыты тезірек
Көптеген жылдар ішінде мен өзімнің жобалау жұмысымның көп бөлігін кодқа ауыстыра отырып, мен нақты жақсаруды байқадым - нарыққа шығу уақыты шамамен 20-30 пайызға қысқарды. Мен мұны неғұрлым көп жасасам, қайталанатын күш-жігерге аз уақыт жұмсаймын. Мен аз циклдарды Photoshop немесе Fireworks-ке кіріп, жұмысты кодта қайталаймын.
Белгілі бір сәтте дизайн CMS, Rails қосымшасы немесе басқа нәрсе болсын, қандай да бір артқы түрімен интерфейске енуі керек. Менің дизайнерлік жұмыстарымның көбі кодта болғандықтан, интеграция кешірек болады. Екі жыл бұрын менің клиенттерімнің бірі PointRoll прототиптен өндіріске бес күнде көшті.
Неліктен HTML5?
HTML5 HTML-дің алдыңғы нұсқаларына қарағанда оңайырақ. Мысалы, құжат түрі туралы декларацияны алайық. HTML-нің алдыңғы нұсқаларында DOCTYPE келесідей көрінді:
! DOCTYPE html PUBLIC «- // W3C // DTD XHTML 1.1 // EN» «http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd»>
Алты түрлі нұсқасы болды. Бақытымызға орай HTML5 DOCTYPE келесідей көрінеді:
! DOCTYPE HTML>
Байсалды. Міне бітті. Таңқаларлық қарапайым.
Стандартты HTML парағын құру кезінде тақырып, негізгі мазмұн аймағы, бүйірлік тақта және төменгі колонтитул сияқты бірқатар жалпы элементтер бар. Бұған дейін сіз осындай нәрсені көргеніңізге сенімдімін:
div id = «header> div id =» nav «> / div> / div> div id =» main «> div id =» sidebar «> / div> / div> div id =» footer «> / div>
Онда әдеттен тыс ештеңе жоқ. Бірақ мазмұнмен толтырылғаннан кейін, бұл үлгі div сорпасына айналады. Керісінше, HTML5-тің жаңа семантикалық элементтерімен сканерлеу оңайырақ болады, мысалы:
тақырып> nav> / nav> / үстіңгі деректеме> мақала> шетке> / шетке> / мақала> төменгі деректеме> / төменгі деректеме>
Мынаған қара. Мағынасы бар нәрсе.
Сиқырлы деректер атрибуты
HTML5-те тағы бір керемет ілмек бар, ол сізге өзіңіздің мағыналық мағынаңызды құруға мүмкіндік береді: деректер-. Бұрын, егер сіз DOM элементіне маңызды нәрсе тағайындағыңыз келсе, сіз идентификаторлармен, сыныптармен және рөлдермен шектелесіз.
Өкінішке орай, жеке куәліктер бірегей болуы керек. Сабақтар әмбебап болып табылады (иппи!), Бірақ оларды пайдалану тез арада тәртіпсіздікке айналуы мүмкін. Рөлдер ARIA үшін маңызды мағына беретін пайдаланылмаған актив болып табылады. Жақында мен деректерді Inflection-та жасап жатқан оқиғаларды бақылауға арналған аналитикалық платформа үшін қолдандым.Біз өз дизайнымызды сынаудың үлкен жанкүйерлеріміз. Интерактивтілігі жоғары қосымшаларда немесе беттерде жұмыс істеген кезде, біз клиенттердің бетке кіруіне қатысты түйінді түсінік алғымыз келеді.
Енгізіңіз деректер-. Оның көмегімен сіз өзіңіздің жеке моделіңізді тағайындай аласыз, өтіп, оны байланыстыра аласыз. Мысалы, сіз мұны істей аласыз:
input type = «button» data-id = «facebook» dataregion = «main» data-event = «register»> input type = «button» data-id = «twitter» dataregion = «main» data-event = «тіркеу «> input type =» button «data-id =» linkedin «dataregion =» main «data-event =» register «>
Біз параққа JavaScript-ті тыңдаушыны қоса аламыз, клиент кез келген уақытта оны ауыстырған кезде немесе осы батырманы басқан кезде сол әрекетті бақылай аламыз. OAuth арқылы Twitter-де тіркелген біреуді бақылай алмаудың орнына, біз олардың Facebook, сосын Twitter, содан кейін LinkedIn, содан кейін Twitter-ді OAuth моделі үшін таңдауға бел буғанын көре аламыз.
Мұны Pinterest сияқты сайтқа немесе клиенттер қызығушылығына қарай тақтайшаларын қайта ретке келтіру үшін тақтайшаларды сүйреп апаратын жаңа Myspace дизайнына дейін кеңейтіп көріңіз. Мүмкін, олар қызықтырмайтын тақтайшаларды жасыруы мүмкін деректер- атрибут сіз анықтай алатын нәрселерге қосымша семантикалық мағына қабатын қосуға немесе тағайындауға мүмкіндік береді. Аяксқа сенімді сайттар мен қосымшалар үшін бұл мүмкіндіктер шексіз.
CSS3 - бұл жаңа Photoshop
CSS3 сыртқы көріністі жобалаудың жаңа деңгейіне ие болды, ол үшін фондық кескіндер, кесектер және әйгілі «жылжымалы есіктер» техникасы қажет болды. Бақытымызға орай, мұның бәрі өткен нәрсе.
Сызықтық градиентпен, дөңгелек бұрыштармен, мәтінді көлеңкеден жақсы әріптермен басу әсерін беретін және жылжуымен жарқыраған әсем түймені жасауды қарастырайық. Осы әдістерді үйрену ұзақ жолға жетеді. Олардың әрқайсысы өз бетінше немесе әр түрлі тіркестерде қолданылып, қазіргі кезде желідегі кез-келген көрнекі ыстықтықты тартуға болады.
Алдымен әдепкі бойынша бірнеше түзетулер енгізейік түймесін басыңыз және енгізу түрі = «жіберу»> элементтер. Стандартты CSS қалпына келтірудің бірін қолдандыңыз деп есептесек, біз тек өлшемдер мен тыныс алу бөлмелерін қосамыз.
/ * Түймешіктер, олардың батырмалары. ========================================= * * / батырмасы, енгізу [type = «жіберу»] {биіктігі: 2.7em; төсеу: .4em .7em; сызық биіктігі: 1,9; }
Хаттама: Жіберілетін батырмалар мен кірістер рестильдеу үшін өте қиын болуы мүмкін. Мен сызық биіктігін 1,6 немесе одан жоғары етіп реттеу арқылы таптым, сіз қосымша див немесе аралықты қажет етпейтін бұзылулардан аулақ бола аласыз. түймесін басыңыз тег.
Енді біз түйменің мәселесін «шештік», біз жасай аламыз .btn Бізге бұрыштары дөңгелектелген, сызықты градиенті бар, контуры бар және типографиялық түрдегі әдемі таза батырманы беретін сынып.
.btn {дисплей: кірістірілген блок; шекара: 1px қатты # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; шекара радиусы: 4px; төсеу: .4em .7em; фон: # edeff2; фон: -webkit-градиент (сызықтық, 0% 0%, 0% 100%, бастап (#fefefe), color-stop (0.55, # edeff2), дейін (# e4e6e9)); фон: -moz-сызықтық-градиент (ортаңғы жағы, #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; көлеңке терезесі: rgba (160,172,187, .7) 0 0 .2em 0; түс: # 6c7786; қаріп өлшемі: 1.1em; мәтін көлеңкесі: #fefefe 1px 0 1px; сызық биіктігі: 1.375em; меңзер: көрсеткіш; }
Одан кейін жіңішке жарқылмен жағымды әсер ету көлеңке әдіс:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; көлеңке терезесі: # 129ceb 0 0 2px; фон: # e6e9eb; фон: -webkit-градиент (сызықтық, 0% 0%, 0% 100%, бастап (# f7f7f7), color-stop (0.55, # f6f6f7), (# e6e9eb) дейін)); фон: -moz-сызықтық градиент (жоғарғы жағы, # f7f7f7, # f6f6f7 55%, # e6e9eb); түс: # 45484b; мәтін-көлеңке: rgb (255,255,255) 1px 1px 0; жиек-түс: # c9c9c0; }
Енді мен сызықтық градиент кодын жазудың үлкен жанкүйері емеспін. Бұл ұзақ және түсініксіз. Көріп отырғаныңыздай, мен тек үшін нұсқасын енгіздім -moz, -вебкитжәне стандартты модель. -O және -ms нұсқаларын қосқыңыз келсе, кодты екі есеге көбейтуіңіз керек.
Басқа екі нұсқа бар. Біреуі - CSS3 генераторы; Интернетте бірнеше, соның ішінде ColorZilla бар. Бірақ егер сіз өз ойыныңызды сәл күшейткіңіз келсе, Sass-қа сүңгуді ойластырыңыз: Компаспен үйлескенде, бұл құдайдың сыйы.
Sass + Compass: сиқырлы түрде дәмді
Сіз CSS4 жалғыз мүйізді шығарылымына үміттенуді тоқтатуға болады. Бұл жерде және ол Sass + Compass деп аталады. Sass Syntactically Awesome Stylesheets дегенді білдіреді: сіз CSS3-тің барлық дәстүрлі артықшылықтарын ауыспалы, миксиндер, кеңейткіштер және басқа да жақсылықтармен қуалай аласыз.
Жақында мен 5000-жолдық CSS файлын қайта өңдедім, оның көк түстің 30-дан астам нұсқасы болды. Sass көмегімен мен барлық вариацияларды келесі кодпен алмастырдым:
түсі: $ көк;
Анықтау арқылы $ көк менің _variables.scss файл, мен кез-келген CSS немесе SCSS файлына сілтеме жасай алатын әдепкі түсті жасай аламын. CSS жазатын кез келген адам қолдана алады $ көк көз тамшысын пайдалану, он алтылық кодын немесе RGB, RGBA немесе HSL түсін табу туралы алаңдамай-ақ қойыңыз.
Сызықтық градиент коды есіңізде ме? Бірнеше код жолын жазудың орнына, бұл туралы:
@include background (сызықтық-градиент (# b1cfdc, # 7a9cac));
Ауыр көтеруді Sass пен Compass жасасын және сіз үшін дұрыс синтаксис жасаңыз: дайын. Айталық, түстің күңгірт немесе ашық нұсқасын алғыңыз келеді. Сіз көз тамшысын фотошопта айналдыра аласыз немесе жай ғана Sass ішіндегі жеңілдету / қоюлату пәрмендерін қолдансаңыз болады:
@include background (сызықтық-градиент (күңгірт ($ litegray, 2%), күңгірт ($ off-white, 5%)));
Бұл 2% қараңғыланған сызықтық градиент жасайды $ ақшыл-сұр және 5% қара түсті ақ шулан. Дауыс! Сізге тіпті HEX немесе RGB кодтары қажет емес.
jQuery: иә, сіз жасай аласыз
Менің мойындауым керек. Мені қорқыту үшін қолданылатын JavaScript. Содан кейін мен jQuery таптым. Мен JavaScript гуруымын деп талап етпеймін, бірақ мен кез-келген ауысуды немесе jQuery-ді қажет ететін функцияны тоқтата алатыныма сенімдімін.
Мысалы, жаңа нөмір қосу сілтемесін басу арқылы экранда қосымша телефон нөмірін енгізу мүмкіндігін алыңыз. JQuery-ді пайдаланып, сіз жай мынаны жазасыз:
// - Прогрессивті ашып көрсету - // $ (’. Жаңа сан’). Басу (function () {$ (’. Alt-number’). FadeIn (’fast’);});
Неғұрлым жетілдірілген нәрсе іздеп жүрсіз бе? Ол үшін плагин бар шығар. Негізгі мінез-құлық оңай, ал jQuery көмегімен күрделіге қол жетімді.
Фреймворктар
Қазіргі кездегі ең сенімді екі құрылым - Foundation және Bootstrap. Енді CSS фреймворктерін жұмыстан шығармас бұрын, сізден бір нәрсе сұрайын. Сіз jQuery қолданасыз ба? Rails on Rails? Джанго? Барлық шеңберлер.
JQuery және RoR сияқты, Foundation және Bootstrap біздің қайта-қайта жасайтын нәрселеріміздің (мысалы, қалпына келтіру, типография, торлар, формалар, батырмалар, сілтемелер және тізімдер) өте көп екенін білгендіктен пайда болды. Foundation және Bootstrap екеуі де көмекші сыныптарды қолдану арқылы жауап беретін дизайнға қолдау көрсетеді. Екеуі де жақсы құжатталған және жол тексеруден өткен, сондықтан сіз оларды сенімді пайдалана аласыз.
Екі негізгі айырмашылық: Bootstrap CSS алдын-ала өңдеуге арналған LESS жүйесіне негізделген, ал Foundation Sass-қа негізделген. Қосымша мүмкіндіктерінің арқасында мен Sass-ты аз деп санаймын, бірақ дәстүрлі CSS-ті Sass-та және LESS-те бөліп-жарып жібереді.
Жақтау туралы соңғы ой. Басқа біреудің жақтауын мұраға алғысы келмейтіндер үшін барын таңдап, оны сүйектерге дейін жалаңаштау немесе шие жинау үшін бірнеше адамнан таңдау керек. Қалай болғанда да, әрдайым нөлден бастауға ешқандай себеп жоқ.
Соңғы ойлар
Сіздің дизайныңыздың ақырында қалай пайда болатынына үлкен бақылау керек пе? Көбірек процестерді ағынға қарай кодқа жылжытыңыз. HTML5 соңында DOM-ға белгілі бір мағына әкеледі. Ештеңеге келмейтін жақсы реданс DOCTYPEs және дивит. CSS3 - бұл жаңа Photoshop: сызықтық градиенттер, borderradius және FTW көлеңкелері! Bootstrap, Foundation, Sass және jQuery сияқты құралдармен дизайнды жоғары ағынға кодқа ауыстыру ешқашан оңай болған емес.
HTML5-тің 55 керемет мысалын Creative Bloq-тан біліп алыңыз.
