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

Проєкт: "Леся Українка: Digital Identity"

Тема: Якби поетеса жила в наш час?

План:

1. Вступ: Актуальність постаті Лесі Українки в XXI столітті.

2. Концепція інфографіки: Візуалізація сучасного образу поетеси.

3. Технологічний етап: Створення медіаконтенту (Google Фото, Canva, YouTube).

4. Теоретичне підґрунтя: Об’єктна модель документа (DOM) у вебсередовищі.

5. Висновки.

6. Список використаних джерел.

Вступ:

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

Інструментальна частина:

• Генерація: ШІ-інструменти для створення зображень (наприклад, Gemini або Midjourney).

• Організація: Google Фото для створення хмарного альбому, колажів та автоматичних відео.

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

• Публікація: YouTube для хостингу відео та Google Sites для фінальної презентації портфоліо.

Інтеграція теми "Об'єктна модель документа" (DOM):

Під час додавання проєкту на Google Сайті ми взаємодіємо з об’єктною моделлю документа.

• DOM (Document Object Model) — це програмний інтерфейс, який представляє вебсторінку як дерево об'єктів.

• Коли ти вбудовуєш відео з YouTube або додаєш текстовий блок на сторінку Google Сайту, браузер опрацьовує ці елементи як вузли (nodes) у дереві DOM. Розуміння того, що кожен заголовок, зображення чи кнопка є окремим об'єктом зі своїми властивостями, дозволяє ефективно структурувати контент на сторінці сайту.

Висновок:

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

Опис ШІ-інструментів та сервісів

На сторінку сайту варто додати такий блок:

• Gemini / ChatGPT: Використано для генерації ідей для інфографіки та структурування тексту.

• Canva Magic Media: Створення візуальних образів сучасної Лесі Українки за текстовими описами (промптами).

• Google Photos AI: Автоматичне створення колажів та розпізнавання об’єктів на зображеннях.

• Canva Video Editor: Онлайн-сервіс для нелінійного монтажу відео з використанням хмарних бібліотек.

Ключові компетентності (формування під час проєкту)

Виконуючи це завдання, учні розвивають:

1. Інформаційно-комунікаційна компетентність: Вміння працювати з хмарними сервісами, створювати мультимедійний контент та структурувати дані.

2. Культурна компетентність: Глибоке розуміння творчості Лесі Українки та здатність до її сучасної інтерпретації.

3. Навчання впродовж життя: Опанування нових інструментів ШІ, які постійно оновлюються.

4. Громадянська компетентність: Популяризація української культури в цифровому просторі (через YouTube та вебсайти).

5. Підприємливість та фінансова грамотність: Навички самопрезентації через ведення електронного портфоліо.

Поглиблення знань з інформатики

Цей проєкт допомагає перейти від теорії до практики в таких напрямах:

• Вебтехнології: Розуміння ієрархії тегів та структури сторінки через концепцію DOM.

• Хмарні технології: Організація спільного доступу до файлів у Google Фото та інтеграція сервісів між собою (Embedding).

• Алгоритмічне мислення: Створення промптів для ШІ — це фактично розробка алгоритму для отримання точного результату.

• Основи кібербезпеки: Налаштування рівнів доступу до власного сайту та відео на YouTube.

Успіхів у реалізації цього масштабного проєкту! Якщо потрібно підправити промпти для створення зображень Лесі — звертайся.

10 запитань до відеоуроку на тему «Фільтрація та сортування даних у таблицях» (СУБД Access), які допоможуть учням 9 класу перевірити засвоєння матеріалу:

1. Повторення основ: Які типи даних найчастіше використовуються в полях бази даних Access (згідно з початком відео)?

2. Пошук даних: Опишіть алгоритм пошуку конкретного значення в таблиці бази даних. На якій вкладці знаходиться інструмент пошуку?

3. Сортування: Які два види сортування даних доступні в програмі Access і за якими правилами вони впорядковують інформацію?

4. Фільтрація (визначення): Що таке фільтрація даних у базі даних і чим вона відрізняється від звичайного пошуку?

5. Навігація в інтерфейсі: У якій групі інструментів на вкладці «Основне» зосереджені кнопки для керування сортуванням та фільтрами?

6. Робота з текстовими фільтрами: Як за допомогою фільтра відобразити в таблиці лише тих учнів, які мають конкретне ім'я (наприклад, Юлія)?

7. Числові фільтри: Як встановити фільтр «Між», щоб відібрати записи за певним діапазоном оцінок (наприклад, від 10 до 12 балів)?

8. Заміна даних: Яку послідовність дій потрібно виконати, щоб автоматично замінити одне слово на інше у всьому документі (наприклад, «зараховано» на «зарах»)?

9. Скасування дій: Як швидко прибрати (очистити) всі встановлені фільтри, щоб знову побачити повний список записів у таблиці?

10. Режим Конструктора: Для чого автор відео використовує режим «Конструктор» перед початком виконання практичних завдань із даними?

1. Що таке мови веб-скриптів?

Веб-скрипти — це невеликі програми, які додають веб-сторінкам інтерактивності. Якщо HTML відповідає за структуру (текст, заголовки), а CSS — за дизайн (кольори, шрифти), то скрипти відповідають за поведінку.

Найпопулярніша мова клієнтських скриптів — JavaScript (JS).

Основні функції скриптів:

• Створення анімацій та ефектів.

• Перевірка даних у формах (наприклад, чи правильно введено email).

• Оновлення вмісту сторінки без її перезавантаження (як стрічка у соцмережах).

• Взаємодія з користувачем (реакція на натискання кнопок, рух миші).

2. Способи використання скриптів у документах

Скрипти інтегруються в HTML-документ двома основними способами:

1. Внутрішній скрипт: Код розміщується безпосередньо всередині HTML-файлу за допомогою тегу <script>.

   HTML

   <script>
    alert('Вітаю на уроці інформатики!');
   </script>
   

2. Зовнішній скрипт: Код пишеться в окремому файлі (з розширенням .js), а в HTML-документі додається лише посилання на нього. Це зручно для великих проєктів.

   HTML

   <script src="myscript.js"></script>
   

3. Створення скриптів за допомогою ШІ

Штучний інтелект (наприклад, Gemini або ChatGPT) значно спрощує написання коду. Замість того, щоб вчити складний синтаксис напам'ять, можна описати завдання звичайною мовою.

Приклад завдання для ШІ (Промпт):

"Напиши простий JavaScript-код для веб-сторінки, який при натисканні на кнопку змінює колір фону сторінки на випадковий."

Результат, який згенерує ШІ:

HTML-частина:

HTML

<button onclick="changeColor()">Змінити колір</button>

JavaScript-частина:

JavaScript

function changeColor() {
 // Генеруємо випадковий колір
 const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
 // Змінюємо фон сторінки
 document.body.style.backgroundColor = randomColor;
}

Як це працює в навчанні:

1. Генерація: Ви отримуєте готовий каркас коду.

2. Аналіз: Ви розбираєте, за що відповідає кожна команда (наприклад, document.body.style звертається до стилів усієї сторінки).

3. Корекція: Ви можете попросити ШІ: "Додай до цього коду анімацію плавного переходу кольору".

Важливо: ШІ — це чудовий асистент, але він може помилятися. Завжди перевіряй логіку виконання скрипту в браузері через "Інструменти розробника" (клавіша F12).

10 запитань, складених на основі матеріалів відеоуроку про роботу з базами даних в Microsoft Access, які допоможуть перевірити розуміння теми учнями 9 класу:

1. Етапи проєктування: Які три ключові параметри необхідно визначити для кожного поля таблиці ще на етапі проєктування бази даних?

2. Вплив типів даних: Як вибір типу даних впливає на роботу бази даних (зокрема на пам'ять та швидкість опрацювання)?

3. Різниця між текстами: У чому полягає основна відмінність між типами даних «Короткий текст» та «Довгий текст» в Access?

4. Обчислювальне поле: Для яких цілей використовується тип даних «Обчислювальний» та як правильно записувати назви полів у виразах для обчислень?

5. Наслідки помилок: До яких наслідків може призвести неправильно обраний тип даних (наприклад, «Текст» замість «Дата/час» для дня народження)?

6. Майстер підстановок: Поясніть призначення «Майстра підстановок». У яких ситуаціях його зручно використовувати?

7. Обмеження в іменах: Які символи заборонено використовувати в іменах полів бази даних?

8. Режим Конструктора: Які додаткові можливості для налаштування полів (наприклад, розмір поля або формат) з'являються у користувача при роботі в режимі «Конструктор»?

9. Обов'язкові поля: Що станеться під час введення даних, якщо для певного поля у властивостях встановлено значення «Обов'язково — Так», але користувач залишив його порожнім?

10. Ключове поле: Чому для ключових полів властивість «Обов'язкове поле» завжди має бути активована?

План сторінки: "Світ крізь точку: Магія центральної симетрії"

1. Вступ: Що це таке? (Простими словами)

• Визначення: Центральна симетрія — це таке перетворення, де кожна точка фігури відображається відносно центру (точки $O$) на таку ж відстань, але в протилежному напрямку.

• Головна фішка: Це те саме, що поворот фігури на 180°. Фігура ніби "перевертається" догори дриґом і задом наперед одночасно.

2. Як впізнати центральну симетрію? (Особливості)

• Центрально-симетрична фігура виглядає однаково, якщо на неї подивитися звичайним чином і "догори ногами".

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

3. Галерея: Центральна симетрія навколо нас (9 прикладів)

Тут я описую, які саме фото варто підібрати та що до них додати у підписі:

🌿 У природі

1. Квітка проліска або нарциса (вид зверху): Центр квітки — це точка симетрії. Пелюстки розташовані парами одна навпроти одної.

2. Сніжинка: Класичний приклад. Кожен промінь сніжинки має свого "двійника" з протилежного боку від центру.

3. Морська зірка (з парною кількістю променів): Якщо провести лінію через центр, кінці променів будуть симетричними.

⚙️ У техніці

4. Пропелер літака або квадрокоптера: Лопаті мають бути ідеально симетричними відносно вала, інакше виникне вібрація і техніка зламається.

5. Кермо автомобіля (класичне): Значок бренду в центрі, а елементи керування розташовані так, щоб водію було зручно крутити його на будь-який кут.

6. Гайковий ключ або болт: Шестигранна форма головки болта має центр симетрії, що дозволяє ключу "підхоплювати" його з різних положень.

🏠 У побуті

7. Гральна карта (наприклад, "Дама" або "Король"): Це ідеальний приклад з підручника. Малюнок спеціально зроблений так, щоб карта виглядала однаково, як би ти її не взяв.

8. Циферблат годинника: Точка кріплення стрілок — це центр симетрії для цифр (12 навпроти 6, 9 навпроти 3).

9. Орнамент на килимі або кахлі: Часто використовується "розетка" — візерунок, що розходиться від центру.

4. Інтерактив: "Перевір себе"

• Запитання: Чи має центр симетрії літера "S"? А літера "О"? (Відповідь: так, обидві мають).

• Завдання: Спробуй знайти центр симетрії у звичайному олівці (якщо він не заточений з обох боків, то симетрії немає!).

5. Заключне слово

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

Порада для оформлення:

Для Google Colab або веб-сторінки можна використати яскраві заголовки та рамки для фото. Якщо будеш робити це в Colab, фото можна завантажити через бібліотеку IPython.display.Image.

Тобі допомогти знайти посилання на ці фото чи підібрати координати для малювання якоїсь із цих фігур на Python?

Ваше завдання — створити інтерактивну модель центральної симетрії.

Що потрібно зробити:

1. Придумай фігуру: Це може бути трикутник, чотирикутник або навіть перша літера твого імені, задана координатами вершин $A, B, C, D...$

2. Вибери "центр всесвіту": Нехай це буде точка $O(0, 0)$. Згадай правило: щоб отримати симетричну точку, просто зміни знаки координат на протилежні $(x, y) \to (-x, -y)$.

3. Напиши код: Створи програму на Python (використовуй бібліотеку matplotlib), яка:

   • Малює твою початкову фігуру.

   • Обчислює та малює її симетричну "копію".

   • Додає координатну сітку для точності.

4. Запусти в Google Colab: Перевір, чи правильно твоя фігура "перестрибнула" через центр.

Завдання 1. "Стильний мінімалізм: Створення фавікона"

Мета: Зрозуміти різницю між форматами та навчитися працювати з надмалими форматами (піксель-артом).

• Інструмент: Pixilart або Favicon.io.

• Легенда: Уяви, що ти створюєш власний бренд або блог. Тобі потрібно розробити фавікон — ту саму маленьку іконку, що відображається на вкладці браузера.

• Твоя задача:

  1. Створити малюнок розміром 32x32 пікселі.

  2. Використати лише 2-3 контрастні кольори (щоб на маленькому екрані було зрозуміло, що зображено).

  3. Зберегти результат у форматі .png або .ico.

• Питання на засипку: Чому для фавікона не варто використовувати формат JPEG?

Завдання 2. "Магія векторів: Логотип у стилі Google"

Мета: Освоїти основи векторної графіки (криві, шари, геометричні примітиви).

• Інструмент: Vectr або Figma.

• Легенда: Тобі замовили логотип для нового стартапу "EcoWave". Він має бути сучасним, масштабованим (векторним) і виглядати чітко на будь-якому екрані.

• Твоя задача:

  1. Використовуючи лише прості фігури (кола, квадрати) та інструмент "Перо" (Pen tool), створи абстрактну хвилю або листок.

  2. Навчися групувати об'єкти та змінювати їхній колір за допомогою HEX-кодів (наприклад, #2ecc71 для зеленого).

  3. Експортуй файл у форматі SVG.

• Чому це важливо: Спробуй збільшити свій логотип у 10 разів у редакторі. Чи змінилася якість?

Завдання 3. "Оптимізатор: Битва за швидкість завантаження"

Мета: Навчитися балансувати між якістю зображення та його вагою (важливо для SEO та швидкості сайтів).

• Інструмент: Squoosh.app (сервіс від Google для стискання).

• Легенда: Ти верстаєш головну сторінку сайту. У тебе є круте фото високої якості (наприклад, з Unsplash), але воно важить 5 МБ. Сайт вантажиться вічність!

• Твоя задача:

  1. Завантаж будь-яке якісне фото у Squoosh.

  2. Порівняй різні методи стиснення: WebP, MozJPEG та OxiPNG.

  3. Знайди "золоту середину": стисни фото так, щоб воно важило менше 200 КБ, але візуально не перетворилося на "кашу" з пікселів.

• Результат: Зроби скриншот порівняння "До" та "Після" з показниками розміру файлу у відсотках.

Таблиця форматів для довідки

Щоб тобі було легше орієнтуватися під час виконання, підготував шпаргалку:

Завдання 1. "Стильний мінімалізм: Створення фавікона"

Мета: Зрозуміти різницю між форматами та навчитися працювати з надмалими форматами (піксель-артом).

• Інструмент: Pixilart або Favicon.io.

• Легенда: Уяви, що ти створюєш власний бренд або блог. Тобі потрібно розробити фавікон — ту саму маленьку іконку, що відображається на вкладці браузера.

• Твоя задача:

  1. Створити малюнок розміром 32x32 пікселі.

  2. Використати лише 2-3 контрастні кольори (щоб на маленькому екрані було зрозуміло, що зображено).

  3. Зберегти результат у форматі .png або .ico.

• Питання на засипку: Чому для фавікона не варто використовувати формат JPEG?