1 of 15

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

За навчальною програмою 2018 року

Урок 11

10

(11)

2 of 15

Актуалізація опорних знань і життєвого досвіду

Розділ 2 § 11

Розкажіть про свої досягнення з вивчення розділу «Проектування та верстка веб-сторінок»

Я зробив...

Тепер я знаю...

Я зрозумів...

Я навчився...

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

3 of 15

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

Розділ 2 § 11

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

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

4 of 15

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

Розділ 2 § 11

Ідентичність - відсутність розвалів верстки і здатність відображати матеріал з однаковим ступенем читабельності.

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

5 of 15

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

Розділ 2 § 11

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

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

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

6 of 15

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

Розділ 2 § 11

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

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

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

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

7 of 15

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

Розділ 2 § 11

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

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

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

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

8 of 15

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

Розділ 2 § 11

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

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

Browserling

Browsershots

turbo.net Browser Sandbox

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

9 of 15

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

Розділ 2 § 11

Потрібно використову-вати ті елементи у верстці html-коду, що у всіх необхідних браузерах відобража-ються однаково.

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

10 of 15

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

Розділ 2 § 11

Префікси браузерів при описі в CSS3:

браузери Chrome, Safari;

-webkit-

браузер Mozilla Firefox

-moz-

браузер Internet Explorer

-ms-

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

11 of 15

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

Розділ 2 § 11

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

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

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

12 of 15

Запитання для рефлексії

Розділ 2 § 11

  1. Чи досяг я поставлених завдань уроку?
  1. Що на уроці в мене виходило найкраще?
  1. Над чим мені потрібно ще попрацювати?
  1. Про які успіхи на уроці слід розповісти батькам?

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

13 of 15

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

Розділ 2 § 11

Написати есе

«Життя без кросбраузерності»

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

14 of 15

Працюємо за комп’ютером

Розділ 2 § 11

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

15 of 15

Дякую за увагу!

За навчальною програмою 2018 року

Урок 11

10

(11)