Створити тест на основі відео про кросбраузерну оптимізацію, додати на свій сайт

Щоб у Google Формах з’явилася можливість відмічати правильні відповіді, потрібно спочатку перетворити звичайну форму на Тест. Ось покрокова інструкція:

1. Увімкни режим тесту

1. Відкрий свою форму.

2. Перейди на вкладку Налаштування (Settings) у верхній частині екрана.

3. Увімкни перемикач Зробити тестом (Make this a quiz).

2. Вкажи правильну відповідь

Після того, як режим тесту увімкнено, повернися до вкладки Запитання:

1. Натисни на потрібне запитання.

2. У лівому нижньому куті запитання з’явиться синій напис Ключ до запитання (Answer key) — натисни на нього.

3. Обери один або кілька варіантів, які є правильними (вони підсвітяться зеленим).

4. У правому верхньому куті цього ж вікна вистав кількість балів за це запитання.

5. Натисни Готово (Done).

3. Додай пояснення (за бажанням)

У вікні "Ключ до запитання" ти також можеш натиснути Додати відгук до відповіді (Add answer feedback). Там можна написати, чому відповідь правильна, або додати посилання на відео з поясненням.

---

Порада: Якщо ти хочеш, щоб учні обов'язково відповіли на питання, не забудь увімкнути перемикач Обов’язково (Required) у правому нижньому куті запитання.

Чи підказати тобі, як налаштувати автоматичне надсилання результатів учням на пошту?

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

Сервіс NotebookLM від Google працює на базі штучного інтелекту, тому він не "малює" графіку в класичному розумінні (як Canva), але він ідеально підходить для створення структури, контенту та логічних зв'язків для твоєї інфографіки.

Покрокова інструкція, як це зробити ефективно.

---

Крок 1: Підготовка джерел (Sources)

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

1. Зайди в NotebookLM.

2. Створи новий блокнот під назвою "Біографія Лесі Українки".

3. Додай джерела. Натисни на "+" і завантаж:

   • Текст із підручника або статті з Вікіпедії.

   • Посилання на перевірені вебресурси про письменницю.

   • Власні конспекти.

Крок 2: Генерація структури для інфографіки

Тепер попросимо ШІ перетворити сухий текст на формат, придатний для візуалізації.

• Напиши в чаті запит:

  "На основі джерел виділи 5 головних етапів життя Лесі Українки. Для кожного етапу напиши коротку назву, роки та 2 ключові факти. Підготуй це як структуру для часової шкали (timeline)."

Крок 3: Вибір ключових елементів (Сценарій)

Інфографіка — це не тільки текст, це й символи. Запитай NotebookLM:

• "Які 5 метафоричних образів або іконок можна використати для візуалізації творчості Лесі Українки? (наприклад, рояль, сопілка, вогонь)".

• "Випиши 3 найвідоміші цитати, які підійдуть для коротких врізок в інфографіку".

Крок 4: Формування "Інформаційного путівника"

NotebookLM має функцію Notebook Guide. Використай її, щоб створити підсумковий документ:

1. У верхній панелі вибери Notebook Guide.

2. Натисни FAQ або Study Guide. ШІ згенерує питання-відповіді, які можна використати як текстові блоки (хмаринки тексту) на твоїй інфографіці.

---

Крок 5: Візуалізація (Перенесення в графічний редактор)

Оскільки NotebookLM видає лише текст і таблиці, фінальний крок — оформлення.

Елемент інфографіки	Що взяти з NotebookLM	Де розмістити
Заголовок	"Леся Українка: Світло крізь терни"	У центрі або зверху
Таймлайн	Хронологія життя (Крок 2)	Горизонтальна або S-подібна лінія
Карта	Перелік міст (Луцьк, Гадяч, Ялта, Сурамі)	Невеликі позначки збоку
Статистика	Кількість знаних мов, написаних драм	Окремі великі цифри

Уявіть, що ви — веб-дизайнери, які отримали замовлення від Міністерства культури: зробити сучасний, "свіжий" сайт про Лесю Українку, який був би цікавим для підлітків.

1. Створення "Своєї теми" (Аналог написання CSS)

Замість стандартних тем Google, учні мають створити власну тему:

• Колірна палітра: Обрати 3 основні кольори. Наприклад: "Мавчин ліс" (відтінки зеленого), "Волинське небо" (блакитний та сірий) або "Троянди й виноград" (винний та кремовий).

• Шрифти: Підібрати шрифтову пару. Один шрифт для заголовків (більш акцентний, наприклад, Playfair Display), інший для тексту (читабельний, наприклад, Montserrat або Roboto).

За матеріалами відео «Текстові елементи вебсторінок, теги та атрибути. Гіперпосилання»

Запитання та відповіді за відеоуроком та створення презентації

1. Яка різниця між абзацними тегами <p> та <div>?

   • Відповідь: Тег <p> створює абзац із між-абзацним інтервалом (відступом), тоді як тег <div> створює блок тексту без автоматичного між-абзацного інтервалу [00:57].

2. Як можна встановити колір фону для вебсторінки?

   • Відповідь: Колір фону встановлюється за допомогою параметра bgcolor у тегу <body>. Значення можна вказувати назвою кольору англійською мовою або спеціальним шістнадцятковим кодом (наприклад, #ff0000), який можна дізнатися в палітрі Photoshop [01:00], [02:01].

3. Що має вищий пріоритет: графічний фон (зображення) чи колір фону?

   • Відповідь: Графічне зображення має вищий пріоритет. Якщо в коді вказано і колір (bgcolor), і зображення (background), то на сторінці відображатиметься саме зображення [03:02].

4. Які параметри відповідають за налаштування кольорів гіперпосилань у тегу <body>?

   • Відповідь: * alink — колір активного гіперпосилання (на яке натискають у даний момент).

     • link — колір посилань, за якими ще не переходили.

     • vlink — колір відвіданих посилань [03:29].

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

   • Відповідь: Використовується тег <font>. Його основні атрибути: face (тип шрифту), size (розмір) та color (колір) [04:00].

6. Які теги використовуються для форматування накреслення тексту (жирний, курсив тощо)?

   • Відповідь: * <b> — жирний текст.

     • <i> — курсив.

     • <u> — підкреслений.

     • <s> — закреслений [05:23].

7. Як додати на сторінку горизонтальну лінію та як налаштувати її довжину?

   • Відповідь: Для цього використовується тег <hr>. Довжину можна вказувати в пікселях (фіксована ширина) або у відсотках (пропорційно до вікна браузера). Наприклад, width="80%" дозволить лінії змінювати розмір при масштабуванні вікна [05:41], [06:13].

8. Навіщо використовувати абзацні теги замість простого перенесення рядка <br>?

   • Відповідь: Використання абзаців дозволяє керувати вирівнюванням тексту (по лівому краю, по центру або по правому краю) за допомогою атрибута align [06:42].

Крок 1: Генерація ідеї та фону (ШІ)

Замість того, щоб шукати картинку в Google, використаємо ШІ для створення унікального фону.

1. Інструмент: Можна скористатися вбудованими генераторами (як-от Bing Image Creator чи Canva Magic Media).

2. Запит (Промпт): Напиши короткий опис. Наприклад: "Абстрактний фон у синіх тонах для сайту про технології, футуристичний стиль, висока якість".

3. Порада: Обирай горизонтальну орієнтацію зображення.

---

Крок 2: Векторне редагування (Онлайн-сервіси)

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

Варіант А: Canva (Найпростіший)

Це лідер для швидких проектів.

• Вибери шаблон "Банер" (Banner).

• Завантаж своє зображення від ШІ.

• Додай текст: назву проекту та короткий слоган.

• Використовуй "Елементи", щоб додати векторні іконки, лінії або кнопки.

Варіант Б: Vector Pea / Photopea (Більш професійний)

Це онлайн-аналоги Photoshop/Illustrator.

• Створи файл розміром, наприклад, 1200 x 400 пікселів.

• Додай текст за допомогою інструмента "Type Tool" (T).

• Перевага: ти можеш експортувати результат у форматі SVG (векторному), що важливо для веб-сайтів.

---

Крок 3: Чек-лист ідеального банера

Щоб отримати високу оцінку, перевір свій банер за цими пунктами:

• Контраст: Текст легко читається на фоні (світлий текст на темному фоні або навпаки).

• Лаконічність: Не пиши забагато тексту — тільки головне.

• Якість: Зображення не повинно бути розмитим.

• Композиція: Головний об'єкт або текст зміщені відносно центру або чітко збалансовані.

---

Як здати роботу?

1. Збережи банер у форматі PNG або JPG (для звичайної картинки) та SVG (якщо вчитель просить саме вектор).

2. Зроби скріншот процесу роботи в редакторі — це підтвердить, що ти робив проект власноруч.

 10 запитань для учнів 10 класу з теми «Пошукова оптимізація та просування вебсайтів», складених на основі відеоматеріалу:

1. Що таке «просування сайту» і яка його головна мета?

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

2. Кого прийнято вважати «цільовою аудиторією» веб-ресурсу? Наведіть приклад для сайту школи.

   (Очікувана відповідь: Користувачі, для яких створено сайт; для школи — це учні, батьки та вчителі).

3. Яка стратегія просування передбачає реєстрацію сайту в тематичних базах даних, як-от «Мета» чи «UAport»?

   (Очікувана відповідь: Реєстрація в пошукових каталогах).

4. Розшифруйте абревіатуру SEO. У чому полягає суть цього процесу?

   (Очікувана відповідь: Search Engine Optimization — оптимізація коду та контенту під вимоги пошукових систем).

5. Яка різниця між внутрішньою та зовнішньою оптимізацією сайту?

   (Очікувана відповідь: Зовнішня — робота з посиланнями на сайт з інших ресурсів; внутрішня — робота з HTML-кодом та контентом власної сторінки).

6. Яка щільність ключових слів на сторінці вважається оптимальною для пошукових систем?

   (Очікувана відповідь: 5-7% від текстового змісту або 3-4 згадки на сторінку).

7. Для чого використовується атрибут alt у тегу зображення з точки зору SEO?

   (Очікувана відповідь: Для розміщення тексту заміщення, що містить ключові слова, які зчитують пошукові роботи).

8. Назвіть теги HTML, які допомагають пошуковій системі зрозуміти важливість певних слів на сторінці.

   (Очікувана відповідь: <title>, <strong>, <h1>–<h2>, <i>).

9. Що таке контекстна реклама і чим вона відрізняється від природної видачі пошуку?

   (Очікувана відповідь: Це платні оголошення, що з'являються за певними запитами, на відміну від безкоштовних результатів SEO).

10. Який фактор є найважливішим для того, щоб сайт залишався популярним і відвідуваним протягом тривалого часу?

    (Очікувана відповідь: Унікальний, цікавий та корисний контент).

10 запитань за змістом відео:

1. Визначення поняття: Сформулюй власне визначення ергономіки веб-сайту. Які три ключові фактори (щодо стану користувача) вона має забезпечувати?

2. Принцип інтуїтивності: Чому при розробці структури сторінок важливо, щоб дії користувача були інтуїтивно зрозумілими без спеціального навчання?

3. Розташування відомостей: Які вимоги існують до заголовка сайту та розміщення найважливішої інформації на сторінці?

4. Обмеження контенту: Чому, згідно з ергономічними нормами, кількість колонок з контентом не повинна перевищувати трьох, а горизонтальна прокрутка вважається неприпустимою?

5. Роль «підвалу» (footer): Яку практичну функцію виконує нижній колонтитул сторінки та які дані він має містити?

6. Ефективна навігація: Поясни «правило вкладеності» рівнів сайту та вимоги до кількості посилань в одному навігаційному блоці.

7. Оформлення та контраст: Як правильний вибір кольорової гами та вирівнювання тексту впливає на сприйняття інформації відвідувачем?

8. Технічні параметри: Який оптимальний обсяг одного графічного файлу рекомендується для швидкого завантаження сторінки і чому це важливо?

9. Інклюзивність: Які конкретні елементи (наприклад, підписи до зображень або масштабування) допомагають зробити сайт зручним для людей із вадами зору?

10. Історичний контекст: Хто такий Якоб Нільсен і за допомогою якого винайденого ним методу сьогодні проводять ергономічний аудит сайтів?

---

---

---

---

---

---

---

---

---

Два практичних завдання, які допоможуть учням застосувати знання з відео на практиці. Одне спрямоване на аналіз, а інше — на проєктування.

---

Завдання 1. Ергономічний аудит (Аналіз)

Мета: Навчитися бачити помилки в інтерфейсі та пропонувати шляхи їх виправлення.

Інструкція для учня:

1. Оберіть будь-який сайт (це може бути сайт вашої школи, місцевої громади або старий новинний ресурс).

2. Проаналізуйте його за 5 критеріями з відео:

   • Навігація: Чи можна повернутися на головну в один клік? Скільки рівнів вкладеності має сайт?

   • Колористика: Чи достатній контраст між текстом і фоном?

   • Контент: Чи є на сторінці більше трьох колонок тексту? Чи з’являється горизонтальна смуга прокручування?

   • Швидкість: Чи швидко завантажуються зображення?

   • Доступність: Чи мають картинки альтернативний текст (підписи), який з’являється при наведенні?

3. Результат: Складіть коротку таблицю "Проблема — Наслідок для користувача — Рекомендація щодо виправлення".

---

Завдання 2. Створення прототипу ергономічної сторінки (Проєктування)

Мета: Відпрацювати навички правильного розміщення елементів на веб-сторінці.

Інструкція для учня:

Використовуючи будь-який інструмент (онлайн-дошку як Jamboard/Miro, графічний редактор або навіть звичайний аркуш паперу), створіть макет (схему) головної сторінки сайту на тему "Екологія мого міста".

Вимоги до макета:

1. Заголовок: Чітка назва сайту, що дублюється на всіх сторінках.

2. Меню: Не більше 7 пунктів в основному блоці навігації. Кнопки мають бути великими.

3. Золотий трикутник: Розмістіть найважливішу новину у верхній лівій частині сторінки.

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

5. Інклюзивність: Передбачте на макеті кнопку для перемикання у "Режим для людей із вадами зору" (збільшений шрифт/чорно-біла гама).

Ось детальний план дій

---

 

📝 Крок 1: Створення Тексту (Сценарію)

 

Ваш текст має бути інформативним, спонукальним та чутливим до теми.

 

🎯 Тема: 16 днів проти насилля

 

• Вступ (15-20 секунд):

  • Приверніть увагу: "Що таке 16 днів активізму?"

  • Поясніть мету: Міжнародна кампанія, яка триває з 25 листопада (Міжнародний день боротьби за ліквідацію насильства щодо жінок) до 10 грудня (Міжнародний день прав людини).

• Основна частина (40-60 секунд):

  • Види насилля: Стисло перелічіть (фізичне, психологічне, економічне, сексуальне).

  • Чому це важливо: Наголосіть, що це проблема, яка стосується кожного, і ми маємо про це говорити.

  • Приклади дії: Як можна підтримати кампанію (не мовчати, знати, куди звертатися, поширювати інформацію).

• Заклик до дії/Висновок (10-15 секунд):

  • Сильний фінальний меседж: "Насиллю немає виправдання. Не мовчи! #16ДнівПротиНасилля"

  • Додайте інформацію про лінії допомоги (якщо вирішите їх озвучити).

💡 Порада: Напишіть текст спочатку, потім зачитайте його вголос, щоб перевірити, чи він вкладається в бажаний хронометраж (ідеально 60-90 секунд).

---

 

🎙️ Крок 2: Озвучення за допомогою ШІ та Підбір Музики

 

 

🗣️ Озвучення ШІ

 

Використовуйте безкоштовні онлайн-інструменти для перетворення тексту в мову (Text-to-Speech).

• Популярні сервіси (для прикладу): Google Text-to-Speech, Voicemaker, Loquendo або інші, які підтримують якісний український голос.

• Дії:

  1. Скопіюйте ваш фінальний текст у поле сервісу.

  2. Виберіть українську мову та голос, який звучатиме найбільш нейтрально та впевнено.

  3. Згенеруйте аудіофайл (зазвичай у форматі MP3 або WAV) та збережіть його.

 

🎵 Підбір Музики

 

• Жанр: Оберіть інструментальну музику без слів. Вона має бути спокійною, драматичною або мотивуючою, але не відволікати від тексту.

• Джерела: Використовуйте бібліотеки безкоштовної музики, які не порушують авторських прав (наприклад, YouTube Audio Library або безкоштовні розділи на Soundcloud/Freesound).

• Важливо: Переконайтеся, що гучність музики значно нижча за гучність голосу, щоб текст було добре чути.

---

 

🎬 Крок 3: Монтаж Відео

 

Використовуйте простий відеоредактор (наприклад, CapCut, DaVinci Resolve - безкоштовні версії, або навіть мобільні додатки).

 

🖼️ Візуальний Ряд

 

• Джерела: Знайдіть безкоштовні стокові відео та зображення на тему солідарності, миру, рук, що тримаються, символів кампанії (стрічки).

  • Сайтів-приклади: Pexels, Pixabay, Unsplash.

• Елементи:

  • Додайте титри на початку та в кінці (назва кампанії, ваше ім'я/школа).

  • Використовуйте логотип/колір кампанії (помаранчевий) у дизайні.

  • Субтитри: Додайте субтитри до всього тексту, щоб відео можна було дивитися без звуку.

 

🛠️ Монтаж

 

1. Розмістіть аудіодоріжку з голосом ШІ.

2. Додайте музику на другий аудіотрек.

3. Наріжте та розмістіть відео/фото відповідно до тексту.

4. Збережіть готове відео у високій якості (MP4, 1080p).

---

 

📤 Крок 4: Завантаження на YouTube та Отримання Покликання

 

1. Завантаження: Увійдіть у свій YouTube-канал і завантажте фінальний відеофайл.

2. Налаштування:

   • Назва: Чітка та приваблива (наприклад, "16 днів проти насилля | Інформатика, 10 клас").

   • Опис: Додайте текст (сценарій) вашого відео та хештеги.

   • Доступ: Встановіть "Доступ за посиланням" (Unlisted). Це означає, що відео побачить лише той, кому ви надішлете лінк, воно не буде публічним.

3. Збереження: Отримайте покликання (URL-адресу) на завантажене відео.

---

 

🌐 Крок 5: Додавання Відео на Сайт

 

1. Створення Сторінки: Якщо у вас є готовий шкільний сайт (наприклад, на Google Sites, Wix, Tilda або простий HTML-файл), створіть нову сторінку або розділ.

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

   • YouTube дозволяє вбудовувати (Embed) відео.

   • Дія: На сторінці YouTube під відео натисніть "Поділитися" $\to$ "Вбудувати". Ви отримаєте спеціальний HTML-код (<iframe>).

   • Вставте цей код у редактор вашої сторінки сайту. Це дозволить відтворювати відео прямо на вашій сторінці.

3. Оформлення: Додайте короткий текст-підпис до відео на сторінці (наприклад, мета проєкту).

4. Публікація: Опублікуйте зміни на сайті.

5. Фінальне Покликання: Скопіюйте повне покликання (URL-адресу) на цю нову сторінку сайту.

---

 

✅ Крок 6: Надсилання Результату

 

Надішліть вчителю покликання на готову сторінку сайту (саме ту, де вбудоване відео).

---

Якщо вам потрібна допомога з пошуком конкретних безкоштовних інструментів для озвучення чи монтажу, дайте знати!