#9. Тестування та відлагодження коду

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

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

Уніфікація та стандартизація значно зменшують часові та грошові витрати і сприяють успішній інтеграції з іншими ресурсами Веб: АРІ зовнішніх додатків, проектів та сервісів. Код з помилками – зазвичай, є ознакою непрофесійності розробника.

Чим складніше сайт, тим більше часу потрібно для його перевірки і налагодження. Залежно від специфіки проекту, для тестування сайту може бути виділено до 50% від загального часу.

Для нескладних (невеликих) проектів, зазвичай, достатньо виконати стандартні перевірки:

Перевірка (валідація) коду на відповідність до стандартів.
Перевірка функціональності відповідно до вимог технічного завдання.
Перевірка користувацького інтерфейсу на зручність використання.
Перевірка сумісності – кросбраузерність, кросплатформність та адаптивність.
Перевірка зручності використання незалежними особами.

Перевірка коду HTML

Стандартна розмітка базових елементів сторінки

<!doctype html>

<html>

  <head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=0">

	<title>Веб-технології  та веб-дизайн</title>

	<link rel="icon" href="images/favicon.png" type="image/x-icon">

	<link href="css/mystyle.css" rel="stylesheet">

  </head>

  <body>

    <h1>Лабораторна №9</h1>

    <p><strong>Мета роботи:</strong> Ознайомитися з основними етапами тестування веб-сайту</p>

  </body>

</html>

Елемент <head>

Наявність елемента <!doctype html>, який призначений для відображення сторінки у відповідності до стандартів.

Новый doctype для HTML5 надає право використовувати сучасні елементи (canvas, header, article,...), певні старі рішення, що вийшли з обігу (наприклад, font, center, embed тощо), а також код в XHTML-синтаксисі.

Кодування UTF-8. Це універсальне кодування повинне використовуватися для всіх файлів: *.html, *.css та у файлах *.js.

Якщо файли в різних кодуваннях - можуть бути проблеми. Елемент кодування має бути самим першим в елементі <head>, інакше браузер при завантаженні може невірно відобразити кириличний текст на вкладці або вікні браузера.

Елемент meta viewport. Viewport - це видима ділянка веб-сторінки, що визначається розміром екрану пристрою.

Метатег viewport вказує браузерам на те, в якому масштабі необхідно відображати користувачеві видиму область веб-сторінки і призначений в основному для адаптивних сайтів

Інформаційні мета-теги. Містять опис сторінки, ключові слова, інформацію про автора

Службовий мета-тег Robots. Містить вказівки для роботів пошукових систем щодо прохання чи заборони індексування сторінки та існуючих посилань.

Елемент <title> виводить заголовок сторінки на вкладці браузера.

Елемент <link> призначений для посилання на ресурси, що представлені у файлах: стилі, фавіконка, шрифти.

Елемент <script >

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

На сьогодні за сучасними стандартами скрипти підключаються наприкінці коду перед кінцевим елементом </body>

Елемент <body>

Верстка відповідно до стандартів HTML5.

Дотримання семантики HTML5, використовувати семантичні елементи: header, footer, aside, nav, section, article тощо.

Використання елементів за їх призначенням (div для блоків, ul для списків і т.д.).

Форматування HTML коду має бути ієрархічним, відступ повинен становити 4-6 пробілів. У разі нечіткого форматування коду привести до чіткої візуальної структури

Доповнити суттєві блоки коду коментарями початку та кінця блоку.

Система сіток реалізується за правилами Bootstrap, Grid чи Flexbox. Не можна будувати сітку за допомогою таблиць і позиціонування (за винятком особливих фрагментів сторінки).

Правильна організація структури заголовків H1-H6. На сторінці не повинно бути двох заголовків H1.

Значення всіх атрибутів HTML тегів повинні бути вкладені в подвійні лапки (там де це можливо).

Для всіх картинок необхідно визначати атрибут "alt".

Для посилань на e-mail необхідно ставити атрибут "mailto", для посилань на телефон - атрибут "tel".

Забороняється використовувати атрибут "id" з метою простого оформлення стилів.

Посилання на інші ресурси мають бути з target=«blank».

Валідація коду

Валідатор розмітки перевіряє HTML на відповідність до специфікацій та знаходить помилки у коді.

Валідатор дерева коду вибудовує структуру сторінки, перевіряє розмітку на помилки и показує ієрархію заголовків.

Вимоги до CSS

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

Для назв класів краще вживати англійську мову, не рекомендується використовувати трансліт.

Назви блоків і елементів повинні визначатися за їх функціональним призначенням і візуальном відображенням. Не рекомендується визначати назви класів за назвою елементів (наприклад <div class=”div”>), за винятком нових елементів HTML5 таких як "header", "footer", "nav", "video" тощо.

Каскад стилів повинен бути зведений до мінімуму (.block .box .item .item-element).

Не рекомендується прив'язувати стилі до елементів (наприклад, замість ul.block-list вказувати .block-list).

Кожну CSS властивість зазначати на окремому рядку. Обов’язково завершувати опис властивості символом крапка-з-комою (;).

Для нульових значень не потрібно вказувати розмірні одиниці (неправильно: 0px, правильно: 0).

Не вживати без потреби властивістю !important, лише у випадку, коли немає технічної можливості створити обгортку для елемента.

Для підтримки старих браузерів необхідно додавати відповідні властивості з префіксами (–webkit-, -moz-, -ms-).

Необхідно використовувати скорочені CSS-властивості, там де це можливо.

Для елементу <body> завжди вказувати колір фону (для білого фону background: #fff;).

Ховер-ефекти на текстових посиланнях мають реагувати на :hover, :active и :focus.

Стилі для зовнішнього вигляду кнопки мають однаково відображатися для елементів "a" і "button".

Логотип в верхньому хедері є посиланням на головну сторінку на всіх сторінках сайту.

Для застосування прозорості кольору необхідно використовувати властивість rgba, а не opacity (правильно rgba(0,0,0,0.5), неправильно "opacity:0.5".).

Для кожного застосованого веб-шрифту зазначити подібний стандартний або родовий шрифт (на випадок неможливості відображення даного веб-шрифту). В коді застосований шрифт повинен називатися як і його оригінальна назва.

font-family: 'Raleway', Arial, sans-serif;

Для елементу img застосувати властивість max-width:100%; Це дозволить браузеру автоматично підлаштувати до розмірів батьківського елементу зображення великого розміру.

Валідація коду

Валідатор CSS вказує на помилки у написанні CSS-правил, невірно зазначені властивості або їх неприпустимі значення.

Вимоги до JavaScript та плагінів

Якщо багато JavaScript коду, то його необхідно винести в окремий файл.

Класи, які використовуються в JavaScript повинні починатися з префікса "js-" і не повинні використовуватися для оформлення стилів.

Обов'язкова перевірка в браузері на js-помилки (клавіша F12 для всіх браузерів).

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

Вимоги до зображень

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

Для фотографічних чи великих зображень використовують формат .jpg (progressive jpeg), для зображень з прозорим фоном .png.

Всі іконки однієї групи, повинні бути однакової висоти і ширини.

Для назв файлів зображень використовувати змістовність. Варто для назв зображень однієї групи застосовувати префікси (наприклад, icon-home.svg, icon-phone.svg, icon-service.svg).

Для збереження зображень використовувати різні тематичні папки (images – зображення що стосуються дизайну сторінок, images/icons – іконки, catalog – фотографії продукції).

Перевірка функціональності готового сайту

Відповідність зверстаної сторінки до макету. Для цього можна скористатися інструментом Pixel Glass.

На всіх сторінках є заголовок h1 та контент. Текстові фрагменти містять відповідний текст (граматично і стилістично вірний), а не текст-заповнювач (Lorem ipsum dolor sit amet, consectetur adipiscing elit).

Форматування текстів і їх стиль є одноманітним. Футер незаповнених сторінок має триматися низу вікна браузера.

Відображення обраних веб-шрифтів у потрібному написанні і розмірах.

Картинки, відеофайли, аудіофайли доступні і коректно відображаються / програються. Коректне відображення віджетів та кнопок соціальних мереж.

Динамічні елементи плагінів (слайдер, скроли, галереї тощо) працюють без помилок і вірно виконують свої функції.

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

Реакція посилань на наведення курсору (зміна кольору, підкреслення тощо).

Головна навігація працює коректно і є зрозумілою. Випадні меню є видимими і доступними.

Доступність всіх сторінок сайту з головної навігації. Наявність посилання на головну сторінку (логотип або явне посилання).

Наявність копірайтів власників сайту з їх контактними даними та картою розміщення.

Перевірка інтерфейсу на зручність використання

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

Оцінити і перевірити юзабіліті сайту можна за допомогою наступних пунктів:

Структура.
Важлива інформація.
Дизайн.
Навігація.
Швидкість завантаження.

Структура сайту. Проста і зручна структура відіграє основну роль при взаємодії веб-порталу з його відвідувачами. Користувачі мають інтуїтивно зрозуміти, куди натискати і що ж станеться після натискання, на яку сторінку він перейде і що він там побачить.

Важлива інформація на сайті. Важлива, потрібна і корисна інформація повинна відразу кидатися в очі (протягом перших 3 секунд перебування на сайті). Такого роду інформацію необхідно розміщувати на помітних місцях - в хедері, а деяку контактну інформацію навіть дублювати в футере.

Дизайн сайту. За дизайном можна оцінити зручність веб-майданчика.

Загальне сприйняття ресурсу легке.

Графічні елементи прості, а їх розташування - продумане.

Приємна і дотична колірна гама.

Елементи керування розташовані логічно.

Текст відповідає дизайну.

Сучасність і креативність.

Навігація по сайту. Важливо, щоб вона була простою, зручною та однаковою для всіх сторінок.

У хедері розміщувати логотип компанії, який є посиланням на головну сторінку сайту.

Розміщувати на всіх сторінках головне меню.

Посилання підкреслюються, виділяються іншим кольором або шрифтом.

У хедері і футере розміщувати розділ "Контакти". Всілякі контактні дані компанії (адреса, телефони, електронна пошта, Skype, Viber тощо) повинні бути абсолютно прозорими для відвідувачів ресурсу і ставати помітними протягом перших секунд перебування на сайті.

На всіх сторінках ресурсу вказується назва поточного розділу, часто це заголовок h1.

Швидкість завантаження сайту. Користувачі погано сприймають повільне завантаження сайту. Варто оцінити швидкість завантаження ресур сів сайту (скрипти, неоптимізована графіка, анімовані елементи, мультимедія, інформація з зовнішніх ресурсів) і виправити помічені проблеми. Показник швидкості завантаження на комп’ютері та мобільних пристроях повинен бути не менше як 80%, нормальний показник 95−100%. Проаналізувати швидкість можна за допомогою сервісів: Google PageSpeed, Pingdom Website Speed Test, Load Impact.

Перевірка на сумісність

Кросбраузерність

Кросбраузерність - це властивість веб-сайту ідентично відображатися і функціонувати у всіх популярних браузерах. На сьогодні прийнятно здійснювати кросбраузерну перевірку для останніх версій браузерів.

Певна властивість CSS може підтримуватися одним браузером і не працювати в іншому, особливо новітні спецификації. На сервісі caniuse можна отримати актуальну інформацію, щодо використання новітніх властивостей CSS.

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

-o- — префікс для браузера Опера
-moz- — префікс для браузера Mozilla
-ms — префікс для Internet Explorer
-webkit- — префікс для Safari

Приклад з вендорними префіксами:

-webkit-transition-duration:0.6s;
-moz-transition-duration:0.6s;
-o-transition-duration:0.6s;
-ms-transition-duration:0.6s;
transition-duration:0.6s;

Прийнято на початку писати властивість з префіксами, наприкінці – без.

Стандартні стилі браузера. Різні браузери мають різні налаштування стилів за замовченням для кожного елемента HTML. Тобто, розміри шрифтів, товщина та відступи між елементами можуть різнитися залежно від браузера. Якщо в стилях така властивість не визначена, браузер застосовує власні налаштування і тоді сторінка буде відображатися не вірно. Для обнулення стилів браузерів можна використати технології reset.css и normalize.css.

Адаптивність

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

Для початківців рекомендується використання Bootstrap, система сіток якого допоможе зрозуміти та реалізувати адаптивний сайт. Досвідчені розробники можуть застосовувати інші підходи (Grid, Flexbox), які потребують достатнього досвіду та знань.

Швидко перевірити адаптивність можна зменшенням вікна браузера. Але краще за клавішею F12 відкрити в браузері Інструменти розброника і натиснути кнопку "Режим адаптивного дизайну". Після цього можна змінювати розміри як мишкою, так і задавати певну ширину екрану чи обирати марку мобільного пристрою.

Інструменти розробника в браузері

Кожен сучасний інтернет-браузер оснащений потужними інструментами для веб-розробника. Ці інструменти дозволяють робити різні речі, від вивчення HTML, CSS і JavaScript завантаженої сторінки до відображення часу завантаження сторінки, виявлення помилок та відображенню браку в певних ресурсах.

Кросплатформність

Кросплатформність - це коректне відображення сайту на різних операційних системах (Windows, IOS, Android). Після ретельної перевірки на кросбраузерність і адаптивність, варто перевірити відображення сайту на iPhone і iPad.

Відео лабораторної роботи

Порядок роботи

Відповідно до наверених етапів тестування здійснити аудит HTML та CSS коду. Видалити, фрагменти коду, що не використовуються, стилі, що зазначені в HTML-коді перенести у відповідні CSS-файли. Здійснити перевірку у відповідних валідаторах і виправити виявлені помилки.
Додати до HTML-коду коментарі початку та закінчення незалежних блоків(). В CSS-коді впорядукати разом стилі, що відносяться до одного модуля і також поставити коментар з назвою блоку, до якого відносяться стилі (/*Main Header */)
HTML та CSS-код привести до чіткої візуальної структури). У разі використання мінімізованих файлів стилів - привести їх до нормального вигляду.
Ознайомитися з засобами відлагодження в різних браузерах (зазвичай, вони зашиті на F12). Здійснити перегляд для різних розмірів екранів, в Інспекторі внести зміни в HTML та CSS код і подивитися результат змін. У разі вданого результату - внести відповідні зміни на сторінці.
Завантажити виправлені сторінки на хостинг і перевірити швидкість завантаження сторінки. Виправити причини гальмування.
Переглянути сторінки в популярних браузерах та на різних мобільних пристроях. Прагнути до адаптивності сторінок і відповідного розміру шрифтів та блоків. У разі виявлення недоліків - їх виправити.
Надати іншій особі посилання на сторінки для незалежного оцінювання зручності та легкості використання. У разі суттєвих зауважень - виправити виявлені недоречності.

Зміст звіту

Назва та мета виконання лабораторної роботи.
Скріншоти виконаних робіт та короткий опис здійснених перевірок.
У висновку оцінити актуальність етапів тестування, зручність використання та можливості наведених сервісів тестування.

Контрольні питання

Які основні етапи тестування слід здійснити після розробки сайту?
Чому важливим є валідація коду сторінки?
Які глобальні завдання ставить перед собою Консорціум W3C? Які функції виконує валідатор Консорціуму W3C?
Назвіть кілька правил стосовно створення стилів для елементів сторінки.
На які речі треба приділяти уваги при тестуванні функціональності сайту?
Які завдання вирішує юзабіліті тестування сайту?
Чому перевірка кросбраузерності є суттєвою?
Для чого в браузерах реалізовано інструменти розробника, їх основне призначення? Який браузер надає найкращі на вашу думку інструменти розробника, в чому їх переваги?
Які підходи застосовуються до формування фізичної структури сайту?
Чим допоможе незалежне оцінювання сайту сторонньою особою?

Навчальна дисципліна

Кафедра САП, ІКНІ, НУЛП

Диски для звітності

Контакти