Кто такой "верстальщик" и с чем его едят

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

Стимулом для написания данной статьи для меня послужил тот факт, что каждый раз, когда на вопрос о роде деятельности я отвечаю, что работаю «верстальщиком», в 95 процентах из 100 люди смотрят на меня с легким недоумением. У большинства людей, не имеющих отношения к IT-сфере, это слово ассоциируется с какими-то станками, верстатами, печатанием газет и еще бог весть с чем. В таких случаях я пытаюсь пояснить и говорю: «Ну, я front-end разработчик», выражение лица собеседника слегка меняется ))

Итак, мне хотелось бы на максимально простом языке, не вдаваясь в терминологию, пояснить, в чем же заключается работа верстальщика и почему его называют зарубежным словом front-end dеveloper. Итак, верстальщик, что логично предположить, верстает.

Верстает он макеты, обычно предоставленные дизайнером, которые были тщательно продуманы, перед тем как поступить к верстальщику в работу. Макеты обычно в формате PSD (это означает, что они были нарисованы в программе Photoshop) или AI (такой макет был нарисован в программе Illustrator). Что такое формат файла, я думаю, известно всем, это те несколько букв после названия файла, которые обычно сигнализируют нам в какой программе следует открыть файл.
Также существует заблуждение, что верстальщик сам рисует макеты. Вы сейчас можете подумать: «Да ну глупости какие! Все я знаю. Дизайнер рисует, верстальщик —верстает, за дураков нас держишь». И многие из читающих данную статью могут пропустить этот абзац, но лучше все же прочесть ;) Данный вывод я делаю не с бухты-барахты, а из личного опыта. Мне не раз приходилось объяснять, что я не рисую макеты — моя задача их сверстать. Хотя я и не отрицаю того факта, что есть верстальщики, которые и рисуют, и верстают, и текст для сайта сочиняют, такие себе «универсальные солдаты», но это скорее исключение из правила: у каждого своя работа.

Что же значит «сверстать макет»?

Начнем издалека. Дело в том, что браузер не понимает человеческого языка (как и компьютер), ему не скажешь «эта кнопочка должна быть зеленой, и пусть она красиво меняет цвет, когда я на нее курсор навожу», браузеру подавай все это на его языке. Можно провести аналогию с конструктором Lego: мы собираем сайт по частям, с той разницей, что все детальки, перед тем как собрать в единое целое, нужно сначала создать. В макете, предоставленном дизайнером, изображено, как должна в итоге выглядеть страница сайта. Наша задача написать все это на языке, понятном для браузера, чтобы он мог отобразить страничку пользователю. Верстальщик тщательно измеряет ширину и высоту всех составляющих на странице, и в дальнейшем для каждого элемента прописывается ширина, высота, цвет, границы — все необходимое. На данном этапе важно быть предельно внимательным: если неверно указать ширину или высоту какого-то элемента на странице, например, изображения, то им будет мало места и они начнут теснить друг друга, либо же наоборот — появится лишнее пространство и ваша верстка уже не будет соответствовать макету.

Наверное, в этом заключается львиная доля работы верстальщика, если не основная, — правильно измерить и расставить элементы на страничке. Далее в ход идут различные эффекты: на сегодняшний день статичная страница, на которой абсолютно ничего не происходит, не слишком привлекает — в интернете неимоверное количество ресурсов и каждый владелец сайта хочет удержать пользователя на своем ресурсе, более того, не просто удержать, но еще и добиться того, чтобы в последующем он заходил к нему на страничку еще и еще. Конечно же имеет значение внутреннее наполнение сайта, его тематика, информация, которая предоставляется на нем. Это важно, если человеку интересна та или иная информация, он задержится на страничке. Но в нынешний век спешки, движения и неимоверного количества источников информации создателям тех или иных ресурсов приходится вступать в настоящую борьбу за внимание пользователей сети Интернет. Как заставить человека зайти на сайт и остаться именно на нем, когда у него выбор из двадцати подобных (конечно, имеет место реклама, но это тема для отдельной статьи)? Тут вступают в игру различные «красивости», эффекты, когда какой-то элемент выезжает в поле зрения; изображение увеличивается, когда на него наводишь курсор; меняется фон по мере того, как пользователь прокручивает страничку вниз; что-то затемняется, что-то, наоборот, становится ярче — примеров море. Все эти эффекты привлекают внимание, заставляют пользователя остаться на сайте дольше, чем если б страница была статична, и ничего не происходило бы. Созданием подобных визуальных эффектов занимается верстальщик. Наша задача: объяснить тому или иному элементу, как он должен вести себя на странице: мигать, выплывать, прыгать — все, что душе угодно. И если, зайдя на страничку любимого ресурса, вы увидите, как с тем или иным элементом происходят какие-либо визуальные изменения, будьте уверены – это значит, что во время создания сайта кропотливый верстальщик высчитывал траекторию движения или степень затемнения, или уровень прозрачности этого элемента, чтобы Вам, уважаемый пользователь, было приятно находиться на этой странице и хотелось вернуться еще и еще.

Пожалуй, это тема для отдельной основательной статьи, но не обмолвиться о резиновой верстке будет большой ошибкой с моей стороны. Что же такое «резиновая верстка»? Существуют различные термины – резиновая, адаптивная, отзывчивая верстка. Если вас заинтересует данный вопрос, вы найдете предостаточно информации о том, что все эти определения означают, и в чем разница между ними. В данной статье я не ставлю для себя цель вдаваться в терминологию, я наоборот хочу максимально доступно описать процесс верстки, чтобы после прочтения у вас не осталось ощущения недопонимания. Итак, в эпоху доминирования смартфонов и планшетов над старыми добрыми персональными компьютерами появилась необходимость добиться максимального удобства просмотра страничек, учитывая не слишком большие размеры экранов смартфонов и планшетов. Ведь согласитесь, не слишком удобно просматривать с относительно небольшого экрана телефона огромную по ширине и высоте страницу сайта, когда для того, чтобы просто прочесть текст, вам нужно «таскать» страницу влево-вправо. Здесь выходит на сцену резиновая верстка. Благодаря «резиновости» сайта, с какого бы устройства вы не открыли страничку, вам будет одинаково удобно просматривать сайт, искать информацию на нем, открывать изображения. Он адаптируется под размеры экрана вашего устройства. Поэтому такая верстка еще называется адаптивной. Если, зайдя на один и тот же сайт с персонального компьютера и с мобильного телефона, вы замечаете, что он визуально отличается, к примеру, в браузере на вашем компьютере на главной странице три колонки, а на мобильнике одна, в браузере на ПК текст кажется крупнее или изображения выстроились в ряд, а на мобильнике — в столбик, можете не сомневаться — данный сайт резиновый. И именно верстальщик добивается «резиновости» сайта.

И напоследок хотелось бы рассказать, кто такой front-end разработчик, и почему этим термином называют верстальщика. В процессе создания сайта существует front-end и back-end разработка. В чем же разница? Имея даже небольшие познания в английском языке, становится ясно, что front-end — это что-то, что находится впереди, а back-end, соответсвенно, — позади. В сущности, так и есть, front-end разработчик занимается созданием клиентской стороны сайта, то бишь того, что видит пользователь, заходя на сайт: это верстка, различные анимационные эффекты, все то, что доступно невооруженному глазу пользователя. Back-end разработчик занимается серверной частью сайта, эти процессы скрыты от глаз пользователя, и это тема для отдельной статьи (или десятка статей ))).