Урок 5.3. Автоматизовані засоби створення та публікації вебсайтів. Практична робота «Створення сайту з використанням онлайн-системи конструювання сайтів»

Тематичний урок «Трансформація майбутнього: твій перший IT-проєкт»

Критерії оцінювання навчальних досягнень учнів

Вітаю, юні інженери майбутнього! Сьогодні наш урок припав на період Інженерного тижня. Ви можете запитати: "Хіба створення сайту — це інженерія?". Відповідь — так!

Ми звикли, що інженери будують мости з бетону та сталі. Але сьогодні ви станете архітекторами інформаційних конструкцій. Ваше завдання — побудувати цифровий "Художній салон". Це не просто сторінка з картинками, це складна інженерна система, де:

Фундамент — це платформа Google Сайти.
Каркас — це навігація та структура сторінок.
Комунікації — це гіперпосилання та інтерактивні елементи.

Сьогодні ми розширюємо межі можливого: переносимо мистецтво з реальних залів у безмежний віртуальний простір. Ставайте до роботи, проєктуйте сміливо!

І перш за все перегляньте презентацію

🏗️ Найважливіше: Вебконструювання як інженерний виклик

🌐 Автоматизовані засоби створення та публікації вебсайтів

Сучасний Інтернет пропонує безліч інструментів, які дозволяють будувати складні системи без написання низькорівневого коду.

У межах Інженерного тижня ми розглядаємо системи конструювання сайтів як «готові інженерні вузли». Це працює за принципом модульного будівництва: ви не виплавляєте кожну цеглину окремо, а збираєте надійну конструкцію з високотехнологічних блоків (шаблонів, віджетів, медіамодулів).

🔑 Інженерні переваги автоматизованих систем

Оптимізація ресурсів — створення продукту без складного програмування економить головний ресурс інженера — час.
Висока швидкість прототипування — можливість перевірити життєздатність ідеї та створити працюючу модель за кілька годин.
Адаптивна гнучкість — архітектуру системи можна модернізувати під нові завдання у будь-який момент.
Хмарна мобільність — розробка ведеться онлайн, що дозволяє інженерній команді працювати спільно з будь-якої точки світу.
Миттєве впровадження (Deployment) — публікація робить ваш «цифровий винахід» доступним усьому світу в один клік.

🖥️ Проєктування в екосистемі Google Сайти

Google Сайти — це професійне середовище для швидкого розгортання вебресурсів. Його головна інженерна цінність — безшовна інтеграція з іншими «компонентами» (Docs, Drive, YouTube тощо), що дозволяє створювати єдину екосистему даних.

🚀 Технічні можливості «цифрового конструктора»

📂 Архітектоніка: Проєктування багаторівневої структури сторінок для зручної логіки користувача.
🎨 Дизайн-інженерія: Використання готових стилів для забезпечення візуальної цілісності об'єкта.
🖼️ Модульне наповнення: Інтеграція текстів, медіа та інтерактивних модулів як функціональних одиниць сайту.
🔗 Логічні зв'язки: Налаштування гіперпосилань для створення надійної мережі переходів.
👩‍💻 Авторське маркування: Захист інтелектуальної власності інженера через підпис у футері (нижньому колонтитулі).
🌍 Масштабування: Публікація в глобальній мережі з унікальною веб-адресою.

✨ Висновок: Розширюючи межі можливого

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

Сервіс Google Сайти сьогодні — це ваш стартовий майданчик. Використовуйте його, щоб спроєктувати майбутнє, де інформація доступна, структурована та відкрита для кожного.

Виконайте інтерактивне завдання

Робота за комп'ютером

Увага! Під час роботи з комп'ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.

Повторіть правила безпечної роботи за комп’ютером.

Завдання ви зможете знайти за адресою: https://cutt.ly/re2cH4s6

Перед виконанням завдання завантажте файли: Вправа 5.3

Час розпочати роботу! Ми розпочинаємо практичну фазу — зведення вашого цифрового салону.

🎨 Завдання «Художній салон онлайн»

Уяви, що ти — інженер-конструктор (дизайнер) віртуальної галереї мистецтва.

Наш інженерний виклик на сьогодні — створити сайт у сервісі Google Сайти, який стане справжнім «Художнім салоном» із виставковими залами та музейними експонатами:

Змонтувати виставкові зали. Створити логічну структуру сторінок.
Інтегрувати експонати. Розмістити зображення та описи так, щоб вони створювали єдину композицію.
Налаштувати системи зв'язку. Перевірити, чи всі кнопки та посилання працюють безперебійно, як добре налагоджений механізм.

Пам’ятай, ти не просто завантажуєш тексти чи фото — ти створюєш інтерактивне середовище, яке працюватиме на будь-якому пристрої від смартфона до великого екрана. Це і є справжня інженерія доступності!

🚀 Кроки виконання

📂 Створи новий сайт у Google Сайтах на основі шаблону «Порожній сайт».
- Назви його Художній салон.
- Головній сторінці дай заголовок Краса поруч.
🎨 Оформи сайт у темі Арістотель:
- обери сірий колір та класичний стиль шрифту;
- додай зображення у верхній колонтитул;
- створи нижній колонтитул із поточним роком, своїм прізвищем та ім’ям.
🖼️ Створи сторінки та розділи за мапою сайту:
- Головна: Краса поруч
- Розділ: Виставкова зала
  - Сторінка: Портрети
  - Сторінка: Пейзажі
- Сторінка: Музей вишиванок
✍️ Заповни сторінки матеріалами з файлу Вправа 5.3 та додай зображення з папки.
- На головній сторінці виділи слова Зустріч з мистецтвом стилем «Заголовок».
- Встав зображення вернісаж.jpg та розмісти його по центру.
🌍 Опублікуй сайт із адресою формату salon-прізвище (прізвище англійською).

📤 Як здати роботу

Прикріпи URL-адресу створеного сайту у розділ Ваші роботи на платформі Google ClassRoom.

Об'єкти здано в експлуатацію! Сьогодні ми довели, що інженерія не має меж. Ми створили простір, де технології служать культурі. Тепер наші "Художні салони" готові приймати перших відвідувачів з будь-якої точки планети.

Відео у допомогу

Опрацюйте

За підручником "Інформатика, 8 клас" (Й.Я. Ривкінд та інші), 2025:

Прочитайте та розберіть теоретичний матеріал пункту 5.3 (стор. 179-191).
Дайте усні відповіді на питання 1-6 (стор. 189).

Перевірте свій рівень знань

Скриншот результату тесту прикріпіть у розділі Ваші роботи на платформі Google ClassRoom.

Засоби автоматизованого створення та публікації вебресурсів. Тест 22 (Інформатика 8 клас Ривкінд НУШ)