1. Дослідницьке завдання
Підготуйте коротку презентацію (3–4 слайди) на тему: *«Інструменти інтернет-маркетингу»*. Вкажіть приклади з українських або світових компаній (реклама у соцмережах, email-розсилки, таргетинг тощо).
2. Практичне завдання
Створіть умовний рекламний пост у Canva/Word/PowerPoint для вигаданого товару чи послуги. Продумайте слоган і підберіть зображення.
3. Аналітичне завдання
Порівняйте роботу двох інтернет-банкінгів (наприклад: *Приват24* і *Monobank*). Складіть таблицю «Переваги та недоліки» кожного сервісу.
4. Творче завдання
Складіть список правил безпечного користування інтернет-банкінгом. Оформіть у вигляді пам’ятки для старшокласників.
5. Інтерактивне завдання
Розробіть міні-опитування (Google Forms або інший сервіс) для однокласників на тему: *«Якими послугами інтернет-маркетингу та інтернет-банкінгу ви користуєтесь?»*. Зробіть скрін результатів та підготуйте короткий висновок.
Уявіть, що ви — веб-дизайнери, які отримали замовлення від Міністерства культури: зробити сучасний, "свіжий" сайт про Лесю Українку, який був би цікавим для підлітків.
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].
Визначення поняття: Сформулюй власне визначення ергономіки веб-сайту. Які три ключові фактори (щодо стану користувача) вона має забезпечувати?
Принцип інтуїтивності: Чому при розробці структури сторінок важливо, щоб дії користувача були інтуїтивно зрозумілими без спеціального навчання?
Розташування відомостей: Які вимоги існують до заголовка сайту та розміщення найважливішої інформації на сторінці?
Обмеження контенту: Чому, згідно з ергономічними нормами, кількість колонок з контентом не повинна перевищувати трьох, а горизонтальна прокрутка вважається неприпустимою?
Роль «підвалу» (footer): Яку практичну функцію виконує нижній колонтитул сторінки та які дані він має містити?
Ефективна навігація: Поясни «правило вкладеності» рівнів сайту та вимоги до кількості посилань в одному навігаційному блоці.
Оформлення та контраст: Як правильний вибір кольорової гами та вирівнювання тексту впливає на сприйняття інформації відвідувачем?
Технічні параметри: Який оптимальний обсяг одного графічного файлу рекомендується для швидкого завантаження сторінки і чому це важливо?
Інклюзивність: Які конкретні елементи (наприклад, підписи до зображень або масштабування) допомагають зробити сайт зручним для людей із вадами зору?
Історичний контекст: Хто такий Якоб Нільсен і за допомогою якого винайденого ним методу сьогодні проводять ергономічний аудит сайтів?
Два практичних завдання, які допоможуть учням застосувати знання з відео на практиці. Одне спрямоване на аналіз, а інше — на проєктування.
Завдання 1. Ергономічний аудит (Аналіз)
Мета: Навчитися бачити помилки в інтерфейсі та пропонувати шляхи їх виправлення.
Інструкція для учня:
Оберіть будь-який сайт (це може бути сайт вашої школи, місцевої громади або старий новинний ресурс).
Проаналізуйте його за 5 критеріями з відео:
Навігація: Чи можна повернутися на головну в один клік? Скільки рівнів вкладеності має сайт?
Колористика: Чи достатній контраст між текстом і фоном?
Контент: Чи є на сторінці більше трьох колонок тексту? Чи з’являється горизонтальна смуга прокручування?
Швидкість: Чи швидко завантажуються зображення?
Доступність: Чи мають картинки альтернативний текст (підписи), який з’являється при наведенні?
Результат: Складіть коротку таблицю "Проблема — Наслідок для користувача — Рекомендація щодо виправлення".
Завдання 2. Створення прототипу ергономічної сторінки (Проєктування)
Мета: Відпрацювати навички правильного розміщення елементів на веб-сторінці.
Інструкція для учня:
Використовуючи будь-який інструмент (онлайн-дошку як Jamboard/Miro, графічний редактор або навіть звичайний аркуш паперу), створіть макет (схему) головної сторінки сайту на тему "Екологія мого міста".
Вимоги до макета:
Заголовок: Чітка назва сайту, що дублюється на всіх сторінках.
Меню: Не більше 7 пунктів в основному блоці навігації. Кнопки мають бути великими.
Золотий трикутник: Розмістіть найважливішу новину у верхній лівій частині сторінки.
Підвал (Footer): Додайте блок із контактами, авторськими правами та посиланням на карту сайту.
Інклюзивність: Передбачте на макеті кнопку для перемикання у "Режим для людей із вадами зору" (збільшений шрифт/чорно-біла гама).
Ваш текст має бути інформативним, спонукальним та чутливим до теми.
🎯 Тема: 16 днів проти насилля
Вступ (15-20 секунд):
Приверніть увагу: "Що таке 16 днів активізму?"
Поясніть мету: Міжнародна кампанія, яка триває з 25 листопада (Міжнародний день боротьби за ліквідацію насильства щодо жінок) до 10 грудня (Міжнародний день прав людини).
Основна частина (40-60 секунд):
Види насилля: Стисло перелічіть (фізичне, психологічне, економічне, сексуальне).
Чому це важливо: Наголосіть, що це проблема, яка стосується кожного, і ми маємо про це говорити.
Приклади дії: Як можна підтримати кампанію (не мовчати, знати, куди звертатися, поширювати інформацію).
Заклик до дії/Висновок (10-15 секунд):
Сильний фінальний меседж: "Насиллю немає виправдання. Не мовчи! #16ДнівПротиНасилля"
Додайте інформацію про лінії допомоги (якщо вирішите їх озвучити).
💡 Порада: Напишіть текст спочатку, потім зачитайте його вголос, щоб перевірити, чи він вкладається в бажаний хронометраж (ідеально 60-90 секунд).
🎙️ Крок 2: Озвучення за допомогою ШІ та Підбір Музики
🗣️ Озвучення ШІ
Використовуйте безкоштовні онлайн-інструменти для перетворення тексту в мову (Text-to-Speech).
Популярні сервіси (для прикладу):Google Text-to-Speech, Voicemaker, Loquendo або інші, які підтримують якісний український голос.
Дії:
Скопіюйте ваш фінальний текст у поле сервісу.
Виберіть українську мову та голос, який звучатиме найбільш нейтрально та впевнено.
Згенеруйте аудіофайл (зазвичай у форматі MP3 або WAV) та збережіть його.
🎵 Підбір Музики
Жанр: Оберіть інструментальну музику без слів. Вона має бути спокійною, драматичною або мотивуючою, але не відволікати від тексту.
Джерела: Використовуйте бібліотеки безкоштовної музики, які не порушують авторських прав (наприклад, YouTube Audio Library або безкоштовні розділи на Soundcloud/Freesound).
Важливо: Переконайтеся, що гучність музики значно нижча за гучність голосу, щоб текст було добре чути.
🎬 Крок 3: Монтаж Відео
Використовуйте простий відеоредактор (наприклад, CapCut, DaVinci Resolve - безкоштовні версії, або навіть мобільні додатки).
🖼️ Візуальний Ряд
Джерела: Знайдіть безкоштовні стокові відео та зображення на тему солідарності, миру, рук, що тримаються, символів кампанії (стрічки).
Сайтів-приклади: Pexels, Pixabay, Unsplash.
Елементи:
Додайте титри на початку та в кінці (назва кампанії, ваше ім'я/школа).
Використовуйте логотип/колір кампанії (помаранчевий) у дизайні.
Субтитри: Додайте субтитри до всього тексту, щоб відео можна було дивитися без звуку.
🛠️ Монтаж
Розмістіть аудіодоріжку з голосом ШІ.
Додайте музику на другий аудіотрек.
Наріжте та розмістіть відео/фото відповідно до тексту.
Збережіть готове відео у високій якості (MP4, 1080p).
📤 Крок 4: Завантаження на YouTube та Отримання Покликання
Завантаження: Увійдіть у свій YouTube-канал і завантажте фінальний відеофайл.
Налаштування:
Назва: Чітка та приваблива (наприклад, "16 днів проти насилля | Інформатика, 10 клас").
Опис: Додайте текст (сценарій) вашого відео та хештеги.
Доступ: Встановіть "Доступ за посиланням" (Unlisted). Це означає, що відео побачить лише той, кому ви надішлете лінк, воно не буде публічним.
Збереження: Отримайте покликання (URL-адресу) на завантажене відео.
🌐 Крок 5: Додавання Відео на Сайт
Створення Сторінки: Якщо у вас є готовий шкільний сайт (наприклад, на Google Sites, Wix, Tilda або простий HTML-файл), створіть нову сторінку або розділ.
Додавання Відео:
YouTube дозволяє вбудовувати (Embed) відео.
Дія: На сторінці YouTube під відео натисніть "Поділитися" $\to$ "Вбудувати". Ви отримаєте спеціальний HTML-код (<iframe>).
Вставте цей код у редактор вашої сторінки сайту. Це дозволить відтворювати відео прямо на вашій сторінці.
Оформлення: Додайте короткий текст-підпис до відео на сторінці (наприклад, мета проєкту).
Публікація: Опублікуйте зміни на сайті.
Фінальне Покликання: Скопіюйте повне покликання (URL-адресу) на цю нову сторінку сайту.
✅ Крок 6: Надсилання Результату
Надішліть вчителю покликання на готову сторінку сайту (саме ту, де вбудоване відео).
Якщо вам потрібна допомога з пошуком конкретних безкоштовних інструментів для озвучення чи монтажу, дайте знати!
