Хватит Это Писать, Давайте Автоматизируем Макеты

Вы когда-нибудь задумывались, что верстка вручную — это трудоемко, дорого, избыточно и устарело? Я здесь все время.

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

Интересный? Добро пожаловать коту!



Перед началом Если вы хотите «почувствовать» это сразу, вот оно.

доказательство концепции .

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

Условия В тексте я использую термин «Макет» в 2-х значениях:

1. Процесс создания разметки
2. HTML, CSS, JS и другие документы — это артефакты, созданные после работы верстальщика.

С тех пор я внимательно слежу за усилиями по решению этого вопроса.

Теперь у нас есть такие инструменты, как Workflow, Bootstrap Studio, inVision , Создатель , Supernova, React Studio и многие другие прямые или косвенные решения.

А еще у нас есть космические исследования на эту тему с использованием нейронов, а-ля pix2code или Sketch2code. Но, к моему сожалению, мне так и не удалось найти инструмент, который можно было бы органично внедрить в процесс разработки.

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

Я понимаю, что это превосходит даже самые передовые возможности индустрии, но это моя мечта.

Как он говорит Джеймс Стэтхэм Конфуций, великая дорога начинается с первого шага, поэтому я, найдя немного времени, решил понять, с чего начать.

Именно об этом и будет эта статья.

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

Интерфейс является полноценным артефактом системы.

, с которым будут взаимодействовать пользователи.

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

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

Можно долго говорить о том, почему это так, но основные выводы я думаю такие: высокие требования к финальному макету И необходимость контроля низкого уровня , предлагаю оставить за скобками «фойе верстальщиков».

Планировка сложная , требует использования специальных методов и инструментов для управления, минимизации ошибок и поддержания актуальности.

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

Планировка стоит дорого , в среднем это от 25% стоимости всей системы для SPA и до 75% для лендингов.

Не существует общепринятого теории компоновки как таковой.

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

Решение Во-первых, необходимо формализовать процесс верстки, определить сущности, алгоритм и правила.

Конечно, сама по себе тема достаточно обширна, и ее полное раскрытие не является темой данной статьи.

Исходя из этого, мы рассмотрим только ту часть, которая интересна на данный момент.

Образец

Шаг 1

Давайте найдем линии И Столбцы макета

Шаг 2

1. Кепка;
2. Тело;
3. Боковые панели;
4. Подвал.

Что говорит о том, что семантического анализа тоже не всегда достаточно.

И на данный момент нам этого достаточно.

Здесь мы можем разделить нашу задачу на две большие группы:

1. Технический И
2. Семантический .

Несмотря на то, что верстка из картинки с помощью нейросети — очень интересная задача, на мой взгляд, она избыточна.

Сложно представить ситуацию, когда в ходе обычного рабочего процесса верстальщик получит макет в формате растрового изображения.

Чаще всего это форматы, созданные в таких инструментах, как Figma, Sketch или Adobe Photoshop, которые уже содержат практически исчерпывающую информацию о макете, а главное:

1. Положение элементов;
2. Тип элемента;
3. Стили элементов.

преобразование И результаты исследований , а такие сервисы, как Anima, напрямую построены на синхронизации макетов и интерфейсов.

Но почему такие решения не привели к эффекту взрыва бомбы и через 2 года нет ничего лучше старой доброй рукодельной компоновки? Здесь повторюсь, по моему мнению, причиной этого являются два фактора:

1. Высокие требования к качеству;
2. Потребность в контроле.

Будет проще сразу реализовать качественную верстку и управлять ею, чем пытаться исправить некачественную.

Таким образом, первое требование является первостепенным.

Но что определяет качество кода? Если мы уберем официальные показатели качества, такие как LTR, доступность и тому подобное, у нас останутся важные показатели качества для разработчиков :

1. Правильное дерево;
2. Семантика;
3. Никакого резервирования;
4. Читабельность и редактируемость;
5. Использование блоков, вынесенных из потока, только там, где это необходимо.

Попробуем доказать, что это возможно, построив дерево блоков.

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

Строки и столбцы

Струны

Столбцы

Отношения элементов

Независимое местоположение

Дерево дополняется при необходимости.

Расположение перекрытия

Процесс построения дерева блоков

Шаг 1

Шаг 2

Шаг 3

1. Один столбец
2. Многоколоночный

Шаг 4

1. Плавающий
2. Сеть

Шаг 5

1. Одинокий
2. Множественное число

Шаг 6

1. Плавающий
2. Сеть

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

А теперь реализуем полученные операторы в код. Упрощение:

1. Быстрое внедрение, охватывающее лишь ~20% случаев;
2. Ожидаются ошибки позиционирования;
3. Одноуровневая структура исходных блоков;
4. Стили записываются в атрибуте style;

Заключение Автоматизация качественной верстки возможна без использования слабоуправляемых алгоритмов машинного обучения.

Это позволит существенно снизить затраты на создание продукции и повысить ее качество.

Немаловажно и то, что это упростит работу разработчиков и сделает ее более интуитивно понятной и приятной.

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

Что дальше? Думаю, следующий важный шаг – это подтверждение концепции управляемости автоматической маркировки.

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

Буду рад конструктивной критике и такому же обсуждению.

Мир всем! Теги: #CSS #JavaScript #HTML #html5 #html-макет

• Jetking — Самый Известный Карьерный Институт

  19 Oct, 24

• Программное Обеспечение Erp Как Услуга (Saas) — Разработка Программного Обеспечения В Среде По Требованию

  19 Oct, 24

• Red Hat Linux Очень Прост В Использовании.

  19 Oct, 24

• Конференция Defcon 16. Федор, Хакер Insecure.org. Nmap-Сканирование Интернета

  19 Oct, 24

• Как Визуализировать И Анимировать (Геофизические) Модели

  19 Oct, 24

• Анализ Надежности Электронного Оборудования, Подверженного Ударам И Вибрации — Обзор

  19 Oct, 24

• По Словам Microsoft, Процесс Обновления До Windows 10 Полностью Контролируется Пользователями.

  19 Oct, 24

• Миграционное Безумие

  19 Oct, 24

• Macheist Nanobundle

  19 Oct, 24

• Дайджест Новостей Из Мира Мобильной Разработки За Прошедшую Неделю №24 (9—15 Сентября 2013 Г.)

  19 Oct, 24