зачем нужна верстка если есть конструкторы
Заменят ли верстальщиков нейросети и конструкторы для создания сайтов?
Разговоры о том, останутся ли верстальщики без работы, длятся годами. Как только появляется новая программа или плагин для автоматизации вёрстки, специалистам начинают тут же пророчить бессрочный отпуск. Но стоит ли всерьёз относиться к таким разговорам?
Уже сейчас есть множество конструкторов, которые позволяют создавать сайты без знания HTML и CSS. Существуют плагины и программы, которые сами создают код на основе макета. Есть даже нейросети, почти полностью автоматизирующие процесс вёрстки. Но ни одна из этих программ всё еще не смогла полностью заменить человеческий труд и лишить верстальщиков работы.
Как создать сайт, не умея кодить?
Сейчас в мире популярно движение No-Code. Его цель — создание новых инструментов, позволяющих людям без навыков разработки создавать собственные цифровые продукты. Один из самых ярких примеров No-Code платформы — конструкторы сайтов. В том числе Tilda, WebFlow, Wix, Readymag, Mobirise и многие другие.
В каждом из таких конструкторов можно выбрать готовый шаблон или начать работу с нуля, добавлять и переставлять блоки, управлять шрифтами и цветовой схемой, настраивать поведение интерактивных элементов. В наиболее продвинутых конструкторах есть возможность создавать собственные блоки. В них можно добавлять любые элементы: текст, формы, кнопки, галереи, одиночные изображения, видео и тултипы. К примеру, в Tilda эта функция называется Zero-block или «нулевой блок».
Настройка Zero Block в Tilda
Продвинутые конструкторы также позволяют настраивать простую анимацию и сценарии поведения элементов на сайте. То есть пользователь без знания JavaScript может добавлять поп-апы, бургер-меню, меню-аккордеон или слайдеры.
Пример галереи в Mobirise. Баннер на опубликованном сайте можно отключить только за деньги
Еще один важный недостаток — во время работы пользователь ограничен функциями конструктора, хотя при наличии навыков даже c No-Code можно создать кастомный дизайн. Сам код тоже тоже обычно недоступен, но некоторые сервисы позволяют его получить за отдельную плату. А при появлении проблем придется обращаться в техподдержку и ждать помощи со стороны — самостоятельно исправить ошибку, изменив пару строчек кода, не получится.
Кроме того, простому пользователю, не знакомому с веб-разработкой, бывает сложно самому разобраться с конструктором и создать подходящий сайт. На это требуется время, которого у владельцев бизнеса обычно нет, а если использовать Webflow, то и небольшие знания в области веб-разработки. Поэтому создание сайтов на платформе конструкторов всё равно отдают на аутсорсинг фрилансерам или веб-студиям.
Создание сайтов «в три клика»
Помимо конструкторов существуют и другие инструменты для создания сайтов. В их числе специальные плагины для Figma «Anima» и «Figma to HTML», которые преобразуют статичное изображение страницы в HTML и CSS. Пользователю нужно только открыть подходящий макет, настроить поведение элементов и нажать на кнопку экспорта кода. После этого он получает адаптивный сайт, полностью соответствующий макету заказчика.
Работа с плагином Anima app в Figma: слева от макета окно с настройками. Здесь можно выбрать брейкпоинты, вставить карты или чат-бота, настроить ховеры и добавить ссылки.
По такому же принципу работают и другие программы, например, Psdtoweb. С её помощью пользователь может получить сайт за три клика: загрузив в программу макет в формате psd, нажав на кнопку трансформации и скачав получившийся архив с кодом страницы.
, а вместо тега с типом text использован
» title=»Плагин создал код, который нужно исправлять. Например, вся разметка сделана на
» width=»1887″ height=»858″ data-src=»https://habrastorage.org/getpro/habr/upload_files/241/88d/b48/24188db480620bb430df09ff8237c58d.jpg» data-blurred=»true»/> Плагин создал код, который нужно исправлять. Например, вся разметка сделана на
Нейросети для вёрстки страниц
Было бы удобно, если бы пользователи могли быстро создавать сайты и веб-приложения для своих целей: не шаблонные, а именно такие, какими они хотят видеть продукт. И такой инструмент есть. Весной 2017 года IT-сообщество всколыхнула новость о том, что датский стартап Uizard Technologies разработал нейросеть pix2code для автоматизации фронтенд-разработки. Спустя восемь месяцев разработчики FloydHub на её основе создали собственную нейросеть для вёрстки, которая может сгенерировать разметку и стили, ориентируясь на изображение макета.
Принцип работы такого алгоритма похож на описанный выше принцип работы Psdtoweb:
пользователь загружает макет страницы в формате JPEG,
нейросеть трансформирует картинку в HTML и CSS-код,
пользователь получает свёрстанную страницу.
Алгоритм умеет верстать простые блоки, определять теги и расставлять их в нужном порядке. Его главное преимущество — постоянная обучаемость. По мнению разработчиков, с помощью такого обучения в течение трех лет нейросеть могла бы изменить разработку: полностью автоматизировать верстку и снизить порог вхождения в профессию. Правда стоит уточнить, что такое заявление было сделано 3,5 года назад, а алгоритм до сих пор не нашёл активного применения в веб-разработке.
Нейронная сеть конвертирует изображение в разметку HTML, gif из GitHub Emil Wallner Созданная нейросетью страница, скриншот из GitHub Emil Wallner
Сейчас нейронная сеть находится в открытом доступе, один из вариантов реализации можно найти на GitHub Emil Wallner. Для его запуска понадобятся знания Python и фреймворков, например, TensorFlow и других. Также придется установить компоненты, пакеты и зависимости с помощью пакетного менеджера pip, а затем запустить выполнение программы в среде Jupyter Notebook. Поэтому обычный пользователь без опыта программирования не сможет сам протестировать эту нейросеть.
Пора ли верстальщикам искать новую работу?
No-Code давно занял отдельную нишу, но до сих пор не смог полностью заменить человеческий труд. Вряд ли это произойдет и в ближайшем будущем: профессия веб-разработчика не исчезнет, хотя, возможно, и немного трансформируется.
Конструкторы сайтов и различные программы упрощают процесс верстки и позволяют создавать простые блоки, но у них слишком много недостатков в сравнении с кодом, написанным разработчиком. Большинство из них не может делать интересную анимацию и сложные интерфейсы. Некоторые конструкторы, например, WebFlow, выдают относительно чистый семантичный код — но не все. Часто получаемый с их помощью код избыточен и требует доработки. В нем не всегда используются семантические теги и уделяется внимание доступности. Поэтому если заказчику нужен уникальный кроссбраузерный сайт, который можно будет гибко менять, то лучший способ получить такой продукт — обратиться к веб-разработчикам.
Нейросети тоже не всемогущие. Во-первых, пока они слишком сложны и не доступны для всеобщего пользования. Во-вторых, сам Tony Beltramelli, один из создателей pix2code, заявил, что искусственный интеллект не скоро заменит разработчиков интерфейса. По его словам, даже если зрелая версия программы будет способна полностью генерировать код, фронтендеры все равно будут необходимы для реализации логики, интерактивных частей, расширенной графики и анимации. В том числе на них ложатся задачи по подготовке кода для бэкенда.
В это же время нейросети должны помочь разработчикам в автоматизации процессов. Если их получится широко внедрить, разработчики смогут отказаться от рутинных задач по верстке и стилизации элементов, сосредоточить внимание на более интересных деталях и тратить на работу гораздо меньше времени.
Если вам нравится верстка, не отказывайтесь от идеи стать разработчиком. Попробуйте свои силы на бесплатных тренажерах или пройдите профессиональный курс, который подготовит вас к старту карьеры в IT.
Стоит ли учить html, css,js в 2021?
Простой 1 комментарий
Стоит ли учить html, css,js в 2021
Просто актуальной инфы так мало по этому, а я вылез из 2015 года.
У вас странные вопросы. HTML + CSS + JS это костяк всего веба который в принципе не заменим.
Если же ваш бизнес уровня средний и выше среднего, вы не сможете насколько хорошо оптимизировать, масштабировать свой проект, что бы он покрывал все запросы. В этом случае на помощь уже приходят специалисты уровня «фронтендер + бэкэндер + тимлид + PM» и каждый решают свою задачу.
И, да, успехов с WordPress’ом с кучей плагинов на все случаи жизни!
ДААААЛЕКОООО не все существует.
Как только вам нарисуют дизайн-макет «этакий» и не будет плагинов под него, тогда то вы вспомните чего не хватает для реализации.
Интернет держится на html/css/js/php. Это база без которой вообще нихрена работать не будет))
И да, ваши плагины на них и пишутся.
Может быть для людей готовых отдавать тонны денег за сайты и держится на этом инет
Ни один уважающий себя и «взрослый» проект не допустит чтобы он висел на каком-то билдере, а будет делаться с нуля ручками. Даже на ВП. А еще мы живем при капитализме и в эру IT. Так что да, интернет держится на больших деньгах, а не жмотах. Ах да, время разработчиков тоже денег стоит. А время конструкторщиков не стоит ничего.
html/css при хорошей нагрузке обучения, учится менее чем за год.
Сотни историй когда люди при реальной учебе выходили норм верстаками через 3-4 месяца (Фотошоп дольше осваивается).
Все видоизменяется, но ничто и никогда не заменит человека. AI никогда не сможет мыслить как человек.
Есть такие хитросплетения и решения, что ты и через 10 лет не автоматизируешь их создание.
Люди с головой стоили дорого что 50 лет назад, что сейчас. И еще через 50 тоже будут.
Ну то есть вы все говорите о том, что вордпрес это плохо в принципе?
Как стать верстальщиком, или Почему азы верстки должны знать все
В комментариях к одной из наших статей читатель попросил сделать подборку курсов верстки веб-страниц. Простой список ссылок на сайты реальных и виртуальных учебных заведений был бы полезным для части аудитории блога. А чтобы публикация заинтересовала всех читателей, ее тему пришлось расширить. Эта статья будет полезной:
Что такое HTML-верстка и зачем она нужна
Верстка — это этап разработки сайтов, на котором визуальные макеты переводятся в код, который обеспечивает отображение страниц в браузерах. Условно это можно представить так: верстальщик переводит страницу с визуального языка дизайнера на язык браузеров.
Сверстанный макет страницы попадает от верстальщика к программисту, который интегрирует его в систему управления контентом. После этого вебмастер может наполнить и опубликовать страницу, а посетители сайта смогут ее просматривать.
Нужны ли услуги верстальщика владельцам существующих сайтов? Ответ на вопрос зависит от потребностей вебмастера.
Если блогера или администратора корпоративного сайта устраивает функциональность и внешний вид ресурса и его отдельных страниц, верстальщик ему не нужен. С публикацией заметок в блоге, описаний товаров в интернет-магазине, контента на страницах сайта справится любой сотрудник с минимальными знаниями HTML. Более того, опубликовать заметку или описание товара вы сможете, даже если ничего не слышали про HTML.
В популярных CMS есть визуальные редакторы, с помощью которых можно отформатировать контент и сделать его читабельным. Обратите внимание на возможности штатного WYSIWIG-редактора WordPress.
Вы можете набирать текст непосредственно в редакторе CMS, форматировать его, добавлять фотографии. Функциональность CMS обеспечивает корректное отображение контента с небольшими оговорками.
Публикация контента с помощью визуального редактора все-таки может привести к проблемам. В данном случае возможности штатного визуального редактора движка не позволяют корректно отображать подзаголовки первого и второго порядка. Вы можете визуально выделить текст с помощью полужирного начертания или курсива, но это не сделает его подзаголовком для браузера и поисковых систем. Для пользователей тоже неочевидно, зачем выделен текст.
В теории решить проблему можно без знаний HTML. Достаточно правильно отформатировать контент в текстовом процессоре и перенести его в визуальный редактор CMS.
Редактор CMS автоматически преобразовал визуальный формат контента в HTML-код. То есть администратору сайта для публикации контента достаточно уметь работать с текстовым процессором и WYSIWYG-редактором CMS.
Но иногда копирование содержимого из Word в CMS приводит к ошибкам. Обратите внимание на код страницы.
На практике хотя бы минимальные знания HTML контент-менеджеру нужны. Это подтверждает иллюстрация выше: в код страницы попали лишние теги подзаголовка. Такой мусор — частый побочный эффект при копировании контента из текстовых процессоров, например, Word. Подробности дальше.
«Верстальщиком можешь ты не быть, но HTML знать обязан»
Адаптированный отрывок из произведения Некрасова относится к владельцам, администраторам и контент-менеджерам сайтов. Еще раз обратите внимание на попавшие на страницу при копировании контента из MS Word лишние теги. В данном случае они прямо не влияют на пользовательский опыт: посетители страницы их не видят.
Мусорный код, который попадает на страницу при копировании контента из текстовых редакторов, может стать причиной проблем. Например, если внутри лишних тегов окажется контент, он будет отображаться для пользователей некорректно. Такая ошибка нарушит структуру страницы и сделает ее некачественной.
Лишние теги делают код страницы невалидным. Валидность кода не входит в число факторов ранжирования сайтов крупнейших поисковых систем. Однако невалидный код страницы может направить поисковых роботов по ложному пути и исказить результаты сканирования страницы.
Простой пример: подзаголовки помогают поисковикам структурировать текст на смысловые блоки. Если в подзаголовке написано «Как составить файл robots.txt», поисковая система понимает, что в соответствующем разделе страницы речь пойдет о файле robots.txt.
Что случится, если подзаголовок не будет обозначен верными html-тегами? «Яндексу» и Google будет сложнее определить, о чем идет речь в соответствующем разделе страницы. Роботы могут посчитать страницу нерелевантной запросам о файле robots.txt. В результате сайт получит меньше посетителей.
Теперь понятно, почему блогеру, журналисту или сапожнику и по совместительству администратору сайта сапожной мастерской не помешает знать хотя бы основные HTML-теги? Например, эти знания могут помочь удалить «мусор» со страницы.
Большинство WYSIWIG-редакторов в CMS имеют два режима: визуальный и HTML. Чтобы найти и удалить лишние теги из кода страницы, достаточно переключить штатный редактор WordPress в режим «Текст».
Знание HTML на базовом уровне предупреждает появление на странице лишнего кода на этапе переноса контента из текстового процессора в редактор движка. Чтобы решить эту задачу, очистите созданный в Word контент от форматирования. Для этого воспользуйтесь функцией «Удалить форматирование» в текстовом редакторе или скопируйте контент и вставьте его в «Блокнот». Потом вставьте очищенный от форматирования контент в редактор CMS в формате HTML.
Разметьте контент с помощью тегов HTML и опубликуйте.
Очистка контента от форматирования и добавление тегов HTML вручную предупредила появление на странице мусорного кода и обеспечила корректное отображение публикации для пользователей.
Что нужно знать администратору сайта, чтобы обойтись без верстальщика
Обратите внимание на два тезиса. Во-первых, речь идет о сайтах небольших компаний и личных блогах, владельцы которых не хотят или не могут сотрудничать с профессиональным верстальщиком. Настоящие бутстрэпперы публикуют контент самостоятельно. А базовые знания об HTML-разметке им нужны, чтобы превратить кирпич текста с торчащим из него изображением в читабельный материал.
Во-вторых, знание основ HTML не превращает блогера или сапожника и по совместительству администратора сайта сапожной мастерской в верстальщика. Чтобы профессионально выполнять верстку, нужно учиться и практиковаться.
Администратор сайта автомойки не будет краснеть перед читателями за неудобный для восприятия контент, если у него следующие знания:
Чтобы корректно использовать теги, вебмастер должен понимать их значение. Например, специалист должен знать разницу между заголовками второго и третьего порядка или визуально одинаковыми тегами i и em.
Изучение базовой информации поможет самостоятельно размечать и публиковать контент. Если основы HTML дадутся легко, а интерес к веб-верстке не исчезнет, вы сможете взяться за обучение по-настоящему и стать профессиональным верстальщиком.
Тяжело ли научиться верстке? Где учат на верстальщика? Чем занимается данный специалист на практике? Об этом и не только читателям рассказал руководитель отдела верстки компании TexTerra Алексей Печенкин.
«Верстальщик реализует идеи дизайнера»
Алексей поделился информацией о профессии верстальщика, несмотря на чрезвычайную загруженность. Он сразу рассказал, от чего пришлось отвлечься ради мини-интервью для блога.
Дмитрий Дементий: Расскажите в двух словах о профессии верстальщика: чем занимаетесь вы и сотрудники вашего отдела, как организован рабочий процесс? Верстальщик — это кто: программист, технический специалист, дизайнер? Англичане и американцы называют типографских верстальщиков layout artist. Можно ли назвать HTML-верстальщика художником?
Алексей Печенкин: По большей части наша работа заключается в добавлении материалов на сайт. Задачи, с которыми нам приходится работать, в большинстве случаев схожи. Это верстка статей, разделов и инфографики для публикации на сайтах. Нередко приходится решать и более сложные задачи. Например, верстка лендинга требует от специалиста больших усилий. Верстальщика нельзя назвать программистом или дизайнером. Это самостоятельная профессия.
Д.Д.: Какие задачи решает HTML-верстка с точки зрения владельца сайта? Чем может помочь верстальщик владельцу интернет-магазина?
А.П.: Попросту говоря, верстка — воплощение идей дизайнера. На этапе разработки дизайнер прорисовывает общую структуру, внешний вид сайта, а после верстальщик все это реализует. Делается это с помощью HTML и других языков разметки, которые способен «понять» и преобразовать в привычные нам веб-страницы браузер.
Верстка новых элементов страниц, разделов, блоков, — все это тоже делают верстальщики. С помощью веб-верстки специалист создает статичную страницу, на которую при необходимости фронтэнд-программист может добавить интерактивные элементы.
Д.Д.: В большинстве популярных CMS есть визуальные редакторы публикаций. Значит ли это, что владельцы сайтов на WordPress, Drupal или Битрикс не нуждаются в услугах верстальщика?
А.П.: Нет, это не так. Визуальный редактор упрощает жизнь обычному пользователю: редактору, блогеру. С помощью редактора человек без каких-либо знаний верстки может добавить материал на свой блог, сайт, страницу.
Эти редакторы действительно избавляют неспециалистов от необходимости делать лишнюю для них работу: размечать контент. Но функциональность редакторов сильно ограничена. Из-за этого редактор без знаний HTML не всегда может оформить страницу в соответствии с потребностями пользователей и стандартами W3C.
Простой пример: штатный редактор самого популярного движка WordPress позволяет выделить отрывок текста с помощью полужирного начертания или курсива. В коде страницы можно увидеть, что выделение выполняется с помощью тегов strong и em соответственно. В некоторых случаях данную разметку предпочтительно делать с помощью тегов b и i. В визуальном редакторе WP нет таких инструментов, поэтому придется добавлять теги вручную. А это требует соответствующих знаний.
При верстке статей, новостей и других материалов на сайты мы не используем визуальные редакторы. Они ограничивают возможности, а нам часто приходится оформлять материал по-своему, со своими стилями.
Д.Д.: Нужны ли с вашей точки зрения минимальные знания в области HTML-верстки маркетологам, копирайтерам, блогерам? Может ли журналист или копирайтер самостоятельно сверстать свой материал и опубликовать на сайте? Или каждый специалист должен заниматься своим делом?
А.П.: Каждому могут пригодиться минимальные знания в этой области. Да, копирайтер с минимальными знаниями в верстке сможет без каких-либо проблем сверстать свой материал. Для этого необходимы лишь базовые знания тегов в html. Но чтобы как-то оформить материал нестандартно, нужны будут другие навыки, которыми обладают контент-менеджеры или верстальщики.
Д.Д.: Как владелец сайта, не имеющий соответствующих знаний, может проверить качество работы верстальщика? Что для этого нужно сделать: проверить отображение страниц в разных браузерах, проверить URL или код в W3C-валидаторе, посмотреть данные об ошибках в кабинетах для вебмастеров? Как далекому от HTML-верстки человеку понять, что все сделано профессионально?
А.П.: Да, в первую очередь можно просмотреть страницы на различных разрешениях и устройствах, а также просканировать страницу в валидаторе. При плохой верстке будут сразу заметны все грубые недочеты, которые оставил верстальщик. Что касается самого кода, то тут человек без знаний никак не определит качество.
Д.Д.: Читатели интересуются возможностью обучения HTML-верстке. Каждому ли дано стать хорошим специалистом в этой области? Какие качества необходимы хорошему верстальщику?
А.П.: Да, я думаю любой может этому научиться. Главное, чтобы было желание и терпение. Если что-то не получается сразу, то нужно просто больше практиковаться. Все зависит только от вас.
Д.Д.: Где учат верстке? Это очные учебные заведения, онлайн-курсы? Можно ли научиться самостоятельно с помощью учебников и пособий?
А.П.: Есть очень много онлайн-курсов, а также различных каналов на YouTube, где люди делятся опытом, публикуют уроки и много полезной информации на эту тему. Также есть много книг по верстке. Правда, с книгами сложнее: найти действительно хорошую будет трудно.
Получить знания и научиться верстать не составит труда. Главное, больше интересоваться тематикой и практиковаться с полученными знаниями.
Д.Д.: Какой набор знаний нужен хорошему верстальщику?
А.П.: Хорошему верстальщику в первую очередь нужно следить за новостями в мире IT, за всеми новинками и технологиями, которые время от времени появляются в этой сфере, так как веб не стоит на месте. Поэтому верстальшикам приходится постоянно учиться и повышать свою квалификацию. Если говорить про базовый набор знаний, то это HTML и CSS, а также хотя бы базовые знания Javascript (Jquery).
Д.Д.: Спасибо за информацию.
А.П.: Пожалуйста. Читателям успехов в обучении.
Где можно научиться верстке
Предложенная ниже подборка учебных ресурсов поможет вам получить общие представления об HTML-верстке или стать профессиональным верстальщиком. Для обучения вам понадобится только желание и ПК с выходом в интернет. Также вам пригодится знание английского языка, так как в подборке есть англоязычные ресурсы.
Обучиться веб-верстке помогут следующие ресурсы:
Онлайн-курсы для начинающих и продолжающих
Полезные тематические сайты
Очные курсы по веб-верстке
Найти очные курсы верстальщиков в своем городе вы сможете с помощью поисковых систем.
Книги по веб-верстке
Англоязычные ресурсы
Знание английского языка считается чуть ли не обязательным для верстальщика. Один из аргументов — самые современные и актуальные книги и статьи появляются сначала на английском, а потом их переводят на русский. Если вы спокойно общаетесь на иностранном языке, вам пригодятся перечисленные ниже ресурсы.
Вы можете выбрать один или несколько ресурсов, чтобы удаленно или очно обучиться верстке.
Стать верстальщиком может каждый
Обучиться HTML-верстке под силу каждому человеку. Если вы планируете овладеть новой профессией, придется погрузиться в мир HTML, CSS и JavaScript, следить за изменением стандартов и технологий и много практиковаться. Учиться можно очно и заочно, платно и бесплатно, с наставником или самостоятельно. Эти возможности можно реализовать с помощью предложенных выше учебных ресурсов.
Завершающий подзаголовок статьи можно сформулировать и так: стать верстальщиком должен каждый. Базовые знания HTML и CSS пригодятся всем специалистам, работающим в интернет-маркетинге. Блогер, журналист, копирайтер, маркетолог, владелец сайта должен уметь самостоятельно разметить и опубликовать контент. Конечно, речь идет о стандартной разметке и стилях.