Веб-технологии: от статической страницы к динамическим приложениям
Цели и задачи
- Цель: К концу урока учащиеся смогут объяснить механизм взаимодействия браузера и веб-сервера по протоколу HTTP, классифицировать веб-страницы на статические и динамические, а также анализировать сетевой трафик с помощью инструментов разработчика.
- Образовательная задача: Сформировать понимание архитектуры клиент-сервер и принципов работы динамических сайтов.
- Развивающая задача: Развивать навыки системного мышления и анализа сложных ИТ-процессов через работу с профессиональными инструментами отладки (DevTools).
- Воспитательная задача: Содействовать профессиональному самоопределению в сфере веб-разработки и сетевого администрирования.
Планируемые результаты
Личностные
- Готовность к осознанному выбору будущей профессии на основе понимания устройства современной цифровой среды.
- Способность к избирательному отношению к информации в сети на основе понимания механизмов её хранения и выдачи.
- Формирование ответственного отношения к личным данным при использовании сетевых хранилищ.
Метапредметные
- Умение определять понятия, создавать обобщения и устанавливать причинно-следственные связи в работе информационных систем.
- Навыки смыслового чтения технической документации и интерфейсов инструментов разработчика.
- Способность организовывать учебное сотрудничество в парах при решении исследовательских задач.
Предметные
- Знание определений веб-сайта, веб-страницы, веб-сервера и браузера.
- Понимание этапов обработки запроса: DNS-запрос, установление соединения, HTTP-запрос, генерация ответа, рендеринг.
- Умение различать клиентские (HTML/CSS/JS) и серверные (PHP/Python/SQL) технологии.
- Владение навыками анализа структуры веб-страницы и сетевых запросов через браузер.
Универсальные учебные действия (УУД)
Личностные УУД
- Самоопределение в области ИТ-компетенций.
- Оценка значимости веб-технологий для современного общества.
Регулятивные УУД
- Планирование пути достижения цели при выполнении практической работы.
- Самоконтроль правильности выполнения действий в инструментах разработчика.
Познавательные УУД
- Поиск и выделение необходимой информации в сетевых логах браузера.
- Моделирование процесса передачи данных между клиентом и сервером.
Коммуникативные УУД
- Умение аргументировать свою точку зрения при обсуждении работы динамических скриптов.
- Эффективное взаимодействие в паре при проведении мини-исследования.
Подготовка учителя к уроку
- Подготовить презентацию со схемой взаимодействия клиент-сервер.
- Проверить работоспособность браузеров (Chrome/Firefox/Edge) на ученических ПК, наличие доступа к инструментам разработчика (F12).
- Распечатать карточки-инструкции для парной работы "Исследователь трафика" (15 экз.).
- Подготовить ссылки на примеры статической страницы (простой HTML-файл) и динамической (форма обратной связи или поиск).
- Проверить доступ к школьному веб-серверу или любому доступному облачному хранилищу для демонстрации.
Ход урока
Этап 1. Мотивация и самоопределение (3 мин)
Цель этапа: вызвать интерес к теме через демонстрацию "закулисья" привычных действий в интернете.
Время | Действие учителя | Действие учеников |
|---|---|---|
3 мин | Учитель: "Здравствуйте! Каждый день вы открываете десятки сайтов. Вы вводите адрес, нажимаете Enter и через секунду видите страницу. А задумывались ли вы, что происходит в эту секунду? Сегодня мы заглянем под капот интернета. Представьте, что браузер — это заказчик в ресторане, а сервер — повар. Как они общаются? Почему иногда официант приносит ответ '404'? Сегодня мы станем системными аналитиками и разберем этот процесс по косточкам." | Ученики слушают, включаются в диалог, отвечают на вопрос о том, какие ошибки они чаще всего видят в браузере (404, 500, 502). |
Завершение этапа: учитель подводит итог: "Чтобы понимать, как строятся современные веб-приложения, нам нужно разобраться в основах взаимодействия клиента и сервера."
Этап 2. Актуализация знаний и фиксация затруднения (5 мин)
Цель этапа: повторить базовые понятия сетей и выявить пробел в знаниях о динамике сайтов.
Время | Действие учителя | Действие учеников |
|---|---|---|
5 мин | Учитель задает вопросы: "Вспомните из курса 9-10 класса, что такое IP-адрес и DNS? Как компьютер понимает, к какому серверу обратиться?" Затем демонстрирует на экране два сайта: личную страницу-визитку и ленту соцсети. "Почему на визитке информация меняется только если я перепишу файл, а в соцсети контент обновляется каждую секунду сам собой? В чем принципиальная разница в их устройстве?" | Ученики отвечают: "IP — уникальный адрес, DNS — служба имен". Пытаются объяснить разницу: "В соцсетях данные берутся из базы данных", "Там работают программы на сервере". |
Завершение этапа: учитель подводит итог: "Вы правы, разница в способе формирования страницы. Но как именно сервер 'собирает' страницу для каждого пользователя индивидуально? Это и будет темой нашего исследования."
Посмотрите план целиком
Зарегистрируйтесь — и откройте план урока по этой теме полностью: цели, ход урока и рефлексия по ФГОС.
Этап 3. Построение проекта выхода из затруднения (3 мин)
Цель этапа: сформулировать цель урока и план действий.
Время | Действие учителя | Действие учеников |
|---|---|---|
3 мин | Учитель: "Сформулируйте, что нам нужно узнать сегодня, чтобы понять принцип работы современных сайтов?" Помогает составить план на доске: 1. Протокол HTTP и цепочка запроса. 2. Статика vs Динамика. 3. Роль баз данных и сетевого хранения. | Ученики формулируют цель: "Изучить механизм работы динамических веб-страниц и взаимодействие браузера с сервером". Записывают план в тетрадь. |
Завершение этапа: учитель подводит итог: "План готов, переходим к реализации первого пункта — изучению диалога между клиентом и сервером."
Этап 4. Открытие нового знания (12 мин)
Цель этапа: разобрать технические детали взаимодействия по протоколу HTTP и архитектуру динамических страниц.
Время | Действие учителя | Действие учеников |
|---|---|---|
6 мин | Учитель объясняет схему на слайде: "Когда вы вводите URL, браузер отправляет HTTP-запрос (Request). В нем есть метод (GET, POST), заголовки и адрес. Сервер получает запрос, находит файл или запускает скрипт. Если страница статическая — он просто отдает файл. Если динамическая — серверный скрипт (на PHP, Python или Node.js) идет в базу данных (SQL), берет данные, вставляет их в HTML-шаблон и только потом отдает браузеру готовый ответ (Response)." | Ученики зарисовывают схему "Клиент -> Запрос -> Сервер (Скрипт + БД) -> Ответ -> Клиент". |
6 мин | Учитель вводит понятие сетевого хранения данных: "Где хранятся ваши посты, лайки и пароли? Не в файлах HTML, а в специализированных системах управления базами данных (СУБД) на сервере. Это и есть сетевое хранение. Браузер никогда не имеет прямого доступа к базе, только через посредника — веб-сервер. Это вопрос безопасности." | Ученики обсуждают, почему нельзя давать браузеру прямой доступ к базе данных, делают выводы о защите информации. |
Запись в тетрадях
- HTTP (HyperText Transfer Protocol) — протокол передачи гипертекста.
- Статическая страница — файл, содержимое которого не меняется в процессе выдачи.
- Динамическая страница — генерируется сервером в момент запроса с использованием данных из БД.
- Сетевое хранение (Backend) — серверная часть приложения, отвечающая за логику и данные.
Завершение этапа: учитель подводит итог: "Мы разобрали теорию. Теперь давайте увидим этот процесс своими глазами, используя инструменты профессиональных разработчиков."
Этап 5. Практическая работа в парах: ИКТ-исследование (10 мин)
Цель этапа: научиться использовать DevTools для анализа сетевой активности браузера.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель: "Откройте браузер и любую новостную страницу. Нажмите F12 и перейдите на вкладку 'Network' (Сеть). Обновите страницу. Видите этот список? Это все запросы, которые сделал ваш браузер, чтобы собрать одну страницу." | Ученики открывают инструменты разработчика, наблюдают за загрузкой ресурсов (картинки, скрипты, стили). |
8 мин | Учитель раздает карточки с заданием для пар: "1. Найдите в списке основной документ (тип document). Какой у него статус-код? 2. Найдите любой запрос к API или скрипту. 3. Посмотрите размер передаваемых данных. 4. Попробуйте найти в заголовках тип сервера (поле Server)." | Ученики работают в парах, исследуют трафик, записывают найденные параметры (например, Status 200 OK, Server: nginx) в отчетный лист. |
Завершение этапа: учитель подводит итог: "Вы увидели, что даже простая страница — это результат десятков и сотен запросов. Это и есть реальная работа веб-приложения."
Этап 6. Первичное закрепление и включение в систему знаний (7 мин)
Цель этапа: закрепить понимание разницы между фронтендом и бэкендом.
Время | Действие учителя | Действие учеников |
|---|---|---|
7 мин | Учитель проводит блиц-опрос: "Если я изменю цвет кнопки в коде страницы через F12, увидят ли это другие пользователи? Почему? А если я напишу комментарий и нажму 'Отправить', почему его увидят все?" Учитель подводит к пониманию того, что изменения в браузере — это клиентская часть (Frontend), а сохранение данных — серверная (Backend). | Ученики отвечают: "Цвет кнопки изменится только у меня локально, так как это копия файла. Комментарий улетит на сервер, запишется в базу данных и будет вставлен в страницу для всех остальных". |
Завершение этапа: учитель подводит итог: "Теперь вы понимаете архитектуру большинства сервисов, которыми пользуетесь — от YouTube до электронного дневника."
Этап 7. Рефлексия и домашнее задание (2 мин)
Цель этапа: подвести итоги и дать инструкции по дальнейшему изучению.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель: "Наш урок подходит к концу. Мы прошли путь от клика мышкой до серверной базы данных. Что для вас сегодня стало самым неожиданным открытием?" Выводит на слайд QR-код с домашним заданием. | Ученики делятся впечатлениями (многих удивляет количество скрытых запросов), записывают домашнее задание. |
Критерии оценивания практической работы
- "5" — Ученик успешно нашел все 4 параметра в DevTools, правильно объяснил разницу между статикой и динамикой, привел примеры серверных технологий.
- "4" — Ученик нашел параметры в DevTools, но допустил неточности в описании процесса взаимодействия клиент-сервер.
- "3" — Ученик смог открыть инструменты разработчика, но не сумел интерпретировать данные сетевых запросов без помощи учителя.
Рефлексия
Вопрос для ученика | Цель вопроса |
|---|---|
Какой статус-код HTTP вы запомнили лучше всего и почему? | Проверка усвоения ключевых технических индикаторов работы сети. |
Можете ли вы теперь объяснить родителям, почему сайт 'тормозит'? | Перевод академических знаний в плоскость функциональной грамотности. |
Какая роль в веб-разработке вам ближе: создание красоты (Frontend) или логика данных (Backend)? | Профориентационное самоопределение. |
Завершающее слово учителя
"Сегодня мы приоткрыли завесу того, как работает современный веб. Эти знания — фундамент для любого ИТ-специалиста, будь то программист, дизайнер или системный администратор. Помните, что за каждым красивым интерфейсом стоит сложная логика обмена данными. На следующем уроке мы попробуем сами создать простую динамическую связь. До встречи!"
Домашнее задание
Уровень сложности | Задания | Описание |
|---|---|---|
Базовый (обязательный) | Учебник, §18, вопросы 1-5 | Выучить определения: хостинг, веб-сервер, HTTP, динамическая страница. |
Средний (повышающий) | Исследование сайта | Используя DevTools, сравнить время загрузки главной страницы любого новостного портала и страницы поисковика. Объяснить разницу. |
Продвинутый (дополнительный) | Мини-эссе или схема | Подготовить доклад на тему 'Эволюция протокола HTTP: от 1.1 до HTTP/3'. В чем главные отличия для пользователя? |
Контрольный вопрос: "Что произойдет с динамическим сайтом, если на сервере отключится база данных, но сам веб-сервер останется в сети?"
