План конспект на тему "Веб-сайт. Веб-страница. Взаимодействие браузера с веб-сервером. Динамические страницы. Разработка интернет-приложений (сайтов). Сетевое хранение данных"

ПЛАН-КОНСПЕКТ

Тема №2:

Веб-сайт. Веб-страница. Взаимодействие браузера с веб-сервером. Динамические страницы. Разработка интернет-приложений (сайтов). Сетевое хранение данных

Класс:

11 класс (углублённый уровень)

Цель урока:

Сформировать у учащихся представление о веб-сайтах и веб-страницах, принципах взаимодействия клиента и сервера, различиях между статическим и динамическим контентом, основах разработки интернет-приложений и принципах сетевого хранения данных.

Задачи:

1. Познакомить учащихся с понятиями веб-сайта, веб-страницы и архитектуры клиент-сервер.

2. Объяснить процесс загрузки веб-страницы в браузере и роль веб-сервера.

3. Раскрыть понятие динамической страницы и технологий для её создания.

4. Рассмотреть этапы создания интернет-приложений.

5. Ознакомить с принципами сетевого хранения данных (облако, серверы).

Планируемые результаты:

• Предметные:
  Учащиеся знают, как устроен веб-сайт, как происходит взаимодействие браузера и веб-сервера, понимают различия между статическими и динамическими страницами, знают основы разработки сайтов и принципы облачного хранения данных.

• Метапредметные:
  Развиваются навыки анализа, построения логических схем, системного мышления, восприятия информационных процессов.

• Личностные:
  Формируется осознание роли современных технологий в цифровом обществе, развитие информационной культуры и ответственности при работе с онлайн-данными.

Оборудование и материалы:

• Компьютер, проектор / интерактивная доска

• Презентация по теме

• Видеоролик: «Как работает веб-сайт»

• Раздаточный материал (схема: клиент–сервер, структура сайта)

• Интернет-доступ (по возможности — демонстрация в реальном времени)

Структура урока:

1. Организационный момент (2–3 минуты)

• Приветствие, проверка присутствующих.

• Постановка темы и целей урока.

• Вводный вопрос: «Как открывается сайт в браузере? Что за этим стоит?»

2. Актуализация знаний (5 минут)

• Обсуждение:

  • Что такое веб-сайт?

  • Чем сайт отличается от страницы?

  • Какие сайты вы посещаете чаще всего?

• Мини-опрос:

  • Какие языки и технологии используются при создании сайтов?

3. Изучение нового материала (20 минут)

Мини-лекция с элементами демонстрации и схемами:

• Веб-сайт и веб-страница:

  • Веб-страница — документ, доступный в Интернете через браузер.

  • Веб-сайт — совокупность связанных между собой страниц, размещённых на одном домене.

• Взаимодействие браузера с веб-сервером:

  • Принцип клиент–сервер.

  • Запрос (HTTP/HTTPS) от браузера → обработка сервером → ответ (HTML-документ).

  • Роль доменных имён, IP-адресов и DNS.

• Статические и динамические страницы:

  • Статическая — всегда одна и та же (HTML).

  • Динамическая — генерируется на сервере (с учётом пользователя, времени и т.п.), используются языки PHP, JavaScript, Python, базы данных (например, MySQL).

• Разработка интернет-приложений (веб-приложений):

  • Этапы: планирование → проектирование интерфейса → вёрстка (HTML/CSS) → программирование (JavaScript, backend) → тестирование → публикация.

  • Примеры: сайты, интернет-магазины, сервисы (Google Docs, YouTube и т.д.).

• Сетевое хранение данных:

  • Облачные технологии: Google Drive, Dropbox, Яндекс.Диск.

  • Централизованное хранение: сервера и дата-центры.

  • Преимущества: доступ из любой точки мира, резервное копирование, совместная работа.

Видео (по возможности):

• «Как браузер загружает страницу» (3–4 минуты)

4. Практическая работа (15 минут)

Задание 1:
Разбор структуры сайта:

• По заданному адресу (например, https://news.ycombinator.com/ или школьный сайт) учащиеся определяют: заголовок, меню, подвал, ссылки, картинки.

Задание 2:
Построение схемы взаимодействия браузера с сервером (на основе примера с YouTube или Google).

Дополнительно (по желанию):

• Написать простой HTML-код страницы с заголовком, абзацем и изображением (можно в редакторе или блокноте).

5. Закрепление материала (10 минут)

• Ответы на вопросы:

  • Как отличается статическая страница от динамической?

  • Что происходит после ввода адреса сайта в браузере?

  • Как работает облачное хранение?

• Обсуждение:

  • Какие сложности могут возникнуть при разработке интернет-приложения?

  • Чем облачное хранение данных удобнее флешки?

6. Рефлексия (5 минут)

• Что нового узнали?

• Что показалось сложным?

• Где можно применить эти знания в будущем?

(Можно использовать стикеры или опрос по шкале: 1 — ничего не понял, 5 — всё понятно)

7. Домашнее задание (2 минуты)

1. Теоретическое задание:
   Составить список из 3 сайтов и описать, какие технологии могут использоваться при их создании (HTML, CSS, JS, базы данных и т.д.).

2. Практическое задание (по желанию):
   Сделать свою первую простую веб-страницу в блокноте с использованием HTML.

Критерии оценки:

• Участие в обсуждении и практической части

• Правильность и логичность схемы взаимодействия

• Осознанность в выполнении домашнего задания

• Грамотность и структурированность объяснений

Заключение:

• Подведение итогов урока

• Повторение ключевых понятий (веб-сайт, сервер, клиент, HTML, DNS, облако)

• Ответы на вопросы учащихся

• Мотивация: веб-разработка — одна из самых востребованных сфер в ИТ