Інформатика

Проектування та верстка веб-сторінок. Адаптивна верстка. Кросбраузерна оптимізація сторінок сайту.

Пригадаємо!

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

Прочитайте!

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

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

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

Для чуйного дизайну ширина основного контейнера сайту задається в %, при цьому вона може бути дорівнює як 100% ширини вікна браузера, так і менше. Ширина стовпців сітки також задається в %. В адаптивному дизайні ширина основного контейнера і стовпців сітки фіксується за допомогою значень в px.

Кросбраузерна оптимізація сторінок сайту

Тестування кросбраузерної сумісності (важлива складова частина розробки сайту) – це перевірка того, як виглядають всі веб-сторінки при перегляді в різних браузерах (наприклад, в таких веб-переглядачах як Chrome, Firefox або Internet Explorer). Зрозуміло, що під абсолютно всі браузери адаптувати сайт не вийде, але можна почати з тих, якими користуються більшість відвідувачів вашого (дізнатися це можна, наприклад, зі статистики Google Analytics).

Чому важливо тестувати кросбраузерну сумісність?

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

Що впливає на труднощі при перегляді мого сайту?

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

Ось основні елементи, які можуть викликати проблеми із відображенням сайту:

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

Основні інструменти для тестування кросбраузерної сумісності

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

• Browserling
• Browsershots
• net Browser Sandbox

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

Для професійних цілей підійдуть тільки платні рішення. Практично всі вони вимагають наявності підписки, але надають невеликий безкоштовний тестовий період. До таких ресурсів можна віднести: BrowserStack, Cross Browser Testing, Sauce Labs.

Для визначення підтримки елементів HTML5 та CSS3 в різних версіях браузерів скористайтеся сайтом Can I use.

Закріплення нового матеріалу. Робота за комп’ютером

Повторимо правила ТБ в кабінеті інформатики та при роботі за комп’ютером.

Завдання

• Відкрийте сайт із списками, створений на попередніх уроках.
• Завантажте сайт https://www.w3schools.com/.
• На вкладці HTML Блоки поексперементуйте з різними видами блоків.
• Використовуючи готові приклади застосуйте кілька блоків до свого сайту.
• Збережіть проект у власній папці.
• Спробуйте відкрити власний сайт з різних браузерів та різних пристроїв.

Продемонструйте виконане завдання вчителю.