1 of 20

Ергономіка розміщення відомостей на веб-сторінці�Практична робота 8

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

Урок 30

10

2 of 20

Ергономіка у веб-дизайні. �просування веб-сайтів

Розділ 4 § 30

Ергономіка — наука, яка вивчає особливості діяльності людини з метою забезпечення її ефективності, безпеки та комфорту.

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

10

3 of 20

Елементи ергономіки у веб-дизайні

Розділ 4 § 30

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

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

10

4 of 20

Елементи ергономіки у веб-дизайні

Розділ 4 § 30

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

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

10

5 of 20

Елементи ергономіки у веб-дизайні

Розділ 4 § 30

Ергономіка сайту стосується:

Розміщення

відомостей на

веб-сторінках

Системи

навігації

Оформлення

сторінок

Швидкості їх

завантаження

10

6 of 20

Сайти для користувачів з особливими потребами

Розділ 4 § 30

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

Для осіб зі зниженим слухом

тих, хто не володіє іноземною мовою

або

Стануть у нагоді субтитри — текстовий супровід унизу вікна перегляду відео.

10

7 of 20

Сайти для користувачів з особливими потребами

Розділ 4 § 30

Щоб додати субтитри, слід підготувати текстовий файл спеціального формату VTT, а потім у тег <video> вкласти один або більше тегів <track> (по одному для кожної з мов, якими доступні титри).

10

8 of 20

Сайти для користувачів з особливими потребами

Розділ 4 § 30

Файл mytitles_uk.vtt (між блоками титрів має бути пропущено по одному рядку):

WEBVTT

00:01.000 --> 00:05.000

Бурхлива річка (титри протягом перших 5 секунд)

00:10.000 --> 00:13.000

Титри можна записувати в декілька рядків.

10

9 of 20

Сайти для користувачів з особливими потребами

Розділ 4 § 30

Фрагмент HTML-файла, в якому до відео додаються титри з наведеного файла mytitles_uk.vtt:

<video controls="controls">

<source src="video/myfilm.mov">

<track src="video/mytitles_en.vtt" srclang="en" label="English" default>

<track src="video/mytitles_uk.vtt" srclang="en" label="Українська">

</video>

10

10 of 20

Сайти для користувачів з особливими потребами

Розділ 4 § 30

Розглянемо деякі атрибути тегу <track>:

(обов’язковий атрибут) — шлях до файла формату VTT з титрами;

src

двобуквений код мови титрів (uk — українська, en — англійська, de — німецька, ru — російська тощо);

srclang

назва мови для виведення в списку для вибору;

label

ознака мови, яка буде використана, якщо користувач нічого не змінюватиме. Допускається лише в одному з тегів <track>.

default

10

11 of 20

Сайти для користувачів з особливими потребами

Розділ 4 § 30

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

10

12 of 20

Пошукова оптимізація�та просування веб-сайтів

Розділ 4 § 30

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

10

13 of 20

Пошукова оптимізація�та просування веб-сайтів

Розділ 4 § 30

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

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

10

14 of 20

Розгадайте ребус

Ергономіка

Розділ 4 § 30

10

15 of 20

Розгадайте ребус

Просування

Розділ 4 § 30

10

16 of 20

Питання для самоперевірки

Розділ 4 § 30

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

10

17 of 20

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

Проаналізувати

§ 30, ст. 170-172

Розділ 4 § 30

10

18 of 20

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

Практична робота 8

Розробка простого веб-сайта

Розділ 4 § 29

10

19 of 20

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

Розділ 4 § 30

Сторінка

171-172

10

20 of 20

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

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

Урок 30

10