Кар'єра в IT: посада HTML coder (верстальник)

Представляємо нову статтю із серії «Кар'єра в IT» . Вона присвячена посади верстальника, чия робота виступає сполучною ланкою між роботою дизайнера і програмістів.

HTML coder — це фахівець, який з намальованого дизайнером макета створює web-сторінку, використовуючи HTML/CSS.

За даними ДОУ , середньому українському верстальщику 26 років, він має зарплату $300-800 і досвід роботи 1,5 роки.

Завдання та обов'язки

Основне завдання верстальника — перетворення дизайну у зовнішнє оформлення сайту, тобто з формату PSD (рідше — з Sketch або інших форматів) — в код. Таким чином, він створює HTML-сторінку, яка повинна виглядати в точності як затверджений замовником макет дизайнера, і з якої далі працюють front-end і back-end розробники.

Головні інструменти при верстці HTML і CSS, а також JavaScript для створення більш складних елементів, наприклад, слайдерів, анімацій, паралаксів, модальних вікон, реалізації простої логіки (наприклад, валідація форм). За допомогою HTML-шаблонизаторов (Jade, Swig), верстальник розбиває на сайт шаблони, потім збирає їх за допомогою систем збирання.

«Я отримую макет від дизайнера, розбираю його по верствам, вирізаю картинки, логотипи, знімаю шрифти. Размечаю елементи сторінки за допомогою HTML, надаю їм зовнішній вигляд CSS, максимально наближений до макету. Щоб порівняти дизайн сторінки з її версткою, використовую плагін PixelPerfect. Потім роблю сторінки адаптивними для мобільних пристроїв, якщо таке потрібно замовнику. За необхідності додаю готові js-плагіни, начебто повзунків, каруселей. Після закінчення роботи тестую сайт на предмет сумісності з усіма браузерами. Після цього відправляю проект на back-end, щоб прописали взаємодія з сервером».

В обов'язки верстальника може входити:
— створення макету за наданим дизайну (перетворення PSD-шаблон код);
— підтримка існуючих UI компонентів;
— Адаптація сайтів під різні розміри екрану і пристрої;
— інтеграція зверстаних сторінок в середовище розробки;
— оптимізація завантаження сайту;
— створення print версій;
— верстка електронних листів;
— написання нескладного JavaScript'a.

«Хороший верстальник — це той, хто:
— робить макет максимально точно, при цьому може передбачити, що буде змінюватися або додаватися, і передбачить, щоб це легко було впровадити;
— автоматизує всі, щоб не писати заново. Тобто дає можливість скопіювати елемент і перенести його в інший кінець сайту, і воно не зламається;
— намагається не використовувати фреймворки, де це не треба. Але знає про них і розбирається».

Адаптивна верстка

Грамотний верстальник повинен виявляти помилки дизайну на початковій стадії розробки, активно взаємодіяти з дизайнером, менеджером та іншими розробниками.

«Верстальник повинен мати погляд, як у орла, реакцію, як у боксера, почуття прекрасного, як у Леонардо да Вінчі, і терпіння, як у святого. Ці властивості та навички потрібні для правильної оцінки часу верстки майбутнього проекту, точності співпадіння з макетом і вимог замовника і підготовки плацдарму для програміста. Також непогано вміти переключатися між кількома проектами, пам'ятати свій код напам'ять і знати всі шрифти в обличчя».

«Верстаючи компонент, верстальник зобов'язаний розуміти, як цей компонент буде реалізований програмістом, і зверстати його так, щоб він не розвалився, коли програміст додасть в нього логіку. Наприклад, верстальник отримав дизайн кнопки шириною в 200 пікселів. Він повинен розуміти, як ця кнопка буде себе вести в різних випадках, що з нею станеться, якщо в ній буде короткий текст, довгий, якщо текст на кнопці складається з декількох слів, чи переносити на інший рядок і збільшувати висоту кнопки або робити щось інше — варіантів може бути багато. Опрацювання цих варіантів — завдання верстальника, не програміста».

Робота над проектом зазвичай складається з таких завдань:
— отримання макета від дизайнера або ПМ-а;
— обговорення всіх неясних моментів;
— створення коду;
— тестування сторінки в різних браузерах і на різних пристроях згідно вимогам;
— внесення правок.

Переваги і недоліки

Більшість фахівців розглядає верстку як перший крок у front-end:

«Професію верстальника я вибрав з-за того, що це, фактично, перший крок до web-розробки. Ази, без яких на наступних рівнях буде важкувато. Зараз я вже працюю front-end розробника, і знання верстки — це моя безпосередня обов'язок в сукупності з іншими технологіями».

Однак є й такі, кому подобається безпосередньо процес верстки:

«Я обрав професію, тому що створення сторінки з тегів і властивостей виглядає дуже захоплююче. Так і баги відшукувати — це дуже хороша тренування уважності та інтелекту».

«Я спробувала верстати, і мені дуже сподобалося, як написаний мною код перетворює в щось красиве і динамічний у браузері. Це відносно нескладно, це цікаво, ця сфера жива і розвивається».

«Приваблює можливість швидко побачити результат своєї роботи, адже достатньо оновити сторінку (а з автоматизаторами навіть цього робити не треба) або відкрити консоль у браузері.

«Це дуже багатогранна професія, оскільки треба цікавитися великою кількістю суміжних областей, крім, власне, коду: дизайн (типографіка, поєднання кольорів, сітки, вертикальний ритм і т. д.), робота з графікою, мережа, анімації, продуктивність і навіть людські вади, ніби дальтон і тим, як користується комп'ютером людей з вадами зору людина».

«Є місце естетики та здорового перфекціонізму. Більшість завдань можна вирішити кількома способами. Постійно тримаєш себе в тонусі: необхідно стежити за новими специфікаціями, оновленнями браузерів і „екосистеми“. Якщо команда йде назустріч ініціативі, можна і потрібно впроваджувати корисні нововведення в своїх проектах».

Недоліки спеціальності — висока конкуренція серед бажаючих почати свою кар'єру в ІТ саме з цієї позиції (до 500 резюме на вакансію), велика кількість рутинної роботи і менші, ніж у розробників, зарплати.

«Буває багато одноманітної роботи із-за того, що верстальники не створюють жодних алгоритмів, а лише описують рядок за рядком, як будуть виглядати елементи».

«Завдань, які можна назвати челленджем, не так багато як правило, у нас є вже готові рішення для більшості випадків. Челендж є або в специфічних ситуаціях, коли потрібне глибоке розуміння CSS, щоб розібратися з проблемою, або на специфічних завданнях, наприклад, складна анімація або архітектура».

«Мені не подобаються причіпки замовників або менеджерів, які ніяк не впливають на якість кінцевої роботи і на UX користувача. З більш глобальних штук: величезна кількість технологій та їх стрімкий розвиток, і як наслідок — протухание наявних знань про них. Велика кількість бібліотек, фреймворків і просто часто змінюється мода на те, як „правильно“ писати код».

«Недоліком позиції саме верстальника можна вважати те, що їх багато розробники не сприймають всерйоз. В сфері IT, напевно, верстальники найбільш недооцінені фахівці, після QA Manual :)»

Як стати і куди рухатися далі

Базові навички, якими повинен володіти верстальник, — розуміння HTML, CSS і роботи з зображеннями. Найпопулярніші графічні редактори — Photoshop і Sketch; необхідно вміти нарізати і експортувати графічні елементи, працювати зі стилями і текстом.

Необхідно знати сучасні CSS фреймворки (Bootstrap, Foundation), мати уявлення про методологіях верстки (наприклад, БЕМ), знати і використовувати пре - і пост-процесори (Sass, PostCSS, Stylus), збирачі проектів (Grunt, Gulp, Webpack), знати основи Git, jQuery. Обов'язкові навички адаптивної макетування, верстки листів.

«Нерідко потрібні і знання CMS (найчастіше — WordPress і Joomla) для верстки макетів та інтеграції з цими CMS».

Також важливі навички роботи з такими інструментами, як:
— інструменти розробника в браузері;
— підключення шрифтів;
— шаблонизаторы;
— таск-раннеры;
— Linux команди.

З особистих якостей важлива уважність до деталей, старанність і терплячість, здатність швидко навчатися.

Можливі кар'єрні шляхи верстальника:
— розвиватися як HTML coder, заглиблюючись в спеціалізацію;
— перекваліфікуватися в дизайнери;
— перекваліфікуватися в front-end розробника — вивчати JavaScript, фреймворки та бібліотеки (Angular, Backbone etc).
— також відкриті шляхи в тестувальники (у тому числі автоматизаторы ), проектні менеджери .

«Верстка — це головоломка, вихід з лабіринту, якщо хочете, постійний процес удосконалення — ні стелі, весь час є куди рости. У цій професії мій перфекціонізм абсолютно затребуваний».

P. S. Дякую за допомогу в написанні статті 17 українських верстальників, які розповіли DOU про свою професію. Наведені в статті цитати взяті з їх розповідей.

Опубліковано: 03/11/16 @ 08:00
Розділ html та css

SEO Блог