Задаволены
- Перавагі распрацоўкі з кодам
- Спачатку дадзеныя
- Мабільная дабрыня бясплатна
- Пошук агульнай мовы
- Вучыцеся хутчэй
- Хуткая ітэрацыя
- Хутчэй час запуску
- Чаму HTML5?
- Магічны атрыбут дадзеных
- CSS3 - гэта новы Photoshop
- Сас + Компас: чароўна смачны
- jQuery: так, так можна
- Рамкі
- Заключныя думкі
Гэты артыкул упершыню з'явіўся ў нумары 235 часопіса .net - самага прадаванага ў свеце часопіса для вэб-дызайнераў і распрацоўшчыкаў.
Я ніколі не быў вялікім прыхільнікам рабіць больш працы, чым трэба. Я схільны ацэньваць метады і інструменты на аснове іх здольнасці зрабіць мяне ці маю каманду больш эфектыўнымі. Як хутка яны прыводзяць нас да працуючага прадукту? Наколькі яны эфектыўныя ў зносінах? Яны не стаяць нам далей?
На працягу многіх гадоў я карэктаваў свой дызайнерскі працэс і інструменты. Я мяркую, што буду працягваць гэта рабіць. Гэта прырода распрацоўкі тэхналогій і Інтэрнэту. Гэтая галіна пастаянна развіваецца; наш працэс і інструменты таксама павінны развівацца.
HTML5 і CSS3 палягчаюць пераход большай часткі працэсу дызайну ўверх - далей ад Photoshop і больш да жывога дыхаючага дызайну. Такія інструменты, як 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 і ўзлому. Ах, і калі ваш браўзэр не ведае, што такое input type = "email"> ёсць, тады ён проста па змаўчанні ўводзіць тэкст.
Пошук агульнай мовы
"Цудоўна, як нашы дызайнеры і распрацоўшчыкі могуць працаваць на адной мове", - Джон Драго, распрацоўшчык прыкладанняў у Inflection.
Паглядзіце, ці падаецца гэта знаёмым. Я знаходжуся ў канферэнц-зале з паўтузіна распрацоўшчыкаў прыкладанняў на баку сервера, якія могуць кодаваць кругі вакол мяне ў Ruby, Python, Java ці .NET. Я адзіны дызайнер. Некалькі маіх прапаноў першапачаткова адхіляюцца як занадта складаныя для рэалізацыі. Я падыходжу да дошкі і пачынаю пісаць на дошцы HTML і CSS, як можна рэалізаваць дызайн. Раптам гук размовы змяняецца, і адзін з распрацоўшчыкаў неахвотна кажа: "Ну, так - калі мы зробім гэта так, гэта можа спрацаваць".
Большая частка майго дызайнерскага працэсу ў кодзе палепшыла размовы з распрацоўшчыкамі. Ёсць дадатковы ўзровень павагі, зароблены веданнем таго, як стварыць свой дызайн у кодзе. Не трэба быць экспертам, каб зарабіць такую павагу. Хоць мае навыкі HTML і CSS цвёрдыя, мае навыкі JavaScript у лепшым выпадку пасрэдныя. І я не саромеюся гэта прызнаць. Тым не менш, працуючы з франтальным распрацоўшчыкам альбо распрацоўшчыкамі з боку сервера, той факт, што мы можам размаўляць на агульнай мове альбо сустракацца на паўдарозе, з'яўляецца велізарнай перавагай.
Вучыцеся хутчэй
Хоць каркасныя каркасы і візуальныя кампазіты могуць дапамагчы ў планаванні, гэтыя статычныя артэфакты з'яўляюцца тэарэтычнымі. Колькі разоў вы спрабавалі растлумачыць каму-небудзь узаемадзеянне, толькі каб ён адказаў: "Мяркую, мне давядзецца гэта ўбачыць". Чым хутчэй вы дабярэцеся да прататыпа, з чым людзі могуць узаемадзейнічаць, тым хутчэй вы выпрабуеце дызайн і ўбачыце, ці спрацуюць ідэі.
Хуткая ітэрацыя
Калі апошні раз канчатковы дызайн, які быў пастаўлены на вытворчасць, дакладна адпавядаў вашаму камп'ютэру Photoshop? Амаль ніколі. З лічбавым дызайнам прадукту змены адбываюцца пастаянна. Акрамя таго, такія змены, як павелічэнне памеру загалоўкаў з 22 да 24 балаў на некалькіх дзясятках экранаў, могуць заняць некалькі гадзін у Photoshop. Разумныя аб'екты даюць вам пэўны ўзровень аб'ектна-арыентаванага дызайну ў Photoshop. На жаль, большасць візуальных дызайнераў, якіх я ведаю, выкарыстоўваюць недастаткова разумныя аб'екты. З CSS, паколькі ён стымулюе больш сістэматычны падыход да дызайну, друкарскія змены займаюць некалькі хвілін, а не гадзіны.
А як наконт змены лінейных градыентаў на ўсіх вашых кнопках? Ці памер бардзюра? Як наконт таго, каб перайсці з квадратных кутоў на 2px закругленыя? У Photoshop гэта можа заняць гадзіны, і вам усё роўна прыйдзецца закадзіраваць яго. Магчымасць дызайну ў кодзе дапамагае пазбегнуць зваротнага вяртання ў Photoshop для перагляду візуальнага дызайну. Калі вы перамяшчаеце гэтыя змены ўверх па кодзе, выкарыстоўваючы CSS3 і Sass (пра якія я распавяду далей у гэтым артыкуле), яны могуць адбывацца ў рэжыме рэальнага часу і займаць усяго некалькі хвілін.
Хутчэй час запуску
На працягу многіх гадоў, калі я пераўтвараў большую частку свайго дызайнерскага працэсу ўверх, у код, я адчуў сапраўднае паляпшэнне - прыблізна на 20-30 адсоткаў скарачэння часу выхаду на рынак. Чым больш я гэта раблю, тым менш часу я марную на дубляванне намаганняў. Я раблю менш цыклаў, заходзячы ў Photoshop ці феерверкі, а потым паўтараю працу ў кодзе.
У нейкі момант дызайн павінен узаемадзейнічаць з тыпам бэкэнда, няхай гэта будзе CMS, прыкладанне Rails ці нешта іншае. Паколькі большасць маіх дызайнерскіх работ - у кодзе, інтэграцыя адбываецца раней, чым пазней. Пару гадоў таму адзін з маіх кліентаў, PointRoll, за пяць дзён перайшоў ад прататыпа да вытворчасці.
Чаму HTML5?
HTML5 прасцей, чым папярэднія версіі HTML. Возьмем для прыкладу дэкларацыю тыпу дакумента. У папярэдніх версіях HTML файл ДАКТЫП выглядала прыблізна так:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
І было шэсць розных версій. На шчасце HTML5 ДАКТЫП выглядае так:
! 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, вы былі абмежаваныя ідэнтыфікатарамі, класамі і ролямі.
На жаль, ідэнтыфікатары павінны быць унікальнымі. Заняткі ўніверсальныя (іппі!), Але выкарыстанне іх можа хутка ператварыцца ў бязладдзе. Ролі - гэта недастаткова актыўны актыў, які мае значэнне для ВСС. У апошні час я выкарыстоўваю data- для платформы аналітыкі адсочвання падзей, якую мы распрацоўваем у Inflection.Мы вялікія прыхільнікі тэставання нашых канструкцый. Працуючы над дадаткамі або старонкамі, якія валодаюць вялікай колькасцю інтэрактыву, мы хацелі б мець больш дэталёвае ўяўленне пра ўзаемадзеянне кліентаў на старонцы.
Увядзіце дадзеныя-. З яго дапамогай вы можаце прызначыць, перадаць і падключыць мадэль сэнсу «вызначыць сваё». Так, напрыклад, вы можаце зрабіць гэта:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> type type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Мы можам далучыць да старонкі праслухоўшчык з JavaScript, і ў любы час, калі кліент наводзіць курсор мышы альбо націскае гэтую кнопку, мы можам адсочваць гэтую дзейнасць. Замест таго, каб адсачыць толькі тое, што хтосьці зарэгістраваўся праз Twitter з дапамогай OAuth, мы бачым, што яны луналі над Facebook, потым Twitter, потым LinkedIn, а потым нарэшце вырашылі выбраць Twitter для сваёй мадэлі OAuth.
Уявіце, што вы распаўсюджваеце гэта на такі сайт, як Pinterest, альбо новы дызайн Myspace, дзе кліенты перацягваюць пліткі, каб змяніць іх парадак на аснове працэнтаў. Ці, магчыма, хаваючы пліткі, якія іх не цікавяць дадзеныя- атрыбут дазваляе дадаць альбо прызначыць дадатковы ўзровень сэнсавага значэння рэчам, якія вы можаце вызначыць. Для сайтаў і праграм, якія ў значнай ступені абапіраюцца на Ajax, гэта адкрывае неабмежаваныя магчымасці.
CSS3 - гэта новы Photoshop
CSS3 прынёс зусім новы ўзровень дызайну, які раней патрабаваў фонавых малюнкаў, зрэзаў і паскуднай тэхнікі "рассоўных дзвярэй". На шчасце, усё гэта засталося ў мінулым.
Давайце паглядзім, як зрабіць мудрагелістую кнопку з лінейным градыентам, закругленымі кутамі, цень тэксту, які надае яму прыемны эфект націску літары і свячэнне пры навядзенні. Навучанне гэтым метадам пройдзе доўгі шлях. Кожны з іх можна выкарыстоўваць самастойна альбо ў розных спалучэннях, каб правесці практычна любую актуальную візуальную гарачыню, якая сёння трэндуе ў Інтэрнэце.
Спачатку зробім некалькі карэкціровак па змаўчанні кнопка> і input type = "submit"> элементаў. Мяркуючы, што вы выкарыстоўваеце адзін са стандартных скідаў CSS, мы проста дадамо невялікі памер і пакой для дыхання.
/ * Кнопкі кнопак, у якіх ёсць кнопкі. ========================================= * * / кнопка, увод [type = "submit"] {вышыня: 2.7em; абіўка: .4em .7em; вышыня лініі: 1,9; }
Protip: Кнопкі і ўваходы, якія ўяўляюць сабой, могуць быць складана перапрацаваць. Я знайшоў, адрэгуляваўшы вышыню лініі да 1,6 і больш, вы можаце пазбегнуць узлому неабходнасці дадатковага div або пралёта ўнутры кнопка> пазнака.
Цяпер мы "выправілі" праблему з кнопкамі, мы можам стварыць .btn клас, каб даць нам прыемную чыстую кнопку з закругленымі кутамі, лінейным градыентам, контурам і такім высокім друкам.
.btn {адлюстраванне: убудаваны блок; мяжа: 1px цвёрдая # d4d4cc; -moz-радыус-межа: 4px; -вебкіт-мяжа-радыус: 4px; мяжа-радыус: 4px; абіўка: .4em .7em; фон: # edeff2; фон: -webkit-градыент (лінейны, 0% 0%, 0% 100%, ад (#fefefe), каляровы стоп (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; text-shadow: #fefefe 1px 0 1px; вышыня лініі: 1.375em; курсор: паказальнік; }
А потым прыемны эфект навядзення з тонкім свячэннем з дапамогай скрынка-цень метад:
.btn: навядзенне, .btn: фокус {-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), каляровы стоп (0,55, # f6f6f7), да (# e6e9eb)); фон: -moz-лінейны градыент (па цэнтры зверху, # f7f7f7, # f6f6f7 55%, # e6e9eb); колер: # 45484b; text-shadow: rgb (255,255,255) 1px 1px 0; колер мяжы: # c9c9c0; }
Зараз я не вялікі прыхільнік напісання лінейнага градыентнага кода. Гэта доўга і бянтэжыць. Як бачыце, я ўключыў толькі версію для -моз, -вебкіт, і стандартная мадэль. Калі вы хочаце ўключыць версіі -o і -ms, вам трэба будзе падвоіць код.
Ёсць два іншыя варыянты. Адзін з іх - генератар CSS3; у Інтэрнэце ёсць некалькі даступных, у тым ліку ColorZilla. Але калі вы хочаце трохі актывізаваць сваю гульню, падумайце пра тое, каб пагрузіцца ў Sass: у спалучэнні з Compass гэта знаходка.
Сас + Компас: чароўна смачны
Вы можаце перастаць спадзявацца на выданне аднарога CSS4. Ён тут і называецца Sass + Compass. Sass расшыфроўваецца як Syntaxically Awesome Stylesheets: вы атрымліваеце ў спадчыну ўсе традыцыйныя перавагі CSS3 з дадатковымі радасцямі зменных, міксінаў, пашыральнікаў і іншых прысмакаў.
Нядаўна я перапрацаваў файл CSS з 5000 радкоў, які меў больш за 30 варыяцый таго ж адцення сіняга. З Sass я замяніў кожную варыяцыю наступным кодам:
колер: $ сіні;
Шляхам вызначэння $ сіні ў маім _variables.scss файл, я магу стварыць колер па змаўчанні, на які можа спасылацца кожны файл CSS або SCSS. Карыстальнік CSS можа выкарыстоўваць яго $ сіні і не трэба турбавацца пра тое, каб выкарыстоўваць піпетку, знайсці шаснаццатковы код альбо колер RGB, RGBA ці HSL.
Памятаеце гэты лінейны градыентны код? Замест таго, каб пісаць некалькі радкоў кода, як наконт гэтага:
@include background (лінейны градыент (# b1cfdc, # 7a9cac));
Дазвольце Сас і Компасу зрабіць цяжкую працу і сфармуйце для вас правільны сінтаксіс: зроблена. Скажам, вы хочаце больш цёмны альбо светлы варыянт колеру. Вы можаце перамяшчаць піпетку ў Photoshop, альбо проста выкарыстоўваць каманды асвятлення / зацямнення ў Sass:
@include background (лінейны градыент (цямнее ($ litegray, 2%), цямнее ($ белы, 5%)));
Гэта створыць лінейны градыент з пацямнелым на 2% $ палегчана-шэры і на 5% пацямнела брудна-белы. Вуаль! Вам нават не патрэбныя коды HEX або RGB.
jQuery: так, так можна
У мяне ёсць прызнанне. JavaScript выкарыстоўваўся для запалохвання мяне. Потым я знайшоў jQuery. Я не буду прэтэндаваць на тое, каб быць гуру JavaScript, але я ўпэўнены, што магу зрабіць практычна любы пераход альбо патрэбную мне функцыю, выкарыстоўваючы jQuery.
Возьмем, напрыклад, магчымасць адлюстравання дадатковага нумара тэлефона на экране, націснуўшы спасылку Дадаць новы нумар. Выкарыстоўваючы jQuery, вы проста пішаце наступнае:
// - Прагрэсіўнае выяўленне - // $ (’. New-number’). Націсніце (function () {$ (’. Alt-number’). FadeIn (’fast’);});
Шукаеце нешта больш прасунутае? Магчыма, для гэтага ёсць убудова. Базавыя паводзіны простыя, а складаныя даступныя з jQuery.
Рамкі
Два найбольш надзейныя фрэймворкі сёння - гэта Foundation і Bootstrap. Цяпер, перш чым адхіляць фреймворкі CSS, дазвольце спытаць вас. Вы карыстаецеся jQuery? Рубін на рэйках? Джанга? Усе рамкі.
Гэтак жа, як jQuery і RoR, Foundation і Bootstrap нарадзіліся дзякуючы прызнанню таго, што мы робім шмат спраў зноў і зноў (напрыклад, скіды, тыпаграфіка, сеткі, формы, кнопкі, навігацыя і спісы). І Foundation, і Bootstrap прапануюць падтрымку дызайну, які рэагуе, з дапамогай дапаможных класаў. Абодва яны добра дакументаваны і прайшлі дарожныя выпрабаванні, таму вы можаце з упэўненасцю карыстацца імі.
Ключавое адрозненне паміж імі: Bootstrap заснаваны на сістэме LESS для папярэдняй апрацоўкі CSS, тады як Foundation заснавана на Sass. Я аддаю перавагу Sass МЕНШ з-за яго дадатковых магчымасцяў, але і Sass, і LESS раздушаюць традыцыйны CSS па частках.
Апошняя думка пра рамкі. Для тых, хто не хоча атрымаць у спадчыну лішняе ўздуцце чужых рамак, падумайце пра тое, каб выбраць ужо існуючы і зачысціць яго да аголеных костак, альбо выбраць вішню з некалькіх, каб скруціць уласную. У любым выпадку, сапраўды няма прычын кожны раз пачынаць усё з нуля.
Заключныя думкі
Хочаце большага кантролю над тым, як канчаткова атрымаецца ваш дызайн? Перамясціце больш працэсаў вышэй па плыні на код. HTML5, нарэшце, уносіць сэнс у DOM. Добрае пазбаўленне ад бессэнсоўнага ДАКТЫПы і дзівіты. CSS3 - гэта новы Photoshop: лінейныя градыенты, радыус межаў і FTW-цені! А з такімі інструментамі, як Bootstrap, Foundation, Sass і jQuery, перанесці дызайн уверх па кодзе ніколі не было прасцей.
Адкрыйце для сябе 55 дзіўных прыкладаў HTML5 у Creative Bloq.
