Верстальщик в полиграфии. Верстальщик
Изначально, верстальщик — это специалист работающий в издательском деле и полиграфии. С появлением интернета стала востребована новая специальность — html-верстальщик, по другому — верстальщик сайтов. Дальше я расскажу чем занимается верстальщик в сфере web-технологий.
Обязанности верстальщика
Что делает верстальщик? Если кратко, то верстает шаблоны на основе готовых psd-макетов. Расскажу подробнее про процесс.
Дизайнер отдает в работу верстальщику макет сайта (обязательно в формате psd). Макет — это просто картинка. Верстальщик с помощью кода воспроизводит этот макет в формат html. Html-страницу уже можно просмотреть в браузере и взаимодействовать с элементами, например такими:
- нажимать кнопки;
- листать слайдеры;
- сворачивать меню и всплывающие окна.
Но это визуальное оформление данных. Для работы с данными подключается уже программист.
В чем отличие верстальщика от программиста?
Распространенный вопрос. Программист работает с данными: посчитать площадь комнаты и вывести правильное значение, сохранить в базу данных введенные в форму значения и т. д . Верстальщик работает с визуальным отображением этих данных согласно макету: площадь комнаты отображать шрифтом Arial, размером 18px и красным цветом, разместить форму по центру страницы, фон сделать серым, а ячейки 20px в высоту и т. д .
Приведу пример вывода данных без стилизации верстки и с работой верстальщика:
Из примера понятно, что без работы верстальщика страница сайта выглядит уныло.
Приведу еще один пример. Для аналогии рассмотрю сервант с полками и посудой. Посуда — это переменные: чашка, бокал, тарелка… Полки — это структура сайта. Без верстки это просто коробка с 4 стенами, куда свалена в кучу вся посуда. Задача верстальщика — сделать полки и расположить их так, чтобы каждая посуда была на своем месте: тяжелые тарелки снизу, бокалы сверху. Согласитесь, приятней подойти к серванту где все упорядочено и взять нужную вещь (контент), чем копаться в куче мусора.
Требования к верстальщику
Расскажу что должен уметь и знать верстальщик:
- Отлично знать html и css;
- Уметь нарезать макет (базовые знания Photoshop);
- Верстать кроссбраузерно (чтобы сайт отображался во всех браузерах одинаково);
- Применять адаптивную верстку (для правильного отображения сайтов на различных устройствах, в т. ч. мобильных);
- Уметь работать с плагинами для тестирования и отладки верстки.
Уверен, многие скажут, а как же JavaScript, AJAX? Знание этих технологий я отношу уже к следующей ступени — frontend-разработчик. Для верстальщика достаточно знать перечисленное в списке.
Верстальщик – это работник издательства, отвечающий за компоновку материалов. Как правило, верстальщик имеет специальное или дизайнерское образование. Весь материал, собранный большой творческой группой издательства, в конечном итоге попадает к верстальщику. В его задачи входит грамотно и с художественным вкусом разместить тексты и заголовки к ним, и другие материалы, подобрать шрифты.
Сегодня инструментами работы специалиста по верстке является компьютер на платформе Macintosh и ряд графических программ, таких как Adob Illustrator, In design, Corel Draw. Но еще в недалеком прошлом, верстка печатных изданий исполнялась вручную. Макет заказа собирался из отдельных металлических фрагментов – букв, пробельных элементов и металлических пластин с нанесенными на них иллюстрациями. Итог работы отпечатывался на бумаге.
Верстальщик выполняет всю работу на компьютере, а сдает готовый вариант макета в печатном виде. Результат проверяется корректорами, редакторами, дизайнерами и журналистами. После внесения необходимых правок верстальщик дорабатывает макет и в электронном виде сдает его в типографию. На этом обязанности специалиста по верстке исчерпаны.
Веб-верстальщик – кто это?
Веб-верстальщик выполняет работу по созданию интернет-ресурсов – сайтов, блогов. Конечный итог работы верстальщиков сайтов можно увидеть в интернете. Однако мало кто знает, что каждая страничка любого интернет-ресурса – это набор символов, цифр, знаков, который принято называть кодом. При помощи программ-браузеров код преобразуется в понятную и доступную человеку веб-страницу.
Работа верстальщика сайтов начинается после того, как веб-дизайнер подготовит проект нового ресурса, обозначив место расположения текстов, картинок, указав виды и размеры шрифтов, цвета заливок. При помощи языка разметки верстальщик переводит шрифты, рисунки, таблицы и другие элементы дизайна в язык знаков и символов, понятный браузерам. Получается текстовый макет того, что задумал дизайнер. Сверстанная страница передается программисту.
Для создания сайтов верстальщик использует текстовые редакторы, а также редакторы HTML, языки разметки HTML, XHTML, XML, а также программы-браузеры для проверки проделанной работы. Профессия веб-верстальщика кропотлива и требует специальных знаний. Однако, если учесть, что каждую секунду в виртуальном мире появляются новые сайты, а заказчики хотят видеть яркие и оригинальные продукты, профессия веб-верстальщика сегодня является очень востребованной и хорошо оплачиваемой.
45.7
Для друзей!
Справка
Верстка - процесс оформления страниц книг, журналов, газетных полос, других видов полиграфии, а также web-страниц. Именно от работы верстальщика зависит окончательный вид издания и его внешняя привлекательность для читателей.
Истоки этой профессии нужно искать на заре книгопечатания, задолго до появления компьютеров. Тогда в каждой типографии работал метранпаж (от французского «верстающий в страницы»). Этот специалист «собирал» страницы вручную из отдельных металлических букв, пробельных элементов и металлических пластин с иллюстрациями, которые потом отпечатывались на бумаге.
Новейшие технологии и современное полиграфическое оборудование в разы упростили и ускорили работу верстальщика. Сегодня профессия становится все более популярной и востребованной.
Описание деятельности
Заработная плата
средняя по России: средняя по Москве: средняя по Санкт-Петербургу:
Трудовые обязанности
Особенности карьерного роста
Характеристика сотрудника
Верстка - процесс сродни проектированию. Математические способности для проведения некоторых расчетов не будут лишними. А пространственное мышление необходимо, чтобы представить, как будет выглядеть уже готовое издание и как лучше разместить различные элементы на странице.
Однако для мастера верстки недостаточно одних технических навыков. Созданный продукт должен не только привлечь аудиторию, но и остаться в памяти. Для этого материал должен быть сверстан максимально гармонично, а текст и картинки должны взаимно дополнять друг друга. Помогут в этом художественный вкус, творческая жилка и чувство цвета. Не следует забывать об упорстве, оперативности и внимательности. Порой необхопереправлять макеты по несколько раз, а иногда и верстать все заново.
HTML-верстальщик - это специалист, выполняющий вёрстку web-страниц. Другими словами, он создаёт HTML-шаблон для web-сайта с использованием знаний HTML-кода и всех особенностей стиля и графического оформления. Профессия подходит тем, кого интересует информатика (см. выбор профессии по интересу к школьным предметам).
HTML - аббревиатура от Hyper Text Markup Language (англ.) - это язык разметки гипертекста, принятый в World Wide Web для создания и публикации web-страниц. Соответственно, HTML-верстальщик - это специалист, выполняющий вёрстку web-страниц. Другими словами, он создаёт HTML-шаблон для web-сайта с использованием знаний HTML-кода и всех особенностей стиля и графического оформления. Созданный код должен одинаково отображаться во всех браузерах («кросс-браузерность») с учетом разных разрешений монитора и количества цветов.
Особенности профессии
Верстальщик посредством кода HTML, CSS и JavaScript создает HTML-шаблон, реализация которого состоит из нескольких этапов:
- анализ графического дизайна сайта;
- подборка модели шаблона;
- нарезка графических спрайтов;
- сборка HTML-шаблона.
В настоящее время существует большое количество компьютерных программ, которые автоматизируют труд верстальщика, различные текстовые редакторы с подсветкой кода, визуальные редакторы (Notepad++, Adobe Dreamweaver), front-end фреймворки (наборы фрагментов кода и библиотек классов для ускоренной разработки макета сайта путем прототипирования — ZurbFoundation-4 и т.п.). Они позволяют писать большие фрагменты кода в наглядном режиме, то есть результат каждого этапа работы можно наблюдать в отдельном окне. Но профессиональный HTML-верстальщик этими программами не пользуется. Он должен уметь использовать кодировку HTML вручную, без помощи визуальных редакторов, чтобы обеспечить максимальную корректность кода в минимальном весе.
HTML-верстальщик должен знать каскадные стилевые таблицы CSS, владеть JavaScript и базовыми навыками web-программирования на языках PHP, Perl или Java, а также основными графическими редакторами Photoshop, Fireworks, Gimp. Опытный верстальщик может создать небольшой сайт, используя текстовый редактор Microsoft Word c минимальным количеством средств и инструментов.
Успешная работа HTML-верстальщика строится на трех китах: качественный код, принцип юзабилити, адаптивный дизайн. Качественный код должен быть хорошо структурирован и иметь правильное семантическое оформление в соответствии с правилами SEO-оптимизации. Принцип юзабилити подразумевает простоту в разработке интерфейса. Навигация по сайту не должна заставлять посетителей напряженно думать. Простота интерфейса - залог успеха проекта. Адаптивный дизайн сделает сайт дружелюбным к мобильным устройствам.
При работе над крупными проектами работа HTML-верстальщика сводится к созданию только лишь макета сайта. Различные модули и элементы в него устанавливают программисты узкой специализации. Но на небольших проектах HTML-верстальщику приходится выполнять работу с кодом от начала до конца.
Плюсы и минусы профессии
Плюсы:
- возможность самостоятельного освоения профессии
- высокая востребованность на рынке труда
- необходимость постоянного совершенствования и обновления знаний
- возможность работать удаленно
- нечеткие границы между работой веб-дизайнера, веб-программиста и баннер-мейкера дают возможность работать в смежных областях.
Минусы:
- присутствует доля рутинности и однообразия
- необходимость долговременного сидения за компьютером
Место работы
Интернет-компании, фирмы по разработке сайтов, дизайн-студии, организации со своими интернет-проектами, фрилансерская работа.
Важные качества
- внимательность, сосредоточенность
- способность концентрироваться
- терпение в выявлении собственных ошибок
- усидчивость
- аккуратность
- желание работать на конечный результат.
Обучение на HTML-верстальщика
Как правило, HTML-верстальщики осваивают профессию самостоятельно. Но есть и специализированные курсы. Для устройства на работу специального образования не требуется. Основное требование работодателей: опыт работы, подкрепленный портфолио. Необходимо знать: HTML (вручную), CSS 1, CSS 2, JavaScript, Dreamweaver, Front Pages, Photoshop, PHP, MySQL, XML\XSL.
(очно, Москва). Международное учебное заведение, специализирующееся на компьютерном образовании. Работает с 1999 года. 42 филиала в 16 странах мира. Крупнейший авторизованный учебный центр Microsoft, Cisco, Autodesk. Студенты получают международные сертификаты и международный диплом. Главная цель - трудоустройство каждого выпускника.
Вузы
Оплата труда
Зарплата на 17.03.2020
Россия 20000—85000 ₽
Москва 40000—100000 ₽
Оплата труда зависит от региона проживания HTML-верстальщика, специфики учреждения, в котором он работает и масштаба предприятия. Заработная плата может составлять от 40 до 70 тысяч рублей в месяц на начальном этапе. В Москве и крупных городах опытный HTML-верстальщик зарабатывает около 100 тысяч рублей в месяц.
Ступеньки карьеры и перспективы
Начинающий HTML-верстальщик с приобретением опыта и стремлении к повышению своего профессионального уровня в будущем может претендовать на должности веб-дизайнера, веб-программиста, баннер-мейкера.
Этапы верстки сайта, виды сайтов и методы вёрстки
Web-сайт представляет собой набор логически связанных html-документов. Логика, по которой эти документы связаны, называется структурой сайта или картой сайта.
Перед началом верстки графический файл дизайна детально анализируется, после чего разрезается на части, на основе которых верстается HTML-документ, который представляет собой структурированный набор HTML-тегов. Это происходит в несколько этапов:
- формируется каскадная таблица стилей с описанием цветовой гаммы сайта и расположением элементов на странице
- формируются меню, кнопки формы и все элементы управления сайтом
- разрабатывается пользовательский интерфейс.
В результате этих действий получается HTML-шаблон сайта. Если мы имеем дело со статическим сайтом, на этом этапе происходит наполнение шаблона контентом, затем сайт закачивается на хостинг.
Если сайт динамический, то необходимо произвести интеграцию HTML-шаблона с системой управления содержимым сайта. На этом этапе требуются знания архитектуры шаблона CMS и серверного языка программирования.
По макету вёрстки все сайты подразделяются на 3 группы:
- жёстко фиксированные (Rigid fixed)
- адаптивные резиновые (Adaptable fluid)
- расширяемые эластичные (Expandable elastic)
Фиксированный тип макета — дизайн, в котором ширина столбца или рисунка заданы в пикселях и оговорены точно.
Резиновый тип макета — дизайн, в котором ширина столбца или рисунка задана в процентах от текущего разрешения экрана.
У каждого вида дизайна есть свои преимущества и недостатки. В каждом конкретном случае выбор дизайна зависит от решаемой задачи. Возможен и смешанный дизайн: некоторые столбцы табличного дизайна можно задать в процентах, другие в - пикселях.
Методы вёрстки:
Табличная вёрстка раньше была основным методом вёрстки; в настоящее время применяется для создания рамок, выравнивания элементов, задания модульных сеток, создания цветного фона.
Вёрстка с помощью слоёв. Слои — это структурные элементы, которые размещаются на web-странице путем наложения их друг на друга с точностью до пикселя. Параметры слоя могут динамически изменяться скриптами, что дает возможность создавать на странице разные эффекты: выпадающее меню, игры, разворачивающиеся баннеры, плавающие окна и т.п.
Блочная вёрстка осуществляется при помощи блоков тег (
По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую). К примеру, курсивный текст можно получить как с помощью тега , так и с помощью тега . В первом случае на текст производится логическое ударение, которое обычно отображается курсивом, а во втором - курсив задаётся явным образом. То есть, первый случай ориентирован на логическое предназначение, второй - на внешний вид (презентацию), а во втором — на логическое предназначение. Логическая разметка обладает существенным преимуществом — независимостью от используемого типа и дизайна web-страниц. В данном случае можно использовать один и тот же вариант верстки для экрана, печати и мобильных устройств, при этом регулируя внешний вид с помощью отдельных файлов стилей.
Опытному дизайнеру-верстальщику должны быть присущи следующие умения:
- технически грамотная и быстрая работа в основных программах вёрстки;
- работа с растровыми и векторными графическими редакторами, такими как Photoshop, Illustrator, CorelDraw;
- способность находить новые идеи, разрабатывать план издания;
- обладание художественным вкусом;
- знание классической типографики;
- владение ретушью и цветокоррекцией;
- наличие базовых знаний по допечатной подготовке макетов.
Дополнительным плюсом для соискателя, особенно в небольшой компании, будет владение компьютером на уровне системного администратора высокого уровня, а также базовое художественное образование. Кроме того, поступательное развитие информационной отрасли приводит к тому, что специалист должен быть всегда в курсе новых приемов и методик работы.
Плюсы и минусы
Несомненным плюсом профессии является творческий характер работы, позволяющий учиться у многих талантливых людей. Кроме того, в ситуации, когда заказчик только в общих чертах представляет, каким должно быть издание, но не имеет ни плана вёрстки, ни готовых текстов, ни иллюстраций, специалист может в полной мере реализовать свои художественные способности. «Столкнувшись с неорганизованным материалом, дизайнер-верстальщик имеет возможность проявить творческие стороны своей натуры, - отмечает Че"Гевар Гельдиев, - сделав так, чтобы на основании сырого набора данных, выражающих смутные намерения заказчика, выросло логичное и законченное издание. Создать мозаику, каждый элемент которой будет на своем месте».Еще одним шагом в карьере станет переход в дизайнеры, арт-директоры и бильд-редакторы - эти профессии оплачиваются гораздо выше.
Плюсом можно также считать высокую востребованность представителей этой профессии на рынке труда, возможность работы в домашних условиях и относительно неплохой уровень заработной платы квалифицированного специалиста. «Если вам не претит трудиться и после работы, то плюсом можно считать возможность фрилансерства, - полагает руководитель отдела препресса компании Promade Сергей Фомин. - Хороший верстальщик, не гнушающийся подработками, постепенно обрастает клиентурой, и тогда уже особо искать работу не требуется - она сама тебя ищет».
Среди минусов можно выделить ненормированный рабочий день (когда нужно сдавать срочный заказ), малоподвижный характер работы и высокий уровень ответственности.
Оплата труда
Размер заработной платы зависит от города и региона, в котором работает специалист. В последнее время наметилась тенденция увеличения уровня оплаты труда в регионах. Так, в Уфе средняя зарплата начинающего верстальщика при нормированном рабочем дне составляет 10-12 тыс. руб. «Размер оклада опытного специалиста во многом зависит от уровня его подготовки и авторитета и начинается от 15 тыс. руб., - рассказывает Че"Гевар Гельдиев. - Верстальщик в цветном журнале может рассчитывать на месячный доход до 30 тыс. руб., а при ненормированном рабочем дне - до 40-50 тыс., но обязательным условием будет мультиуниверсализм (цветокоррекция, ретушь, планирование и дизайн издания, вёрстка, предпечатная подготовка), когда полный цикл работы над изданием сосредоточен в руках одного человека».
В столице уровень оплаты труда начинающего специалиста составляет от $500 до $1000, а опытного профессионала - от $900 до $2500.
Перспективы
Перспективы представляются весьма разнообразными и зависят от амбиций работника. Развивая организаторские качества, есть возможность вырасти до руководителя отдела вёрстки, а путем совершенствования технических знаний и постижения тонкостей редакционных процессов - до производителя дополнительных модулей к программам. Можно также перейти в консультационную или преподавательскую деятельность.
Еще одним шагом в карьере станет переход в дизайнеры, арт-директоры и бильд-редакторы - эти профессии оплачиваются гораздо выше. В качестве горизонтального развития возможно заняться веб-вёрсткой. «Не стесняйтесь почаще менять работу, - советует Сергей Фомин. - Чем в большем количестве мест вы поработаете, тем большему научитесь, больше тонкостей освоите».