Pull to refresh

Автоматизация вёрстки

Reading time 4 min
Views 27K
image

Это заметка о подходе к реализации автоматизации механизма psd to html.

Главная задача, которую должен решать механизм psd to html – это уменьшение времени на вёрстку, никак не влияя при этом на работу дизайнера (например, введение специального синтаксиса в названиях слоёв макета, как это сделано на psd2htmlconverter-е и т. д.).

Основной минус состоит в том, что при данной задаче невозможна 100%-ная автоматизация. Для вёрстки требуется человек, обладающий базовыми навыками HTML. Несмотря на невозможность 100%-ной автоматизации, оптимизация временных затрат все-таки возможна :). Делается это путём определения размеров и координат блоков в макете и, исходя из полученных данных, можно: сгенерировать сетку сайта, расставить текстовые и пр. блоки (не через position: absolute), определить ссылки, вырезать картинки.

Следующая задача состоит в том, чтобы работать с проектом в целом: выделять глобальные блоки сайта, например шапка, футер и т. д., получать HTML/CSS этих блоков и при работе с последующими макетами не возвращаться к ним, или, в случае необходимости, получать быстрый доступ к этим блокам (например, добавить ссылку в футер).

И третья из важных задач – сократить до минимума процесс написания кода руками, по возможности, полное отсутствие ручного написания кода.


Для начала, коротко о psd


Для понимания того, что можно автоматизировать, а что – нет, необходимо понимать какую информацию можно получить из PSD-файла.

PSD-файл содержит информацию о слоях: список слоёв и папок, вложенность каждого слоя и папки, эффекты слоя, тип слоя (обычный, текстовый и т. д.) и если это слой-изображение, то содержится само изображение.

Эффекты слоя, которые считываются из psd-файла, можно посмотреть с помощью меню Layer Style (см. на изображении ниже); для текстовых слоёв добавляется текст, который содержит слой, а для слоев с изображениями – ссылка на сохраненное в psd-файле изображение, привязанное к данному слою.

image

Схема


В итоге получилась схема, которая коротко описывает основные задачи, реализовав которые, на выходе обеспечит качественный код.

image

Глобальные настройки проекта – информация об основных шрифтах используемых на сайте, указание минимальной и максимальной ширины сайта, кодировка и пр. общая информация о сайте.

Также есть html-элементы, которые не так легко получить из psd-файла автоматически. Например, фоновое изображение сайта или таблицы. Основная сложность с фонами – это составные фоны, которые состоят из нескольких слоев в psd-макете, а с таблицами – то, что дизайнеры по-разному рисуют таблицы в макетах: это могут быть отдельные текстовые слои или один текстовый слой, в котором текст отбит пробелами или табуляциями и переносами. Для таких элементов необходимо создать модули, которые помогут определить эти элементы.

Интерфейс


Главная задача, которую решает интерфейс – визуализация процесса вёрстки. Сам процесс вёрстки можно разделить на 3 вида:

  1. Автоматическая. В момент загрузки макетов система автоматически преобразовывает psd в html насколько это возможно.
  2. Методом drag n drop. Перетягивая выбранные слои и папки psd-макета в область DOM-дерева, их можно преображать в html/css.
  3. Ручная вёрстка. Не всегда автоматизация и полуавтоматизация могут быть эффективны на 100%, потому нужна возможность добавить/отредактировать вручную элементы в DOM-дерева или поправить/дописать css.


image

Попытка решить эту задачу отображена на изображении выше.

Экран делится на 4 части: область отображения макета, область отображения слоёв макета, DOM-дерево документа и CSS-стили элемента.

Область отображения макета

Большая область в левой части экрана. В этой области отображается PSD-макет, слои которого преобразованы в пнг-изображения. При необходимости посмотреть на результат вёрстки, переключать отображение psd-макета, на сгенерированный результат.

Drag n drop: при перемещении слоя (или группы выбранных слоёв) в область DOM-дерева, создаются элементы в дом дереве и цсс стили, в основе которых, – эффекты выбранных слоев.

Mousehover: подсвечиваются слои макета, элементы в списке слоев psd-макета и теги, созданные в DOM-дереве при перемещении слов в область DOM-дерева.

В правой части экрана 3 ячейки для работы со слоями макета, DOM-деревом страницы и сгенерированными css стилями:

Область со списком слоев psd-макета

Левая из 2х колонок, в правой части экрана. Показывается список папок/слоев с отступами для отображения вложенности и возможностью скрыть/отобразить слой или папку (скрываются/отображаются слои в области отображения макетов).

Drag n drop: при перемещении слоя (или группы выбранных слоёв) в область DOM-дерева, создаются элементы в дом дереве и цсс стили, в основе которых, – эффекты выбранных слоев.

Mousehover: подсвечиваются слои в области psd-макета и теги созданные в DOM-дереве при перемещении слов в область DOM-дерева.
Список остается неизменным (сортировать или удалять элементы нельзя).

Область DOM-дерева

Правая из 2х колонок, в правой части экрана. Показывается список элементов DOM-дерева и вложенность.

Drag n drop: при перемещении слоя меняется вложенность и положение выбранного элемента в DOM-дереве.

Mousehover: подсвечиваются слои в области psd-макета и элементы в списке слоев psd-макета, в случае, если элемент был создан методом drag n drop из областей макета.

Onclick: показываются цсс-стили, которые назначены элементу.

Можно менять количество элементов в списке (удаляя имеющиеся или добавляя новые), менять положение и вложенность элементов.

Область CSS-стилей

Нижняя ячейка в правой нижней части экрана. Отображение и функционал а-ля firebug для ФФ, или панель разработчика для Google Chrome: добавление новых стилей или редактирование/удаление существующих.

Дополнительный функционал


Под каждый проект предполагается создание репозитория на гитхабе для хранения сгенерированного хтмл/цсс.

Создание модулей для автоматического встраивания в код открытых js-скриптов, как галереи (lightbox, fancybox), слайдеры, табы и пр.
Tags:
Hubs:
+33
Comments 71
Comments Comments 71

Articles