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

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

Мета:  Визначити рівень попередньої підготовленості учнів, що стосується теми «Правила ергономічного розміщення відомостей на веб-сторінці». Актуалізувати знання, що потрібні для введення нового матеріалу. Активізувати мислення учнів.

Тип уроку: повторення;

Обладнання та наочність: комп’ютери, підручники, презентація, проектор.

Програмне забезпечення: Notepad++, Google Chrome.

Хід уроку

І. Організаційний етап

·        Привітання з класом

Доброго дня, діти.

·        Повідомлення теми і мети уроку

Сьогодні на уроці ми з вами пригадаємо ергономіку веб-сторінок.

ІІ. Мотивація навчальної діяльності

Знання основних правил та вимог до створення зручного користувацького середовища сприятиме розвитку будь-якого проекту. При таких навиках ваші користувачі якомога більше будуть залишатись на вашому ресурсі.  

Не забувайте про правила поведінки на уроці. (Слайд2).

ІІІ. Актуалізація опорних знань

·        Повторення раніше вивченого матеріалу (Слайд3)

1.     Який сайт вважається ергономічним?

2.     Які критерії потрібно враховувати для забезпечення ергономічності сайту?  Охарактеризуйте їх .

3.     Яким чином під час створення сайту можна створити зручності для користувачів з інвалідністю?

IV. Вивчення нового матеріалу

Слайд4. Пригадаємо, що дизайн веб-сайту, як і презентацій, базується на основних трьох китах:

1.     Композиція

2.     Колористика

3.     Ергономіка.

Слайд5. Дані терміни вам уже відомі з курсу створення презентацій. Найрідше зустрічався термін ергономіка — це наука, яка вивчає особливості виробничої діяльності людини з метою забезпечення ефективності, безпеки  та зручності цієї діяльності.

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

Слайд7. Кожному веб-дизайнеру та верстальнику (людина котра займається власне програмуванням) потрібно дотримуватись основних правил:

1.     Подавати відомості у зрозумілій і стислій формі;

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

3.     Усувати будь-яку двозначність щодо наслідків дій після вибору елементів керування на веб-сторінці .

Слайд8-11. Не слід також нехтувати правильним розташуванням відомостей на сторінці (назва сайту — у заголовку всіх сторінок . На будь-якій сторінці можна чітко бачити, до якого тематичного розділу  вона входить . Найважливіші відомості — на початку сторінки . Колонок з контентом — не більше ніж три . Не допустимі горизонтальні смуги прокручування під час перегляду  веб-сторінки . Нижній колонтитул (підвал) дублює меню, зазначає авторські права  (копірайт) дизайнера сайту, містить контактні дані власника ресурсу та  дизайнера), зручність в навігації (навігації з будь-якої сторінки є можливість перейти до перегляду головної (домашньої) веб-сторінки сайту . Сайт має не більше ніж три рівні вкладеності веб-сторінок . Меню сайту — велике та помітне, легке в розумінні . Гіперпосилань  в  одному  блоці  навігації  —  не  більше  ніж  7,  інші  – у вкладених меню або інших блоках . Кнопки крупні, зі зрозумілими підписами або зображеннями . Гіперпосилання в тексті чітко відрізняються від решти контенту . На сторінках з великим обсягом тексту присутні засоби для навігації  усередині веб-сторінки), оформлення (єдиний стиль оформлення та компоновки матеріалу на всіх сторінках . Кольори фону сторінки та тексту контрастні . Заголовки статей виділено шрифтом збільшеного розміру . Текст статей вирівняно за шириною . Якісні зображення, з можливістю збільшення для перегляду . Мінімум анімованих зображень, що відволікають увагу . Порожній простір (поля) навколо тексту та зображень) та один із ключових моментів це швидкість завантаження сторінки.

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

 Слайд13-15. Створимо блокову веб сторінку та оформимо її відповідним чином. Описавши стиль вирівняємо блоки та створимо їх адаптивними.

Слайд16-20. Скористаємось сайтом http://test.fromgomel.com котрий допоможе нам реалізувати повноцінний тестовий скрипт. Опишемо питання, вкажемо правильні відповіді та додамо на нашу веб-сторінку.

Слайд21-29. Після додавання коду потрібно адаптувати код та перекласти російські дані.

Цікаво знати

         Слайд30. З історії Tesla.

V. Усвідомлення набутих знань й формування вмінь та навичок

·        Практична робота (Слайд31-32)

Завдання

1.     Створити на робочому столі папку та назвати її власним прізвищем та ім’ям.

2.     Створіть html сторінку за опрацьованим зразком (необхідні зображення знаходяться у вказаному вчителем місці):

3.     Підключить стиль:

4.     Відвідайте сайт test.fromgomel.com та створіть скрипт тестування за питаннями:

         Та інтегруйте їх на власну сторінку.

5.     Перекладіть необхідний текст на український використавши перекладач чи власні навички.

6.     Розмістіть свій ресурс на хостингу.

7.     Продемонструйте результат виконання вчителеві.

·        Релаксація

Вправа для профілактики короткозорості та порушення зору

Малюємо носом

Вправа на зняття напруги з очей і шиї.
Очі - не єдине вразливе місце школярів. Довге сидіння за партою сприяє погіршенню кровотоку в області шиї, через що виникають напруга і навіть біль, що також впливає на зір. Запобігти цим неприємним наслідкам допоможе проста вправа.

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

Зорова гімнастика проста, але корисна. Діти, яких привчили займатися нею з раннього віку, не мають проблем із зором пізніше, коли навантаження на очі значно зростає. Особлива перевага вправ в тому, що вони не вимагають багато часу: всього дев'ять хвилин на день - три рази по три хвилини, - і дитина буде застрахована від перспективи вдягнути окуляри в молодому віці.

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

Створити психологічний тест для однокласників враховуючи ергономіку сайту й використовуючи ресурс http://test.fromgomel.com. Розмістивши сторінку на хостингу надішліть її адресу на електронну скриньку вчителя.