Презентація 10 клас Урок 30

Ергономіка у веб-дизайні.
просування веб-сайтів
Розділ 4 § 30
Ергономіка — наука, яка вивчає особливості діяльності людини з метою забезпечення її ефективності, безпеки та комфорту.
Ергономічний сайт — це сайт, що забезпечує необхідні зручності відвідувачеві, зменшує фізичну та психологічну втому, зберігає здоров'я та працездатність.

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

Елементи ергономіки у веб-дизайні
Розділ 4 § 30
Зазвичай сайт переглядають у напрямку згори донизу і зліва направо, тому найважливішу інформацію слід розміщувати вгорі сторінки.
Сторінки сайта з великим обсягом інформації повинні мати чітку структуру і не містити зайвих елементів.

Елементи ергономіки у веб-дизайні
Розділ 4 § 30
Ергономіка сайту стосується:

Сайти для користувачів з особливими потребами
Розділ 4 § 30
Поширення комп’ютерів та підвищення якості зв’язку розкрило нові можливості для людей з особливими потребами.
Для осіб зі зниженим слухом
тих, хто не володіє іноземною мовою
або
Стануть у нагоді субтитри — текстовий супровід унизу вікна перегляду відео.

Сайти для користувачів з особливими потребами
Розділ 4 § 30
Щоб додати субтитри, слід підготувати текстовий файл спеціального формату VTT, а потім у тег
вкласти один або більше тегів
(по одному для кожної з мов, якими доступні титри).

Сайти для користувачів з особливими потребами
Розділ 4 § 30
Файл mytitles_uk.vtt (між блоками титрів має бути пропущено по одному рядку):
WEBVTT
00:01.000 --> 00:05.000
Бурхлива річка (титри протягом перших 5 секунд)
00:10.000 --> 00:13.000
Титри можна записувати в декілька рядків.

Сайти для користувачів з особливими потребами
Розділ 4 § 30
Фрагмент HTML-файла, в якому до відео додаються титри з наведеного файла mytitles_uk.vtt:

Сайти для користувачів з особливими потребами
Розділ 4 § 30
Розглянемо деякі атрибути тегу
:
(обов’язковий атрибут) — шлях до файла формату VTT з титрами;
src
двобуквений код мови титрів (uk — українська, en — англійська, de — німецька, ru — російська тощо);
srclang
назва мови для виведення в списку для вибору;
label
ознака мови, яка буде використана, якщо користувач нічого не змінюватиме. Допускається лише в одному з тегів
.
default

Сайти для користувачів з особливими потребами
Розділ 4 § 30
Сайт має бути оптимізований для користування людьми з порушеннями зору або на екранах різних розмірів (забезпечений режимом змінення масштабу перегляду сторінки) без втрати функціональності.

Пошукова оптимізація
та просування веб-сайтів
Розділ 4 § 30
Щоб сайт став популярним, він повинен часто з’являтись на перших сторінках із результатами пошукових запитів, а матеріали оновлюватися.

Пошукова оптимізація
та просування веб-сайтів
Розділ 4 § 30
Пошукова оптимізація, або SEO (англ. Search Engine Optimization) — це напрямок діяльності, метою якого є підвищення положення сайта в результатах пошукових запитів.
Після того як сайт опубліковано в мережі, його слід додати в пошукову систему, яка проіндексує сайт, проаналізує його вміст і внесе дані про наповнення у свою базу даних.

Розгадайте ребус
Ергономіка
«Ребуси українською» © rebus1.com
Розділ 4 § 30

Розгадайте ребус
Просування
«Ребуси українською» © rebus1.com
Розділ 4 § 30

Питання для самоперевірки
Розділ 4 § 30
Що таке ергономіка?
Якими способами можна підкреслити структуру веб-сторінки?
Як додати титри до відео, розміщеного на веб-сторінці?
Опишіть розглянуті атрибути тегу
.
Що робить сайт доступнішим для людей із порушеннями зору?
Що таке «пошукова оптимізація»?

Домашнє завдання
Проаналізувати
§ 30, ст. 170-172
Розділ 4 § 30

Працюємо за комп’ютером
Практична робота 8
Розробка простого веб-сайта
Розділ 4 § 29

Працюємо за комп’ютером
Розділ 4 § 30
Сторінка
171-172