«Інтернет-маркетинг та інтернет-банкінг»

1. Дослідницьке завдання
   Підготуйте коротку презентацію (3–4 слайди) на тему: *«Інструменти інтернет-маркетингу»*. Вкажіть приклади з українських або світових компаній (реклама у соцмережах, email-розсилки, таргетинг тощо).

2. Практичне завдання
   Створіть умовний рекламний пост у Canva/Word/PowerPoint для вигаданого товару чи послуги. Продумайте слоган і підберіть зображення.

3. Аналітичне завдання
   Порівняйте роботу двох інтернет-банкінгів (наприклад: *Приват24* і *Monobank*). Складіть таблицю «Переваги та недоліки» кожного сервісу.

4. Творче завдання
   Складіть список правил безпечного користування інтернет-банкінгом. Оформіть у вигляді пам’ятки для старшокласників.

5. Інтерактивне завдання
   Розробіть міні-опитування (Google Forms або інший сервіс) для однокласників на тему: *«Якими послугами інтернет-маркетингу та інтернет-банкінгу ви користуєтесь?»*. Зробіть скрін результатів та підготуйте короткий висновок.

Урок №1. Презентація на тему: Основні тренди у веб-дизайні
Урок №2. Презентація на тему: Види сайтів та цільова аудиторія
Урок №3. Презентація на тему: Інформаційна структура сайту
Урок №4. Практична робота №1. Створення структури сайту за допомогою онлайн-сервісу DRAW.IO
Урок №5. Презентація на тему: Інструменти веб-розробника
Урок №6. Презентація на тему: Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи
Урок №7. Практична робота №2. Текстові елементи веб-сторінки. Гіперпосилання та списки на веб-сторінках
Урок №8. Презентація на тему: Каскадні таблиці стилів
Урок №9. Практична робота №3. Стильове оформлення сторінок з використанням CSS
Урок №10. Презентація на тему: Проектування та верстка веб-сторінок
Урок №11. Практична робота №4. Блокова модель CSS
Урок №12. Презентація на тему: Адаптивна верстка
Урок №13. Практична робота №5. Використання модуля CSS Flexbox
Урок №14. Презентація на тему: Кросбраузерна оптимізація сторінок сайту
Урок №15. Практична робота №6. Використання спеціального CSS-файлу для досягнення кросбаузерності
Урок №16. Презентація на тему: Графіка для веб- середовища
Урок №17. Практична робота №7. Додавання статичних графічних об’єктів на сайт
Урок №18. Презентація на тему: Анімаційні ефекти
Урок №19. Практична робота №8. Використання анімаційних ефектів на сторінках сайту

Джерело

Дашборд (від англ. dashboard — панель приладів) — це візуальна панель, на якій зібрані найважливіші дані, показники або інструменти, розбиті на окремі блоки.

Чому це ідеальний приклад для теми API?

Дашборд — це "обличчя", яке збирає інформацію від різних сервісів. Наприклад, якщо учень створює дашборд на Google Сайті:

1. Блок погоди отримує дані від метеослужби через API.

2. Курс валют приходить від банку через API.

3. Відео з YouTube підтягується через сервери Google за допомогою API.

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

Мета: Навчитися інтегрувати зовнішні сервіси (які працюють через API) у власний вебпроєкт за допомогою вбудовування коду (Embed).

https://weatherwidget.io/

Ідея проєкту

Учні мають створити одну сторінку на Google Сайтах, яка збирає "живі" дані з різних куточків інтернету (погода, карти, курси валют, музика). Кожен із цих блоків працює завдяки тому, що сервіс надає свій API для відображення даних на сторонніх ресурсах.

Крок за кроком

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

• Створити новий проєкт у Google Сайтах.

• Назвати сторінку: Мій цифровий центр керування.

2. Інтеграція "Погодного API" (через віджет)

• Завдання: Відобразити актуальну погоду в Миргороді.

• Як зробити: Використати сервіс (наприклад, WeatherWidget.io). Налаштуйте дизайн, отримує HTML-код (який є результатом запиту до API сервісу) і вставляє його на сайт через інструмент "Вставити" (Embed) -> "Вставити код".

3. Робота з Google Maps API

• Завдання: Додати інтерактивну карту з позначкою нашої гімназії.

• Як зробити: Вибрати в меню Google Сайтів інструмент "Карти". Це прямий приклад використання внутрішнього API Google для відображення картографічних даних у вашому інтерфейсі.

4. Вбудовування медіа (YouTube)

• Завдання: Додати навчальне відео про штучний інтелект або тематичний плейлист.

• Суть: Коли ми вставляємо відео, ми використовуємо YouTube Data API. пояснюємо (у підпису до блока), що сайт "звертається" до серверів YouTube, щоб отримати конкретний контент.

Контрольне запитання для захисту роботи

Після виконання завдання дайте коротко відповісти на запитання:

"Що саме в цьому проєкті виконує роль 'офіціанта' (API), який приносить дані з кухні (сервера) до нашого столика (сайту)?"

✅ Чому це працює:

1. Наочність: бачимо, що сайт — це не просто текст, а конструктор, що збирає дані з усього світу.

2. Простота: Не потрібно писати рядки коду на Python чи JS, достатньо розуміти логіку вставки (Embed).

3. Результат: У кінці уроку в кожного є готовий, функціональний "міні-портал".

МИРГОРОД WEATHER

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

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. Натисни Готово.

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

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

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

Проєкт: "Леся Українка: 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.

Успіхів у реалізації цього масштабного проєкту! Якщо потрібно підправити промпти для створення зображень Лесі — звертайся.

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