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

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. Естетика: Чи достатньо «повітря» (білого простору) між розділами?

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

День кульбаби (який традиційно святкують 13 травня) — це прекрасний привід для розв'язання яскравої задачі.
Тема стосується розгалужених алгоритмів (оператори if, elif, else), пропоную створити програму-помічник для "Фестивалю кульбаб".

1. Задача. 
2. Інфографіка
3. Презентація до Дня кульбаби

Задача: "Золотистий калькулятор кульбаб"

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

Логіка програми:

1. Якщо зібрано менше 10 кульбабок — порадьте поставити їх у маленьку вазу для настрою.

2. Якщо зібрано від 10 до 50 (включно) — напишіть, що цього вистачить на чудовий весняний віночок.

3. Якщо зібрано більше 50 — повідомте, що час готувати смачний кульбабовий мед!

4. Додайте перевірку: якщо користувач випадково ввів від'ємне число, програма має повідомити про помилку.

Джерело

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

Назва задачі: "Цифровий помічник: Твоя реакція на ситуацію"

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

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

Ситуації для вибору:

1. Ти бачиш, як у коридорі ображають іншу дитину.

2. Тобі прислали образливе повідомлення в соцмережах.

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

Приклад коду для реалізації в Google Colab:

Python

print("Сьогодні 4 травня — День боротьби з булінгом.")
print("Обери ситуацію, щоб дізнатися, як діяти правильно:")
print("1 — Ти бачиш, як ображають іншу дитину.")
print("2 — Тобі прислали образливе повідомлення.")
print("3 — Однокласника ігнорують у класі.")

# Отримуємо номер ситуації від користувача
choice = input("Введи номер ситуації (1, 2 або 3): ")

# Реалізація розгалуженого алгоритму
if choice == '1':
 print("Порада: Не стій осторонь! Поклич на допомогу дорослих або спробуй відвернути увагу тих, хто ображає.")
elif choice == '2':
 print("Порада: Не відповідай на образу. Заблокуй відправника та обов'язково розкажи про це батькам чи вчителям.")
elif choice == '3':
 print("Порада: Прояви доброту. Спробуй першим(-ою) заговорити з учнем або запроси його до спільної гри чи обговорення.")
else:
 print("Помилка! Будь ласка, введи число від 1 до 3.")

print("\nПам'ятай: твоя небайдужість може змінити чиєсь життя!")

Завдання для учнів на налагодження (Debug):

Щоб зробити урок цікавішим, можна запропонувати учням знайти та виправити "помилки", які ви можете навмисно додати в код:

1. Синтаксична: Забути поставити двокрапку : після if чи elif.

2. Логічна: Порівнювати введене значення (яке є рядком) з числом без лапок (наприклад, if choice == 1 замість '1').

3. Відступи: Змістити блок print так, щоб він не належав до оператора умови.

Як перевірити в Google Colab:

1. Відкрити colab.research.google.com.

2. Створити новий блокнот.

3. Скопіювати код у комірку.

4. Натиснути кнопку Run (трикутник ліворуч від комірки).

5. Ввести номер у полі, що з'явиться під кодом.

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

​​​​​​​

Запитання для перевірки опрацювання відео

Основи 3D-графіки та інтерфейс:

1. Яка головна відмінність тривимірних об'єктів від двовимірних (2D) зображень згадується на початку відео? [00:10]

2. Для якої мети найчастіше створюються об'єкти в середовищах 3D-графіки, таких як Tinkercad? [00:23]

3. Яку комбінацію клавіш варто пам'ятати для скасування невдалої дії під час моделювання? [01:59]

Навігація та керування: 4. Яку функцію виконує колесо прокручування миші під час роботи з площиною в Tinkercad? [03:34] 5. Як змінити огляд (ракурс), щоб подивитися на об'єкт з різних сторін? Яку кнопку миші для цього потрібно утримувати? [03:34] 6. За допомогою яких елементів на самому об'єкті можна змінити його лінійні розміри? [03:50] 7. Як підняти об'єкт по висоті над робочою площиною? [03:59]

Практичне завдання (Сендвіч): 8. У чому полягало основне завдання практичної роботи, продемонстрованої у відео? [02:37] 9. Чому важливо періодично обертати камеру та перевіряти розташування об'єктів з різних боків? [04:30] 10. Чи можна змінювати колір вже готових компонентів заготовки, і якщо так, то як це зробити? [05:03]

Здача та публікація роботи: 11. Які існують способи здачі виконаної роботи вчителю через платформу Tinkercad? Назвіть принаймні два. [05:35] 12. Що потрібно зробити з налаштуваннями приватності дизайну, щоб вчитель зміг переглянути вашу роботу за посиланням? [07:13]