Антон Кошуба Редактору достаточно знать основы вёрстки

Расскажи, чем сейчас занимаешься?

Я редактор. Веду сейчас два проекта: один на стадии завершения, а другим ещё буду заниматься долго. Первый проект — цикл обучающих статей про искусственный интеллект для детей, педагогов и родителей. Во втором продвигаю эксперта через контент.

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

Редактурой занимаюсь полтора года. Интерес к этому был давно. Начинал с того, что покупал платные рассылки Максима Ильяхова и учебник по редактуре. Затем этого стало мало, и я решил поступить в Бюро.

Как давно верстаешь сайты?

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

Зачем редактору ХТМЛ и ЦСС верстка?

Сегодня большинство редакторов работают с вебом. Меньшинство — с физическими носителями: книги, газеты, буклеты. Поэтому ХТМЛ и ЦСС нужно знать, чтобы редактор видел, как выглядит его информационный продукт на разных устройствах и понимал, как эти технологии устроены.

Редактору достаточно элементарного знания о том, как работает интернет и веб-страница. Элементарное знание означает, что специалист понимает, как сделать те или иные действия с помощью ХТМЛ:

• добавить гиперссылку,
• вставить изображение,
• сделать боковую сноску,
• выделить текст жирным.

В некоторых изданиях редакторы верстают статьи сами в админке. Здесь и пригодится знание ХМТЛ.

Помогает ли знание верстки в коммуникации между разработчиком и редактором?

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

Например, мне надо, чтобы эта картинка уехала вверх, а не вниз, чтобы отступы изменялись таким-то образом, чтобы по мере уменьшения окна не сжимался многоколонник и так далее.

Насколько востребован навык вёрстки сейчас и что ждёт его в дальнейшем с учётом развития нейросетей?

Ручная вёрстка всё равно останется, возможно, в меньшей степени. Любой конструктор сайтов накладывает свои ограничения. Тильда, Элементор, Вордпресс, Редимаг — у них у всех есть свои ограничения. Если я верстаю сайт «руками», я понимаю, как реализовать это так, как нужно мне, потому что знаю ХТМЛ и ЦСС.

Мы вынуждены мириться с тем, как Тильда запрограммирована складывать блоки. Приведу один из последних примеров. Недавно дизайнер сделал сайт на Тильде. Я увидел, что нарушено правило внешнего и внутреннего у отступов. Зашел в админку Тильды и понимаю, что блок свёрстан таким образом, что Тильда своим функционалом мне мешает. Если бы сайт был свёрстан в обычном редакторе кода, то я поменял бы отступы, марджины, паддинги, и все встало бы на место. А так в Тильде это невозможно сделать.

Сама по себе вёрстка останется, но искусственный интеллект здорово упростит работу верстальщиков. Уже сегодня есть ChatGPT, который создает базовые шаблоны, и мы просто их наполняем. Поэтому если отвечать на вопрос: «Будет ли такой навык востребован в будущем?», — я отвечу, что да.

Где изучал верстку помимо Бюро?

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

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

Если что-то непонятно в коде, просто загуглите. Например, у новичка может возникнуть вопрос, чем в таблице отличаются теги th и td. Интернет наполнен справочниками с объяснением тегов от энтузиастов-верстальщиков. Например, HTML Book, HTML Academy, HTML5 Book.

Я никогда не изучал что-то, за что надо платить много денег. Проходил бесплатные курсы от Hexlet, HTML-академии и The Rolling Scopes. The Rolling Scopes — это школа для фронтенд-разработчиков. Она устроена по принципу Бюро, но полностью бесплатная. Если редактору интересна разработка или проектирование страницы, то идите в The Rolling Scopes на нулевую ступень. Этого достаточно, чтобы верстать и разговаривать с разработчиками на одном языке.

Если у редактора нет интереса в изучении самой разработки, но есть потребность знать её устройство, то достаточно прийти в «Яндекс.Практикум» на вводные уроки по разработке. Их будет достаточно.

Какие инструменты и сервисы ты используешь для вёрстки?

Я использую ВиЭс-код и Гитхаб. Популярен ещё Сублайм текст, но на мой взгляд, он неудобен. ВиЭс-код превратился в целый комбайн с кучей плагинов: подсветкой синтаксиса, разными сниппетами и дополнениями. Для ускорения вёрстки ХТМЛ-страниц я использую плагин Эммет. С его помощью можно быстро вставлять куски кода.

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

Шаблоны в вёрстке — это заготовленные куски кода. Например, у меня есть шаблон для быстрой вставки формата «было — стало». Когда мне надо вставить этот шаблон, я набираю:

Есть шаблоны для вставки фоторамы, меню, сайдбаров, многоколонников и всего остального.

Рекомендация. Если во время вёрстки повторяете какой-то код больше одного-двух раз — создавайте шаблон, автоматизируйте вставку этого кода. Это многократно ускоряет процесс сборки страницы.

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

Правильность разметки проверяю через валидатор. Он нужен, когда мы сверстали сайт и планируем выложить его на хостинг. Наш сайт начнут просматривать поисковые машины. Если сайт свёрстан с учётом семантической вёрстки, то он будет выше в поисковой выдаче.

«Свёрстан с учётом семантической вёрстки» означает, что при вёрстке использовались семантические теги. С помощью этих тегов поисковые роботы понимают логику расположения контента. Например, тег header означает вводную часть смыслового раздела или всего сайта. Поисковый бот может взять информацию из этого тега и вывести её в результатах выдачи. Это важный момент, о котором порой верстальщики забывают.

Как пришёл к тому, что курсовая работа будет о вёрстке за 7 шагов?

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

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

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

Какая обратная была связь от преподавателя по курсовой работе?

После того как сдал курсач, был вебинар с Максимом Ильяховым для студентов Школы. Я прислал работу. Думал, Максим разнесет этот курсач, и я буду переживать по поводу оценки. Резюме было коротким, что меня удивило. Максим открывает и говорит: «Да, да, да. Нормально, можем взять эту статью в „Код“». То есть реакция была положительная.

В «Код» статья не пошла, потому что это статья для редакторов, а не разработчиков.

Какие курсы начинающим редакторам стоит пройти перед тем, как поступать в Бюро?

Советую рассылки Максима Ильяхова и интерактивные учебники. Это здорово поможет, потому что если поступать в Бюро и не иметь представления о системе ресурса и работе редактора, то учиться будет тяжело.

По вёрстке есть интерактивный учебник Бюро: «ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей». Этот учебник открыл мне глаза. Я учился в The  Rolling Scopes, HTML-академии, Hexlet, смотрел разные ютуб-каналы, например, «От 0 до 1». Но когда начал читать этот учебник, у меня всё перевернулось  голове относительно типографики и вёрстки веб-страницы.

Где начинающему редактору искать работу?

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

То есть задача новичка — показать любой информационный продукт, чтобы другие люди увидели, что вы умеете и в чём разбираетесь. Если мне интересны технологии, я буду писать о том, как сверстать статью или как установить Вордпресс. И люди будут приходить с запросами: хочу сверстать статью, страничку, нужен сайт для образовательного курса и так далее.

Помогает ли знание ХТМЛ и ЦСС найти работу?

Знание вёрстки даёт преимущество, но не позволит получать на 20 тысяч больше. Нет, это не так работает.

Это даёт преимущество, но не позволит получать на 20 тысяч больше

На одном из собеседований я сказал, что верстаю статьи, изучаю PHP и учусь верстать темы для Вордпресс. Мне дали обратную связь, что да, это классно, но это не было решающим фактором.

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

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

Востребованы ли редакторы, которые знают вёрстку?

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

Таких специалистов, которые совмещают в себе и редактора, и разработчика, мало. Спрашивал у Максима: «Нужны ли редакторы, которые знают разработку?» Максим сказал, что да, очень нужны, но их нет.

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

Как юридический бэкграунд помог попрактиковаться в редактуре?

Мне это не помогло, но и не помешало. Работал в юриспруденции 9 лет: верстал, оформлял договоры. Рассматривал для себя работу редактором в юридических или бухгалтерских изданиях, но не сложилось.

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

Телеграм-канал Антона Кошубы