Практичні завдання

1. Живий зворотний відлік до події

Завдання: Додати на сторінку таймер, який у реальному часі показує дні, години та хвилини до певної дати (наприклад, до кінця навчального року).

• Інструмент: Вбудований HTML-код (Custom Embed).

• Результат: Цифри змінюються щосекунди без перезавантаження сторінки.

  ---

  ---

  ---

  ---

  ---

   

2. Динамічна галерея-карусель

Завдання: Налаштувати автоматичне прокручування зображень (слайд-шоу) з анімацією переходу.

• Інструмент: Стандартний блок "Карусель зображень".

• Результат: Зображення змінюються самостійно з заданою швидкістю.

Інструкція до виконання завдання №4

1. Підготовка контенту:

   • Підготуй 3–5 зображень однакового розміру (це важливо для охайного вигляду сайту). Це можуть бути фото класу, природи або скриншоти твоїх робіт.

2. Додавання віджета:

   • На панелі інструментів праворуч вибери вкладку Вставити.

   • Прокрути вниз до списку віджетів і натисни на Карусель зображень.

   • Натисни на «+» і вибери «Завантажити зображення» або «Вибрати зображення».

3. Налаштування динаміки (Критичний крок):

   • Коли зображення додані, не поспішай натискати «Вставити». У вікні редагування каруселі зверху праворуч натисни на значок Налаштування (шестерня ⚙️).

   • Постав галочку навпроти пункту Автозапуск.

   • Вибери Швидкість переходу (наприклад, «Повільно» або «Середня»). Це і зробить твою галерею динамічною.

4. Завершення:

   • Натисни «Вставити». Тепер розтягни блок каруселі на потрібну ширину сторінки.

     ---

     ---

     ---

     ---

     ---

      

3. Інтерактивна кнопка-перемикач (Ефект наведення)

Завдання: Створити кнопку за допомогою коду, яка змінює колір або розмір при наведенні курсору.

• Інструмент: HTML/CSS (блок "Вставити код").

• Результат: Візуальний відгук інтерфейсу на дії користувача.

4 Вбудовування презентації Google Slides із функцією автовідтворення — це чудовий спосіб додати динамічний контент на сайт. У цьому випадку презентація перетворюється на кероване або автоматичне слайд-шоу.

Ось покрокова інструкція для виконання цього завдання:

Крок 1: Налаштування презентації (в Google Slides)

Перш ніж додавати презентацію на сайт, її потрібно правильно "опублікувати":

1. Відкрий свою презентацію в Google Slides.

2. Перейди в меню Файл (File) -> Поділитися (Share) -> Опублікувати в інтернеті (Publish to the web).

3. У вікні, що з’явиться, вибери вкладку Вбудувати (Embed).

4. Важливо для динаміки: * Встанови прапорець "Запускати слайд-шоу відразу після завантаження програвача".

   • Встанови прапорець "Починати слайд-шоу заново після останнього слайда" (це створить нескінченний цикл).

   • Вибери час затримки між слайдами (наприклад, кожні 3 або 5 секунд).

5. Натисни кнопку Опублікувати та скопіюй HTML-код (він починається з <iframe...).

Крок 2: Вбудовування на Google Сайт

1. Відкрий свій Google Сайт у режимі редагування.

2. На панелі праворуч вибери вкладку Вставити (Insert).

3. Натисни на інструмент Вбудувати (Embed).

4. У вікні вибери вкладку Вставити код (Embed code).

5. Встав скопійований раніше код і натисни Далі, а потім Вставити.

Альтернативний (швидкий) спосіб через Google Диск

Якщо тобі не потрібні специфічні налаштування циклу, а достатньо просто додати презентацію:

1. На панелі Google Сайту Вставити прокрути вниз до розділу "Google Документи" і вибери Презентації.

2. Вибери потрібний файл зі свого диска.

3. Після того, як презентація з'явиться на сторінці, натисни на неї, щоб з'явилася панель налаштувань (іконка шестерні ⚙️).

4. У налаштуваннях постав галочки:

   • Автозапуск.

   • Зациклювання.

5. Натисни Готово.

Порада для перевірки:

Як і у випадку з каруселлю зображень, автовідтворення може не спрацювати безпосередньо в конструкторі. Обов'язково натисни кнопку "Попередній перегляд" (зверху в меню), щоб побачити, як презентація самостійно гортає слайди.

Етапи створення презентації та вимоги до її оформлення. С. 221-231

Створюємо рекламу: від ідеї до презентації

Що таке реклама?

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

Чи можна назвати презентацію рекламою? Так! Якщо ваша презентація розповідає про переваги якогось продукту, проєкту чи ідеї, щоб зацікавити інших — вона виконує роль реклами.

4 кроки до ідеальної презентації

Щоб рекламна презентація була успішною, її потрібно створювати поетапно:

1. Планування (Підготовчий етап)

Перш ніж відкривати комп'ютер, дайте відповіді на запитання:

• Мета: Навіщо я це роблю? (Розповісти, запросити).

• Аудиторія: Для кого це? (Для друзів, вчителів чи батьків).

• Сценарій та структура: Про що я скажу спочатку, а чим закінчу?

2. Підготовка вмісту

Зберіть усі «матеріали» для слайдів:

• Яскраві зображення.

• Короткий та зрозумілий текст.

• Посилання на джерела, які ви використали.

3. Створення слайдів

Це технічний етап роботи в програмі (наприклад, PowerPoint або Google Презентації):

• Виберіть шаблон, який відповідає темі.

• Розмістіть текст і картинки так, щоб їх було зручно розглядати.

4. Репетиція виступу

Фінальна перевірка вашої роботи:

• Перегляньте презентацію самостійно.

• Виправте помилки, якщо вони є.

• Спробуйте виступити перед кимось із близьких, щоб почути їхню думку.

Порада для успіху: Найкраща реклама — та, що не дратує! Вона має бути корисною, естетичною та чесною.

Завдання для самоперевірки:

1. Подумай, яка реклама в інтернеті тобі подобається найбільше і чому?

2. Які навички (крім знання інформатики) потрібні, щоб створити круту рекламу?

Google Colab

Промпт:

Напиши програму на Пайтоні, яка намалює квадрат, кожна сторона якого різного кольору, перевірку будемо злійснювати в Google Colab. Напиши пояснення для кожного рядка програми

Для створення такого малюнка в Google Colab ми використаємо бібліотеку ColabTurtlePlus. Оскільки стандартна бібліотека turtle потребує графічного вікна (яке не відкривається у хмарних сервісах), цей пакет спеціально адаптований для роботи в браузері.

Підготовка та код

Спочатку потрібно встановити бібліотеку, а потім запустити сам код.

1. Встанови пакет (виконай у першій комірці):

Python

!pip install ColabTurtlePlus

2. Програма для малювання квадрата:

Python

from ColabTurtlePlus.Turtle import *

# Ініціалізація полотна
clearscreen()
setup(400, 400)
t = Turtle()
t.speed(5)
t.width(5)

# Список кольорів для кожної сторони
colors = ["red", "blue", "green", "orange"]

# Малюємо квадрат
for color in colors:
 t.color(color) # Встановлюємо колір для поточної сторони
 t.forward(100) # Малюємо сторону завдовжки 100 пікселів
 t.right(90) # Повертаємо на 90 градусів

Як це працює:

• setup(400, 400): Створює область для малювання розміром 400x400 пікселів.

• t.width(5): Робить лінію товщою, щоб кольори було краще видно.

• Цикл for color in colors: Програма бере по черзі кожен колір зі списку, змінює колір «пера» і малює одну сторону квадрата.

• t.right(90): Поворот праворуч створює кут квадрата.

Спробуй запустити це в своєму блокноті Colab — ти побачиш, як "черепашка" послідовно малює різнокольорові сторони!

Перелік запитань за матеріалами відео для самостійної перевірки знань (без відповідей), який зручно розмістити на сайті як тестове завдання або блок для роздумів:

Контрольні запитання до уроку: «Фільтрація та сортування даних. Редагування таблиць»

1. Яку послідовність дій слід виконати в СУБД Access, щоб знайти конкретне слово або число в таблиці?

2. Чим відрізняються параметри пошуку «Усе поле», «Будь-яка частина поля» та «Початок поля»?

3. Опишіть процес автоматичного видалення зайвих пропусків у даних за допомогою інструмента «Замінити».

4. Які спеціальні символи (символи узагальнення) використовуються для пошуку, якщо відома лише частина слова?

5. Як здійснюється сортування даних за зростанням або за спаданням для окремого стовпця?

6. У якому випадку доцільно використовувати сортування за кількома полями одночасно і як це реалізувати технічно?

7. Яка основна відмінність між функціями «Знайти» та «Фільтр»?

8. Як працює «Фільтр за виділеним» і в яких ситуаціях він є найбільш зручним?

9. Опишіть алгоритм створення обчислювального поля в таблиці. Для яких завдань воно використовується?

10. Які можливості для редагування таблиці відкриваються перед користувачем у режимі «Конструктор»?

11. Як призначити або скасувати ключове поле для таблиці в режимі конструктора?

12. Яким чином можна скасувати всі накладені фільтри, щоб знову відобразити всі записи таблиці?

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

Проєкт: "Леся Українка: 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. Ключове поле: Чому для ключових полів властивість «Обов'язкове поле» завжди має бути активована?