Валідація та збереження даних форм

Модуль «Веб-технології»

Урок 25

​

Повторюємо

1. Що таке веб-програмування?
2. Яка мова програмування є базовою�у веб-розробці?
3. Наведіть приклади використання JavaScript.
4. Як досягається інтерактивність сторінок?
5. Опишіть призначення форм.
6. З яких елементів складається форма? �

Пригадаємо

• різні браузери мають різні алгоритми обробки тегів мови розмітки гіпертексту та селекторів каскадних таблиць стилів, тому завжди існує потреба в перевірці правильності написання коду
• Консорціум Всесвітнього павутиння (англ. World Wide Web Consortium, W3C) — головна міжнародна організація, що розробляє й впроваджує технологічні стандарти для WWW. Заснована 1994 року Тімом Бернерсом-Лі.

Валідація (від латин. validus —�сильний)

«Визнання чогось законним, дійсним,�підтвердження на основі надання об’єктивних доказів того, що вимоги, призначені для конкретного використання або застосування, точно і в повному обсязі зумовлені, а мета досягнута»

Означення зі стандарту ISO 9000. �

Валідація сайта

1. перевірка на відсутність синтаксичних помилок,
2. правильність вкладеності тегів.
3. Правильність і дійсність посилань
4. Інші критерії

​

Валідація сайта дозволяє стежити за правильним відображенням сайта в різних браузерах

Пошукові системи віддають перевагу сайтам із�валідним HTML-кодом, оскільки роботи пошукових систем розпізнають html-код за тими самими параметрами, що й браузери.

Приклади

• Якщо не закрити тег або припуститися помилки в коді, у подальшому�одна і та сама сторінка може відображатися в різних браузерах �по-різному. �

• Від валідації синтаксису залежить коректність�відображення всіх елементів сайта. �

Найпоширеніші помилки

Тег не закритий

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

Використання атрибута style

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

Порушення вкладеності елементів �

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

Найпоширеніші помилки

Використання вкладеного CSS

Коли каскадні таблиці стилів вбудовані у�код html. Це збільшує обсяг коду та ускладнює його налагодження. Найкраще стильові описи зберігати�в окремих файлах. �

Missing DOCTYPE

якщо вміст�елемента <!DOCTYPE> і сам елемент записані в нижньому регістрі.

Даний елемент є залежним від регістру тегом � �

�equiredattribute "alt" notspecif ed -обов’язковий атрибут «alt» не вказано.�

Бажано використовувати атрибут "alt". �

�Missing « » — відсутні лапки.�

Значення одного або декількох атрибутів записані не в лапках. �

Способи перевірки сайту

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

1 СПОСІБ  СЕРВІС VALIDATOR.W3.ORG

2 СПОСІБ. ПЛАГІНИ ДЛЯ БРАУЗЕРОВ

�

Перевірка на валідацію

Складові валідації сайту

• Перевірка HTML сайту
• Перевірка CSS сайту
• Перевірка коректності посилань
• Універсальна перевірка HTML, CSS та посилань
• Перевірка інтернаціоналізації (правильність зазначення кодування та мови сайту)

Інструменти валідації�консорціуму W3C 

Цікаво

• Bootstrap —безкоштовний набір інструментів з відкритим кодом, призначений для створення веб-сайтів та веб-додатків, який містить шаблони CSS та HTML для типографіки, форм, кнопок, навігації та інших компонентів інтерфейсу, а також додаткові розширення JavaScript

Цікаво

•  У Bootstrap часто використовуються так звані CSS-хакі, які забезпечують кращу сумісність сайту зі старими браузерами, вже не підтримують сучасні специфікації, але ще зустрічаються у користувачів. Ці CSS-хакі часто написані з формальними порушеннями стандартів. Але якщо їх прибрати, то формально ваш код буде бездоганним, а фактично сайт буде відображатися в старих браузерах неналежним чином.

Валідатори розділяють результат перевірки на помилки та попередження

• Помилки�

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

Попередження

• безглузда розмітка, зайві символи, якісь інші помилки, які швидше за все не зашкодять сайту, але йдуть всупереч прийнятим стандартам

Цікаво

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

​

Правила валідації форм �

можна задавати обов’язкові для заповнення поля форми або вказати, що в певні поля потрібно вводити дані тільки певного типу:

• тільки букви або тільки цифри;
• введення email-адреси;
• введення url-адреси тощо.

​

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

• �Після того як користувач сайта заповнив форму і відправив дані, вони потрапляють у спеціальний скрипт на сервері — обробник форми та можуть бути збережені в базі даних або відправлені електронною поштою �

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

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

Аналізуємо.Обговорюємо

1. Що таке валідація сайта?
2. Як валідність коду впливає на індексацію�сайта?
3. Наведіть приклади найбільш поширених�помилок.
4. Яка організація встановлює правила валідності коду?
5. Які інструменти пропонуються для перевірки на валідацію?
6. Наведіть приклади онлайн-сервісів перевірки на валідність ��

Завдання для самостійного виконання

1. Перегляньте відео,

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

Домашнє завдання

Створіть таблицю основних вимог до валідності сайту

Результат роботи надішліть вчителю на поштову скриньку