ОСВIТНЯ ПРОГРАМА підвищення кваліфікації педагогічних працівників "Основи веб-технологій"

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

Програма ґрунтується на компетентнісному, діяльнісному та інтегрованому підходах. Передбачає опанування педагогами засад сучасної цифрової дидактики, розвиток цифрової культури та враховує вимоги Державних стандартів загальної середньої освіти і зміст Професійного стандарту «Вчитель закладу загальної середньої освіти».

МОДУЛЬ 1. Інструменти ШІ та методичний дизайн в інформатичній освіті НУШ 

Тема 1.1. Трансформація змісту інформатики в НУШ: компетентнісний підхід, обчислювальне мислення та цифровий освітній простір, інформаційна безпека 

Цифрова трансформація освіти в Україні та її інтеграція з сучасними веб-технологіями. Поняття електронного освітнього середовища. Європейські рамки цифрової грамотності та цифрової зрілості закладу освіти. Нормативно-правове забезпечення цифровізації суспільства та освіти в Україні та за кордоном. Правові та етичні норми використання цифрових технологій в освіті. Можливості, переваги та виклики створення цифрового освітнього середовища. Психолого-педагогічні умови організації освітнього процесу в НУШ. Наступність та профілізація навчання. Огляд основних модельних програм з інформатики: порівняльний аналіз, основні підходи та особливості викладання вибіркового модуля веб-технологій у старшій школі. Відповідальна й безпечна поведінка в цифровому просторі. Захист цифрових пристроїв, персональних даних та цифрових освітніх ресурсів від кібератак та онлайн-злочинів. Захист від небажаного контенту, правила онлайн-спілкування та формування медіакультури і критичного мислення вчителя та учня.

Тема 1.2. Практика використання ШІ у НУШ: виклики, можливості, генерація коду, завдань та академічна доброчесність 

Використання генеративного ШІ для підготовки навчальних матеріалів, планів уроків інформатики та диференціації завдань відповідно до принципів НУШ. Можливості штучного інтелекту для генерації тексту, зображень, відео та коду HTML/CSS. Особливості швидкого проектування макетів сайтів за допомогою ШІ-помічників. Цифрові помічники вчителя на основі ШІ для персоналізації навчання та підтримки здобувачів освіти. Використання спеціалізованих цифрових інструментів для організації ефективної навчальної взаємодії та групової роботи. Етичні аспекти, академічна доброчесність та розвиток критичного ставлення учасників освітнього процесу до результатів роботи ШІ. Ризики, пов’язані з автоматизованими рішеннями ШІ. Конструювання та диференціація дослідницьких завдань за допомогою ШІ. Принципи prompt engineering для розробки навчального контенту.

МОДУЛЬ 2. Веб-технології, адаптивна розмітка та проектування інтерфейсів 

Тема 2.1. Мова розмітки HTML, базова структура документа, теги форматування, списки, форми та таблиці 

Мова гіпертекстової розмітки HTML. Основні поняття та історія розвитку веб-технологій. Вступ у HTML5. Елементи (теги) та їх атрибути. Базова структура веб-документу, призначення тегів html, head, body, meta. Теги форматування тексту: жирний, курсив, підкреслення, заголовки різного рівня, вирівнювання тексту. Вбудовування вмісту: створення та оформлення гіперпосилань, відносні та абсолютні шляхи, відкриття посилань у новому вікні. Робота з графікою: вставка картинок на веб-сторінку, додавання атрибутів src, alt, розширення та оптимізація зображень. Списки: марковані та нумеровані списки, створення складних вкладених списків для структуризації інформації. Таблиці: створення та форматування таблиць, додавання заголовків, об'єднання рядків та стовпчиків за допомогою атрибутів rowspan та colspan. Форми як інструмент збору даних: основні елементи форм, текстові поля, кнопки, прапорці, списки вибору, передача даних на сервер. Семантична розмітка в HTML5, семантичні елементи header, nav, main, article, section, footer, їх значення для SEO та безбар'єрності.

Тема 2.2. Каскадні таблиці стилів CSS, селектори, псевдокласи, специфічність, властивості відображення та побудова меню 

Каскадні таблиці стилів CSS. Вступ до CSS, переваги використання та відокремлення логічної структури веб-сторінки від її зовнішнього вигляду. Синтаксис CSS, визначення та застосування правил (стилів). Види підключень: внутрішні, зовнішні та вбудовані стилі. Основи роботи з CSS та селекторами. Типи селекторів: селектори тегів, класів, ідентифікаторів, універсальні та комбіновані селектори. Селектори, специфічність і каскадування стилів, правила вирішення конфліктів стилей. Робота з властивостями CSS. Типи властивостей: параметри шрифтів, колір, фон, рамки, відступи (padding, margin). Одиниці вимірювання в CSS: абсолютні та відносні одиниці. Спадкування властивостей. Селектори та псевдокласи (hover, active, focus, visited) та псевдоелементи. Створення навігаційного меню за допомогою CSS: скасування стандартних стилів списку, додавання блочного відображення, налаштування фонових ефектів та hover-анімації для покращення взаємодії з користувачем.

Тема 2.3. Адаптивний інтерфейс користувача, гумове верстання, медіа-запити та сучасні методи розмітки Flexbox і Grid 

Адаптивний інтерфейс користувача. Що таке адаптивний дизайн та його переваги для забезпечення доступності сайтів на різних пристроях. Гумове верстання: створення адаптивної розмітки за допомогою відносних одиниць вимірювання (відсотки, em, rem, vh, vw). Медіа-запити (media queries): синтаксис та використання медіа-запитів для адаптивного дизайну, концепція Mobile First. Сучасні методи розмітки. Flexbox: основні принципи Flexbox, концепція флекс-контейнера та флекс-елементів, осі вирівнювання, властивості justify-content, align-items, flex-direction. Використання Flexbox для швидкого та гнучкого розміщення елементів інтерфейсу. CSS Grid Layout: основні принципи Grid, створення сіток, визначення колонок та рядків (grid-template-columns, grid-template-rows), робота з областями сітки. Трансформації CSS: переміщення, обертання, масштабування елементів. Анімації та переходи CSS (transitions, keyframes), їх використання для покращення користувацького досвіду (UX).

Тема 2.4. Динамічний веб, HTML Canvas, асинхронне виконання в JavaScript, Event Loop та налаштування веб-сервера 

HTML Canvas як інструмент створення динамічних візуалізацій на веб-сторінці за допомогою JavaScript. Програмне маніпулювання пікселями, малювання фігур, тексту, створення анімацій та інтерактивних додатків у реальному часі. Динамічні вебсторінки, що генеруються на основі логіки та запитів користувача. Реалізація асинхронного виконання коду. Синхронність проти асинхронності: концепція блокування основного потоку. Механізми асинхронності в браузері: CALL STACK, Event Loop та WEB API. Обробка черги подій (Event Queue). JQuery Deferred та концепція Promise. Налаштування веб-сервера, встановлення та конфігурація програмного забезпечення (на прикладі Apache або Nginx), налаштування середовища виконання скриптів PHP та підключення баз даних MySQL. Системи керування вмістом (СКВ/CMS): класифікація, призначення, вибір системи відповідно до цілей. Огляд освітніх систем керування вмістом: Moodle, Drupal, ATutor, Ilias, їх функціональні особливості та застосування для дистанційної освіти. Організація учнівських проєктів у веб-розробці.

Тема 2.5. Семінар з обміну досвідом: Презентація авторських методичних кейсів та технології ШІ-оцінювання коду 

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

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

 

Орієнтовний перелік практичних завдань. 

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

Практичні завдання спрямовані на формування й удосконалення професійних умінь і цифрових навичок педагогічних працівників, компетентностей з організації освітнього процесу за дистанційною/змішаною формами навчання, перенесення теоретичних знань у практику професійної педагогічної діяльності.

Результати роботи (посилання на розроблені цифрові продукти) фіксуються у таблиці просування. Практичні завдання слухачі курсу самостійно завантажують в персональну папку на Google Диску. 

Практична робота. Створення базової структури HTML-документа, використання тегів заголовків, абзаців та тегів форматування тексту. Налаштування мета-тегів для кодування сторінки.

Практична робота. Розробка веб-сторінки, що містить комбіновані списки (марковані та нумеровані), вставку оптимізованих зображень та налаштування внутрішніх і зовнішніх гіперпосилань.

Практична робота. Проектування та створення інтерактивної форми збору даних для сайту: розміщення текстових полів, перемикачів, прапорців та кнопок відправки із застосуванням валідації HTML5.

Практична робота. Створення багаторядкової таблиці складного типу з об'єднанням осередків по вертикалі та горизонталі для представлення розкладу занять або навчального плану.

Практична робота. Робота з елементом HTML Canvas: написання базового скрипту на JavaScript для малювання геометричних фігур та графіків навчальних досягнень учнів.

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

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

Лабораторна робота. Візуальне оформлення веб-сторінки за допомогою зовнішнього файлу CSS. Налаштування колірної палітри, меж, шрифтів та відступів для елементів розмітки.

Лабораторна робота. Побудова горизонтального та вертикального навігаційного меню для сайту на основі списків та каскадних стилів із додаванням псевдокласів для hover-ефектів.

Лабораторна робота. Верстання адаптивної сторінки портфоліо вчителя за допомогою моделі Flexbox. Налаштування вирівнювання карток контенту за головною та бічною осями.

Лабораторна робота. Створення комплексної структури головної сторінки освітнього порталу за допомогою CSS Grid Layout, забезпечення адаптивності сітки для мобільних пристроїв через медіа-запити.

Перелік тем для самостійної роботи слухачів

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

Правові аспекти використання відкритих графічних та текстових ресурсів, захист авторських прав та правила цитування коду з відкритих репозиторіїв.

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

Етичні ризики, загрози та обмеження при використанні генеративного штучного інтелекту під час розробки програмного та веб-забезпечення.

Складання чекліста самоаудиту веб-ресурсу на відповідність принципам цифрової безбар'єрності та доступності для дітей з особливими освітніми потребами.

Методика використання вітчизняних та міжнародних інтернет-порталів для підготовки обдарованих учнів до олімпіад з інформатики та веб-розробки.

Особливості диференційованого підходу до вивчення технологій адаптивного верстання на факультативних заняттях у школі.

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

 

 

Слухачі курсу після успішного завершення навчання повинні продемонструвати такі результати:

Знання і розуміння:

Традиційної та сучасної методології предметної спеціалізації «Інформатика», методів проектування та розробки програмного забезпечення, веб-ресурсів та інтерфейсів користувача.

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

Нормативно-правового забезпечення цифровізації освіти в Україні, правових та етичних норм використання цифрових технологій, захисту авторських прав та стандартів академічної доброчесності.

Уміння:

Створювати семантично правильні веб-сторінки за допомогою HTML5 та застосовувати каскадні таблиці стилів CSS3 для візуального оформлення елементів та створення навігаційних меню.

Розробляти адаптивні інтерфейси користувача з використанням відносних одиниць вимірювання, медіа-запитів та сучасних методів розмітки Flexbox та Grid.

Застосовувати інструменти генеративного ШІ для автоматизації підготовки дидактичних матеріалів, генерації та відлагодження коду, проектування інтерактивних тестів.

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

Диспозиції:

Здатність критично оцінювати достовірність, надійність інформаційних джерел та результатів роботи ШІ-сервісів.

Відповідальне ставлення до використання інтелектуальних систем, пріоритетність педагогічного досвіду та критичного мислення вчителя над автоматизованими рішеннями ШІ.

Критерії оцінювання результатів підвищення кваліфікації

Система оцінювання за Програмою базується на 100-бальній шкалі та включає формувальне та підсумкове оцінювання. Розподіл балів здійснюється таким чином:

Виконaння практичних та лабораторних робіт: 4 комплексних змістовних завдання по 15 балів (максимум – 60 балів).

Підсумкове тестування: комп'ютерний тест, що містить 20 питань (максимум – 40 балів).

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