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).

Завдання 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 КБ, але візуально не перетворилося на "кашу" з пікселів.

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

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

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

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

Щоб у 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 видає лише текст і таблиці, фінальний крок — оформлення.

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

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. Зроби скріншот процесу роботи в редакторі — це підтвердить, що ти робив проект власноруч.