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

Веб-стандарти

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

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

Якщо веб-сторінка розроблена відповідно до стандартів, її буде легше знайти при пошуку. Структурна інформація, яка міститься в стандартизованих документах, полегшує доступ і оцінку інформації для пошукових машин і забезпечує більш точне індексування.
Використання веб-стандартів полегшує розпізнавання структури документа для серверного та клієнтського програмного забезпечення, що спрощує застосування на сайтах пошукових машин і забезпечує більш точні результати пошуку.
Стандарти розробляються для того, щоб навіть старі версії браузерів розпізнавали основну структуру документів. В цьому випадку браузер зможе відобразити основний зміст сайту, хоч і без сучасних доповнень. Те ж саме стосується і роботів, які збирають інформацію, що представлена на сайті, для пошукових машин та інших індексаторів.
Якщо код сторінки відповідає стандартам, це дає можливість підтвердити правильність сторінки з використанням одного із сервісів атестації. Контрольний пристрій обробляє документ і виводить список помилок, що полегшує їх пошук і виправлення і дозволяє заощадити час.
Документи, розроблені відповідно до стандартів, простіше конвертувати в інші формати, наприклад, в файли бази даних або документи Word. Це дозволяє використовувати документи, представлені у Всесвітній Павутині, в самих різних цілях та формах і спрощує адаптацію даних до нових систем обладнання або програмного забезпечення, в тому числі, телевізорів і мобільних пристроїв.

Без широкої відповідності до стандартів багато способів використання Інтернету були б просто неможливі. Підтримка універсальних стандартів дозволить Всесвітній Павутині вижити і буде сприяти тому, щоб її розвиток тривав сучасними темпами.

Перевірка даних на валідність

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

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

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

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

На об'ємних сайтах з десятками тисяч рядків вихідного коду HTML вичленувати проблемне місце досить складно, тому потрібно мати інструмент, який дозволяє показати код HTML і CSS вибраного фрагмента і провести над ним експерименти.

Більшість існуючих в Інтернеті сторінок, на жаль, не є валідними. Багато розробників вважають, що абсолютно суворе дотримання стандартів HTML - зовсім не обов'язкова умова того, щоб сайт вийшов якісним і ефективним.

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

Перевірка документів валідатором дозволяє уникнути дрібних прикрих помилок - неправильно вкладених тегів, пропущених дужок і лапок тощо.
Сучасні браузери підтримують стандарти W3C значно краще, ніж їх попередні версії. Ця тенденція зберігається, тому відповідність DTD набуває все більшої важливості для правильного відображення сторінок в браузерах.
Оскільки валідний код відповідає певним формальним правилам, його легше інтерпретувати й обробляти. Він швидше аналізується і відображається в браузері, з ним легше працювати пошуковикам і системам індексації.
Валідність коду гарантує сумісність сторінок не лише з існуючими, але і з майбутніми версіями браузерів. Тому, не доведеться переписувати ваші сторінки після виходу нової версії Internet Explorer або Opera.

Валідатор Консорціуму W3C

Валідатор Консорціуму W3C - кращий з існуючих. З його допомогою можна перевірити любий документ, що розташований в Інтернеті або на локальному комп'ютері.

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

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

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

Для перевірки веб-сторінок на наявність помилок і зауважень існує багато підходів. Умовно вони поділяються на онлайнові і локальні. Онлайнові призначені для перевірки сторінок за допомогою браузера через Інтернет, а локальні використовуються для перевірки документів на комп'ютері.

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

Перевірка сайту на безпеку

Observatory by Mozilla

Для покращення захисту сайтів та користувачів, Mozilla створила онлайновий сервіс Observatory by Mozilla, який сканує налаштування безпеки сайту і вказує на потенційно слабкі місця. Вихідний код інструменту відкритий. API та інструменти командного рядка доступні для всіх бажаючих розробників.

Observatory by Mozilla сканує широкий діапазон механізмів мережної безпеки і використовує стобалльную систему оцінювання.Результати тесту Observatory представляються у зрозумілому вигляді і доповнюються порадами щодо вдосконалення безпеки та посилання на корисні ресурси.

Оперативна діагностика сайту на віруси та вторгнення Rescan.Pro

Rescan.Pro - це безкоштовний веб-сканер сайтів, який допомагає веб-розробникам та власникам сайтів оперативно перевірити ресурси на віруси, взлам та інші проблеми безпеки менше ніж за 60 секунд. Якісно новий підхід (динамічний та поведінковий аналіз сайту) дозволяє ReScan.Pro ефективно виявляти наступні види загрози:

Приховані редиректи
Зашифровані шкідливі шрифти на сторінці
Небезпечні віджети, шкідливі вірусні партнерські скрипти та шпионські вставки
Вірусні завантаження та Drive-By атаки
Спам-посилання и спам-контент
Наявність сайту в бек-листах пошукових систем і антивірусів
Помилки на сайті
Дефейс сайту та інше

Не потрібно завантажувати та встановлювати додаткові програми. Не потрібний доступ через FTP/SFTP/SSH. Для сканування сайту достатньо вказати адресу сайту та натиснути "Перевірити".

Перевірка сайту на кросбраузерність

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

На сьогоднішній день більше 95% користувачів користується браузерами Opera, Mozilla Firefox, Google Chrome і Internet Explorer. Не можна з впевненістю сказати, що кожна програма відтворює HTML код або компілює CSS по-своєму, бо вони мають дотримуються певних правил. Але іноді, розробник щось упускає і браузер не відображає властивості елементів або, ж відображає їх некоректно.

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

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

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

Встановити браузери Opera, Mozilla Firefox, Google Chrome і Internet Explorer. Ознайомитися з засобами відлагодження в різних браузерах (зазвичай, вони зашиті на F12).
Ознайомитися з засобами відлагодження в різних браузерах.
Додати до браузера Mozilla Firefox плагін Firebug. Дослідити його роботу на прикладі власного сайту. Розглянути код чужої сторінки, витягнути цікаві стилі чи HTML фрагменти, застосувати у власній розробці.
Протестувати тестові сторінки у валідаторі, виправити виявлені помилки.
Перевірити сторінки на кросбраузерність, зробити скріншоти сторінок в обраних браузерах. У разі виявлення недоречностей - виправити.

Зміст звіту

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