1. Дослідницьке завдання
Підготуйте коротку презентацію (3–4 слайди) на тему: *«Інструменти інтернет-маркетингу»*. Вкажіть приклади з українських або світових компаній (реклама у соцмережах, email-розсилки, таргетинг тощо).
2. Практичне завдання
Створіть умовний рекламний пост у Canva/Word/PowerPoint для вигаданого товару чи послуги. Продумайте слоган і підберіть зображення.
3. Аналітичне завдання
Порівняйте роботу двох інтернет-банкінгів (наприклад: *Приват24* і *Monobank*). Складіть таблицю «Переваги та недоліки» кожного сервісу.
4. Творче завдання
Складіть список правил безпечного користування інтернет-банкінгом. Оформіть у вигляді пам’ятки для старшокласників.
5. Інтерактивне завдання
Розробіть міні-опитування (Google Forms або інший сервіс) для однокласників на тему: *«Якими послугами інтернет-маркетингу та інтернет-банкінгу ви користуєтесь?»*. Зробіть скрін результатів та підготуйте короткий висновок.
Легенда: Уяви, що ти створюєш власний бренд або блог. Тобі потрібно розробити фавікон — ту саму маленьку іконку, що відображається на вкладці браузера.
Твоя задача:
Створити малюнок розміром 32x32 пікселі.
Використати лише 2-3 контрастні кольори (щоб на маленькому екрані було зрозуміло, що зображено).
Зберегти результат у форматі .png або .ico.
Питання на засипку: Чому для фавікона не варто використовувати формат JPEG?
Завдання 2. "Магія векторів: Логотип у стилі Google"
Мета: Освоїти основи векторної графіки (криві, шари, геометричні примітиви).
Легенда: Тобі замовили логотип для нового стартапу "EcoWave". Він має бути сучасним, масштабованим (векторним) і виглядати чітко на будь-якому екрані.
Твоя задача:
Використовуючи лише прості фігури (кола, квадрати) та інструмент "Перо" (Pen tool), створи абстрактну хвилю або листок.
Навчися групувати об'єкти та змінювати їхній колір за допомогою HEX-кодів (наприклад, #2ecc71 для зеленого).
Експортуй файл у форматі SVG.
Чому це важливо: Спробуй збільшити свій логотип у 10 разів у редакторі. Чи змінилася якість?
Завдання 3. "Оптимізатор: Битва за швидкість завантаження"
Мета: Навчитися балансувати між якістю зображення та його вагою (важливо для SEO та швидкості сайтів).
Інструмент:Squoosh.app (сервіс від Google для стискання).
Легенда: Ти верстаєш головну сторінку сайту. У тебе є круте фото високої якості (наприклад, з Unsplash), але воно важить 5 МБ. Сайт вантажиться вічність!
Твоя задача:
Завантаж будь-яке якісне фото у Squoosh.
Порівняй різні методи стиснення: WebP, MozJPEG та OxiPNG.
Знайди "золоту середину": стисни фото так, щоб воно важило менше 200 КБ, але візуально не перетворилося на "кашу" з пікселів.
Результат: Зроби скриншот порівняння "До" та "Після" з показниками розміру файлу у відсотках.
Таблиця форматів для довідки
Щоб тобі було легше орієнтуватися під час виконання, підготував шпаргалку:
Щоб у Google Формах з’явилася можливість відмічати правильні відповіді, потрібно спочатку перетворити звичайну форму на Тест. Ось покрокова інструкція:
1. Увімкни режим тесту
Відкрий свою форму.
Перейди на вкладку Налаштування (Settings) у верхній частині екрана.
Увімкни перемикач Зробити тестом (Make this a quiz).
2. Вкажи правильну відповідь
Після того, як режим тесту увімкнено, повернися до вкладки Запитання:
Натисни на потрібне запитання.
У лівому нижньому куті запитання з’явиться синій напис Ключ до запитання (Answer key) — натисни на нього.
Обери один або кілька варіантів, які є правильними (вони підсвітяться зеленим).
У правому верхньому куті цього ж вікна вистав кількість балів за це запитання.
Натисни Готово (Done).
3. Додай пояснення (за бажанням)
У вікні "Ключ до запитання" ти також можеш натиснути Додати відгук до відповіді (Add answer feedback). Там можна написати, чому відповідь правильна, або додати посилання на відео з поясненням.
Порада: Якщо ти хочеш, щоб учні обов'язково відповіли на питання, не забудь увімкнути перемикач Обов’язково (Required) у правому нижньому куті запитання.
Чи підказати тобі, як налаштувати автоматичне надсилання результатів учням на пошту?
Побудова інфографіки — це чудовий спосіб структурувати великий обсяг біографічних даних.
Сервіс NotebookLM від Google працює на базі штучного інтелекту, тому він не "малює" графіку в класичному розумінні (як Canva), але він ідеально підходить для створення структури, контенту та логічних зв'язків для твоєї інфографіки.
Покрокова інструкція, як це зробити ефективно.
Крок 1: Підготовка джерел (Sources)
NotebookLM працює лише з тією інформацією, яку ти йому надаєш. Це гарантує точність фактів.
Створи новий блокнот під назвою "Біографія Лесі Українки".
Додай джерела. Натисни на "+" і завантаж:
Текст із підручника або статті з Вікіпедії.
Посилання на перевірені вебресурси про письменницю.
Власні конспекти.
Крок 2: Генерація структури для інфографіки
Тепер попросимо ШІ перетворити сухий текст на формат, придатний для візуалізації.
Напиши в чаті запит:
"На основі джерел виділи 5 головних етапів життя Лесі Українки. Для кожного етапу напиши коротку назву, роки та 2 ключові факти. Підготуй це як структуру для часової шкали (timeline)."
Крок 3: Вибір ключових елементів (Сценарій)
Інфографіка — це не тільки текст, це й символи. Запитай NotebookLM:
"Які 5 метафоричних образів або іконок можна використати для візуалізації творчості Лесі Українки? (наприклад, рояль, сопілка, вогонь)".
"Випиши 3 найвідоміші цитати, які підійдуть для коротких врізок в інфографіку".
Крок 4: Формування "Інформаційного путівника"
NotebookLM має функцію Notebook Guide. Використай її, щоб створити підсумковий документ:
У верхній панелі вибери Notebook Guide.
Натисни FAQ або Study Guide. ШІ згенерує питання-відповіді, які можна використати як текстові блоки (хмаринки тексту) на твоїй інфографіці.
Крок 5: Візуалізація (Перенесення в графічний редактор)
Оскільки NotebookLM видає лише текст і таблиці, фінальний крок — оформлення.
Уявіть, що ви — веб-дизайнери, які отримали замовлення від Міністерства культури: зробити сучасний, "свіжий" сайт про Лесю Українку, який був би цікавим для підлітків.
1. Створення "Своєї теми" (Аналог написання CSS)
Замість стандартних тем Google, учні мають створити власну тему:
Колірна палітра: Обрати 3 основні кольори. Наприклад: "Мавчин ліс" (відтінки зеленого), "Волинське небо" (блакитний та сірий) або "Троянди й виноград" (винний та кремовий).
Шрифти: Підібрати шрифтову пару. Один шрифт для заголовків (більш акцентний, наприклад, Playfair Display), інший для тексту (читабельний, наприклад, Montserrat або Roboto).
За матеріалами відео «Текстові елементи вебсторінок, теги та атрибути. Гіперпосилання»
Запитання та відповіді за відеоуроком та створення презентації
Яка різниця між абзацними тегами <p> та <div>?
Відповідь: Тег <p> створює абзац із між-абзацним інтервалом (відступом), тоді як тег <div> створює блок тексту без автоматичного між-абзацного інтервалу [00:57].
Як можна встановити колір фону для вебсторінки?
Відповідь: Колір фону встановлюється за допомогою параметра bgcolor у тегу <body>. Значення можна вказувати назвою кольору англійською мовою або спеціальним шістнадцятковим кодом (наприклад, #ff0000), який можна дізнатися в палітрі Photoshop [01:00], [02:01].
Що має вищий пріоритет: графічний фон (зображення) чи колір фону?
Відповідь: Графічне зображення має вищий пріоритет. Якщо в коді вказано і колір (bgcolor), і зображення (background), то на сторінці відображатиметься саме зображення [03:02].
Які параметри відповідають за налаштування кольорів гіперпосилань у тегу <body>?
Відповідь: * alink — колір активного гіперпосилання (на яке натискають у даний момент).
Як додати на сторінку горизонтальну лінію та як налаштувати її довжину?
Відповідь: Для цього використовується тег <hr>. Довжину можна вказувати в пікселях (фіксована ширина) або у відсотках (пропорційно до вікна браузера). Наприклад, width="80%" дозволить лінії змінювати розмір при масштабуванні вікна [05:41], [06:13].
Навіщо використовувати абзацні теги замість простого перенесення рядка <br>?
Відповідь: Використання абзаців дозволяє керувати вирівнюванням тексту (по лівому краю, по центру або по правому краю) за допомогою атрибута align [06:42].
