2. 2
Анотація
Завдання посібника – продемонструвати взаємопов’язаність
предмета інформатики з іншими дисциплінами у школі, можливість
поєднання навичок використання інформаційних технологій у
викладанні різноманітних навчальних дисциплін: природознавства,
географії, математики, української мови тощо.
Для вчителів пропонується знайомство з інтерактивними
онлайн-платформами та створення електронних продуктів для
навчання учнів: інфографіка та гейміфікація (Genial.ly), робота із
віртуальною дошкою Padlet, розробка коміксів та онлайн-книг в
Оurboox, генерування мультфільмів, анімації в Animaker.
3. 3
Зміст
ВСТУП.................................................................................................................................... 4
1. Інтерактивна інфографіка. Платформа Genial.ly. Приклади учнівських робіт........... 6
2. Гейміфікація. Платформа Genial.ly. Приклади учнівських робіт............................... 12
3. Віртуальна дошка Padlet для спільної роботи. Приклад робочого проєкту .............. 21
4. Комікси. Книги в Оurboox .............................................................................................. 28
5. Мультфільми, анімації в Animaker ................................................................................ 32
5.1. Знайомство із середовищем ..................................................................................... 32
5.2. Початок роботи в Animaker...................................................................................... 34
5.3. Створюємо власного персонажа.............................................................................. 39
5.4. Робоча область. Серцевина проєкту........................................................................ 42
5.5. Приклади учнівських робіт...................................................................................... 48
Використані джерела........................................................................................................... 50
4. 4
ВСТУП
Професійно-методична підготовка вчителів-предметників останніми
роками поглибилась. Сучасні педагоги мають володіти неабиякими навичками
користування ПК, створення унікальних електронних навчальних продуктів,
зацікавлювати та мотивувати учнів шляхом використання інтерактивних вправ.
На сучасному етапі шкільної освіти вчитель повинен володіти різними
методиками організації дистанційного та очного навчання. Мова йде не тільки
про онлайн-уроки в Zoom, Google Meet, роботу в Classroom. Динаміка освітнього
процесу, розвиток технологій та пристроїв змушує не лише вчителів
інформатики постійно «прокачувати» свої скіли, а й будь-якого вчителя-
предметника.
Незалежно від того, якою є матеріальна база школи для вивчення дітьми
предметів, зокрема й предмету «Інформатика», все залежить від майстерності
вчителя, його вміння знайти компромісне вирішення проблеми. Наприклад,
якщо програмне ліцензійне забезпечення офісного пакету (Microsoft Office)
коштує дорого, то можна встановити пакет програм «OOO4kids», що є
безкоштовним та містить: текстовий, табличний, графічний редактори та
редактор презентацій або задіяти безкоштовні онлайн-сервіси Google, Canva,
Genial.ly тощо.
Для того, щоб не витрачати кошти на придбання й обслуговування різної
комп’ютерної техніки та програмного забезпечення, освітні послуги можуть
надаватися за допомогою мережі Інтернет. Для цього використовуються хмарні
технології, доступ до яких можна отримати безкоштовно або за невелику
платню. Їх використання, безперечно, впливає на формування та розвиток
інформаційно-цифрової компетентності здобувачів освіти.
Основним завданням учителів інформатики є формування та розвиток
ключових компетентностей та наскрізних умінь школярів. Варто пам’ятати, що
педагогам необхідно постійно працювати над розвитком професійної
компетентності аби забезпечити всебічний розвиток учнів. Проте варто зробити
акцент й на тому, що вчитель інформатики – це помічник у навчальному закладі,
5. 5
який може допомогти учням та вчителям-предметникам з проєктами в інших
галузях.
Завдання посібника – продемонструвати взаємопов’язаність предмета
інформатики з іншими дисциплінами у школі, можливість поєднання навичок
використання інформаційних технологій у викладанні різноманітних
навчальних дисциплін: природознавства, географії, математики, української
мови тощо.
Для вчителів пропонується знайомство з інтерактивними онлайн-
платформами та створення електронних продуктів для навчання учнів.
Наприклад, інфографіка та гейміфікація за допомогою платформи Genial.ly,
робота із віртуальною дошкою Padlet, розробка коміксів та онлайн-книг в
Оurboox, генерування мультфільмів, анімації в Animaker.
6. 6
1. Інтерактивна інфографіка. Платформа Genial.ly. Приклади учнівських
робіт
Genial.ly – мультизадачний онлайн-сервіс для створення презентацій,
інтерактивних зображень, карт, звітів, інфографіка, вікторин, плакатів, відео,
стрічок часу, ігор та віртуальних посібників.
Інфографіка – це добірка зображень, діаграм і мінімального обсягу тексту,
що роблять огляд теми легкозрозумілим [1].
Зазвичай оригінальна та креативна інфографіка є найефективнішою, бо
вона привертає до себе увагу і не відпускає. Однак дуже важливо пам’ятати, що
візуальні складові інфографіки повинні не лише вражати й захоплювати. Вони
ще й повинні допомагати нам розуміти і запам’ятовувати контент інфографіки.
Інфографіка може бути у пригоді для наступних цілей:
Швидкий огляд теми.
Пояснення складного процесу.
Подання результатів дослідження чи даних опитування.
Підсумування довгого допису блогу чи звіту.
Порівняння та співставлення декількох думок.
Привернення уваги до проблеми чи ідеї.
Розпочнемо роботу із онлайн-сервісом https://app.genial.ly/dashboard
Реєструєтесь, використовуючи поштовий сервіс gmail.com. Даний ресурс,
інструментарій англомовний, для переходу на українську мову можна
використати налаштування сторінки Перекласти такою мовою: українська.
7. 7
1.
Рис. 1. Сервіс Genial.ly. Головна сторінка
2. Натискаєте на “+”
3.
Рис. 2. Робоча область
4. Обираєте Іnfographics.
8. 8
5.
Рис. 3. Шаблон інфорграфіки
6. Обираєте безкоштовні.
7. Будь-який шаблон, що підходить вам для теми.
8.
Рис. 4.Зразок
9. Можете підібрати кольорову палітру та перейти до створення
(+use…)
9. 9
10.
Рис. 5. Робота над шаблоном
11. Ознайомтесь з інструментами.
12.
13. Прикріпити Підказку, Вікно, посилання тощо.
14.
Рис. 6. Вікно взаємодії кнопок
15. - задати анімацію та час появи.
10. 10
16. - за допомогою клавіші Сtrl виділяємо
об'єкти та групуємо в один або розгруповуємо.
17. Вводимо інформацію. Задаємо анімацію, час тощо. Переглядаємо.
18.
19. Натискаємо ”Все готово”. Ще раз ”Все готово”.
20.
Рис. 7.Запуск роботи
21.
Рис. 8.Посилання на роботу
11. 11
Приклади учнівських робіт
Тема. Благодійні фонди України (інтерактивна інфографіка)
Автор: Котюк Софія. 11-а клас
https://view.genial.ly/6319aebd77b28f0011e1e043/interactive-content-
blagodijni-fondi-ukrayini
12. 12
2. Гейміфікація. Платформа Genial.ly. Приклади учнівських робіт
У сучасній системі освіти все більше використовується гейміфікація як
інноваційний процес навчання.
Гейміфікація – це використання ігрових практик та механізмів у
неігровому контексті для залучення користувачів до вирішення проблем [2].
Сумісні дії задля досягнення власних цілей, віртуальність та зворотній відлік
(виконання завдання за обмежений час) є елементами гейміфікованого процесу.
Завдання для учнів. Розробити гейміфікацію на задану тему.
Тема: Освіта. Наприклад: навчання у різних країнах; системи оцінювання;
професія вчителя, ставлення до освітян тощо.
Сервіс https://app.genial.ly/dashboard
Натискаєте на “+” та обираємо Gamification.
Рис. 10. Меню Genial.ly
Обираємо шаблони. Прибираємо прапорець з платних /
Premium, залишаємо безкоштовні.
Рис. 9. Фільтр.
13. 13
Рис. 11. Шаблон вікторини
Обрали шаблон, та переходимо до створення вікторини (+use…).
Зверху даємо назву проєкту.
Рис. 12. Назва
Переходимо до виконання. Працюємо з титульною сторінкою. Вказуємо
назву проєкту, мотиваційний текст. Програмуємо кнопку Start.
Рис. 13. Працюємо з титульною сторінкою
Зображення та анімацію, кольорову гаму можемо змінювати відповідно до
теми, яку обрали.
Отже, кнопка Start. Активуємо Та обираємо опцію Go to page.
14. 14
Рис. 14. Налаштування сторінок
Вказуємо сторінку, на яку маємо перейти при натисненні. Такий принцип
роботи будемо використовувати у цьому проєкті.
Питання
Рис. 15. Оформлення питання, правильної та неправильних відповідей
Слідкуйте за кількістю питань, номером. Змінюйте на українську мову на
кожній сторінці. У вас може бути 2 або 3 запропонованих відповідей. Тепер
програмуємо правильну / істинну відповідь та неправильну / хибну. Отже,
кнопка B.
15. 15
Наступна сторінка після
питання 1 (та й подальших питань
буде скопійована. Тобто одна, але
розмножена. А сторінка з хибними
відповідями одна. Щоб продовжити
виконання. Необхідно буде повторно
виконати завдання. Натиснувши
відповідну кнопку).
А тепер закодуємо Хибні відповіді А та С. Активуємо Та обираємо
опцію Go to page – Вказуємо останній слайд, наприклад, зазначаємо, що це
помилковий варіант та пропонуємо пройти випробування ще раз.
Рис. 17. Неправильна відповідь
Рис. 18. Спробуй ще раз
Активуємо Та обираємо опцію Go to page → Go Back.
Рис. 19. Робота зі сторінками
Рисунок 16. Варіанти відповідей
16. 16
Наступна сторінка з підтвердженням, що обрали вірний варіант.
Прописуємо похвалу чи мотивацію. Програмуємо кнопку Next, Активуємо
Та обираємо опцію Go to page.
Рис. 20.Правильна відповідь
Передостання сторінка з привітаннями
Рис. 21.Вітання
Можемо запрограмувати кнопку Start over.
Ви можете використовувати інструменти даного середовища на свій смак.
17. 17
Рис. 22. Інструментарій Genial.ly
Роботу виконану надіслати на електронну скриньку вчителя. А саме:
1. Переглядаємо
2. Натискаємо ”Все готово”. Ще раз ”Все готово”.
3.
Рис. 23. Завершення роботи
19. 19
Приклади учнівських робіт
Тема. Освіта в різних країнах світу
Автор: Бойко Артем, 9-г клас, ліцей №3 м. Житомира
https://view.genial.ly/63340d1e6d4e5e0018c9669a/interactive-content-viktorina
Тема. Освіта
Автор: Щанова Вікторія, 10-в, ліцей №3 м. Житомира
https://view.genial.ly/63372358c9e30d00117507fc/interactive-content-trivial-
quiz-ii
Тема. Освіта
Автор: Копаниця Богдан, 9-г, ліцей №3 м. Житомира
https://view.genial.ly/6335bfaf848e2800187c1a3d/interactive-content-osvita-
kopanicya-bogdan
20. 20
Тема. Вікторина про освіту
Автор: Голотюк Назар, 9-г, ліцей №3 м. Житомира
https://view.genial.ly/6335f3ea3b3e570011971cdb/interactive-content-
opituvannya-osvita-golotyuk-nazar-9-g
Тема. Освіта в Китаї
Автор: Дарина Якимчик, 9-г, ліцей №3 м. Житомира
https://view.genial.ly/6335dd3f77cb0400187a601a/interactive-content-
dragons-quiz
21. 21
3. Віртуальна дошка Padlet для спільної роботи. Приклад робочого проєкту
Віртуальна дошка - це сервіс, який працює як дошка для спільної роботи
онлайн.
Робота онлайн дошки має такий вигляд: у вчителя є робочий простір,
"білий аркуш", на якому ви можете виконувати якісь дії. Одночасно з учителем
в режимі реального часу цей робочий простір і всі зміни на ньому бачать
користувачі, яким надано доступ. Базово це працює як програма для малювання
онлайн, але з додатковими функціями, які допоможуть організувати
репетиторство онлайн або роботу з класом на дистанційному навчанні.
Реєструємось на ресурсі. Та заходимо до свого кабінету
https://padlet.com/dashboard
Рис. 25. Робочий кабінет
1. Створюємо нове полотно або очищаємо пости чи видаляємо
попередні.
22. 22
Рис. 26. Робота з полотном
2. Переходимо до Налаштувань полотна
3. Даєте назву проєкту. Описуєте його (мета,
авторство, девіз тощо). Можете в графічному
редакторі створити власний значок, завантажити
його. Він буде розташований у лівому кутку
полотна поруч з назвою. Обираєте шпалери або
завантажуєте зображення.
Рис. 27. Шпалери
23. 23
4.
Рис. 28.Робота зі шпалерами
5.
Обираєте зовнішній вигляд стікерів на полотні
Рис. 29. Стікери
6. Далі шрифт тексту
7. Наступним кроком обираєте: чи
буде авторство на кожному
стікері, чи буде хтось
коментувати ваш допис, чи
ставитиме вподобання допису та
як це виглядатиме. Рисунок 30. Додаткові налаштування
24. 24
8. Зовнішній вигляд подачі інформації можна обрати у меню
Рис. 31. Зовнішній вигляд стрічки
9. Дописи починаємо додавати
25. 25
Рис. 32. Робота з постами.
Розміщуєте текст, зображення, відео, посилання тощо. Унизу обираєте
колір фону стікера.
10. Працювати над полотном ви можете з однодумцями, але попередньо
додати учасників та надати право Авторства, щоб учасник міг редагувати
та створювати
Рис. 33. Поділитись роботою
11.Поділитись даною роботою можна різними способами
26. 26
Рис. 34. Варіанти перегляду
12.Демонструвати результати проєкту теж можна у різних форматах
Рис. 35.Варіанти збереження
27. 27
Приклад роботи
Зразок дошки. НУШ. 5 клас. Мережа.
https://padlet.com/vanchitaykamasia1/ksyuopje1jw
Рис. 36. Робочий проєкт
Рис. 37.Робочий проєкт
28. 28
4. Комікси. Книги в Оurboox
Реєструємось в https://www.ourboox.com/
Створюємо з нуля свою книгу.
1. У Бібліотеці ви можете переглянути зразки книг/коміксів за різними
категоріями та різними мовами.
2.
Рис. 38. Робоча область
3.
Рис. 39. Початок роботи
4. Даємо назву нашій книзі, яку будемо створюємо
Рис. 40. Назва
29. 29
Розпочинаємо роботу
5. Робоча область має такий вигляд. Справа можемо бачити посилання на
свою роботу. Внизу у правому кутку кнопки Створити сторінку+.
Рис. 41. Робоча область проєкту
6. Ви можете обирати або Text, або Artwork.
Рис. 42. Налаштування
7. Ви можете самостійно створювати зображення з текстом у будь-якому
графічному редакторі, зберігати, «заливати» на сторінку.
30. 30
Рис. 43. Графічний редактор
Періодично натискайте на кнопку Зберегти. А для перегляду - Дивитись
книгу.
8. Для завантаження зображень використовуємо Artword, а далі - Add
Image. Обираєте файл та завантажуєте його
Рис. 44. Додаємо зображення
Рис. 45. Завантажуємо
31. 31
Рис. 46. Обираємо потрібний малюнок
9. Додаємо нову сторінку. На ній або текстову інформацію, обираючи
формат до символів, або підготовлене зображення чи колаж.
32. 32
5. Мультфільми, анімації в Animaker
5.1. Знайомство із середовищем
Робота з https://www.animaker.com/
Рис. 47. Піктограма
Реєструєтесь у даному ресурсі. Підтверджуєте реєстрацію через
електронну скриньку та переходите до роботи.
Рис. 48. Середовище
На Панелі приладів ви можете обрати формат відео, яке ви створите, -
горизонтальне, вертикальне, квадратне, відео для соціальних мереж (Instagram,
Facebook, Youtube, LinkedIn, TikTok, SnapChat, Pinterest, WhatsApp). У меню
Соцмережі ви знайдете цілий арсенал інструментів для створення,
моделювання, генерації своїх ідей: Reels (це відносно нова функція Instagram, яка
дає змогу створювати та редагувати короткі відеоролики до 30 секунд у додатку),
історії (це функція в Інстаграм для викладання фотографій та коротких 15-ти /
60-ти секундних відео, де після викладені пости автоматично видаляються через
24 години), публікації тощо.
Ви можете працювати не тільки з відео. Також вам доступні інші шаблони
для роботи.
33. 33
Рис. 49. Меню
Натиснувши Нові програми, отримуємо новий функціонал.
Рис. 50. Нові програми
Для початку будь-якого проекту ознайомимось з інструментарієм даного
ресурсу докладніше.
Отже, ви можете Створювати, перегляди Панель приладів, знайти свої
розробки у вкладці Мої проєкти, якщо робота спільна, то переглянути
Поділився зі мною, Обране. Якщо вас запрошено до Команди, то спільну
роботу теж знайдете в команді.
34. 34
Рис. 51. Панель приладів
5.2. Початок роботи в Animaker
Натискаємо кнопку Створити. Ознайомимось з функціоналом, що
пропонується.
Рис. 52.Кнопка Створити
35. 35
Рис. 53.Створити відео
Отже, обравши Створіть відео, бачимо нові можливості для себе. Або
почати роботу із порожньої сторінки, Або вибрати із шаблонів.
Кнопка Створити GIF відкриває нову вкладку у браузері для створення
GIFs/Meme (Своїх моментів).
Рис. 54. Шаблони
Створіть персонажа переносить нас на нову сторінку Animaker.
36. 36
Рис. 55. Вибір персонажа
Зверніть увагу, безкоштовно ви можете працювати лише з героями
Чоловіком та Жінкою. Решта - платно.
Наступні пункти меню Створити відео: Запис екрану, Створити голос,
Створіть презентацію.
Рис. 56. Меню
Обравши презентацію, ви опинитесь одразу в редакторі презентацій, де
будуть шаблони, інструментарій, робоча область для роботи, макет тощо.
37. 37
Рис. 57. Редактор презентацій
Створити голос. Записуєте голос, обираєте мову, озвучку тощо.
Рис. 58. Запис голосу
Після ознайомлення із середовищем поверхнево перейдемо до деталей.
Маєте тему свого навчального проєкту. Аналізуєте, збираєте інформацію,
переходите до виконання.
Створити. Відео. Горизонтальне відео. Програма одразу запропонує Вам
чи з порожньої сторінки старт чи з шаблону.
38. 38
Рис. 59. Порожнє або шаблон
Я обираю Шаблон. У свою чергу всі шаблони об’єднані певною
тематикою, що спростить вибір.
Рис. 60. Теми шаблонів
Натискаєте на шаблон, який вам сподобався. Програма пропонує вам
Попередній перегляд та Використання.
Рис. 61. Робота із шаблоном
Обираємо Використання. Переходимо до робочої області.
Задаємо назву Проєкту.
39. 39
Рис. 62. Назва проєкту
5.3. Створюємо власного персонажа
Або працюємо із запропонованим, або генеруємо власного. Підбираємо
йому колір шкіри, волосся, саму зачіску, Тип обличчя, колір та вираз очей, брів,
ніс, губи тощо. Додаємо аксесуари, одяг, взуття. Яким теж можемо змінювати
кольорову палітру.
Рис. 63. Персонаж
Натискаємо на кнопку . Переходимо в меню. Та створюємо
нового персонажа.
Рис. 64. Новий персонаж
40. 40
Рис. 65. Вибір персонажа
Спершу Чоловік чи Жінка. Згодом зовнішній вигляд персонажа.
Рис. 66. Зовнішній вигляд
Дайте ім’я герою. Та користуючись меню, змінюєте зовнішній вигляд
Персонажа.
41. 41
Рис. 67. Ім'я героя. Середовище редагування
Змінюйте, як вам хочеться. Хочете додайте зморшки, наприклад.
Рис. 68. Зміни персонажа
Після завершення роботи над героєм, Збережіть його. Програма
запропонує вам використати вашого героя у новому проєкті або повернутись до
вашої дошки.
Рис. 69. Робота над проєктом
42. 42
5.4. Робоча область. Серцевина проєкту
Рис. 70. Робоча область
Зверху розташоване меню (поділитися, публікувати, персональний кабінет
тощо), назва роботи, Головна сторінка ресурсу.
Зліва, вузькою смужкою, ви побачите інструментарій: персонажі, іконки,
фігури, розумні блоки, схеми - зображення різного ґатунку, фон, текст, відео,
музика, зображення, ефекти, завантаження тощо.
Служка ширше - Робота з персонажем. Емоції його та анімовані рухи.
Посередині - сцена, де ми будемо моделювати та форматувати самі
об’єкти, події.
Справа - макети сцен. Їх тривалість, послідовність.
Знизу під сценою - доріжка для монтування відео, виставлення часу,
накладення ефектів. та кнопки відтворення чи зупинки проєкту.
Емоції. Анімація персонажів
Натискаємо Персонажі / Character. Далі - My Characters, вставляємо
раніше змодельованого персонажа або Upgrade, творимо ще раз.
43. 43
Рис. 71. Персонаж
Коли обрали персонажа, натиснули на нього та розташували на робочий
аркуш, з’явилися нові функції для персонажа. Розглянемо їх.
Рис. 72. Дії, емоції
Action - Дія
ActionPlus - Дія Плюс
Lip-sync - Синхронізація губ
Start move - Почати рух
Animation - Анімація
Expressions - Вирази
Action / Дія - це зовнішній вигляд, позиція персонажа, стан здоров’я,
професія тощо.
44. 44
Рис. 73. Персонаж
Вираз обличчя. Емоції персонажа - Expressions
Рис. 74.Експресія
Для кожної сцени можна обирати будь-яку Дію, емоцію, навіть більше
одного героя.
ActionPlus - Дія Плюс
Можемо віддзеркалювати персонажа, рухати, вилучати. Для
підтвердження дій - Apply, для відмінити - Close.
45. 45
Рис. 75. Рухи персонажа
Lip-sync - Синхронізація губ
Рис. 76. Синхронізація
Ви можете записати свою озвучку як для всього відео, так і частково або
додати текстове повідомлення, яке програма сама озвучить. Обирає мову:
українська; хто озвучує: чоловік чи жінка (для української мови лише жіноча
озвучка). Прописуєте в робочому полі текст з розділовими знаками, далі Play /
Прослухати, наступний крок Add to TimeLine / застосувати.
46. 46
Рис. 77. Робота з текстом та звуком
Зміни відобразяться на звуковій доріжці під сценою.
Рис. 78. Звукова доріжка
Або використати із раніше записаними файлами.
Start move - Почати рух. Задаємо рух для об’єктів / суб’єктів. Для
підтвердження дій - Apply, для відмінити - Close.
Рис. 79. Рух
Animation - Анімація
Анімацію задаємо вихід / вхід, збільшення, зменшення тощо.
47. 47
Рис. 80. Анімація
Сцени додаємо ліворуч “+”. Переходи між сценами
Рис. 81. Робота над сценою
.
Натискаємо, обираємо.
Рис. 82. Зміна сцен
Розібравши функціонал середовища, переходите до створення проєкту.
48. 48
5.5. Приклади учнівських робіт
Тема. Комп’ютерний вірус ILoveYou
Автор: Голотюк Назар, 9-а клас, ліцей №3 м. Житомира
https://app.animaker.com/animo/cXdJVBQzoPjoZ9aI/
Тема. Хробак. Віруси програмного забезпечення
Автор: Щанова Вікторія. 10-В, ліцей №3 м. Житомира
https://app.animaker.com/animo/HLfRH2VDX8tbxAUN/
50. 50
Використані джерела
1. Недіґер Мідорі. Що таке інфографіка? Приклади, шаблони та поради з
дизайнування інфографіки / Мідорі Недіґер. - [Електронний ресурс] – Режим
доступу :
https://ua.venngage.com/blog/what-is-an-infographic/
2. Гейміфікація. Матеріал з Вікіпедії – вільної енциклопедії. – [Електронний
ресурс] – Режим доступу :
https://uk.wikipedia.org/wiki/Гейміфікація
