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

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. Використання анімаційних ефектів на сторінках сайту

Дизайн структури та просторовий дизайн

1. Етапи проектування структури сайту

Перш ніж малювати кнопки, потрібно продумати інформаційну архітектуру — систему організації контенту.

• Зовнішня структура — це схема розміщення сторінок та зв'язків між ними (меню, навігація).

• Внутрішня структура — логіка розміщення елементів на кожній конкретній сторінці.

Типи структур:

1. Лінійна: сторінки йдуть одна за одною (як слайди презентації або сторінки книги). Підходить для онлайн-курсів чи портфоліо.

2. Ієрархічна (деревоподібна): від головної сторінки до розділів і підрозділів. Найпопулярніший тип (інтернет-магазини, новини).

3. Мережева (довільна): кожна сторінка має посилання на багато інших без чіткої ієрархії (як у Вікіпедії).

2. Просторові характеристики дизайну

Просторовий дизайн — це мистецтво керувати увагою відвідувача через розміщення об'єктів.

• Сітка (Grid): основа будь-якого сучасного сайту. Вона допомагає вирівнювати елементи, роблячи дизайн «охайним». Найчастіше використовують 12-колонкову сітку.

• Візуальна ієрархія: найважливіше (заголовок, кнопка замовлення) має бути найбільшим, найяскравішим або розташованим у верхній частині сторінки.

• Від’ємний простір (White Space): це «повітря» між елементами. Без вільного місця сайт виглядає перевантаженим і важким для читання.

3. Композиційні прийоми

• Z-патерн: користувач переглядає сторінку з лівого верхнього кута праворуч, потім по діагоналі вниз і знову праворуч. Підходить для сторінок з мінімумом тексту (Landing Pages).

• F-патерн: характерний для текстових сайтів (блоги, новини). Користувач читає верхній рядок, потім трохи нижче і далі проглядає ліву частину контенту вертикально.

• Правило третин: якщо розділити екран на 9 частин двома вертикальними та двома горизонтальними лініями, то найважливіші об'єкти варто розташовувати на перетині цих ліній.

Завдання

План розробки сайту «Знайомство з Миргородом» з урахуванням вивченої теорії про структуру та просторовий дизайн.

1. Структурна карта сайту (Навігація)

Згідно з ієрархічною структурою, у верхньому меню (Header) створимо такі сторінки:

• Головна (візитівка міста).

• Локації (Курортний парк, пам'ятники, «Миргородська калюжа»).

• Оздоровлення (Бювет, санаторії).

• Події (Блог про фестивалі та заходи).

• Контакти (мапа та зворотний зв'язок).

2. Візуальне оформлення та просторовий дизайн

Хедер (Шапка сайту)

• Логотип: Зображення герба Миргорода або стилізований напис.

• Назва сайту: «Миргород — місто здоров'я».

• Фон: Панорамне якісне фото берега річки Хорол.

• Просторовий прийом: Використовуємо Z-патерн. Логотип зліва, меню справа, а головний заклик (наприклад, кнопка «Замовити екскурсію») посередині або трохи нижче.

Основна частина (Content)

• Використання сітки: У Google Sites оберіть блок «Три колонки». У кожну колонку додайте фото (Парк, Бювет, Гоголь) та короткий опис під ним. Це створить ритм і порядок.

• Від’ємний простір: Не намагайтеся заповнити весь екран текстом. Між блоками з фото залиште порожні інтервали, щоб контент «дихав».

• Акценти: Використовуйте кнопки яскравого кольору (наприклад, бірюзового — колір води) для важливих дій.

3. Технічна реалізація в Google Sites

1. Перейдіть на sites.google.com: Натисніть «+ Пустий файл».

2. Оберіть тему: На вкладці «Теми» (справа) оберіть варіант «Аристотель» або «Дипломат». Вони мають чіткі лінії та професійні шрифти.

3. Налаштуйте сторінки:

   • Перейдіть на вкладку «Сторінки».

   • Натисніть «+», щоб додати «Локації», «Оздоровлення» тощо.

4. Наповнення контентом:

   • Використовуйте вкладку «Вставка».

   • Блок «Карусель зображень»: Для фотогалереї Курортного парку.

   • Блок «Мапа»: Додайте мітку на Бювет лікувальної води в розділі «Контакти».

   • Кнопка: Створіть кнопку «Дізнатися більше» під описом кожного санаторію.

4. Застосування «Правила третин» на головній сторінці

При налаштуванні головного банера (великого фото зверху):

• Натисніть на іконку «Якір» (Anchor) у редакторі зображення.

• Налаштуйте фото так, щоб найцікавіший об'єкт (наприклад, альтанка чи пам'ятник) знаходився не чітко по центру, а зміщувався в одну з третин екрана. Це додасть динаміки вашому дизайну.

Завдання для самоперевірки сайту:

1. Перевірка адаптивності: Натисніть кнопку «Попередній перегляд» (іконка комп'ютера зверху) і перевірте, як сайт виглядає на смартфоні. Чи не наповзає текст на фото?

2. Чи можна з будь-якої сторінки повернутися на «Головну» за один клік (натиснувши на логотип)?

3. Естетика: Чи достатньо «повітря» (білого простору) між розділами?

Порада: Оскільки ти працюєш над інтеграцією сучасних технологій, спробуй згенерувати унікальне вітальне зображення для головної сторінки за допомогою ШІ (наприклад, «Миргород у стилі футуризму»), щоб додати сайту авторського стилю!

Джерело

Дашборд (від англ. 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.

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