1
Урок №30 8 __ клас 1 група ________________
2 група ________________
Тема. Правила ергономічногорозміщеннявідомостей на веб сторінці.
Інструктаж з БЖД
Цілі:
 навчальна: сформувати поняття ергономіки розміщення відомостей на
веб-сторінці;
 розвивальна: розвивати логічне мислення, пам’ять; формувати вміння
узагальнювати;
 виховна: виховувати інформаційну культуру, формування бережливого
ставлення до обладнання комп’ютерного кабінету, виховання уміння
працювати в групі; формування позитивного ставлення до навчання.
Тип уроку: Комбінований.
Обладнання та наочність: дошка, комп’ютери з підключенням до мережі
Інтернет, підручник, навчальна презентація.
Програмне забезпечення: браузер, офісні програми.
Хід уроку
І. Організаційний етап
 привітання
 перевірка присутніх
 перевірка готовностіучнів до уроку
ІІ. Актуалізаціяопорних знань
Гра «Ланцюжок»
Учні по черзі називають службиІнтернету.
Вправа «Згоден — не згоден»
Учням пропонують висловити своє ставлення до тверджень за правилом:
згоденабо не згоден. Запропонуватиправильнівідповіді.
1. Інтернет —це найбільша та найвідоміша глобальна мережа, яка об’єднує
комп’ютеривсього світу. (Так)
2. Електронна пошта — це служба Інтернету, призначена для миттєвої
передачі відеоповідомлень. (Ні)
3. Головна умова для використання служби інтерактивного спілкування —
співрозмовникиповинні одночасно бути на зв’язку. (Так)
4. Головна умова для використання служби електронної пошти —
відправник і отримувач листа повинні одночасно бути на зв’язку. (Ні)
2
5. Відправнику й отримувачу листа не обов’язково мати власні електронні
адреси. (Ні)
6. Всесвітнє павутиння — це сукупність пов’язаних між собою електронних
документів, що розміщені на комп’ютерахусього світу. (Так)
7. Веб-сторінка може містити лише текст і графічнізображення. (Ні)
8. Для перегляду веб-сторінкипризначені програми-браузери. (Так)
ІІІ. Мотивацій навчальноїдіяльності
IV. Вивченнянового матеріалу
Контент (англійською content—вміст) — це інформаційне наповнення
сайту —ті повідомлення, якірозробник складаєсамостійно або
запозичуєз дотриманням відповіднихнорм законодавства.
Зазвичай весь контент охороняє закон про авторське право, бо він є
продуктом інтелектуальноїпраці, має своїх авторів і власників.
Властивості контенту:
 якість;
 доступність;
 актуальність (значущість на данийчас);
 достовірність (наданихданих);
 відповідність меті.
Правила зручного розташування відомостей на веб-сайті:
 простота —на сторінці має бути якомога меншеелементів (дизайну).
Завдякицьому увагу фокусують на контенті. Легшепривернути увагу до
чогось важливого, колиїї не відволікають елементами дизайну;
 фіксований дизайн —зараз зазвичай вже не зустрічаються сайти з «гумової
версткою»;
 менше колонок —якщо раніше зустрічалися сайти в чотири колонки, а то і
більше, то сьогоднітри — вже максимум. А частіше — дві.
 назва сайту вгорісторінки —це явище не нове. Але зараз блок у верхній
частині сторінки, відділений від решти контенту, — загальновизнаний
стандарт.
 проста навігація — меню навігації має бути великим і помітним, легким в
розумінні, гіперпосилання повинні чітко відрізнятися від решти контенту.
 збільшений кегль —роздільна здатність і розміри моніторів зростають, тому
можна не напружуватиочі;
 чіткий логотип —щоб сайт запам'ятали, у нього має бути яскравийі
виразний логотип;
3
 ніжний градієнт — плавний перехід з одного кольору в інший. Цей досить
простий, малопомітнийелемент, справляєгарне враження навіть при
нудному за своєю суттю дизайну;
 шрифти без зарубок —текст, набраний таким шрифтом, набагато легше
читати;
 нижній колонтитул —його ще називають «підвалом». Ценевеликий блок
внизу сторінки, в якому повторено навігаційне меню, розташовано копірайт
©, посилання на дизайнера сайту, контакти власника ресурсу. Якщо раніше
це не вважали обов'язковим, то тепер відсутність «підвалу» вважають
ознакою поганого тону;
 великікнопки — якщо на сторінці присутні кнопки«проглянути», «придбати»
тощо, то їх роблять такими, щоб користувач їх помітив і не схибив при
натисканні — великого розміру і яскравими.
V. Засвоєнняновихзнань, формуваннявмінь
Робота за комп’ютером
1) Розробити на власному сайтісторінку з правилами ергономічного
розміщення відомостей на веб сторінці.
VI. Підсумки уроку
Фронтальне опитування
1. Який сайт вважається ергономічним?
2. Які критерії потрібно враховувати для забезпечення ергономічностісайту?
Схарактеризуйте їх.
3. Яким чином під час створення сайту можна створити зручності для
користувачів з особливимипотребами?
Рефлексія
1. Під час уроку я
 дізнався…
 зрозумів…
 навчився…
2. Найбільше мені сподобалося…
3. На уроці найкраще в мене виходило…
4. Я мав (-ла) труднощі з…
5. Я хотів би ще дізнатися про…
VІI. Домашнє завдання
1. Опрацювати конспект
2. Завершити оформлення сторінки сайту на тему: «Правила
ергономічного розміщення контенту на веб сторінці»
4
3. Надіслати адресу створеної сторінкина перевірку через E-mail
VІІI. Оцінюванняроботи учнів

More Related Content

DOCX
Lesson # 23. use of online site design systems
PPTX
Rules for ergonomically placing information on a web page.
DOCX
Lesson # 24. hypertext markup language concept
DOCX
Lesson # 28. hypertext markup language concept. lists and hyperlinks.
DOCX
Lesson # 25. hypertext markup language concept
PPT
4 клас урок 7 як вводити текст
DOCX
4 клас. Корнієнко. Урок 4. Копіювання файлів та папок
DOCX
4 клас. Корнієнко. Урок 7. Правила введення тексту
Lesson # 23. use of online site design systems
Rules for ergonomically placing information on a web page.
Lesson # 24. hypertext markup language concept
Lesson # 28. hypertext markup language concept. lists and hyperlinks.
Lesson # 25. hypertext markup language concept
4 клас урок 7 як вводити текст
4 клас. Корнієнко. Урок 4. Копіювання файлів та папок
4 клас. Корнієнко. Урок 7. Правила введення тексту

What's hot (19)

DOCX
4 клас. Корнієнко. Урок 8. Редагування тексту
DOCX
4 клас. Корнієнко. Урок 5. Тексти і текстовий редактор
DOCX
4 клас. Корнієнко. Урок 10. Форматування тексту
DOCX
3 клас. Корнієнко. Урок 16. Поняття про комп'ютерну мережу
DOCX
Lesson # 21. stages of creating websites
DOCX
7 клас. Морзе. Урок 10. Розв'язування компетентнісних задач
PPT
Використання сервісів Web 2.0 у навчально-виховному процесі початкової школи
PPTX
2014 цор-лекція4
PPT
презентация медіа
PPTX
Presentation # 24. hypertext markup language concept
DOCX
4 клас. Корнієнко. Урок 17. Веб-сторінки для дітей. Дитячі бібліотеки. Навчає...
DOCX
DOCX
Урок №14 8 клас
DOCX
Урок №13 8 клас
PPT
1презентация медіа
DOCX
Lesson # 6. computer based tools for planning, executing and forecasting lear...
4 клас. Корнієнко. Урок 8. Редагування тексту
4 клас. Корнієнко. Урок 5. Тексти і текстовий редактор
4 клас. Корнієнко. Урок 10. Форматування тексту
3 клас. Корнієнко. Урок 16. Поняття про комп'ютерну мережу
Lesson # 21. stages of creating websites
7 клас. Морзе. Урок 10. Розв'язування компетентнісних задач
Використання сервісів Web 2.0 у навчально-виховному процесі початкової школи
2014 цор-лекція4
презентация медіа
Presentation # 24. hypertext markup language concept
4 клас. Корнієнко. Урок 17. Веб-сторінки для дітей. Дитячі бібліотеки. Навчає...
Урок №14 8 клас
Урок №13 8 клас
1презентация медіа
Lesson # 6. computer based tools for planning, executing and forecasting lear...
Ad

Similar to Lesson # 30. rules for ergonomically placing information on a web page. bzd briefing (20)

PPTX
Ергономіка розміщення відомостей на веб-сторінці
PPTX
Графіка для веб-середовища. Ергономіка розміщення відомостей на веб-сторінці....
PPTX
Урок 30 10 клас
PPT
інформаційний супровід веб сайту навчального
PPTX
5 професійних порад з веб-дизайну
PPT
веб сторінки
PPT
веб сторінки
PPT
веб сторінки
PPT
веб сторінки
PPT
веб сторінки
PPT
Guide for Dota 2
PPT
Veb-mama ama kriminal
PPT
веб сторінки
PPTX
Представлення проекту "Як краще виглядати в мережі"
PPT
Персональний сайт викладача
PPT
Презентація
PPT
Презентація
DOCX
пзквс вікс урок urok-2.6.13.docx
Ергономіка розміщення відомостей на веб-сторінці
Графіка для веб-середовища. Ергономіка розміщення відомостей на веб-сторінці....
Урок 30 10 клас
інформаційний супровід веб сайту навчального
5 професійних порад з веб-дизайну
веб сторінки
веб сторінки
веб сторінки
веб сторінки
веб сторінки
Guide for Dota 2
Veb-mama ama kriminal
веб сторінки
Представлення проекту "Як краще виглядати в мережі"
Персональний сайт викладача
Презентація
Презентація
пзквс вікс урок urok-2.6.13.docx
Ad

More from Nikolay Shaygorodskiy (20)

DOC
план проведення тижня музичного мистецтва
PDF
PDF
PDF
Health basics
DOCX
English language elementary school
DOC
Elementary school
PDF
PDF
Computer science
DOCX
Minutes no.20 (director's report 2021)
DOCX
Director's report for 2020 2021 academic year
DOCX
Order no.106u
DOCX
Order no.105 u
DOCX
Order no.104 u
план проведення тижня музичного мистецтва
Health basics
English language elementary school
Elementary school
Computer science
Minutes no.20 (director's report 2021)
Director's report for 2020 2021 academic year
Order no.106u
Order no.105 u
Order no.104 u

Recently uploaded (19)

PDF
Заняття 1. Вимоги до управлінських рішень командира та їх класифікація
PDF
akjgaksdj lkaыдуко локж оуыпж оывджл апоыв
PPTX
ПРЕЗЕНТАЦІЯ-ПРАВОВА-Тема 01. Зан. 01.pptx
PDF
Заняття 2. Способи й методи прийняття раціональних управлінських рішень
PDF
яалво вдлаопядвл опдлыв ояпвояыр пывора в
PDF
Заняття 4. Інструменти критичного мислення під час прийняття рішень (AltA).
PDF
ывла пявдлоп явдла опдвяла опдвла опявлпов
PPTX
З любов'ю до цілого світу (до 75-річчя від дня народження Василя Михайловича ...
PDF
ы плоывдлпоявлпо яылпояылв по влполвдпо в
PDF
Заняття 2. Способи й методи прийняття раціональних управлінських рішень.
PPTX
Підсумки атестації випускників 2025 року
PDF
Заняття 4. Інструменти критичного мислення під час прийняття рішень (AltA).
PPTX
Презентація 7 клас Урок 1. Комп'ютерні мережі
PDF
Інформація щодо фактичного використання бюджетних коштів в липні 2025 році
PPTX
ПРЕЗЕНТАЦІЯ-ВОГНЕВА-Тема 2 Основи та правила стрільби.pptx
PDF
Заняття 5. Методика прийняття рішень на основі APSP (Army Problem Solving Pro...
PPT
Підсумки атестації здобувачів другого (магістерського) рівня вищої освіти 20...
PDF
Заняття 1. Вимоги до управлінських рішень командира та їх класифікація
PDF
"Фах" (аналіз твору) Айзек Азімов (презентація)
Заняття 1. Вимоги до управлінських рішень командира та їх класифікація
akjgaksdj lkaыдуко локж оуыпж оывджл апоыв
ПРЕЗЕНТАЦІЯ-ПРАВОВА-Тема 01. Зан. 01.pptx
Заняття 2. Способи й методи прийняття раціональних управлінських рішень
яалво вдлаопядвл опдлыв ояпвояыр пывора в
Заняття 4. Інструменти критичного мислення під час прийняття рішень (AltA).
ывла пявдлоп явдла опдвяла опдвла опявлпов
З любов'ю до цілого світу (до 75-річчя від дня народження Василя Михайловича ...
ы плоывдлпоявлпо яылпояылв по влполвдпо в
Заняття 2. Способи й методи прийняття раціональних управлінських рішень.
Підсумки атестації випускників 2025 року
Заняття 4. Інструменти критичного мислення під час прийняття рішень (AltA).
Презентація 7 клас Урок 1. Комп'ютерні мережі
Інформація щодо фактичного використання бюджетних коштів в липні 2025 році
ПРЕЗЕНТАЦІЯ-ВОГНЕВА-Тема 2 Основи та правила стрільби.pptx
Заняття 5. Методика прийняття рішень на основі APSP (Army Problem Solving Pro...
Підсумки атестації здобувачів другого (магістерського) рівня вищої освіти 20...
Заняття 1. Вимоги до управлінських рішень командира та їх класифікація
"Фах" (аналіз твору) Айзек Азімов (презентація)

Lesson # 30. rules for ergonomically placing information on a web page. bzd briefing

  • 1. 1 Урок №30 8 __ клас 1 група ________________ 2 група ________________ Тема. Правила ергономічногорозміщеннявідомостей на веб сторінці. Інструктаж з БЖД Цілі:  навчальна: сформувати поняття ергономіки розміщення відомостей на веб-сторінці;  розвивальна: розвивати логічне мислення, пам’ять; формувати вміння узагальнювати;  виховна: виховувати інформаційну культуру, формування бережливого ставлення до обладнання комп’ютерного кабінету, виховання уміння працювати в групі; формування позитивного ставлення до навчання. Тип уроку: Комбінований. Обладнання та наочність: дошка, комп’ютери з підключенням до мережі Інтернет, підручник, навчальна презентація. Програмне забезпечення: браузер, офісні програми. Хід уроку І. Організаційний етап  привітання  перевірка присутніх  перевірка готовностіучнів до уроку ІІ. Актуалізаціяопорних знань Гра «Ланцюжок» Учні по черзі називають службиІнтернету. Вправа «Згоден — не згоден» Учням пропонують висловити своє ставлення до тверджень за правилом: згоденабо не згоден. Запропонуватиправильнівідповіді. 1. Інтернет —це найбільша та найвідоміша глобальна мережа, яка об’єднує комп’ютеривсього світу. (Так) 2. Електронна пошта — це служба Інтернету, призначена для миттєвої передачі відеоповідомлень. (Ні) 3. Головна умова для використання служби інтерактивного спілкування — співрозмовникиповинні одночасно бути на зв’язку. (Так) 4. Головна умова для використання служби електронної пошти — відправник і отримувач листа повинні одночасно бути на зв’язку. (Ні)
  • 2. 2 5. Відправнику й отримувачу листа не обов’язково мати власні електронні адреси. (Ні) 6. Всесвітнє павутиння — це сукупність пов’язаних між собою електронних документів, що розміщені на комп’ютерахусього світу. (Так) 7. Веб-сторінка може містити лише текст і графічнізображення. (Ні) 8. Для перегляду веб-сторінкипризначені програми-браузери. (Так) ІІІ. Мотивацій навчальноїдіяльності IV. Вивченнянового матеріалу Контент (англійською content—вміст) — це інформаційне наповнення сайту —ті повідомлення, якірозробник складаєсамостійно або запозичуєз дотриманням відповіднихнорм законодавства. Зазвичай весь контент охороняє закон про авторське право, бо він є продуктом інтелектуальноїпраці, має своїх авторів і власників. Властивості контенту:  якість;  доступність;  актуальність (значущість на данийчас);  достовірність (наданихданих);  відповідність меті. Правила зручного розташування відомостей на веб-сайті:  простота —на сторінці має бути якомога меншеелементів (дизайну). Завдякицьому увагу фокусують на контенті. Легшепривернути увагу до чогось важливого, колиїї не відволікають елементами дизайну;  фіксований дизайн —зараз зазвичай вже не зустрічаються сайти з «гумової версткою»;  менше колонок —якщо раніше зустрічалися сайти в чотири колонки, а то і більше, то сьогоднітри — вже максимум. А частіше — дві.  назва сайту вгорісторінки —це явище не нове. Але зараз блок у верхній частині сторінки, відділений від решти контенту, — загальновизнаний стандарт.  проста навігація — меню навігації має бути великим і помітним, легким в розумінні, гіперпосилання повинні чітко відрізнятися від решти контенту.  збільшений кегль —роздільна здатність і розміри моніторів зростають, тому можна не напружуватиочі;  чіткий логотип —щоб сайт запам'ятали, у нього має бути яскравийі виразний логотип;
  • 3. 3  ніжний градієнт — плавний перехід з одного кольору в інший. Цей досить простий, малопомітнийелемент, справляєгарне враження навіть при нудному за своєю суттю дизайну;  шрифти без зарубок —текст, набраний таким шрифтом, набагато легше читати;  нижній колонтитул —його ще називають «підвалом». Ценевеликий блок внизу сторінки, в якому повторено навігаційне меню, розташовано копірайт ©, посилання на дизайнера сайту, контакти власника ресурсу. Якщо раніше це не вважали обов'язковим, то тепер відсутність «підвалу» вважають ознакою поганого тону;  великікнопки — якщо на сторінці присутні кнопки«проглянути», «придбати» тощо, то їх роблять такими, щоб користувач їх помітив і не схибив при натисканні — великого розміру і яскравими. V. Засвоєнняновихзнань, формуваннявмінь Робота за комп’ютером 1) Розробити на власному сайтісторінку з правилами ергономічного розміщення відомостей на веб сторінці. VI. Підсумки уроку Фронтальне опитування 1. Який сайт вважається ергономічним? 2. Які критерії потрібно враховувати для забезпечення ергономічностісайту? Схарактеризуйте їх. 3. Яким чином під час створення сайту можна створити зручності для користувачів з особливимипотребами? Рефлексія 1. Під час уроку я  дізнався…  зрозумів…  навчився… 2. Найбільше мені сподобалося… 3. На уроці найкраще в мене виходило… 4. Я мав (-ла) труднощі з… 5. Я хотів би ще дізнатися про… VІI. Домашнє завдання 1. Опрацювати конспект 2. Завершити оформлення сторінки сайту на тему: «Правила ергономічного розміщення контенту на веб сторінці»
  • 4. 4 3. Надіслати адресу створеної сторінкина перевірку через E-mail VІІI. Оцінюванняроботи учнів