КЗ «Запорізький обласний інститут післядипломної педагогічної освіти» ЗОР

Методист з хімії обласного науково-методичного центру КЗ «ЗОІППО» ЗОР, магістр педагогіки вищої школи,

учитель-методист

Світлана ДЕХТЯРЕНКО

т.0672807657 dextsv@gmail.com

​

«Освітній регіональний проєкт НУШ 7 клас. Розроблення електронних ресурсів з хімії»

Тема: Апробація, впровадження та оновлення курсу

Дата проведення: 28.11.2025

Місце проведення: дистанційно

Категорія учасників: учителі хімії

Мета. Зосередження на тестуванні курсу, його вдосконаленні та підготовці до впровадження в освітній процес

1. Адаптація контенту для різних пристроїв.

2. Апробація електронного курсу.

3. Впровадження, моніторинг та оновлення курсу

1. Адаптація контенту для різних пристроїв

Технічні особливості:

1. як забезпечити доступність курсу на комп’ютерах, планшетах і смартфонах,
2. оптимізувати розмір файлів для швидкого завантаження,
3. перевірити коректність відображення презентацій, відео та інтерактивних завдань на різних пристроях

Як забезпечити доступність курсу на комп’ютерах, планшетах і смартфонах?

1. Використовуйте адаптивні теми Moodle

Платформа Moodle застосовує адаптивний (responsive) дизайн. Сучасні версії Moodle використовують адаптивні теми, які автоматично підлаштовуються під розмір екрана пристрою (комп'ютера, планшета чи смартфона), забезпечуючи зручний користувацький досвід

• Уникайте великих таблиць і широких зображень.
• Робіть завдання короткими, з поділом на блоки.
• Використовуйте вкладки — вони компактні на смартфонах

2. Форматуйте курс у мобільно-дружньому вигляді

Учні можуть:

• переглядати курс;
• проходити тести;
• завантажувати матеріали офлайн;
• отримувати повідомлення.

​

Це значно покращує мобільну доступність.

3. Використовуйте офіційний застосунок Moodle App

Для смартфонів найкраще підходить:

• PDF (адаптивний перегляд)
• MP4 для відео
• зображення у WEBP або JPG

​

Уникайте: DOC, PPT — вони погано відкриваються без офісних програм.

4. Використовуйте нейтральні формати файлів

У Chrome:�F12 → Toggle device toolbar → вибрати смартфон�Так можна швидко перевірити верстку матеріалів.

6. Тестуйте курс у режимі «телефон» у браузері

Щоб імітувати перегляд сайту на смартфоні в Chrome, натисніть F12, F12+Fn або Ctrl+Shift+M, щоб відкрити інструменти розробника, а потім натисніть кнопку "Toggle device toolbar" (значок телефону/планшета) у верхній панелі.

​

​

​

​

​

Після цього ви зможете вибрати зі списку конкретну модель смартфона або налаштувати його параметри, як-от роздільна здатність. 

https://www.youtube.com/watch?v=xoAi5KIrS4c

2. Як оптимізувати розмір файлів у курсі, щоб вони швидко завантажувалися

1. Оптимізація зображень

✔ Формати:

• WebP — найкращий, зменшує розмір у 2–4 рази.
• JPG — для фото.
• PNG — тільки коли потрібна прозорість.

✔ Рекомендовані параметри:

• Ширина: 800–1200 px
• Якість JPG: 70–80%

✔ Інструменти:

• TinyPNG / TinyJPG
• Squoosh (дуже ефективний)
• Canva → "Стиснення зображення" при експортуванні

2. Оптимізація PDF

PDF часто бувають громіздкими.

✔ Що робити:

• Експортуйте PDF із параметром «Оптимізувати для веб» або "Reduced size"
• Стискайте через:
• ilovepdf.com/compress
• Smallpdf Compress
• Уникайте PDF з вбудованими зображеннями у 300 dpi�Оптимально: 150 dpi для екранів

3. Оптимізація відео

Відео — найбільші «важковаговики».

✔ Формат:

• MP4 (H.264) — стандартний і легкий.
• Якщо можливо — WebM ще менше важить.

✔ Рекомендовані параметри:

• Роздільна здатність: 720p (для уроків достатньо)
• Бітрейт: 1–2 Mbps

✔ Інструмент:

• HandBrake — безкоштовно, стискає без втрати якості

4. Не завантажуйте Word / PowerPoint напряму

DOCX і PPTX важкі та відкриваються повільно.

✔ Рішення:

• Експортуйте їх у PDF (попередньо оптимізований)
• Або перетворюйте у Moodle Page / Book, що завантажуються миттєво

5. Використовуйте H5P замість великих презентацій

H5P(https://www.youtube.com/watch?v=UJ-IqGAICSU ):

• економить розмір,
• працює швидко,
• адаптивний для смартфонів.

6. Перевіряйте вагу всіх матеріалів

Підходьте так:

• Зображення ≈ 100–300 KB
• PDF ≈ до 1–2 MB
• Відео 2–5 хв ≈ 10–20 MB
• Презентації й документи → не більше 1 MB, якщо у PDF

3. Як перевірити коректність відображення презентацій, відео й інтерактивних завдань на різних пристроях

Перевірка складається з 4 основних кроків, і їх достатньо для повної впевненості.

1. Перевірка через комп’ютер (режим емуляції смартфонів)

У Chrome та Edge є вбудований інструмент, що дозволяє "побачити", як курс виглядатиме на телефоні.

✔ Як зробити:

(розглядали раніше)

1. Відкрийте сторінку Moodle з матеріалом.
2. Натисніть F12 (або Ctrl+Shift+I).

У верхньому меню натисніть значок смартфона «Toggle device toolbar».

4. Виберіть модель пристрою:

• iPhone SE / iPhone 12
• Samsung Galaxy S8 / S20
• iPad

5. Перевірте:

• чи видно весь текст;
• чи працює відео;
• чи не "ламається" презентація;
• чи масштабується інтерактив H5P/SCORM.

​

✔ На що звернути увагу:

• Чи не виходять зображення за межі екрана
• Чи працюють кнопки навігації
• Чи читається текст без масштабування

2. Перевірка через реальні смартфони й планшети

Це найточніший спосіб.

​

✔ Які пристрої бажано протестувати:

• 1 Android-смартфон (бюджетний)
• 1 сучасний Android
• 1 iPhone
• 1 планшет

Бюджетні моделі часто показують помилки, які не видно на дорогих телефонах.

​

✔ Що перевірити:

• Презентації (PDF, HTML5, H5P)
• Відео (вставлене або через YouTube)
• Інтерактиви (H5P, SCORM, симуляції)

Практичний тест: попросіть 2–3 учнів пройти завдання з телефона — це дає найправдивішу картину.

3. Перевірка через офіційний застосунок Moodle App

Цей крок дуже важливий, бо інколи матеріали поводяться інакше в браузері та в застосунку.

✔ Що перевірити:

• Чи відкриваються PDF
• Чи відтворюється відео
• Чи працює SCORM
• Чи зберігаються відповіді в H5P

Особливо важливо тестувати офлайн-режим.

4. Перевірка швидкості завантаження

Хоч курс відображається правильно, але якщо він повільно вантажиться — це проблема.

✔ Перевірка через Google PageSpeed (підходить і для Moodle):

• Введіть URL сторінки з презентацією/інтерактивом
• Перевірте:
1. вагу зображень
2. час завантаження
3. оптимізацію відео
4. адаптивність

Отже, що має бути ок?

​

Курс вважається повністю сумісним, якщо:

• 📌 Презентації видно без горизонтальної прокрутки
• 📌 Текст не менший за 14 px
• 📌 Відео запускається одразу
• 📌 Інтерактиви не обриваються по краях
• 📌 Завдання проходяться без помилок
• 📌 Матеріал відкривається в Moodle App