Урок №32
Тема уроку: Ергономіка розміщення відомостей на веб-сторінці
________________________ (дата)
Класна робота
Доброго дня шановні десятикласники.
Запишіть будь ласка дату та тему сьогоднішнього уроку
Урок №32
МЕТА УРОКУ
ТИ ДІЗНАЄШСЯ
Дайте відповіді на запитання
Актуалізація опорних знань
Урок 32
Пригадай
Онлайн тестування:
Актуалізація опорних знань
Перейти за посиланням для проходження тесту № 23
http://testinform.in.ua/category/10-11-klas/
Вперед до
нових знань!
Що розуміють під ергономікою веб-сайта �і які існують критерії ергономіки
Ергономіка — (від грец. ergon — робота й nomos — закон) — наукова дисципліна, яка вивчає трудові процеси з метою створення оптимальних умов праці, що сприяє збільшенню її продуктивності, а також забезпечує необхідні зручності та зберігає сили, здоров’я і працездатність людини.
Вивчення нового матеріалу
Урок 32
Що розуміють під ергономікою веб-сайта �і які існують критерії ергономіки
Ергономіка загалом характеризується двома принципами:
Вивчення нового матеріалу
Урок 32
комфорт під час використання, який полягає у зменшенні фізичної та психологічної втоми;
безпека, яка передбачає вибір відповідних рішень для захисту користувача.
Що розуміють під ергономікою веб-сайта �і які існують критерії ергономіки
Розглядають такі основні критерії ергономіки при створенні сайта
Вивчення нового матеріалу
Урок 32
Критерій | Підкритерії | Опис |
Лаконічність | Простота | Лаконічний сайт зміцнить довіру до організації |
Неперевантаженість | Не рекомендується використання анімованих зображень. Анімації мають бути закріплені за важливими повідомленнями, оскільки вони привертають увагу користувача |
Що розуміють під ергономікою веб-сайта �і які існують критерії ергономіки
Розглядають такі основні критерії ергономіки при створенні сайта
Вивчення нового матеріалу
Урок 32
Критерій | Підкритерії | Опис |
Чіткість | Ясність | Доведено, що друкований текст важче читати з монітора, ніж з паперу (займає на 25 % більше часу) |
Структурованість | Текст має бути структурований за параграфами та назвами для полегшення читання | |
Розташування | Інформація повинна бути розташована за ступенем важливості. Найважливіша інформація має бути зверху сторінки |
Що розуміють під ергономікою веб-сайта �і які існують критерії ергономіки
Вивчення нового матеріалу
Урок 32
Критерій | Підкритерії | Опис |
Чіткість | Видимість адреси | URL-адреса сторінки має бути видимою та зрозумілою, що дає змогу знати, де відвідувач сайта перебуває, і легко повернутися на цю сторінку |
Актуальність інформації | Мають бути вказані такі дані, як ім’я автора, дата останнього оновлення та дата публікації. Погана ідея при створенні сайта — на головній сторінці розміщувати посилання на сторінки, які ще не готові | |
Однорідність структури | Елементи, які використовуються для перегляду, мають бути розташовані на тому самому місці на кожній сторінці |
Розглядають такі основні критерії ергономіки при створенні сайта
Що розуміють під ергономікою веб-сайта �і які існують критерії ергономіки
Вивчення нового матеріалу
Урок 32
Критерій | Підкритерії | Опис |
Швидкість | Час завантаження | Час завантаження сторінки має бути якомога коротшим, бо ніхто не буде чекати більше 15 с завантаження. Цей фактор в основному залежить від розміру сторінки, зображень на ній і можливостей сервера |
Оптимізовані зображення | Гарною ідеєю є оптимізація розміру зображень при доборі відповідного розміру та кольору. Не варто завантажувати зображення, більші за 30–40 Kб |
Розглядають такі основні критерії ергономіки при створенні сайта
Що розуміють під ергономікою веб-сайта �і які існують критерії ергономіки
Вивчення нового матеріалу
Урок 32
Критерій | Підкритерії | Опис |
Взаємодія | Гіпертекстові посилання | Веб-дизайнери радять розміщувати достатню кількість посилань між різними сторінками. Проте забагато посилань може зробити читання важким |
Сприяння взаємодії | Важливо передбачити можливість зворотнього зв’язку, за яким можна зв’язатися з адміністратором |
Розглядають такі основні критерії ергономіки при створенні сайта
Що розуміють під ергономікою веб-сайта �і які існують критерії ергономіки
Вивчення нового матеріалу
Урок 32
Критерій | Підкритерії | Опис |
Адаптивність | Зміна розміру шрифту | Варто використовувати шрифти, розміри яких виражаються абсолютною величиною. Таким чином, користувач може змінити розмір шрифту за потреби. Адаптивність характеризується здатністю сайта автоматично ставати персоналізованим без втручання користувача |
Розглядають такі основні критерії ергономіки при створенні сайта
Що розуміють під ергономікою веб-сайта �і які існують критерії ергономіки
Вивчення нового матеріалу
Урок 32
Критерій | Підкритерії | Опис |
Доступність | Сприяння доступу | Можливість мати доступ до сайта усім категоріям користувачів, включаючи людей з вадами зору |
Взаємодія | Дотримання стандартів, що забезпечують високий рівень взаємодії, тобто здатність мати доступ до сайта для відвідувачів, які використовують різне програмне забезпечення | |
Принцип прозорості | Важливо, щоб код сайта було можливо прочитати в текстовому режимі, тому доцільно використовувати HTML замість Flash. Зображення й анімація не мають відволікати увагу від текстової інформації. Таким чином, графічні ілюстрації варто використовувати тільки для візуального доповнення тексту |
Розглядають такі основні критерії ергономіки при створенні сайта
Що розуміють під ергономікою веб-сайта �і які існують критерії ергономіки
Вивчення нового матеріалу
Урок 32
Критерій | Підкритерії | Опис |
Доступність | Підпис | Зображення мають бути підписані (слід використовувати атрибут alt ). Це необхідно для того, щоб люди з вадами зору зрозуміли сенс зображення |
Вибір кольору | Кольори потрібно дібрати таким чином, щоб навіть людина, яка не розрізняє кольори, могла б зрозуміти наявність зміни кольору | |
Правильне використання стилів | Інформація має бути доступна навіть без стилів |
Розглядають такі основні критерії ергономіки при створенні сайта
Що розуміють під ергономікою веб-сайта �і які існують критерії ергономіки
Вивчення нового матеріалу
Урок 32
Критерій | Підкритерії | Опис |
Доступність | Контраст | Між кольором фону й текстом має бути достатній контраст, щоб люди з вадами зору могли прочитати текст |
Змінний розмір шрифту | Розмір шрифту необхідно адаптувати таким чином, щоб користувачі могли за потреби його збільшити |
Розглядають такі основні критерії ергономіки при створенні сайта
Що передбачає веб-дизайн
Вивчення нового матеріалу
Урок 32
Зручна навігація.
На сайті має міститися меню з розділами, а на кожній сторінці — можливість повернутися на головну сторінку.
Меню має бути зручним, помітним, бути зверху сторінки або збоку, щоб користувачеві не довелося його шукати.
Якщо розділів сайта багато й вони мають ще й підрозділи, потрібно зробити меню, що випадає.
Якщо структура сайта є досить складною, доцільно зробити «Карту сайта» з поясненнями.
Що передбачає веб-дизайн
Вивчення нового матеріалу
Урок 32
Стилістика сайта.
Весь сайт має бути витриманий у єдиному стилі, сторінки — з приблизно однаковим виглядом.
Допускається створення головної сторінки в трохи іншому стилі.
Мають бути витримані єдині кольори, шрифти.
Важливо також виділяти на сторінках головне (кольором, шрифтом, зображенням), а другорядне — «приховувати», щоб воно не заважало користувачеві, але він міг при бажанні дізнатися більше.
Що передбачає веб-дизайн
Вивчення нового матеріалу
Урок 32
Розмір сайта.
Через різницю в розмірах моніторів дизайни сайтів прийнято ділити на «гнучкі» й «жорсткі».
Гнучкий дизайн — сайт набуває будь-яких розмірів екрана (за потреби — розтягується або зменшується).
Жорсткий дизайн — з певною постійною шириною сторінок. Переважно підганяється під неширокий екран.
Що передбачає веб-дизайн
Вивчення нового матеріалу
Урок 32
Оформлення контенту.
Створення якісного дизайну сайта передбачає ще й певне оформлення контенту (текстів, зображень, таблиць, схем тощо). На сайті має бути цікава інформація, обов’язково правильно подана й оформлена, інакше користувач просто не зможе розібратися в ній.
Що передбачає веб-дизайн
Вивчення нового матеріалу
Урок 32
Веб-інтерфейс.
Веб-інтерфейс — це сукупність засобів, за допомогою яких користувач взаємодіє з веб-сайтом або будь-яким іншим додатком через браузер.
Одним з основних вимог до веб-інтерфейсів є їх однаковий зовнішній вигляд й однакова функціональність при роботі в різних браузерах.
Які переваги й недоліки різної �компоновки сторінок сайта
Вивчення нового матеріалу
Урок 32
Структура розміщення складових веб-сторінки сайта має свої переваги та недоліки. Сайти, у яких сторінки налаштовуються під розмір екрана, можуть мати такий дизайн, як показано на малюнку.
Які переваги й недоліки різної �компоновки сторінок сайта
Вивчення нового матеріалу
Урок 32
Дизайн сайта, який займає весь екранний простір, але по-різному відображається на екранах з різною роздільною здатністю через застосування змінних і незмінних частин сторінки, може мати дизайн, як показано на малюнку.
Настав час
закріпити нові
знання!
Формування умінь і навичок
Вправа 1. Аналіз ергономічності сайта.
Завдання. Розгляньте сайти, адреси яких запропоновано у файлі Адреси сайтів папки Мультимедіа та сайти на спільному ресурсі. Для кожного із сайтів заповніть чек-лист Дотримання ергономічності, який збережено в папці Мультимедіа та сайти на спільному ресурсі. Зробіть висновки про ергономічність кожного із запропонованих для аналізу сайтів.
Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.
Урок 32
Діємо
Завдання на с. 228 підручника
Формування умінь і навичок
Вправа 2. Дизайн сайта.
Завдання. Розгляньте сайт школи, у якій ви навчаєтесь. Створіть листа з порадами, які б ви надали адміністратору сайта, щоб сайт був більш зручним для використання та відповідав вимогам до сайтів.
Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.
Урок 32
Діємо
Завдання на с. 229 підручника
Формування умінь і навичок
Вправа 7. Проведіть дослідження в сервісі Кольорове коло (https://bit.ly/2APtMDo) з метою оптимального добору кольорової гами для сайта. Перевірте, як виглядатиме світла та темна сторінки сайта. Створіть відповідну інфографіку.
Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.
Урок 32
самостійно
Працюємо
Завдання на с. 231 підручника
Працювали,
працювали -
пригадаєм
все що взнали!
Підсумок уроку
Дайте відповіді на запитання
Урок 32
Обговорюємо
Рефлексія
1. Що нового сьогодні дізналися?
2. Чого навчилися?
3. Що сподобалось на уроці, а що ні?
4. Чи виникали труднощі?
Підсумок уроку
Рефлексія
1. Що нового сьогодні дізналися?
2. Чого навчилися?
3. Що сподобалось на уроці, а що ні?
4. Чи виникали труднощі?
Підсумок уроку
Рефлексія
1. Що нового сьогодні дізналися?
2. Чого навчилися?
3. Що сподобалось на уроці, а що ні?
4. Чи виникали труднощі?
Підсумок уроку
Рефлексія
1. Що нового сьогодні дізналися?
2. Чого навчилися?
3. Що сподобалось на уроці, а що ні?
4. Чи виникали труднощі?
Підсумок уроку
Прийшла пора
домашнього
завдання!
Домашнє завдання
Опрацювати п.24
Використані матеріали
1. «Інформатика 10(11) клас» Н.В. Морзе, О.В. Барна, В.П.– К.: УОВЦ «Оріон», 2019