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

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

 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: Надсилання Результату

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

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

Запитання для 10 класу: Технології опрацювання мультимедійних даних

📌 Основні поняття та формати

1. Що таке мультимедіа? Назвіть три основні типи даних, які вона поєднує.

2. Поясніть різницю між растровою та векторною графікою. У яких випадках доцільно використовувати кожен із них?

3. Назвіть три популярні растрові формати графічних файлів та вкажіть їхні ключові переваги (наприклад, стиснення, прозорість).

4. Що таке стиснення мультимедійних даних? Поясніть принципову різницю між стисненням із втратами (lossy) та без втрат (lossless).

5. Яка основна відмінність між форматами аудіофайлів MP3 та WAV?

6. Поясніть, що таке роздільна здатність (resolution) зображення, і як вона впливає на його якість.

💡 Опрацювання зображень

7. Що таке глибина кольору (color depth) і як вона пов'язана з кількістю кольорів, які може відобразити піксель?

8. Які основні інструменти використовують у графічних редакторах для корекції кольору та тону зображення?

9. Що таке альфа-канал у графіці і для чого його використовують?

10. Яке ключове призначення фільтрів (ефектів) у програмах для опрацювання зображень? Наведіть один приклад.

🎧 Опрацювання аудіо та відео

11. Що таке частота дискретизації (sampling rate) звуку? Як вона впливає на якість цифрового аудіо?

12. Поясніть термін бітрейт (bitrate) стосовно відео- та аудіофайлів. Який його зв'язок із якістю та розміром файлу?

13. Що таке кодек (codec) і яка його роль в опрацюванні та відтворенні відеоданих?

14. Назвіть три основні етапи створення та опрацювання відеоролика (наприклад, зйомка, монтаж, експорт).

15. Що таке кадрова частота (frame rate) відео і який стандартний показник використовується для плавного руху?

🖥️ Технічні аспекти та застосування

16. Що таке інтерактивне мультимедіа? Наведіть один приклад його використання.

17. Поясніть поняття віртуальна реальність (VR) та доповнена реальність (AR). Яка між ними ключова різниця?

18. Які технічні вимоги (процесор, пам'ять, відеокарта) є критичними для комфортної роботи з професійними програмами для відеомонтажу?

19. Яка роль хмарних технологій (наприклад, Google Drive, Adobe Creative Cloud) у сучасному опрацюванні мультимедійних даних?

20. Назвіть два приклади використання технологій опрацювання мультимедійних даних у сфері освіти або медицини.

З базами даних ми стикаємось щодня і практично щомиті при використанні сучасних цифрових технологій:

• Файлова система — це ієрархічна база даних, яка:

• зберігає записи (файли),

• організує їх у каталоги,

• має метадані (розмір, створення, права доступу),

• підтримує індексацію для швидкого пошуку,

• дозволяє виконувати CRUD-операції (створення/читання/зміна/видалення).

Фактично ОС працює з метаданими, а самі файли — це “поля великої таблиці”.

2. Операційні системи - у сучасних ОС майже кожен компонент використовує спеціалізовані бази даних:

• реєстр Windows — ключ-значення база даних.

• /etc та конфігураційні сховища Linux — набір текстових БД.

• журнали systemd — бінарна база даних журналів.

• Кеші браузерів, індекси пошуку, бази ACL.

3. Мобільні застосунки - практично кожен застосунок має свою БД.

• Android - SQLite для кожної програми

• iOS - CoreData (SQLite), Realm

• збереження контактів, SMS, історії дзвінків

• локальні збереження ігор (inventory, прогрес)

• налаштування та кеши

4. Браузери та інтернет-сервіси активно використовують бази даних:

• IndexedDB — повноцінна БД у браузері

• LocalStorage / SessionStorage — key-value БД

• кеші сторінок, куки — структуровані дані

• паролі, автозаповнення — окремі зашифровані бази

Інтернет-сервіси — це завжди БД “на сервері”.

5. Соціальні мережі

• Facebook: MySQL + Cassandra

• Instagram: PostgreSQL + Redis

• TikTok: Hadoop + Spark + NoSQL

• YouTube: Bigtable

У базах даних зберігають:

• дані облікових записів

• дописи

• коментарі

• відео-метадані

• уподобання

• рекомендації

6. Електронна комерція та бізнес - майже вся діяльність бізнесу побудована на БД:

• CRM (клієнти)

• ERP (замовлення, склад, виробництво)

• бухгалтерія

• банківські системи

7. Освіта та медицина - освітні й медичні системи є складними БД.

В освіті:

• електронні журнали

• БД учнів, оцінок, відвідування

• платформи Moodle, Google Classroom

У медицині:

• електронні медичні картки

• рецепти

• призначення

• черги

• лабораторні результати

8. Транспорт і логістика - БД забезпечують роботу всіх систем:

• рух транспорту

• квитки (авіа, залізниця)

• кур’єрські служби

• системи складування (WMS)

9. Штучний інтелект та машинне навчання - моделі ML неможливі без великих БД:

• набори даних (зображення, текст, відео)

• телеметрія користувачів та запис подій

• сховища Big Data (Hadoop, Snowflake)

І це тільки частина - можна наводити приклади і щодо ігор (особливо онлайн), наукових досліджень, метеорології, виробництва, тощо.

20 Запитань після перегляду навчального відео "Запити на вибірку даних"

I. Загальні поняття та призначення запитів

1. Що таке запит у контексті опрацювання даних у базах даних і яка його основна роль?

2. Поясніть, чим відрізняється використання запитів від звичайного фільтрування даних у таблиці.

3. Назвіть принаймні три основні операції, які можна здійснити над даними бази даних з використанням запитів.

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

5. Як запити можуть бути використані для обчислення узагальнюючих даних (наприклад, середнього значення чи мінімуму/максимуму)?

II. Класифікація запитів

6. На які чотири основні види поділяються запити залежно від їхнього призначення?

7. Дайте визначення запиту на вибірку даних. Який об'єкт створюється в результаті його виконання?

8. Поясніть, у чому полягає двохетапний процес здійснення операцій у перехресних запитах.

9. Чому перехресні запити схожі на зведені таблиці у табличному процесорі?

10. Для чого призначені запити на внесення змін (запити-дії)? Наведіть приклад їх використання.

11. Яка особливість запитів з параметрами і що має ввести користувач після запуску такого запиту на виконання?

III. Створення запиту на вибірку

12. Які два основні інструменти (подання) для створення запитів згадано у відео?

13. Опишіть перші два кроки створення запиту на вибірку з використанням Майстра запитів.

14. У Майстрі запитів, що потрібно зробити, якщо необхідно відобразити результати із зведенням (обчисленням суми, середнього тощо)?

15. Для чого потрібно переходити до подання Конструктор запитів після створення запиту за допомогою Майстра?

IV. Робота в поданні "Конструктор" та вирази

16. Назвіть принаймні чотири рядки, які містить таблиця конструктора у нижній частині робочого поля.

17. Поясніть функцію рядка "Відображення" у конструкторі запитів.

18. Як у рядку "Критерії" задати складену умову, яка об’єднує критерії для різних полів логічною операцією I (кон'юнкція)?

19. Якщо вирази для умов записано у рядку "Критерії" та у рядку "Або" для одного стовпця, яка логічна операція їх поєднує?

20. Яким чином потрібно записувати імена полів та інших ідентифікаторів у виразах Access? (Наприклад, при виконанні обчислень)

15 запитань  "Впорядкування, пошук і фільтрування даних". За матеріалом переглянутого відео

1. Сортування: Поясніть, у чому полягає фундаментальна необхідність сортування даних у таблицях бази даних. Які переваги це дає користувачу при аналізі та пошуку інформації?

2. Сортування: Як сортування даних за зростанням (Ascending) відрізняється від сортування за спаданням (Descending) для текстових і числових полів? Наведіть приклад для кожного типу даних.

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

4. Сортування: Опишіть повну послідовність дій для скасування сортування (повернення до початкового порядку записів) у програмі MS Access.

5. Пошук: Яка роль функції пошуку в СУБД Access? Чим пошук у базі даних відрізняється від пошуку інформації в Інтернеті?

6. Пошук: Поясніть різницю між параметрами "Усе поле" (Whole Field), "Будь-яка частина поля" (Any Part of Field) та "Початок поля" (Start of Field) у вікні пошуку. Коли доцільно використовувати кожен із них?

7. Пошук: Чому рекомендується використовувати покрокову заміну (кнопка "Знайти далі", а потім "Замінити") замість одночасного використання кнопки "Замінити все" при внесенні змін до великої бази даних?

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

9. Фільтрування: Яке основне призначення фільтрування даних у базі даних, і чим, з точки зору результату, фільтр докорінно відрізняється від сортування?

10. Фільтрування: Як можна здійснити багатокритеріальне фільтрування? Наведіть приклад, де потрібно одночасно застосувати фільтр до двох різних полів (наприклад, знайти всі країни з населенням більше 100 млн та державним устроєм Монархія).

11. Фільтрування: Опишіть, як ви будете використовувати список "Текстові фільтри" (наприклад, "Містить", "Закінчується на...") для знаходження всіх товарів, артикул яких містить послідовність символів "-АВ-" у будь-якій частині.

12. Фільтрування: Що таке фільтрування за виділенням (Filter by Selection), і в яких випадках цей спосіб є найбільш швидким та зручним для користувача?

13. Фільтрування: Поясніть, що відбувається із записами, які не відповідають умовам фільтрації. Чи видаляються вони з таблиці? Як можна скасувати застосований фільтр?

14. Загальне: Порівняйте операції сортування та фільтрування в табличному процесорі (наприклад, Excel) і в системі управління базами даних (наприклад, Access). Які є спільні риси та ключові відмінності в їх реалізації?

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