Хто такий "верстальник" і з чим його їдять

Незважаючи на те, що на просторах всесвітньої павутини на сьогоднішній день існують тисячі різних статей, постів, заміток або просто визначень, я все одно досить часто стикаюся з тим, що багато хто не знає що таке верстка, чим займається верстальник і чому іноді верстальника називають верстальником , а часом 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 розробник займається серверною частиною сайту, ці процеси приховані від очей користувача, і це тема для окремої статті (або десятка статей))).