Ергономіка розміщення відомостей на вебсторінці�Практична робота 8
2-ге видання, оновлене
Урок 30
Інформатика
teach-inf.com.ua
за підручником
Бондаренко О.О. та ін.
Рівень стандарту 10(11)
Ергономіка у вебдизайні. Просування вебсайтів
Наука, яка вивчає особливості діяльності людини з метою забезпечення її ефективності, безпеки та комфорту, називається ергономікою.
Ергономічний сайт — це сайт, що забезпечує необхідні зручності відвідувачеві, зменшує фізичну та психологічну втому, зберігає здоров'я та працездатність.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Елементи ергономіки у вебдизайні
Сайт, яким зручно користуватися, спонукає відвідувачів/відвідувачок повернутися ще раз. Розглянемо, від яких саме моментів це залежить.
Сайт переглядають на екрані, тому, добираючи дизайн, слід враховувати особливості сприйняття людиною візуальної інформації.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Елементи ергономіки у вебдизайні
Зазвичай сторінки сайту переглядають згори донизу і зліва направо, тому найважливішу інформацію слід розміщувати вгорі.
Сторінки з великим обсягом
інформації повинні мати чітку структуру і не містити зайвих елементів.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Елементи ергономіки у вебдизайні
Ергономіка сайту стосується:
Розміщення
відомостей на
веб-сторінках
Системи
навігації
Оформлення
сторінок
Швидкості їх
завантаження
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Сайти для користувачів з особливими потребами
Поширення комп’ютерів та підвищення якості зв’язку розкрило нові можливості для людей з особливими потребами.
Для осіб зі зниженим слухом
тих, хто не володіє іноземною мовою
або
Стануть у нагоді субтитри — текстовий супровід унизу вікна перегляду відео.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Сайти для користувачів з особливими потребами
Щоб додати субтитри, слід підготувати текстовий файл спеціального формату VTT, а потім у тег <video> вкласти один або більше тегів <track> (по одному для кожної з мов, якими доступні титри).
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Сайти для користувачів з особливими потребами
Файл mytitles_uk.vtt (між блоками титрів має бути пропущено по одному рядку):
WEBVTT
00:01.000 --> 00:05.000
Бурхлива річка (титри протягом перших 5 секунд)
00:10.000 --> 00:13.000
Титри можна записувати в декілька рядків.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 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>
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Сайти для користувачів з особливими потребами
Розглянемо деякі атрибути тегу <track>:
(обов’язковий атрибут) — шлях до файлу формату VTT з титрами;
src
двобуквений код мови титрів (uk — українська, en — англійська, de — німецька, ru — російська тощо);
srclang
назва мови для виведення в списку для вибору;
label
ознака мови, яка буде використана, якщо користувач нічого не змінюватиме. Допускається лише в одному з тегів <track>.
default
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Сайти для користувачів з особливими потребами
Сайт має бути оптимізований для користування людьми з порушеннями зору або на екранах різних розмірів (забезпечений режимом змінення масштабу перегляду сторінки) без втрати функціональності.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Пошукова оптимізація та просування вебсайтів
Щоб сайт став популярним, він повинен часто з’являтись на перших сторінках із результатами пошукових запитів, а матеріали оновлюватися.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Пошукова оптимізація та просування вебсайтів
Пошукова оптимізація, або SEO (англ. Search Engine Optimization) — це напрямок діяльності, метою якого є підвищення положення сайту в результатах пошукових запитів.
Після того як сайт опубліковано в мережі, його слід додати в пошукову систему, яка проіндексує сайт, проаналізує його вміст і внесе дані про наповнення у свою базу даних.
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Розгадайте ребус
Ергономіка
«Ребуси українською» © rebus1.com
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Розгадайте ребус
Просування
«Ребуси українською» © rebus1.com
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Питання для самоперевірки
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Домашнє завдання
Проаналізувати
§ 30, с. 170-172
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Працюємо за комп’ютером
Практична робота 8
Розробка простого вебсайту
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Працюємо за комп’ютером
Сторінка
171-172
© Вивчаємо інформатику teach-inf.com.ua
Розділ 4
§ 30
Дякую за увагу!
2-ге видання, оновлене
Урок 30
Інформатика
teach-inf.com.ua
за підручником
Бондаренко О.О. та ін.
Рівень стандарту 10(11)