Заменят ли верстальщиков нейросети и конструкторы для создания сайтов?05.07.2021 13:31

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

Уже сейчас есть множество конструкторов, которые позволяют создавать сайты без знания HTML и CSS. Существуют плагины и программы, которые сами создают код на основе макета. Есть даже нейросети, почти полностью автоматизирующие процесс вёрстки. Но ни одна из этих программ всё еще не смогла полностью заменить человеческий труд и лишить верстальщиков работы.

Как создать сайт, не умея кодить?

Сейчас в мире популярно движение No-Code. Его цель — создание новых инструментов, позволяющих людям без навыков разработки создавать собственные цифровые продукты. Один из самых ярких примеров No-Code платформы — конструкторы сайтов. В том числе Tilda, WebFlow, Wix, Readymag, Mobirise и многие другие.

В каждом из таких конструкторов можно выбрать готовый шаблон или начать работу с нуля, добавлять и переставлять блоки, управлять шрифтами и цветовой схемой, настраивать поведение интерактивных элементов. В наиболее продвинутых конструкторах есть возможность создавать собственные блоки. В них можно добавлять любые элементы: текст, формы, кнопки, галереи, одиночные изображения, видео и тултипы. К примеру, в Tilda эта функция называется Zero-block или «нулевой блок».

Настройка Zero Block в Tilda

Продвинутые конструкторы также позволяют настраивать простую анимацию и сценарии поведения элементов на сайте. То есть пользователь без знания JavaScript может добавлять поп-апы, бургер-меню, меню-аккордеон или слайдеры.

У конструкторов сайтов есть и свои недостатки. Во-первых, они платные: пользователю придется заплатить за использование большинства шаблонов и настроек. Некоторые сервисы дают бесплатный доступ, но ограничивают количество созданных проектов. А на примере ниже можно увидеть, как один из них добавляет свой баннер на опубликованный сайт. Чтобы отключить этот баннер, нужно перейти на платный тариф, заплатив $2,42 в месяц или $29 в год.

Пример галереи в Mobirise. Баннер на опубликованном сайте можно отключить только за деньги

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

Кроме того, простому пользователю, не знакомому с веб-разработкой, бывает сложно самому разобраться с конструктором и создать подходящий сайт. На это требуется время, которого у владельцев бизнеса обычно нет, а если использовать Webflow, то и небольшие знания в области веб-разработки. Поэтому создание сайтов на платформе конструкторов всё равно отдают на аутсорсинг фрилансерам или веб-студиям.

Основные плюсы и минусы конструкторов сайтов:

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

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

Создание сайтов «в три клика»

Помимо конструкторов существуют и другие инструменты для создания сайтов. В их числе специальные плагины для Figma «Anima» и «Figma to HTML», которые преобразуют статичное изображение страницы в HTML и CSS. Пользователю нужно только открыть подходящий макет, настроить поведение элементов и нажать на кнопку экспорта кода. После этого он получает адаптивный сайт, полностью соответствующий макету заказчика.

Работа с плагином Anima app в Figma: слева от макета окно с настройками. Здесь можно выбрать брейкпоинты, вставить карты или чат-бота, настроить ховеры и добавить ссылки.

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

Такой способ удобен для пользователей, не знакомых с веб-разработкой, но и у него есть свои минусы. Главный из них — программа ошибается и неправильно выстраивает структуру HTML-документа. Например, Psdtoweb не всегда распознаёт элементы, из-за чего вместо заголовка можно получить фоновую картинку с текстом. Плагины для Figma работают лучше, позволяют получать адаптив и более гибки в настройках, но за их использование придется заплатить от $25 до $31. При этом и они тоже дают код, который нуждается в доработке верстальщиком.

Плагин создал код, который нужно исправлять. Например, вся разметка сделана на <div loading=

, а вместо тега с типом text использован

» />Плагин создал код, который нужно исправлять. Например, вся разметка сделана на <div>, а вместо тега <input> с типом text использован <textarea><h3>Нейросети для вёрстки страниц</h3><p>Было бы удобно, если бы пользователи могли быстро создавать сайты и веб-приложения для своих целей: не шаблонные, а именно такие, какими они хотят видеть продукт. И такой инструмент есть. Весной 2017 года IT-сообщество всколыхнула новость о том, что датский стартап Uizard Technologies разработал нейросеть pix2code для автоматизации фронтенд-разработки. Спустя восемь месяцев разработчики FloydHub на её основе создали собственную нейросеть для вёрстки, которая может сгенерировать разметку и стили, ориентируясь на изображение макета.</p><p>Принцип работы такого алгоритма похож на описанный выше принцип работы Psdtoweb: </p><ul><li><p>пользователь загружает макет страницы в формате JPEG, </p></li><li><p>нейросеть трансформирует картинку в HTML и CSS-код, </p></li><li><p>пользователь получает свёрстанную страницу.</p></li></ul><p>Алгоритм умеет верстать простые блоки, определять теги и расставлять их в нужном порядке. Его главное преимущество — постоянная обучаемость. По мнению разработчиков, с помощью такого обучения в течение трех лет нейросеть могла бы изменить разработку: полностью автоматизировать верстку и снизить порог вхождения в профессию. Правда стоит уточнить, что такое заявление было сделано 3,5 года назад, а алгоритм до сих пор не нашёл активного применения в веб-разработке.</p><img src="https://habrastorage.org/getpro/habr/upload_files/23d/cd3/a50/23dcd3a50d8ce6ce996ad3583624247b.gif" alt="Нейронная сеть конвертирует изображение в разметку HTML, gif из GitHub Emil Wallner"  loading="lazy" decoding="async" />Нейронная сеть конвертирует изображение в разметку HTML, gif из GitHub Emil Wallner<img src="https://habrastorage.org/getpro/habr/upload_files/32d/5c6/94b/32d5c694b577f5013e7cbab0859b27f9.png" alt="Созданная нейросетью страница, скриншот из GitHub Emil Wallner"  loading="lazy" decoding="async" />Созданная нейросетью страница, скриншот из GitHub Emil Wallner<p>Сейчас нейронная сеть находится в открытом доступе, один из вариантов реализации можно найти на GitHub Emil Wallner. Для его запуска понадобятся знания Python и фреймворков, например, TensorFlow и других. Также придется установить компоненты, пакеты и зависимости с помощью пакетного менеджера pip, а затем запустить выполнение программы в среде Jupyter Notebook. Поэтому обычный пользователь без опыта программирования не сможет сам протестировать эту нейросеть.</p><h3>Пора ли верстальщикам искать новую работу? </h3><p>Как минимум в ближайшие годы программы не смогут полностью заменить человеческий труд. Профессия веб-разработчика не исчезнет, хотя, возможно, и немного трансформируется.</p><p><strong>Код нужно дорабатывать.</strong> Нейросети, конструкторы сайтов и различные программы упрощают процесс верстки и позволяют создавать простые блоки, но у них слишком много недостатков в сравнении с кодом, написанным разработчиком. Они не могут делать интересную анимацию и сложные интерфейсы. Получаемый с их помощью код часто требует доработки и не соответствует современной спецификации HTML. В нем не всегда используются семантические теги и уделяется внимание доступности. Поэтому если заказчику нужен уникальный кроссбраузерный сайт, который можно будет гибко менять, то единственный способ получить такой продукт — обратиться к веб-разработчикам.</p><p><strong>Заказчикам всегда нужно что-нибудь ещё.</strong> Ещё одна важная причина, по которой программы не могут полностью заменить разработчиков — особенности работы с заказчиками. Те, кто уже работал над заказами, знают, как часто меняются пожелания клиента. В самый неподходящий момент заказчик может захотеть добавить нестандартный блок, «поиграться» с цветовой схемой и шрифтами, добавить поп-ап и красивую анимацию или полностью всё изменить. Пока ни одна из программ не может в полной мере удовлетворить все эти требования. </p><p><strong>Нейросети не всемогущие. </strong>Во-первых, пока они слишком сложны и не доступны для всеобщего пользования. Во-вторых, сам Tony Beltramelli, один из создателей pix2code, заявил, что искусственный интеллект не скоро заменит разработчиков интерфейса. По его словам, даже если зрелая версия программы будет способна полностью генерировать код, фронтендеры все равно будут необходимы для реализации логики, интерактивных частей, расширенной графики и анимации. В том числе на них ложатся задачи по подготовке кода для бэкенда.</p><p>В это же время нейросети должны помочь разработчикам в автоматизации процессов. Если их получится широко внедрить, разработчики смогут отказаться от рутинных задач по верстке и стилизации элементов, сосредоточить внимание на более интересных деталях и тратить на работу гораздо меньше времени. </p><p>Если вам нравится верстка, не отказывайтесь от идеи стать разработчиком. Попробуйте свои силы на бесплатных тренажерах или пройдите профессиональный курс, который подготовит вас к старту карьеры в IT. </p></div>
    
            <p class="copyrights"><span class="source">© <a target="_blank" rel="nofollow" href="https://habr.com/ru/post/566132/?utm_campaign=566132&amp;utm_source=habrahabr&amp;utm_medium=rss">Habrahabr.ru</a></span></p>
                                        </div>
                                                    
            <br>

</div>

<div id="footer">
            <br/><br/>
            <ul class="horz-menu">
                <li class="about"><a href="/info/about.html" title="О проекте">О
                        проекте</a></li>
                <li class="additional-menu"><a href="/archive.html" title="Архив материалов">Архив</a>
                </li>
                <li class="additional-menu"><a href="/info/reklama.html"
                                               title="Реклама" class="menu-item"><strong>Реклама</strong></a>
                    <a href="/info/partners.html" title="Партнёры"
                       class="menu-item">Партнёры</a>
                    <a href="/info/legal.html" title="Правовая информация"
                       class="menu-item">Правовая информация</a>
                    <a href="/info/contacts.html" title="Контакты"
                       class="menu-item">Контакты</a></li>
                <li class="email"><a href="mailto:pcnews@pcnews.ru" title="Пишите нам на pcnews@pcnews.ru"><img
                                src="/media/i/email.gif" alt="e-mail"/></a></li>
                <li style="visibility: hidden">
                    <noindex>
                        
                        <script type="text/javascript">
                            var _tmr = window._tmr || (window._tmr = []);
                            _tmr.push({id: "93125", type: "pageView", start: (new Date()).getTime()});
                            (function (d, w, id) {
                                if (d.getElementById(id)) return;
                                var ts = d.createElement("script");
                                ts.type = "text/javascript";
                                ts.async = true;
                                ts.id = id;
                                ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js";
                                var f = function () {
                                    var s = d.getElementsByTagName("script")[0];
                                    s.parentNode.insertBefore(ts, s);
                                };
                                if (w.opera == "[object Opera]") {
                                    d.addEventListener("DOMContentLoaded", f, false);
                                } else {
                                    f();
                                }
                            })(document, window, "topmailru-code");
                        </script>
                        <noscript>
                            <div style="position:absolute;left:-10000px;">
                                <img src="//top-fwz1.mail.ru/counter?id=93125;js=na" style="border:0;" height="1"
                                     width="1" alt="Рейтинг@Mail.ru"/>
                            </div>
                        </noscript>

</noindex>
                </li>
            </ul>
        </div>

</div>

<script type="text/javascript">
                var _tmr = window._tmr || (window._tmr = []);
                _tmr.push({id: "93125", type: "pageView", start: (new Date()).getTime()});
                (function (d, w, id) {
                    if (d.getElementById(id)) return;
                    var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
                    ts.src = "https://top-fwz1.mail.ru/js/code.js";
                    var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};
                    if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }
                })(document, window, "topmailru-code");
            </script><noscript><div>
                    <img src="https://top-fwz1.mail.ru/counter?id=93125;js=na" style="border:0;position:absolute;left:-9999px;" alt="Top.Mail.Ru" />
                </div></noscript>

<script type="text/javascript">
                (function(m,e,t,r,i,k,a){
                    m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
                    m[i].l=1*new Date();
                    for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
                    k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
                })(window, document,'script','https://mc.yandex.ru/metrika/tag.js', 'ym');

ym(23235610, 'init', {webvisor:true, clickmap:true, referrer: document.referrer, url: location.href, accurateTrackBounce:true, trackLinks:true});
            </script>
            <noscript><div><img src="https://mc.yandex.ru/watch/23235610" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

<script type="text/javascript">
                var sc_project=9446204;
                var sc_invisible=1;
                var sc_security="14d6509a";
            </script>
            <script type="text/javascript"
                    src="https://www.statcounter.com/counter/counter.js"
                    async></script>
            <noscript><div class="statcounter"><img class="statcounter"
                src="https://c.statcounter.com/9446204/0/14d6509a/1/"
                alt="Web Analytics"
                referrerPolicy="no-referrer-when-downgrade"></div></noscript>

ga('create', 'UA-46280051-1', 'pcnews.ru');
                ga('send', 'pageview');

</script>

</noindex>