Профессия html-верстальщик: подробный разбор

Содержание

Ошибки влияющие на SEO

Отсутствие структуры или вообще отсутствие как таковых h1,h2,h3…

<div id="logo"><img alt="Trinity group" src="img/splash/trinity-group.jpg"/></div>
<h1>Trinity group</h1>

Но как?!

Антисемантика

<div class="menu">
  <a title="Kinderspiele" class="kinderspiele" href="#"></a>
  <a title="Artikel" class="artikel" href="#"></a>
</div>

топовых

  • У ссылок отсутствует текст.
  • Отсутствует логика в документе. Это тоже влияет на ранжирование.
  • На мобилке и в печатном варианте, этот код будет выглядеть убого даже если бы там был текст внутри ссылок.

Как надо?

<ul class="menu">
  <li><a title="Kinderspiele" id="kinderspiele" href="#">Kinderspiele</a></li>
  <li><a title="Artikel" id="artikel" href="#"> Artikel</a></li>
</ul>
<table id="t-personal" class="t-text">
  <tbody>
    <tr>
      <th>Настоящее Имя:</th>
      <td>Иван Копейкин</td>
    </tr>
    <tr>
      <th>Дата рождения:</th>
      <td>16 сентября 1977г.</td>
   </tr>
  </tbody>
</table>

Хорошо:

<dl id="t-personal">
  <dt>Настоящее Имя:</dt>
    <dd>Иван Копейкин</dd>
  <dt>Дата рождения:</dt>
    <dd>16 сентября 1977г.</dd>
</dl>
<p><strong class="black">Предметом бухгалтерского учета</strong> в обобщенном виде выступает хозяйственная деятельность предприятия
с точки зрения системы учета ресурсов и результатов финансовой и хозяйственной деятельности предприятия…</p>

Хорошо:

<p><dfn>Предметом бухгалтерского учета</dfn> в обобщенном виде выступает хозяйственная деятельность предприятия
с точки зрения системы учета ресурсов и результатов финансовой и хозяйственной деятельности предприятия…</p>
<div class="info">
  <p class="data">January 5, 2006</p>
  <p>Finally! We're officially launched! </p>
  <p>Quality product for SEO webmasters. </p>
  <a title="" href="#">Try it and you'll see</a>
</div>

Хорошо:

<div class="hentry">
  <var class="published" title="2006-01-05">January 5, 2006</var>
  <h4 class="entry-title">Finally! We're officially launched!</h4>
  <div class="entry-content">
    <p>Quality product for SEO webmasters.</p>
    <a href="#" rel="bookmark">Try it and you'll see</a>
  </div>
</div>

Хорошо:

  <address class="vcard">
     <a class="fn n org url work" href="http://www.meridy.ru/">Строительная компания «Меридиан»</a>, 2007—2008
    <span class="adr work">
      <span class="street-address">ул. Ленина 247</span> ·
      <span class="locality">Москва</span>,
      <span class="postal-code">109012</span>
      <span class="country-name">Россия</span>
    </span>
    <span class="tel">
     <span class="type">Work</span> <span title="+74957889775" class="value"> +7 (495) 788-97-75</span>
    </span> ·
    <a class="email" href="mailto:info@meridy.ru">info@meridy.ru</a>
  </address>

Не указан тип страницы

Чтобы сообщить браузеру, какая версия HTML-разметки используется на странице, нужно использовать тег DOCTYPE.


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

Как избежать: всегда вставлять тег в первую строку страницы. Например, если вы верстаете на HTML пятой версии, объявить тип документа можно так: < !DOCTYPE html >

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ‘Helvetica Neue’; color: #454545}

Читать ещё: «Подборка англоязычных ресурсов для начинающих верстальщиков»

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

Итак, ошибки, которые нужно избегать:

  • Неправильные имена классов;
  • Использование идентификатора #id для описания стилей блока;
  • Описание стилей для элементов внутри атрибута style;
  • Использование тега абзаца <p> для разметки;
  • Много изображений в высоком разрешении на странице;
  • Не сброшены начальные настройки;
  • Использование блочного элемента внутри строчного;
  • Отступы между элементами сделаны с помощью тега переноса строки <br/>;
  • Страница не проверялась валидатором;
  • Не указан тип страницы.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Расстояние между элементами

Мало определиться с блоками, нужно ещё правильно задать расстояния между ними и между их элементами: заголовками, подзаголовками, текстом, фотографиями и подписями к ним. Здесь не обойтись без правила внутреннего и внешнего и концепции «воздуха» (белого пространства).  

Правило внутреннего и внешнего  

Дизайнер Антон Жиянов пишет: «Универсальное правило внутреннего и внешнего в типографике: внутреннее ≤ внешнее.

Внутреннее — расстояние между буквами, внешнее — между словами.

Внутреннее — между словами, внешнее — между строками.

Внутреннее — между строками, внешнее — между абзацами или поля вокруг текста».

Согласно этому правилу, расстояние между блоками не может быть меньше расстояния между заголовком и абзацем, которые находятся внутри одного модуля. Но мой первый черновик был именно таким. Почитала советы Антона Жиянова, исправила:

Вертикальное расстояние между блоками задаётся в настройках блока.

Лучше сразу определиться, сколько строк будет между смысловыми блоками. Мне проще придерживаться нулевого отступа снизу и задавать только верхний. Можно делать наоборот. Главное помнить, что при отступе и сверху и снизу, например, по 1.5 строки, суммарное расстояние между блоками будет равно трём.  

Воздух (белое пространство)

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


В тильде 12-колоночная вёрстка. Отступа слева и справа от контента статьи задаются в настройках блока.

Если заполнить контентом все 12 колонок, текст будет тяжело читаться. Оптимально отступить хотя бы 1 колонку слева.

Что почитать по теме:

  • Интерфейсы без шелухи: правило «Внутреннее и внешнее»;
  • Артём Горбунов об этом же правиле более подробно;
  • Блог Тильды: Сила белого пространства и Как делать красивые статьи на Тильде.

JavaScript

В продолжении нашей темы, последнее, что вам необходимо освоить — это JavaScript.

Часто можно встретить мнение о том, что JavaScript — это сложный язык программирования, который невозможно выучить. Но правда заключается в том, что досконально от и до учить его не требуется. Особенно если вы верстальщик или решили продолжить свою карьеру в качестве фронтендера. Эту мысль подтвердит любой действующий фронтенд-разработчик.

Начать изучение JS можете с сайта Learn JavaScript. После можно перейти к книгам «Изучаем программирование на JavaScript» или «Javascript для детей» (достаточно выбрать какую-то одну). Обзор на эти книги у меня есть на канале в соответствующем плейлисте. Для прокачки знаний рекомендую взяться за серию книг You Don’t Know JS, например, на языке оригинала или в переводе на русский язык.

На изучение JavaScript может уйти от 2 недель до 1 года.

Шрифты

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

В Тильде шрифты задаются в настройках всего сайта, а не отдельной страницы.

Если предложенных Тильдой шрифтов вам недостаточно, можно подключить Google Fonts. Вот инструкция.

Моей ошибкой при выборе шрифтов и начертаний был недостаточный контраст между размером заголовка и текста. Для пары заголовок-описание сочетание размера 52px и 42px не создаёт контраста. Пара 62px и 32px смотрится лучше.

При размере заголовка в 32px и размере основного текста в 20px заголовок не выделяется за счет контраста, а скорее сливается с текстом. Пара 42px и 20px работает лучше.

Я не знаю, по какой форме высчитывать размер кегля, а скорее делаю это «по-дилетантски» — на глаз. Проверяя наши работы на курсе, Дмитрий Моровов дал вот этот вариант: пара 12–14pt — плохая. 12–16pt — уместная. 12–18pt — хорошая. (Pt — от немецкого «Punkt» — это единица измерения кегля шрифта).

Если игнорировать принцип контраста, статья выглядит как скучная простыня

Глазу трудно зацепиться за элементы в тексте, теряется внимание, а значит страдает и качество чтения

Что почитать по теме:

  • Илья Бирман про «Почти, но не совсем»;
  • Контрасты в веб-типографике на Хабре;
  • 22 правила сочетания шрифтов;
  • Руководство по выбору шрифта в блоге Тильды.

Сколько стоит курс?

ТАРИФ «САМОСТОЯТЕЛЬНЫЙ»

  • Доступ ко всем материалам курса
  • Сертификат об окончании обучения
  • В конце курса проверяем итоговую работу
  • Доступ к чату с учениками текущего и прошлых потоков

7900 РУБ

6900 РУБ

ТАРИФ «С КУРАТОРОМ»

  • Доступ ко всем материалам курса
  • Сертификат об окончании обучения
  • В конце курса проверяем итоговую работу
  • Доступ к чату с учениками текущего и прошлых потоков
  • Куратор проверяет ДЗ в течении курса и отвечает на вопросы
  • Бонус: видео о работе с макетом в Sketch, Figma и Avocode
  • Бонус: лучшему ученику Frontend Book PDF в подарок
  • Бонус: 3 бесплатных вопроса на сервисе Frontend Help

12900 РУБ

11900 РУБ

ТАРИФ «ИНДИВИДУАЛЬНЫЙ»

  • Доступ ко всем материалам курса
  • Сертификат об окончании обучения
  • В конце курса проверяем итоговую работу
  • Доступ к чату с учениками текущего и прошлых потоков
  • Куратор проверяет ДЗ в течении курса и отвечает на вопросы
  • Бонус: видео о работе с макетом в Sketch, Figma и Avocode
  • Бонус: Frontend Book PDF в подарок
  • Бонус: 10 бесплатных вопроса на сервисе Frontend Help
  • Онлайн-консультации
  • Поддержка от нас в течении 3 месяцев: выдаем макеты для тренировки, помогаем с заказами
  • Рассказываем о том, как заполнить резюме для поиска работы
  • Помогаем с заполнением профиля Linkedin и исправляем ошибки
  • Расскажем о том, как оформить профиль на фриланс бирже Upwork или русскоязычной фриланс бирже, а также поможем найти первый заказ.

34900 РУБ

Возможна оплата в 2 этапа

Особенности профессии

Верстальщик работает преимущественно с многостраничными изданиями: журналами, газетами, книгами, каталогами, брошюрами.

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

То, что делает верстальщик с текстом, представляет собой целую типографическую науку. Существует целый ряд терминов, например: «висячая строка» (когда «одинокая» первая строка абзаца оказывается в самом конце страницы, либо последняя строка абзаца выталкивается на следующую страницу, это считается некрасивым), «висячий предлог» (любые предлоги, попавшие в конец строки, что считается неправильным), «интерлиньяж» (расстояние между строками) и так далее. Все эти термины входят в огромный свод правил о том, как должен выглядеть текст. Верстальщик знает все эти правила и занимается визуальным «причесыванием» текста, который в итоге должен оказаться читабельным, ровным, красивым, с логично расположенными текстовыми блоками, выделенными подзаголовками, с отсутствием каких-либо висячих предлогов, тире и строк и отстоящим от картинок на равном расстоянии на протяжении всего макета. Кроме того, он знает знаки корректорской правки и вносит финальные исправления в текст готового макета издания. После этого верстальщик передает свою работу специалисту по допечатной подготовке, а если он совмещает две должности, что часто происходит, то сам готовит макет к печати согласно всем техническим требованиям, полученным от типографии. Часто верстальщик работает под руководством не бильд-редактора, а арт-директора и выполняет его указания по поводу дизайна макетов. В этом случае он иногда называется также ассистентом арт-директора.

Что касается типографий, то они зачастую ищут себе в штат верстальщика, имея в виду и верстальщика, и специалиста по допечатной подготовке в одном лице, так как им надо не только готовить макеты клиентов к печати, но и создавать что-либо с нуля (чаще всего буклеты, листовки, календари, каталоги). И если типография не имеет специального отдела дизайна, то предполагается, что верстальщик будет совмещать уже несколько специальностей, то есть, помимо перечисленных, он будет еще и дизайнером, и цветокорректором, а иногда и конструктором (когда понадобится сконструировать макет папки или упаковки). При этом в трудовой у него будет стоять запись «верстальщик» или «дизайнер-верстальщик», а в обязанности будет входить далеко не одна верстка.

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

Проблемы у пользователей

  • с мобильных устройств;
  • с отключенным javascript’ом;
  • с устаревшими браузерами (IE5.x);
  • с низкой скоростью соединения;
  • с отключенной графикой;
  • с физическими ограничениями (в первую очередь это слепые пользователи).

Шрифты в px

body {font-family:Arial, Tahoma, Verdana, sans-serif; font-size:12px}
html {font-size: 75%}
body {font: normal 1em/1.3 Arial, sans-serif}

Общий CSS для всех media

<link href="main.css" rel="stylesheet" type="text/css" />

Почему плохо:

  • при печати страницы на принтере получаем не документ, а исковерканный скриншот сайта 1;
  • мобильные устройства не в состоянии отобразить большинство этих стилей и как следствие встроенные в них браузеры вообще не отобразят этот сайт 2;
  • OperaMini попытается конвертировать его в доступный вид, но результат будет весьма далёк от идеала: внешний вид не ахти, много бесполезных на мобильном устройстве элементов и больший чем должен был бы быть трафик у пользователя.
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="css/handheld.css" type="text/css" media="handheld" />
Почему не подключать общий стиль для всех, а в print.css и handheld.css лишь убирать ненужное?

Недоступный javascript

<a href="javascript:DoWin(this.href)">Refund Policy and Contact Information</a>

А если у человека отключен Javascript?

<a href="policy_contact.html" target="_blank" onclick="DoWin(this.href); return false">Refund Policy and Contact Information</a>

<a href="policy_contact.html" target="_blank" id="policy_contact">Refund Policy and Contact Information</a>

в js на onload:
      document.getElementById('policy_contact').href = '#';
      document.getElementById('policy_contact').target = '_self';
      document.getElementById('policy_contact').onclick = DoWin;

Продолжая тему доступности:

*:focus {outline: none}

У меня сели батарейки в мыше, как я пойму на какой ссылке я сейчас нахожусь?Не отбирайте у пользователя то, к чему он привык!

  • всё-таки лучше когда они подчеркнуты;
  • незабывайте про стили для посещённых ссылок!

img вместо background

<a href="#"><img alt="Переплет на любой вкус" src="images/offer1.jpg"/></a>

Почему плохо:

  • Я мабилко и гружу непонятную картинку ужатую до нечитаемого размера;
  • Я принтер и зря засоряю лист бумаги картинками;
  • Это лишний презентационный мусор в коде для поисковиков, для тех кто будет поддерживать ваш код (вы не поменяете картинку только из css, придется лезть в шаблоны, доступ к которым может быть например только у программеров)

в тегах img должны быть только иллюстрации!

История профессии

По большому счету профессия верстальщика в современном понимании появилась с развитием книгопечатания в XV–XVI веках, когда для создания книги нужно было выполнить большой объем утомительной ручной работы, чтобы скомпоновать издание, расположив на его страницах текст и картинки. Верстальщик (тогда это был наборщик) работал в типографиях, он изготовлял макет, сводил текст в страницы, сочетал его с иллюстрациями, добавлял колонтитулы.

С развитием компьютерной техники и Интернета издательское дело претерпело революционные изменения. Многие полиграфические мощности уже закрылись, газеты и журналы массово перебираются во Всемирную сеть или как минимум имеют параллельную онлайн-версию. По этой причине профессия трансформировалась, и сейчас в основном работодателям нужен HTML-верстальщик. Современная информационная индустрия требует создания огромного количества многостраничных сайтов, поэтому спрос на таких IT-сотрудников очень велик.

Лучшие варианты для обучения

Чтобы стать профессиональным верстальщиком, надо получить среднее специальное (высшее совсем необязательно) образование, например в одном из этих ссузов:

  • Колледж технологии, моделирования и управления Санкт-Петербургского государственного университета промышленных технологий и дизайна. Сюда берут после 9 и 11 класса, обучение длится 46 и 34 месяца соответственно. Кроме хорошего аттестата для поступления потребуется еще сдать экзамен по рисунку (композиции). Выпускники колледжа овладевают искусством веб-дизайн и навыками верстки.
  • Колледж дизайна и декоративного искусства Московской государственной художественно-промышленной академии им. С. Г. Строганова. Здесь можно получить навыки творческого оформления интернет ресурса. Хороший специалист должен не только уметь переложить замысел дизайнера в HTML-код, но и сделать это красиво и привлекательно для пользователя.

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

  • Саратовский государственный технический университет им. Ю. А. Гагарина в своем институте прикладных технологий и коммуникаций готовит специалистов по разным направлениям ИТ-сектора. Здесь обучают программированию, облачным и мобильным технологиям, разработке компьютерных игр, дизайну и верстке.
  • Сибирский государственный университет телекоммуникаций и информатики (г. Новосибирск) на факультете мобильной радиосвязи и мультимедиа по профилю «информационные технологии в медиаиндустрии» предлагает полный спектр специальностей, необходимых для работы в современной издательской сфере.
  • Санкт-Петербургский государственный университет аэрокосмического приборостроения включил в программу обучения направления по информационным технологиям в дизайне и медиаиндустрии. Их студенты изучают программирование, мультимедиа, разработку интернет-приложений и веб-документов, основы верстки.

Для полноты картины нельзя не упомянуть еще и краткосрочные курсы, к примеру:

  • IT-Events предлагает полуторамесячный курс «HTML-верстка», слушатели которого выполняют свыше двухсот практических заданий и создают 2 сайта для портфолио. Стоимость обучения – 26 тысяч рублей.
  • Учебный центр «Специалист» при МГТУ им. Н. Э. Баумана разработал внушительный перечень образовательных программ по ИТ-сфере. Выпускники различных курсов web-дизайна (от 140 до 272 академических часов) с элементами юзабилити создают самые современные и привлекательные сайты любой сложности.

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

Чем занимается дизайнер верстальщик


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

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

Если рассматривать профессию дизайнера верстальщика, то ее условно классифицируют на следующие типы или специализации:

  • Работа с сайтами, создание уникального web-контента. Специалист реализует свои знания, умения в сети интернет. Вакансия встречается как HTML-верстальщик.
  • Полиграфия. Охватывает практически всю печатную продукцию, начиная с визиток и заканчивая глянцевыми журналами, книгами.

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

Где можно работать

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

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

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

CSS

Когда я только изучала основы создания страниц и не понимала как работает вся эта магия со стилезацией. Почему стандартная разметка HTML в тандеме с CSS можем измениться до неузнаваемости. Разобраться в этом мне помогла книга «Изучаем HTML, XHTML и CSS» — Элизабет Фримен, Эрик Фримен.

Здесь описано всё настолько гениально просто, что начать верстать сможет даже 6-летний ребенок. Да, книга 2014 года. Да, некоторые советы утратили актуальность. Но это не мешает ей быть и оставаться must have учебником для тех, кто СОВСЕМ не знает с чего начать, но хотел бы создать свои первые веб-странички. Я была такой и у меня не было ни каких наставников и даже знакомых, кто хоть чуть-чуть разбирался в сайтах, но мне в руки попала эта замечательная книга и я бесконечно рада этому. Скачивайте, читайте, изучайте.

На освоение азов CSS по этой книге может уйти примерно месяц.

А чтобы эта статья была максимально актуальной на момент выпуска, рекомендую также поиграть в игру, которая поможет изучить CSS Grid — cssgridgarden.com Эта технология ещё не используется так широко, как Flexbox, но будущее за Grid. Поэтому не забудьте пройти игру.

Давайте немного подытожим: Вам потребуется месяц на изучение основ CSS и примерно еще 2 месяца, чтобы научиться быстро ориентироваться во всех стилях, которые используют при верстке.

Кстати на сайте htmlbook тоже есть справочник CSS по всем свойствам — htmlbook.ru/css Не забудьте заглянуть сюда.

Сколько зарабатывает

Зарплата дизайнера верстальщика зависит от загруженности, специфики работы и региона. В крупных городах в типографиях или рекламных агентствах специалист способен зарабатывать от 40-50 тыс. При средней загруженности, работе удаленно, зарплата варьируется от 20-40 тыс. Наличие портфолио, рекомендаций и положительных отзывов только увеличивает шанс устройства на более высокооплачиваемую работу. Некоторые рекламные агентства и компании, занимающиеся продвижением брендов, готовы оплачивать работу креативных дизайнеров и верстальщиков начиная с 60 тыс. рублей.

Данные актуальны на Май 2019 и взяты из сервиса «Яндекс Работа»

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


С этим читают