Верстка web-сторінок – це створення структури HTML-коду, що розміщує елементи web-сторінки (зображення, текст і т. д.) у вікні браузера так, щоб елементи дизайну виглядали аналогічно макету.
Відмінною особливістю верстки web-сторінок від поліграфічної є те, що при розробці треба враховувати різницю відображення елементів в різних браузерах, а також розмірах робочого простору пристроїв.
Часто верстання тестується «на око», якщо на проекті не надані макети. Але ефективніший спосіб тестування верстки – це тестування з використанням інструментів і наявність макетів. Це дозволяє команді бути впевненим в тому, що продукт буде переданий кінцевому споживачеві відповідно до заявлених макетів і очікувань клієнта.
Розглянемо нижче декілька популярних інструментів для цього.
Adobe Illustrator – це графічний редактор,що використовується для обробки векторної графіки. Він використовується під час створення зображень від логотипів компаній до макетів веб-сайтів і великих рекламних щитів.
На відміну від растрових зображень, в яких інформація зберігається в сітці окремих точок, Illustrator під час створення форм використовує математичні рівняння, що дозволяє міняти розміри таких зображень без втрат в розширенні.
Редактор має ряд плюсів і мінусів, які може знайти для себе кожен користувач.
Розглянемо ряд загальних переваг:
- великий набір інструментів для створення графічних примітивів;
- широкий спектр інструментів для оформлення і трансформації об'єктів (інструменти для створення перспективи з використанням сітки, об'єднання і роз'єднання фігур, регулювання ширини, деформації і зміни форми);
- зображення, зроблені в Illustrator, не займають великого об'єму пам'яті.
Проте є декілька зауважень до цього редактора:
- обмежена кількість загальнодоступних напрацювань, різноманітних надбудов і шаблонів;
- програма досить складна і орієнтована на використання досвідченими дизайнерами, в основному, при роботі на «якість» продукції, що випускається;
- Illustrator досить вимогливий до ресурсів ПК.
Adobe Photoshop – один із популярних графічних редакторів, що має велику кількість функцій, що дозволяють позитивно впливати на якість роботи.
Програма дозволяє створювати різні текстові ефекти, колажі з фотографій, графіку для сайтів, спецефекти, фонові зображення і багато чого іншого. Цей список не є повним переліком застосування програми, але демонструє її різноплановість.
До переваг можна віднести:
- відображення контрастів, тону, кольорів і так далі у вигляді графіків;
- можливість кастомізації пензлів;
- широкий спектр інструментарію.
У свою чергу, до недоліків можна віднести:
- складність його освоєння для користувача-початківця;
- велику вартість продукту;
- обмежену підтримку версій ОС (встановлення на Linux через допоміжне ПЗ).
PerfectPixel – це плагін для популярних браузерів, за допомогою якого можна тестувати виконання верстки та її відповідність макетам.
Техніка верстання, при якому HTML- шаблон, що верстає, в точності (піксель-в-піксель) співпадає з оригіналом, PSD- макетом називається pixel perfect. І, останнім часом, це вже є деяким стандартом реалізації сайту. Техніка припускає, що якщо накласти «картинку» зверстаного HTML- шаблону на картинку оригінального PSD- макета, то обидві картинки повинні співпасти (всі елементи картинок: текст, зображення, графічні елементи).
Переваги:
- плагін доступний для всіх популярних браузерів;
- підтримка декількох накладень;
- простий інтерфейс;
- функція масштабування (корисна для оптимізації зображень для різних екранів PPI/Retina);
- підтримка клавіатури;
- коригування елементів сторінки в реальному часі відповідно до активного накладення.
Недоліки:
- необхідність наявності PSD-макетів для конвертації в PNG/JPG або готовий файл з оригінального PSD-макету;
- відсутність підтримки інших популярних форматів зображень (TIFF, TGA, WebP та інші).
Як тестувати верстку у вищезгаданих програмах
Принцип тестування верстки за допомогою згаданих інструментів полягає в накладанні шарів продукту та макету. Далі розберемо по програмно.
Тестування верстки в PerfectPixel
Перед експортом в PNG-зображення PSD-макет необхідно привести до оригінального розміру! Для цього в Photoshop зарезервована комбінація hotkeys: Ctrl+1 – під Windows/Linux, Cmd+1 – під Mac OS X.
Щойно PNG-копія PSD-макету підготовлена та збережена, необхідно відкрити у вікні браузера зверстану по цьому макету HTML-сторінку.
Далі необхідно встановити або запустити плагін PerfectPixel з панелі інструментів браузера. Відразу ж з'явиться вікно плагіну, в якому буде запропоновано вибрати заздалегідь підготовлений шар. Додавши шар, його треба спробувати поєднати зі зверстаною сторінкою сайту. Якщо все співпало – означає сайт виконаний відповідно до макету. Якщо ні, то необхідно описати баг-репорт, вказавши які саме елементи не співпали для якої сторінки. Нижче можна побачити, як виглядає інтерфейс поточної версії плагіну, а також доступні опції.
На скріншоті видно, що шапка HTML-сторінки співпадає c PNG-оригіналом, а блок з банером – ні.
Тестування верстки в Photoshop і Illustrator
Накладання шарів
В Photoshop верстка перевіряється також методом накладки шарів: необхідно настроїти прозорість макету та накласти його на скріншот зверстаної сторінки.
Перевірка кольору
Окрім накладання шарів зручною перевіркою є перевірка коду кольору, що використовується. Визначити колір елементу можна за допомогою інструменту "піпетка". В результаті отримуємо код кольору, який має бути використаний, а потім порівнюємо його з кольором на HTML-сторінці.
Таким чином, виходить колір R182 G162 B127. Якщо колір відрізняється від макету, перевірити ще раз відтінок або надати колір не в RGB- форматі (наприклад, в HEX і навпаки) допоможе онлайн-конвертер кольорів з результатів пошуку.
Визначення відстані між елементами
Щоб виміряти відстань між елементами, необхідно вибрати інструмент «лінійка» та протягнути лінію від початкової до кінцевої точки.
На закінчення хотілося б відмітити, що тестування верстки «на око» не завжди дає повне розуміння того, чи виконаний продукт згідно до макету або ні. Для повноцінного тестування верстки рекомендується застосування інструментів і наявність макетів. Якщо такі (макети) не були надані в завданні, варто додатково уточнити про них у менеджера.
