Ірина Волошинова, Оксана Соколовська

Соколовська Оксана, Волошинова Ірина

викладач математики, керівник гуртка

STEM-ПІДХІД У ЦИФРОВІЙ ОСВІТІ: ІНТЕГРАЦІЯ МАТЕМАТИЧНИХ РОЗРАХУНКІВ ТА ВЕБ-ПРОЄКТУВАННЯ В УМОВАХ СУЧАСНИХ ВИКЛИКІВ

АНОТАЦІЯ

У статті розглядається досвід реалізації бінарного уроку (математика та інформатика) як ефективної форми STEM-орієнтації освітнього процесу в цифровому суспільстві. Автори аналізують методику інтеграції теоретичних знань з геометрії (тема «Циліндр») та практичних навичок веб-програмування (HTML/CSS) навколо актуальної соціальної теми – виготовлення окопних свічок для захисників України.

Особлива увага приділяється використанню хмарних технологій та онлайн-редакторів коду (на прикладі CodePen) як відповіді на виклики цифровізації освіти. Описана методика демонструє, як поєднання математичного моделювання реальних об’єктів із цифровою візуалізацією результатів сприяє розвитку критичного мислення, інформаційної грамотності та національно-патріотичного виховання здобувачів освіти. Практична значущість роботи полягає у представленні готового кейсу, що трансформує академічні знання у дієвий інструмент вирішення прикладних волонтерських завдань.

Ключові слова: цифрова освіта, бінарний урок, STEM-технології, математичне моделювання, вебпроєктування, онлайн-сервіси, громадянська компетентність.

ВСТУП

Сучасна парадигма освіти вимагає відходу від ізольованого викладання предметів на користь інтегрованих підходів, що дозволяють учням бачити зв'язок між академічними знаннями та реальними життєвими проблемами. STEM-освіта (Science, Technology, Engineering, Mathematics) стає ключовим інструментом формування компетентностей, необхідних у цифровому суспільстві [1, с. 3]. В умовах воєнного стану та активної цифровізації особливої ваги набуває не лише технічна грамотність, а й національно-патріотичне виховання через залучення молоді до волонтерських ініціатив [6, с. 12]. Інтеграція математичного моделювання та вебтехнологій дозволяє трансформувати освітній процес у дієвий механізм вирішення прикладних завдань, що сприяє розвитку критичного мислення та соціальної відповідальності здобувачів освіти [4, с. 45].

Наше повідомлення присвячене бінарному уроку з математики та інформатики здобувачів професійно-технічної освіти ІІ курсу. Урок «Циліндр, площа поверхні і об’єм» (математика) і «Створення веб-сторінок» (інформатика) були об’єднані девізом «Окопні свічки: єднаймося й перемагаймо!». Мета уроку: поглибити знання про циліндр, застосувати формули для розрахунку площ поверхонь та об’єму циліндра; отримати навички створення веб-сторінок за допомогою HTML та CSS, навчитися використовувати онлайн-редактори коду; розвивати навички роботи з інформацією та її візуалізації.

Мотивація навчальної діяльності. Актуалізація опорних знань. Окопні свічки знову стали актуальними з початком війни в Україні. Українські волонтери організовують пункти збору матеріалів та виготовлення окопних свічок для українських захисників. Виготовлення окопних свічок – це не лише допомога нашим військовим, але й можливість для людей об’єднатися та зробити свій внесок у спільну перемогу. Отже, ми з вами вирішили зробити окопні свічки. Для цього нам знадобляться бляшанки, картон, парафін та інші матеріали. Але перш ніж розпочати роботу, давайте пригадаємо деякі знання з математики, які нам знадобляться: Що таке циліндр? Які елементи циліндра ви знаєте? Що таке твірна циліндра? Що таке висота циліндра? Що таке бічна поверхня циліндра?

Застосування знань у стандартних та змінених умовах. Наведемо приклади завдань з математики, які можна розглянути:

Задача 1. Площа бічної поверхні картонної скрутки для окопної свічки дорівнює 30π см². Висота скрутки 10 см. Знайдіть діаметр скрутки.

Задача 2. Ви маєте картонний лист площею 1000 см². Скільки картонних скруток з попередньої задачі (з діаметром 3 см) можна зробити з цього листа?

Задача 3. Ви вирішили зробити 10 окопних свічок. Скільки картонних листів площею 1000 см² вам знадобиться, якщо на одну свічку витрачається 0,9 картонного листа?

Задача 4. Ви маєте 2 кг парафіну. Скільки окопних свічок ви можете зробити, якщо для однієї свічки вам потрібно 150 г парафіну?

Задача 5. Ви хочете, щоб одна окопна свічка горіла 2 години. Ви знаєте, що 1 г воску горить приблизно 4 хвилини. Скільки воску вам знадобиться для однієї свічки?

Задача 6. Ви можете купити парафін за ціною 9 грн за 100 г. Скільки коштуватиме вам виготовлення 10 окопних свічок, якщо для однієї свічки вам потрібно 150 г парафіну?

Задача 7. Картонна скрутка для окопної свічки має форму циліндра. Її висота 10 см, а діаметр 4 см. Знайдіть об'єм цієї скрутки.

Задача 8. Скільки відсотків об'єму 10-сантиметрової бляшанки (з діаметром 5 см) заповнює картонна скрутка з попередньої задачі?

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

1. Вимірювання розмірів бляшанок: виміряйте їхню висоту за допомогою лінійки, запишіть отримане значення в сантиметрах; виміряйте діаметр основи бляшанки в сантиметрах і запишіть значення радіуса.

2. Розрахунок об’єму картону: За формулою для об’єму циліндра (V=r2h) [2, с. 42] розрахуйте значення V для своєї бляшанки, при обчисленнях константу π беремо 3,14. Нам потрібно, щоб картон займав 60% від всього об’єму, тому треба знайдений об’єм множимо на 0,6. Отримане значення показує об’єм картону, що необхідний для виготовлення окопної свічки.

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

Інформатика. Сьогодні на уроці інформатики ми створимо веб-сторінку. За допомогою неї ми зможемо розповісти іншим, як зробити окопні свічки та чим допомогти нашим захисникам.

Сьогодні ми будемо працювати з онлайн-редактором коду, який називається CodePen, що є сучасним інструментом для швидкого вебпроєктування [5, с. 24].  Він дозволяє писати код та бачити результат одразу в браузері. Відкрийте CodePen за допомогою посилань на комп’ютерах (Викладач демонструє відкриття сайту CodePen на проєкторі). Код – це набір інструкцій, які говорять комп’ютеру, що потрібно робити для відображення веб-сторінки. Ми будемо використовувати два типи коду: HTML та CSS. HTML – це основа веб-сторінки, він визначає структуру розміщення тексту та зображень. CSS – це стилі веб-сторінки, він визначає, як все буде виглядати: розмір шрифтів, колір тексту, фон сторінки тощо. Не потрібно буде писати складний код, ми використовуватимемо прості блоки коду для створення нашої веб-сторінки. Сьогодні ми створимо простий каркас веб-сторінки. За кодом стежте на правому екрані (Викладач ділиться екраном свого комп’ютера через проєктор), а ви набирайте такий самий код у себе в CodePen. Перший рядок коду <!DOCTYPE html>, другий рядок <html> – це початок веб-сторінки, напишіть його та зразу ж після нього <head>. В тегах <head> розміщується заголовок сторінки та інша інформація, яку не бачить користувач. В середині <head> напишіть <title>Окопні свічки – допоможемо разом!</title>. Це заголовок нашої сторінки, який відображатиметься у вкладці браузера. Після цього закрийте теги </head>. Тепер перейдемо до тіла веб-сторінки, де розміщуватиметься вся інформація. Напишіть <body>. Саме тут ми розповімо, як зробити окопні свічки. Для заголовка використовуємо тег <h1>Окопні свічки: зігріваємо наших захисників!</h1>. Заголовки <h1> найбільші за розміром на сторінці. Опісля цього можете додати текст про те, чому важливо допомогти українським військовим та чим саме їм потрібні окопні свічки. Для того щоб розмістити інструкцію з виготовлення, створіть заголовок <h2>Інструкція з виготовлення окопних свічок</h2> і далі по кроках описуйте процес виготовлення з допомогою тегів <p>. Не забудьте згадати про застереження безпеки під час роботи з гарячим парафіном! Наша веб-сторінка майже готова. Закрийте теги </body> і </html>, щоб завершити код. Натисніть кнопку з трикутником в верхньому правому куточку CodePen (Викладач демонструє кнопку на своєму екрані). Це запустить веб-сторінку і ви побачите результат своєї роботи!

Домашнє завдання: До наступного уроку завершіть свою веб-сторінку: за допомогою тега <img> додайте зображення виготовлення окопних свічок, ви можете знайти їх в інтернеті; за допомогою тега <а> розмістіть посилання на волонтерські організації, які збирають допомогу для українських захисників. Це сприяє формуванню інформаційної грамотності в умовах цифрового середовища [6, с. 28]. Зробіть сторінку привабливою: додайте заголовки, підзаголовки, списки та інші формати; використовуйте кольори та шрифти, щоб зробити сторінку легко читабельною. Перевірте свою роботу: переконайтеся, що всі посилання працюють правильно; перевірте, чи немає на сторінці помилок. 

Додаткові завдання: Напишіть статтю про окопні свічки. Зробіть відео про виготовлення окопних свічок: поділіться своїм досвідом з іншими; опублікуйте відео на YouTube або TikTok.

ВИСНОВКИ

Реалізація бінарного уроку на засадах STEM-підходу довела свою ефективність як інструмент інтеграції теоретичних знань та практичних навичок. Поєднання математичних розрахунків геометричних тіл з основами вебпроєктування дозволило здобувачам освіти побачити прикладну цінність навчання. Використання хмарних сервісів, зокрема CodePen, значно спростило процес засвоєння IT-компетентностей та забезпечило швидку візуалізацію результатів.

Головним результатом уроку стало не лише засвоєння програмного матеріалу, а й високий рівень залученості учнів завдяки соціально значущому контексту – допомозі Збройним Силам України. Такий комплексний підхід дає можливість зробити знання з математики та інформатики практично корисними, виховати відповідальних та патріотично налаштованих громадян України, здатних використовувати цифрові технології для вирішення реальних суспільних викликів.

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1. Методичні рекомендації щодо розвитку STEM-освіти у закладах загальної середньої та позашкільної освіти у 2023/2024 навчальному році: Лист МОН № 1/12131-23 від 14.08.23 року.

2. Бондарчук Ю. В. Математичне моделювання: навч. посібник для студентів природничих спеціальностей. Київ: НаУКМА, 2021. 124 с.

3. Морзе Н. В., Барна О. В., Вембер В. П. Інформатика: підручник для 10 (11) класу закладів загальної середньої освіти. Київ: Оріон, 2019. (Розділ: Веб-технології та мови розмітки).

4. Стеценко Г. В. STEM-освіта: теорія та практика: монографія. Черкаси: Видавець О. Ю. Вовчок, 2020. 168 с.

5. Пасічник О. Г. Веб-проєктування: HTML, CSS, JavaScript. Навчальний посібник. Львів: Видавництво Львівської політехніки, 2022.

6. Патріотичне виховання в цифровому середовищі: практичний посібник для педагогів / за ред. С. О. Литвинової. Київ: ІЦО НАПН України, 2022.