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

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

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

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

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

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

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

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

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

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

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

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

Что это такое

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

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

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

Основные Features

Панель отображает CSS свойства любого объекта, выбранного на холсте (в том числе вектора и текстовых объектов), что позволяет легко скопировать код CSS в буфер обмена.Панель также поддерживает живые фильтры ФЕЙЕРВЕРК ‘и живые эффекты в Photoshop.Так что, если Drop Shadow жить фильтр был применен к объекту, то он будет переведен на CSS3 эквивалентной, бокс-shadow ²⁰ .

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

• Прямо скопировать в буфер обмена некоторых (или всех) из 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.( Крис Койьер написал о поставщика prefixes ²² , если вы хотите, чтобы прочитать больше.)

Примечание: Один из способов, чтобы быть безопасным с приставками браузера является использование Autoprefixer ²³ .Этот плагин анализирует CSS код и добавляет префиксы правил CSS, используя значения из Могу ли я использовать ? ²⁴ .В самом деле, плагин позволяет писать CSS код полностью префикс без, автоматически добавляя все требуемые префиксы.Чтобы узнать больше, взгляните на “ Autoprefixer: постпроцессора по обращению с продавцом префиксов в наилучшем Way ²⁵ “, вполне подробная статья.(Autoprefixer также включены в Grunt ²⁶ шаблон в прекрасном веб-приложения генератора от Yeoman ²⁷ ).

При поддержке 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 ²⁹ ).Тем не менее, панель CSS свойства могут по-прежнему отображаться несколько устаревшие объявления CSS, что позволит увеличить количество строк в коде и вес вашего CSS файла .

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

Interlude: Интервью с Мэттом Stow

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

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

³⁴

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

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

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

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

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

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

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

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

?

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

В ближайшем будущем я планирую добавить Sass и, возможно, менее синтаксиса, тоже.Я хочу, чтобы включить поддержку Mixins из моей Сасс основы, Suzi ³⁸ , Compass ³⁹ и Bourbon ⁴⁰ .Хотя я лично не использовать компас, Бурбон или менее, я хочу, чтобы помочь сообществу и хотел бы, чтобы помочь решить, на котором я должен поддерживать первый и помочь в тестировании .

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

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

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

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

CSS Professionalizr

Features

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

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

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

Наконец, вот некоторые из улучшений, которые Мэтт добавлена ​​в версии 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} страница .
2. Дважды щелкните на CSS-Professionalzr.mxp, принять лицензионное соглашение и установить расширение .

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

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

Давайте создадим Button

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

Кнопка “Connect с Facebook” | __52?! Почему бы не

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

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

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

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

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

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