Мазмун
- Код менен иштеп чыгуунун артыкчылыктары
- Биринчи маалымат
- Акысыз мобилдик жакшылык
- Жалпы тилди издөө
- Тезирээк билүү
- Тез кайталоо
- Иштетүүгө тезирээк убакыт
- Эмне үчүн HTML5?
- Сыйкырдуу маалыматтар - касиет
- CSS3 - бул жаңы Photoshop
- Sass + Compass: сыйкырдуу даамдуу
- jQuery: ооба, ооба
- Framework
- Акыркы ойлор
Бул макала биринчи жолу .net журналынын 235-санында пайда болду - бул веб-дизайнерлер жана иштеп чыгуучулар үчүн дүйнөдөгү эң көп сатылган журнал.
Мен эч качан муктаж болгондон ашыкча жумуш жасаганды жакшы көргөн эмесмин. Мен методдорду жана куралдарды мени же менин командамды натыйжалуу кылуу жөндөмүнө жараша баалайм. Алар бизди иштеп жаткан өнүмгө канчалык тез жеткиришет? Алар баарлашууда канчалык натыйжалуу? Алар биздин жолдон алыс болушабы?
Көптөгөн жылдар аралыгында мен өзүмдүн дизайн процесстеримди жана шаймандарымды тууралап чыктым. Мен муну уланта берем деп элестетем. Технологияны жана вебди долбоорлоо мүнөзү ушундай. Бул тармак тынымсыз өнүгүүдө; биздин процессибиз жана куралдарыбыз дагы өнүгүшү керек.
HTML5 жана CSS3 долбоорлоо процессин агымдын жогорку агымына өтүүнү жеңилдетет - Photoshop программасынан алыстап, жашоо жана дем алуу дизайнына. Foundation, Bootstrap жана jQuery сыяктуу шаймандар кодирование үчүн дизайн процессиңиздин көбүрөөк бөлүгүн жылдырат.
Код менен иштеп чыгуунун артыкчылыктары
Биринчиден, мен сиздин Photoshopтон 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 жөндөмдөрүм эң жакшы деңгээлде. Анан мен муну моюнга алгандан тартынбайм. Ошентсе да, frontend же сервер тарабындагы иштеп чыгуучулар менен иштөөдө, жалпы тилде сүйлөй алышыбыз же жарым жолдон жолугуп калышыбыз чоң артыкчылык.
Тезирээк билүү
Вирфреймдер жана визуалдык композиттер пландаштырууга жардам берсе, бул статикалык экспонаттар теориялык мүнөзгө ээ. Бирөөгө канча жолу өз ара аракеттенүүнү түшүндүрүп берүүгө аракет кылып көрдүңүз, бирок алар: "Мен аны көрүшүм керек окшойт" деп жооп беришин сурандым. Прототипке канчалык эрте жетсеңиз, адамдар менен кандайча мамиле түзсө болот, ошончолук дизайнын байкап, идеялардын иштей тургандыгын көрө аласыз.
Тез кайталоо
Акыркы жолу качан өндүрүшкө жөнөтүлгөн акыркы дизайн сиздин Photoshop комп менен дал келген? Дээрлик эч качан. Санарип өнүмүнүн дизайны менен өзгөрүүлөр дайыма болуп турат. Мындан тышкары, бир нече ондогон экрандарда рубрикалардын көлөмүн 22pt ден 24pt чейин көбөйтүү сыяктуу өзгөрүүлөр Photoshopто бир нече саатка созулушу мүмкүн. Акылдуу объектилер Photoshop программасында кандайдыр бир деңгээлде объектке багытталган дизайнын берет. Тилекке каршы, мен билген визуалдык дизайнерлердин көпчүлүгү Smart Objectsти жетиштүү деңгээлде колдонушпайт. CSS менен, дизайнга тутумдаштырылган мамиле кылууга түрткү бергендиктен, типографиялык өзгөрүүлөр сааттын ордуна бир нече мүнөткө созулат.
Бардык баскычтарыңыздагы сызыктуу градиенттерди өзгөртүү жөнүндө эмне айтууга болот? Же чек аранын көлөмүбү? Квадраттык бурчтардан 2px тегеректелген бурчка өтсөңүз болот? 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тин жаңы семантикалык элементтери менен, сиз сканерлөөнү жөнөкөй жана жеңилдеткен нерсени аласыз, мисалы:
header> nav> / nav> / header> article> четке> / четке> / Article> footer> / footer>
Карагылачы. Мааниси бар нерсе.
Сыйкырдуу маалыматтар - касиет
HTML5 дагы бир укмуштуу кайырмак менен келет, ал сизге өзүнүн семантикалык маанисин иштеп чыгууга мүмкүнчүлүк берет берилиштер. Буга чейин, эгер сиз DOM элементине маанилүү бир нерсени дайындагыңыз келсе, сиз ID, класстар жана ролдор менен гана чектелип калдыңыз.
Тилекке каршы, идентификаторлор уникалдуу болушу керек. Сабактар универсалдуу (иппи!), Бирок аларды колдонуу тез эле башаламандыкка айланып кетиши мүмкүн. Ролдор - бул АРИА үчүн олуттуу маанини берген пайдаланылбаган актив. Жакында мен маалыматтарды колдонуп келем, биз Inflection компаниясында иштеп жаткан окуяларды байкоо жүргүзүүчү аналитикалык платформа үчүн.Биз долбоорлорубузду сыноонун чоң күйөрмандарыбыз. Интерактивдүүлүгү жогору болгон тиркемелерде же барактарда иштөөдө, баракчанын ичиндеги кардарлардын катышуусу жөнүндө кененирээк түшүнүккө ээ болгубуз келет.
Кирүү берилиштер. Анын жардамы менен сиз "өзүңүздү аныктаңыз" деген маанидеги моделди дайындап, өтүп, илинип алсаңыз болот. Мисалы, сиз мындай кылсаңыз болот:
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 ">
Биз JavaScript менен угарманды баракка тиркеп, кардар каалаган убакта өтүп кетсе же ушул баскычты чыкылдатып койсо, ошол иш-аракетти көзөмөлдөй алабыз. Кимдир бирөөнүн Twitter аркылуу OAuth аркылуу катталгандыгын байкап калуунун ордуна, алар Facebook, андан кийин Twitter, андан кийин LinkedIn жана андан соң OAuth модели үчүн Twitterди тандап алууну чечишкен.
Элестетип көрүңүз, муну Pinterest сыяктуу сайтка, же болбосо кардарлардын кызыкчылыгына жараша плиткаларын кайрадан иретке келтирүү үчүн плиткаларды сүйрөп таштаган жаңы Myspace дизайны. Же, балким, алар кызыккан эмес плиткаларын жашырып берилиштер атрибут сиз аныктай турган нерселерге кошумча семантикалык маанинин катмарын тиркөөгө же ыйгарууга мүмкүндүк берет. Аякска таянган сайттар жана колдонмолор үчүн чексиз мүмкүнчүлүктөр ачылат.
CSS3 - бул жаңы Photoshop
CSS3 келбеттин жаңы деңгээлин алып келди, буга чейин фондук сүрөттөрдү, кесиндилерди жана атактуу "жылма эшиктер" техникасын талап кылган. Бактыга жараша, мунун баары өткөн окуя.
Келгиле, сызыктуу градиент, тегеректелген бурчтар менен кооз баскычты жасап, ага жакшы тамгаларды басуу эффектин берген тексттин көлөкөсү жана жылтылдаган нурун карап көрөлү. Бул ыкмаларды үйрөнүү узак жолго кетет. Алардын ар бири өз алдынча же ар кандай айкалышта колдонулуп, бүгүнкү күндө вебдеги тренддин көрүнүп турган ысыктыгынын дээрлик бардыгын тартып алат.
Биринчиден, демейки боюнча бир нече түзөтүүлөрдү киргизели баскычы> жана input type = "submit"> элементтер. Стандарттык CSS баштапкы абалдарынын бирин колдонгонуңузду болжолдоп, дем алуу бөлмөсүн бир аз кошобуз.
/ * Баскычтардын баскычтары, алардын баскычтары. ========================================= * * / баскычы, киргизүү [type = "submit"] {бийиктик: 2.7em; толтуруу: .4em .7em; сызыктын бийиктиги: 1.9; }
Про учу: Жөнөтүлгөн баскычтар жана киргизүүлөр рестлирлөө үчүн татаал болушу мүмкүн. Сызыктын бийиктигин 1,6 же андан чоңураак кылып тууралоо менен таптым, сиз кошумча див же интервалдын ичине кирип кетүүдөн сактанасыз. баскычы> тэг
Эми биз кнопкабыздын маселесин ‘оңдоп койдук, а түзө алабыз .btn Бизге бурчтары тегеректелген, сызыктуу градиент, контуру жана басмакана түрү менен кооз таза баскычты берүү үчүн класс.
.btn {дисплей: inline-block; чек: 1px solid # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; чек-радиусу: 4px; толтуруу: .4em .7em; background: # edeff2; өбөлгөлөр: -webkit-градиент (сызыктуу, 0% 0%, 0% 100%, баштап (#fefefe), color-stop (0.55, # edeff2), to (# 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; box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; color: # 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; box-shadow: # 129ceb 0 0 2px; background: # e6e9eb; фон: -webkit-градиент (сызыктуу, 0% 0%, 0% 100%, (# f7f7f7) дан, color-stop (0.55, # f6f6f7), (# e6e9eb) чейин)); өбөлгөлөрү: -moz-сызыктуу градиент (борбордун үстү, # f7f7f7, # f6f6f7 55%, # e6e9eb); color: # 45484b; text-shadow: rgb (255,255,255) 1px 1px 0; border-color: # c9c9c0; }
Эми, мен сызыктуу градиент кодун жазуунун чоң күйөрманы эмесмин. Бул узак жана түшүнүксүз. Көрүнүп тургандай, мен үчүн версиясын гана киргиздим -moz, -webkitжана стандарттык модель. Эгер сиз -o жана -ms версияларын кошкуңуз келсе, анда кодду эки эсе көбөйтүшүңүз керек болот.
Дагы эки вариант бар. Бири CSS3 генератору; Интернетте бир нече, анын ичинде ColorZilla бар. Бирок оюнуңузду бир аз күчөтүүнү кааласаңыз, анда Сасска чөмүлүүнү карап көрүңүз: Компас менен айкалыштырып, бул кудайдын буйругу.
Sass + Compass: сыйкырдуу даамдуу
CSS4 unicorn чыгарылышына үмүттөнө берсеңиз болот. Бул жерде жана ал Sass + Compass деп аталат. Sass Syntactically Awesome Stylesheets дегенди билдирет: сиз CSS3тин бардык салттуу артыкчылыктарын өзгөрүлмө, миксиндер, кеңейткичтер жана башка жакшы нерселер менен кошо кубанасыз.
Жакында мен бир эле көк түстө 30дан ашык өзгөрүүлөргө ээ болгон 5000 саптан турган CSS файлын оңдоп чыктым. Sass менен, мен ар кандай вариацияны ушул код менен алмаштырдым:
color: $ blue;
Аныктоо менен $ blue Менин _variables.scss файл, мен ар бир CSS же SCSS файлына шилтеме бере турган демейки түстү түзө алам. CSS жазгандардын бардыгы колдоно алышат $ blue ошондой эле, көз тамчылаткычты колдонуу, алты бурчтуу кодду табуу же RGB, RGBA же HSL түсүн издөө менен убара болбоңуз.
Ошол сызыктуу градиент кодун эсиңиздеби? Бир нече сап код жазуунун ордуна, бул жөнүндө:
@include background (сызыктуу-градиент (# b1cfdc, # 7a9cac));
Sass жана Compass оор көтөрүүнү жасап, сиз үчүн туура синтаксисти түзүшсүн: бүттү. Түстүн кара же ачык нускасын каалайсыз дейли. Көздүн тамырын фотошоп аркылуу жылдырсаңыз болот, же Sass программасында жарык / караңгылатуу буйруктарын колдонсоңуз болот:
@include background (сызыктуу-градиент (күңүрт ($ litegray, 2%), караңгылатуу ($ off-white, 5%)));
Бул 2% караңгылатылган сызыктуу градиент жаратат $ lite-grey жана 5% караңгылатылган ак-ак. Voil! Сизге HEX же RGB коддору деле кереги жок.
jQuery: ооба, ооба
Мен бир нерсени мойнума алам. Мени коркутуу үчүн колдонулган JavaScript. Андан кийин jQuery таптым. Мен JavaScript гурумун деп айтуудан алысмын, бирок jQuery колдонушум керек болгон кандайдыр бир өткөөл мезгилди же функцияны алып кете алам деп ишенем.
Мисалы, Жаңы номер кошуу шилтемесин чыкылдатып, экранда экинчи телефон номерин киргизүүнү көрсөтүү мүмкүнчүлүгүн алалы. JQuery колдонуп, сиз жөн гана мындай деп жазасыз:
// - Прогрессивдүү ачып берүү - // $ (’. Жаңы сан’). Чыкылдатуу (function () {$ (’. Alt-number’). FadeIn (’fast’);});
Дагы өнүккөн нерсени издеп жатасызбы? Ал үчүн плагин бардыр. JQuery менен негизги жүрүм-турумдар оңой жана татаал адамдарга жеткиликтүү.
Framework
Бүгүнкү күндө эң бекем эки алкак - Foundation жана Bootstrap. Эми, CSS алкактарын жокко чыгарардан мурун, сизден бир нерсе сурайын. JQuery колдоносузбу? Ruby on Rails? Django? Бардык алкактар.
JQuery жана RoR сыяктуу эле, Foundation жана Bootstrap биздин көп жолу (мисалы, баштапкы абалга келтирүү, типография, тор, форма, баскыч, баскыч жана тизме) бар экендигин түшүнгөндүктөн жаралган. Foundation жана Bootstrap экөө тең жардамчы класстардын жардамы менен сезимтал дизайнга колдоо көрсөтүшөт. Экөө тең жакшы документтештирилген жана жол сынагынан өткөн, андыктан аларды ишенимдүү колдонсоңуз болот.
Экөөнүн бир айырмачылыгы: Bootstrap CSSти алдын-ала иштетүү үчүн LESS системасына негизделген, ал эми Foundation Sassка негизделген. Кошумча мүмкүнчүлүктөрүнүн жардамы менен мен Sassти аз деп эсептейм, бирок Sass да, LESS да салттуу CSSти бөлүктөргө бөлүп-бөлүп чачышат.
Алкактар жөнүндө акыркы ой. Башка бирөөнүн алкагынан чыккан ашыкча мурасты мураска алгысы келбегендер үчүн, бар болгонун тандап, аны жылаңач сөөктөргө чейин чечип алууну же бир нече адамдан гилас терип, өзүңүздүн роликти тандап алыңыз. Кандай болбосун, чынында эле, ар бир нерсени нөлдөн баштоого негиз жок.
Акыркы ойлор
Дизайныңыздын акыры кандайча чыгып жаткандыгын көзөмөлдөөнү каалайсызбы? Код иштеп чыгуу үчүн агымдын агымына көбүрөөк процесстерди жылдырыңыз. HTML5 акыры DOM үчүн кандайдыр бир маани берет. Маанисиздикке чейин жакшы редданс DOCTYPEs жана divitis. CSS3 бул жаңы Photoshop: сызыктуу градиенттер, borderradius жана box-Shadows FTW! Bootstrap, Foundation, Sass жана jQuery сыяктуу шаймандар менен дизайнды агымга чейин кодго өткөрүү эч качан оңой болгон эмес.
HTML5тин 55 укмуштуу үлгүлөрүн Creative Bloq сайтында табыңыз.
