Корисні програми для тестування верстки

Верстка web-сторінок – це створення структури HTML-коду, що розміщує елементи web-сторінки (зображення, текст і т. д.) у вікні браузера так, щоб елементи дизайну виглядали аналогічно макету.

Відмінною особливістю верстки web-сторінок від поліграфічної є те, що при розробці треба враховувати різницю відображення елементів в різних браузерах, а також розмірах робочого простору пристроїв.

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

Розглянемо нижче декілька популярних інструментів для цього.

Adobe Illustrator

Adobe Illustrator – це графічний редактор,що використовується  для обробки векторної графіки. Він використовується під час створення зображень від логотипів компаній до макетів веб-сайтів і великих рекламних щитів.

На відміну від растрових зображень, в яких інформація зберігається в сітці окремих точок, Illustrator під час створення форм використовує математичні рівняння, що дозволяє міняти розміри таких зображень без втрат в розширенні.

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

Розглянемо ряд загальних переваг:

• великий набір інструментів для створення графічних примітивів;
• широкий спектр інструментів для оформлення і трансформації об'єктів (інструменти для створення перспективи з використанням сітки, об'єднання і роз'єднання фігур, регулювання ширини, деформації і зміни форми);
• зображення, зроблені в Illustrator, не займають великого об'єму пам'яті.

Проте  є декілька зауважень до цього редактора:

• обмежена кількість загальнодоступних напрацювань, різноманітних надбудов і шаблонів;
• програма досить складна і орієнтована на використання досвідченими дизайнерами, в основному, при роботі на «якість» продукції, що випускається;
• Illustrator досить вимогливий до ресурсів ПК.

Adobe Photoshop

Adobe Photoshop – один із популярних графічних редакторів, що має велику кількість функцій, що дозволяють позитивно впливати на якість роботи.

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

До переваг можна віднести:

• відображення контрастів, тону, кольорів і так далі у вигляді графіків;
• можливість кастомізації пензлів;
• широкий спектр інструментарію.

У свою чергу, до недоліків можна віднести:

• складність його освоєння для користувача-початківця;
• велику вартість продукту;
• обмежену підтримку версій ОС (встановлення  на Linux через допоміжне ПЗ).

PerfectPixel

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

Photoshop:

Illustrator:

Перевірка кольору 

Окрім накладання шарів зручною перевіркою є перевірка коду кольору, що використовується. Визначити колір елементу можна за допомогою інструменту "піпетка". В результаті отримуємо код кольору, який має бути використаний, а потім порівнюємо його з кольором на HTML-сторінці.

Таким чином, виходить колір R182 G162 B127. Якщо колір відрізняється від макету, перевірити ще раз відтінок або надати колір не в RGB- форматі (наприклад, в HEX і навпаки) допоможе онлайн-конвертер кольорів з результатів пошуку.

Визначення відстані між елементами

Щоб виміряти відстань між елементами, необхідно вибрати інструмент «лінійка» та протягнути лінію від початкової до кінцевої точки.

На закінчення хотілося б відмітити, що тестування верстки «на око» не завжди дає повне розуміння того, чи виконаний продукт згідно до  макету або ні. Для повноцінного тестування верстки рекомендується застосування інструментів і наявність макетів. Якщо такі (макети) не були надані в завданні, варто додатково  уточнити про них у менеджера.