Новости
- Крок 1. Візуальна оцінка
- Крок 2. Взаємодія ресурсу з користувачем.
- Крок 3. Реакція контейнерів на додавання різного об'єму контенту
- Крок 4. Узгодження зі специфікаціями
- Крок 5. Помилка 404
- Крок 6. Javascript
- На замітку
У статті систематизовано покрокова інструкція перевірки верстки на наявність помилок, багів і інших недоліків.
Після завершення створення проекту необхідна обов'язкова перевірка на наявність помилок, відповідність зі стандартами і кросбраузерності. Все це дуже важливо, тому цей процес необхідно систематизувати та впорядкувати. Коли така шпаргалка під рукою - важко упускати будь-які деталі. Для зручності розділимо алгоритм перевірки на кілька етапів.
Крок 1. Візуальна оцінка
Для початку підберемо браузер, в якому будемо проводити перевірку. Пропоную в якості прикладу вибрати Chrome - один з найпоширеніших і адекватних браузерів.
- Відразу шукаємо явні косяки: не відображається картинка, їде верстка, втрата стикування квітів та інше.
- Далі слід перевірити збіг кінцевого продукту з макетом - чи всі нюанси дизайну були враховані.
- Після чого необхідно перевіряти вирівнювання, все відступи повинні бути однакові або пропорційні. Це надає акуратність і привабливість сайту. Особливу увагу потрібно приділити формам.
- Наступна перевірка полягає в поведінці ресурсу при різних дозволах - показник адаптивної верстки. Дозвіл можна змінювати через масштабування екрану браузера або за допомогою інструментів веб-панелі браузера:
- не повинно бути ніяких зламів;
- відсутність скролів при зміні дозволу;
- фон повинен бути цілісним при великих розмірах екрану.
- Далі йде перевірка ресайз текстового поля для повідомлень (тег textarea ). Зміна його розмірів не повинно кардинально змінювати розташування елементів на сторінці.
- Перевірка підсвічування полів при визначенні для них фокуса.
- Повинна бути обов'язкова підсвічування полів при неправильному їх заповненні.
Крок 2. Взаємодія ресурсу з користувачем.
Перевірка повинна продовжуватися в тому ж браузері.
- Можливість виділення і копіювання контенту.
- Перевірка кликабельности активних елементів і правильність їх роботи (кнопки і посилання).
- Чи можна перевизначити фокус для поля при натисканні мишкою в ньому (або при використанні гарячих клавіш).
- Перевірка зовнішнього вигляду курсора при наведенні на різні елементи за типом і призначенням. Зовнішній вигляд курсору управляється через властивість cursor . При наведенні на текст або поля форми покажчик миші повинен виглядати як курсор, при ресайз або наведенні на кнопки / посилання в формі руки, а для інших випадків - в стандартному вигляді.
- Для всіх активних елементів повинна бути передбачена відповідна реакція на наведення.
- Натискання на вміст тега label повинен привласнювати фокус відповідному полю.
- Обов'язкова наявність атрибутів title у елементів з не явним призначенням або якщо об'єкт несе будь-якої логічний зміст.
- Обов'язкова наявність клікабельно логотипу, який переносить користувача на головну сторінку.
- Перевірка особливості роздруківки сторінки, якщо це було передбачено в технічному завданні.
Крок 3. Реакція контейнерів на додавання різного об'єму контенту
Браузер змінювати не рекомендується.
- Використовуючи рибний текст, перевіряємо, як розтягуються різні блоки, в яких буде розміщуватися контент. Кількість контенту не має ламати верстку.
- Проводиться обов'язкова перевірка за шаблоном з використанням реальної інформації.
Крок 4. Узгодження зі специфікаціями
Найнадійніший спосіб перевірки коду на відповідність до загальноприйнятих стандартів - офіційний ресурс W3C.
- Після перевірки не повинно бути ніяких повідомлень про помилки у вікні валідатора. Винятком можуть послужити ті випадки, коли на помилку верстальник йде усвідомлено і у нього є на це вагомі причини.
- Для коду CSS важливо, щоб правильно використовувався синтаксис звернень.
- Потрібно перевірити таблицю стилів на наявність хаков - їх потрібно виносити окремими документами.
- Налагодити коректну мікророзмітки.
Крок 5. Помилка 404
Потрібно упевнитися, що на сайті не виникає помилок 404.
Крок 6. Javascript
- Перевірка коду на наявність помилок, що призводить до некоректного коду.
- Перевірити роботу Javascript на відповідність з поставленими завданнями, його функціональність.
- У коді скрипта не допускається наявність console.log ().
Крок 7. Перевірка коду
- Дотримання вимог технічного завдання для коду.
- Усунути закоментувавши код з усіх його носіїв.
Крок 8. Показники кросбраузерності
Виконати перевірку за всіма вищезазначеними показниками в найпопулярніших браузерах. При перевірці на сумісність в інших програмах в першу чергу слід звертати увагу на такі питання, як:
- Візуалізація коду.
- Взаємодія ресурсу з користувачем.
- Функціональні можливості відповідно до вимог замовника.
На додаток до цих пунктів для IE потрібно перевірити:
- Масштабованість.
- Реакція на різні дозволи.
- Фокусування необхідних блоків.
- Відсутність помилок при використанні js-коду.
Окремо для роботи ресурсу на планшетах потрібно вивчити:
- Роботу при альбомної орієнтації
- Взаємодія ресурсу з користувачем в умовах роботи планшета.
На замітку
Даний алгоритм передбачає загальний випадок. При деяких особливостях технічного завдання список обов'язкових пунктів перевірки може значно збільшиться.
Оцінок: 2 (середня 5 з 5)