Сегодня, будучи дизайнер гораздо больше, чем рисование красивых интерфейсов Photoshop или Fireworks.

Чтобы правильно спроектировать сайт или приложение, дизайнер пользовательского интерфейса должны понимать технологию, с которой их продукция будет построен;Поэтому, они должны иметь минимальный набор навыков развития интерфейсных.World Wide Web не является статичным.Совсем наоборот: Это responsive ¹ , fluid ² , evolving ³ и либо changing ⁴ .

Веб-дизайнеры должны быть знакомы с HTML и CSS __29 | 5 кода и интерфейсных технологий, когда они зачать сайт или интерфейс приложения.Это может быть реальный интерес для некоторых из вас, но это может добавить некоторые драгоценные активы вашего диапазона навыков.Или, как Джеффри Зельдман положил it __35 | 6 пять лет назад:

Недвижимость веб-дизайнеры писать код.Всегда есть, всегда будет .

Его слова актуальны и сегодня .

Я рекомендую вам прочитать очень интересную статью, “ О семантике HTML и Front-End Architecture __47 | 81 ⁷ ,” по Николя Gallagher ⁸ , создатель Normalize.css __63 | 9 (современная альтернатива CSS resets ¹⁰ ) и один из самых популярных фронта паутины-end шаблоны, HTML5 Boilerplate ¹¹ .

Зная переднего плана развития также облегчить работу разработчика, который будет осуществлять свой дизайн позже (то есть, если вы оба не дизайнер и разработчик) .

Я все еще заметить, что довольноНесколько дизайнеры очень хорошо на создание красивых пользовательских интерфейсов, но не имеют достаточного опыта в HTML и CSS — и опыт кодирования является еще более важным в эти дни .

Adobe Fireworks является графический дизайн инструмент, но он всегда был ориентирован на веб-интерфейса и дизайна.В Creative Suite (CS) версия 6, панель CSS свойства был добавлен в набор инструментов его — инструмент, который при правильном использовании, может помочь как дизайнеры с опытом кодирования CSS и новичков .

К концу этой статьи, вы должны иметь более полное представление о данной функции, а также знать, как использовать его с CSS Professionalzr ^{70 47 12} , бесплатное расширение разработан Мэтт Stow ¹³ для дальнейшей оптимизации кода, сгенерированного панели .

Примечание: Даже если Adobe Fireworks CS6 был “функция заморозки” в 2013 году, он по-прежнему работает, как в конце 2014 года, без каких-либо проблем в Последние издания Windows ¹⁴ (8.1) и из Mac OS X __36 | 15 (Yosemite).Он не только работать, но он по-прежнему активно используется многими дизайнерами — среди них, дизайнер и иллюстратор Фабио Benedetti ¹⁶ , который недавно написал обширный piece ¹⁷ о проектировании и иллюстрирующие иконки в Fireworks .

Панель Свойства CSS В Fireworks

Что это такое

Первоначально введен в качестве бета-функции в Adobe Labs, Свойства CSS фейерверки “panel ¹⁸ была завершена и выпущена в версии CS6 .

В двух словах, панель CSS свойств инструмент, который отображает наиболее важные свойства любого объекта, выбранного на холсте в Fireworks.Данные предоставляются панели позволяет идеально воссоздать ту же самую элемент с CSS3 кода.Это позволит вам сэкономить время и ускорить свою работу .

(УС Professionalzr является свободным расширением, что еще больше повышает возможности в CSS Группой рекомендации в Подробнее об этом позже.).

Основные Features

Панель отображает CSS свойства любого объекта, выбранного на холсте (в том числе и вектора текстовых объектов), что позволяет легко скопировать код CSS в буфер обмена.Панель также поддерживает живые фильтры Fireworks “и живые эффекты в Photoshop.Так что, если Тень жить фильтр был применен к объекту, то он будет переведен на CSS3 эквивалентной, бокс-shadow __20 | 20 .

Вот краткий список того, что особенности панели позволяют Вам делать:

• Прямо скопировать в буфер обмена некоторых (или всех) из CSS свойств, которые составляют элемент .
• Автоматически включать (или исключать) CSS комментарии, чтобы лучше понять и организовать свой код .
• Автоматически включать (или исключать) некоторые (или все) префиксы браузер: -webkit (для Chrome, Safari и Opera в настоящее время также), -moz (для Firefox), -o (для старых версий Opera) и -ms (для Internet Explorer), .

Примечание: Панель позволяет включать (или исключать) префиксы браузеру .

При версия CS6 разрабатывается (с 2012 по 2013 г.), префиксы браузера по-прежнему весьма популярны в веб-дизайн сообщества.Сегодня их потребность значительно снижается, потому что основными браузерами (да, в том числе последние версии Internet Explorer —! И на мобильных и настольных) внесли большой скачок вперед.Как Роджер Йоханссон недавно said ²¹ :

Я думаю, что есть куча CSS свойств, которые мы можем безопасно остановить с помощью префиксы для, по крайней мере, значительно сократить число префиксов.[...] Вы можете думать, “Но нет!Вызакрывая людей, использующих старые версии браузера X! “Нет, это не о закрытии любого или нет” поддержке “определенную версию браузера.Это об использовании прогрессивного улучшения, чтобы сделать ваш CSS меньше и проще в обращении и обслуживании.Мы не говорим о существенных признаков здесь.Если браузер не поддерживает свойство не-префиксом, ну там не будет каких-либо скругленных углов или тени или градиенты или любой другой.Результат будет выглядеть так, как это делает в IE8, который в настоящее время часто имеет гораздо больше пользователей, чем, скажем, Firefox 3.6 или Chrome 9 или Safari для прошивкой 4 или какой-либо другой старой версии браузера, которые могут нуждаться префикс поставщика.Пока весь макет не ломается, когда что-то не поддерживается, это нормально в целом, учитывая, что, по крайней мере последняя пара версий всех основных браузерах будет применяться ваш CSS .

Итак, я думаю, что это безопасно опустить все из них.Чтобы сделать это, просто отменить все флажки, и панель CSS свойства выведет чистый CSS.( Крис Coyier написал о поставщика prefixes ²² , если вы хотите, чтобы узнать больше.)

Примечание: Один из способов, чтобы быть безопасным с приставками браузера является использование Autoprefixer __14 | 23 .Этот плагин анализирует CSS код и добавляет префиксы правил CSS, используя значения из Могу ли я использовать ? ²⁴ .На самом деле, плагин позволяет писать CSS код полностью префикса бесплатно, автоматически добавляя все необходимые префиксы.Чтобы узнать больше, взгляните на “ Autoprefixer: постпроцессора для работы с Vendor префиксов в наилучшем Way __26 | 25 ,” довольно подробная статья.(Autoprefixer также включены в Grunt __32 | 26 шаблон в прекрасном веб-приложения генератора от Yeoman __38 | 27 .)

Поддерживаемые CSS Properties

Вот обзор видов недвижимости CSS и ценности вы получаете с помощью этой панели:

• Пограничные значения: border-width, border-color, border-style, border-radius (в px или %)
• Цвет фона: твердый (в rgba() формат) или градиентов (в том числе линейных и радиальных градиентов, вместе с их цветами и направлений)
• Коробка-тени значения: горизонтальное смещение, вертикальное смещение, радиус размытия, распространение радиус, color
• Ширина и высота выбранного элемента (хотя вы не будете, как правило,нужно их в отзывчивого дизайна — подробнее об этом позже)

Limitations

CSS панель не использовать сокращенный синтаксис для границ.Как вы можете видеть на скриншоте ниже, пограничные свойства разделены на border-color border-width и border-style .

Конечно, получать сокращенную декларацию было бы гораздо проще:

 border: 1px solid rgba(43,75,133,1.0);

Это намного чище, чем это:

 border-width: 1px;
 border-style: solid;
 border-color: rgba(43,75,133,1.0);

Я также рекомендую игнорируя width и height свойства объектов, зарегистрированных в панели, по крайней мере в большинстве случаев.Вместо этого используйте padding CSS собственности.Позвольте мне объяснить .

Примеры изображения в макете часто имеют особые ширины и высоты, в то время как фактические элементы, используемые в окончательном проекте могут отличаться.Так, определение полей (т.е. расстояние между содержанием и краем контейнера) лучше, потому что тогда элемент может быть меньше или такие, как необходимо, чтобы охватить содержимое.Вы можете установить размер пропорциональным или даже назначить минимальный и максимальный размеры для управления размером контейнера .

Давайте посмотрим пример того, почему фиксации размеры с width и height свойства не такая хорошая идея для кнопок:

• Мы, как правило, нужно текст автоматически по центру кнопки, но это не будет происходить с фиксированных свойств .
• Установив отступы, вы будете иметь гораздо лучше контролировать, если у вас есть, чтобы изменить текст внутри кнопки.Мы все знаем, что клиенты часто нерешительны об их копии;Таким образом, наши кнопки должны поддерживать текст разной длины.Будь кнопку говорит “Связаться с Facebook” или “Поделиться с Facebook,” обивка будет контролировать ширину и высоту кнопки отлично.(Бонус в том, что кнопка будет адаптироваться к любой размер текста пользователь установил в своем браузере.)
• Отзывчивый design ²⁸ .”Nuff сказал .

Вернуться к панели CSS и его ограничений .

Другой вопрос, что панель Фейерверк были некоторые ошибки с руководством градиентов.К счастью, эти проблемы были исправлены в последнем обновлении ( CS6 12.0.1 ^{29 | __33).Тем не менее, панель CSS свойства все еще может отображать несколько устаревшие объявления CSS, которые позволят увеличить количество строк в коде и вес вашего CSS файла .}

Таким образом, в то время как CSS панель очень полезна, она далека от совершенства.Но думаю, что ?! Видdeveloper ³⁰ кто увлечен Фейерверк и чистой, легкий CSS сделала свободное расширение, которое устраняет многие из проблем, упомянутых выше.Я рассмотрю его расширение, CSS Professionalizr ^{43 31} , подробно позже в статье — но сначала несколько вопросов к Мэтт Стоу, который былтак любезны ответить в интервью по электронной почте

Интерлюдия: Интервью с Мэттом Stow

Вопрос: Здравствуйте Мэтт, и спасибо, что нашли время ответить на мои вопросы.Во-первых, не могли бы вы представить себя в нескольких словах для читателей Smashing Magazine в ?

Мэтт: Я Мэтт Стоу, 30-то английский эмигрант, живущий в Ньюкасле, Австралия.Я старший разработчик пользовательского интерфейса для Izilla __27 | 32 и были связаны с компьютерами, так как обладание ZX Spectrum ^{35 33} как ребенок .

³⁴

Вопрос: Когда вы начинаете использовать фейерверк?Что ежедневного использования в приложении, как ?

Мэтт: я впервые начал играть с Fireworks MX, но он не был до 8 Фейерверк был выпущен в 2005 году, что это действительно схватил моего внимания, быстро становится моим основным инструментом для разработки и создания веб-ресурсов.Как я в основном делать интерфейсных развития, я вообще импортировать PSD файлы наших дизайнеров и экспортировать то, что я могу как спрайты, но я часто в конечном итоге перерисовки элементов в Fireworks для достижения пиксель-совершенства и легко конвертировать их в CSS кода.

Вопрос: Можете ли вы рассказать нам, как вы начали разработку расширений Fireworks

Мэтт: Моя первая расширение было мои команды рамка пакет в начале 2007 года во время Бета-цикла Fireworks CS3, я делал много кадров на основе анимации и дизайна, и я был расстроен тем, что не в состоянии легкоПереберите моих кадров (сейчас он называется “состояния”) с клавиатуры. Джон Dunning ³⁶ , Фейерверк расширение разработчик экстраординарный, дал мне несколько советов о начале работы с проходящими Fireworks, и это как снежный ком оттуда.Я создал бесчисленные расширений с тех пор, большинство из которых решения своих собственных потребностей и повышения эффективности моих конкретных рабочих процессов.Тем не менее, я также принял запросы от членов сообщества и встроенных расширений для них .

Вопрос: Почему вы решили создать расширение для улучшения панель CSS Свойства Фейерверк “

Мэтт: я писал CSS для более чем 10 лет, и я очень частности, о том, как он отформатирован и структурированный.В то время как я восхищаюсь, что команда Fireworks достигнутый с панели CSS свойств, выводится код не соответствует моим стандартам, как это было так многословен, и я знал, панель не может быть обновлена ​​достаточно регулярно, чтобы идти в ногу с ландшафтом современных браузерах.Мои опасения были обоснованными, тоже.Без CSS Professionalzr, градиенты экспортируется из Fireworks, оказываемых неправильно в Firefox, IE 16 10 и Opera 12.10 (к счастью, команда фейерверк решены это с его последняя patch ^{37 | __5, выпущенный в июне 2013 года) .}

Добавление base64 SVG градиенты для IE 9 был еще один важный повод для создания расширения .

Вопрос: Планируете ли вы дальнейших обновлений CSS Professionalzr

?

Мэтт: Да!Я только что выпустила обновление (1.1) для борьбы с новым патчем фейерверки CS6, в улучшать поддержку SVG и удалить ненужные другие префиксы .

В ближайшем будущем я планирую добавить Sass и, возможно, менее синтаксиса, тоже.Я хочу, чтобы включить поддержку Mixins от моего рамки Сасс, Suzi __34 | | 38__1 | __38, Compass ^{39 | __5 и Bourbon __46 | 40} .Хотя я лично не использовать компас, Бурбон или менее, я хочу, чтобы помочь сообществу и хотел бы, чтобы помочь решить, на котором я должен поддерживать первый и, чтобы помочь тест .

Вопрос: Последний вопрос, что вы думаете о недавнем решении Adobe, чтобы остановить добавление новых возможностей в Fireworks и не включать его в новой модели подписки СС?Каковы альтернативы фейерверков?(Или вы будете продолжать использовать его сейчас?)

Мэтт: Это было неизбежно.Я знаю Фейерверк был обречен на некоторое время теперь — Adobe просто не понять его потенциал.Но разве это имеет значение?Даже если Adobe не добавляя новыйОсобенности, разработчики расширений давая ему жизнь которого она заслуживает.Для меня, по-прежнему не является альтернативой (особенно на Windows), который делает все возможное, фейерверк.Так, пока не приходит, или я больше не быть продуктивным в Fireworks, я буду продолжать использовать его .

Вопрос: Большое спасибо, Мэтт.Я уверен, что наши читатели будут заинтересованы в получении в контакте с вами в Интернете, так что напишите нам ваши ссылки здесь .

Мэтт: Спасибо, и я хотел бы услышать от них!Вы можете посетить мой website ⁴¹ , где я выпускаю мои Фейерверк и расширения Dreamweaver, а также, где я блог и плагины выпустить для сети, особенно для отзывчивого веб-дизайна.Кроме того, вы также можете Следуй за мной по Twitter __16 | | 42__9 , где я стараюсь чирикать веб-связанные вещи .

CSS Professionalizr

Features

CSS Professionalizr ^{43 31} является свободным расширением, что улучшает и расширяет функциональность панели Свойства CSS в Fireworks.Вот некоторые из многих усовершенствований, которые это расширение приносит Фейерверк:

• Консолидирует border-color, border-style и border-width в одну стенографии border править .
• Она удаляет width и height атрибуты (вам не нужно будет это часто) .
• Форматирует все свойства последовательно (с запятыми, двоеточия, пробелов и т.д.) и удаляет избыточные новые линии, которые могли бы сэкономить несколько строк кода.(В то время как этот шаг может показаться излишним, в средних и больших проекта, это будет очень сильно влиять на конечный вес файла CSS.)
• Он использует новый синтаксис для префикса свойства градиентных .
• Сортировка по алфавиту все правила — полезные
• Он преобразует линейные градиенты base64.(В случае, если вы не знакомы с данными URI, то, статья “ The что, почему и как из URI, данных в веб-Design ⁴⁴ “. Поможет)

Еще одна интересная точка является то, что расширение удаляет устаревшие и неиспользуемые декларации свойства, такие как -ms-gradients и все фильтры для Internet Explorer.( Совет: Если вы хотите лучше контролировать CSS3 в старых версиях Internet Explorer, попробуйте PIE __63 | | 45__9 вместо)

Наконец, вот некоторые из улучшений, которые Мэтт добавленных в версии 1.1 егорасширение:

• Фиксированной поколение SVG (потому что углы изменено),
• Удалить наследие -webkit-border-radius Синтаксис
• Удалить наследие -o-gradients и нестандартные наследие -webkit-gradient Синтаксис
• Вымыл -moz-gradient правила .

(Эта версия принесла еще много исправлений, все из которых вы можете проверить в версия history ⁴⁶ .)

Использование CSS панели свойств CSS с Professionalzr: Дело Study

Installation

1. Скачать .MXP файл из CSS Professionalzr ^{70 47 12} страница 3 .__ |
2. Дважды щелкните на CSS-Professionalzr.mxp, принять лицензионное соглашение и установить расширение .

Подсказка: Если у вас возникли какие-либо проблемы установки расширения или вы просто хотите узнать больше об основах расширений Fireworks, статья “__46 ASHISH Bogawat в | Оптимизация дизайна Workflow с фейерверком Extensions ⁴⁸ “(и, в частности раздел под названием” Работа с расширениями в Fireworks “) даст вам немало ценных советов .

Сейчас, который устанавливается CSS Professionalzr, пришло время, чтобы попробовать его .

Давайте Создать Button

Предположим, что мы должны определенную кнопку социально-медиа для нашего следующего проекта в Интернете .

Кнопка “Связь с Facebook” | __62?Почему бы не

Прежде, чем мы продолжим, я хотел бы обратиться один вопрос, что некоторые дизайнеры сталкиваются при использовании Фейерверк .

Примечание о Strokes и жить Filters

Особенность хода Фейерверк “дает нам довольно много вариантов, но эффект не всегда последовательны.Как Бенджамин де Cock ⁴⁹ писал в своей очень интересной статье « Уточнение дизайн в Adobe Fireworks ^{74 50} “, используя”Выровнять обводку вне» вариант, как правило, дает лучший результат.(Узнать больше,проверить раздел “Улучшить Изобразительное Strokes” в статье Бена)

Подробно я хотел бы подчеркнуть, это сочетание эффекта хода Fireworks “и живой фильтр Внутренняя тень.Чтобы создать эффект выделения, как в этом примере, вы бы использовать белый Inner Shadow жить фильтр с темным цветным инсульта.Проблема в том, что фейерверк будет рассматривать тень, чтобы начать на верхней части кнопки, | including__3 ход.Это дает неприглядный результат .

Цвет границы и внутренняя тень смешиваются.Это не поведение мы хотим от живого фильтра Внутренняя тень.Скорее всего, мы хотим внутренняя тень, чтобы начать after ход (как box-shadow делает) .

Мы могли бы использовать композитный путь, а от инсульта, чтобы создать границу, которая даст нам лучше контролировать результат.Это хорошая альтернатива, но проблема в том, что CSS панель не будет в состоянии перевести и получить точные значения эффекта, так как значения придет от вектора пути, а не от живого фильтра, примененного к объекту .

Ладно, есть хороший надежны� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 10.12.2014 by coding.smashingmagazine.com