Веб-технологии: от статической страницы до динамического приложения
Цели и задачи
- Цель: сформировать понимание принципов работы современных веб-систем, отличий статических и динамических страниц, а также механизмов взаимодействия с веб-сервисами и сетевыми хранилищами.
- Образовательная задача: изучить архитектуру клиент-серверного взаимодействия и роль скриптов в создании динамического контента.
- Развивающая задача: развить навыки анализа структуры веб-приложений и понимание процессов обмена данными в сети.
- Воспитательная задача: способствовать формированию культуры информационной безопасности при работе с сетевыми хранилищами и веб-сервисами.
Планируемые результаты
Личностные
- Готовность к осознанному выбору дальнейшей профессиональной траектории в сфере IT.
- Понимание этических аспектoв хранения персональных данных в облачных сервисах.
- Критическое отношение к надежности различных способов сетевого хранения информации.
Метапредметные
- Умение определять цели и задачи деятельности при разработке интернет-проектов.
- Навыки поиска, анализа и структурирования информации о современных веб-технологиях.
- Способность строить логическое рассуждение о принципах работы распределенных систем.
Предметные
- Знать определения понятий «веб-сайт», «веб-страница», «динамическая страница», «веб-сервис».
- Понимать разницу между клиентскими и серверными сценариями (скриптами).
- Владеть знаниями о принципах организации сетевого хранения данных и API-взаимодействия.
Универсальные учебные действия (УУД)
Личностные УУД
- Формирование ответственного отношения к защите своих данных в сети.
- Самоопределение в области интересов к веб-разработке.
Регулятивные УУД
- Самостоятельное планирование путей достижения целей при решении практических задач.
- Оценка правильности выполнения учебной задачи в области сетевых технологий.
Познавательные УУД
- Сравнение и классификация статических и динамических веб-ресурсов.
- Создание концептуальных моделей взаимодействия клиента и сервера.
Коммуникативные УУД
- Умение аргументированно излагать свою точку зрения на выбор технологий разработки.
- Продуктивное взаимодействие в группе при обсуждении архитектуры веб-приложений.
Подготовка учителя к уроку
- Подготовить презентацию со схемами запросов HTTP и архитектурой Client-Server.
- Распечатать карточки для приёма «Сравнение»: шаблоны для заполнения характеристик статики и динамики (15 шт.).
- Подготовить демонстрацию работы простого скрипта (например, калькулятор на JS или вывод текущего времени на PHP).
- Проверить доступ к школьной сети и работу браузеров на рабочих местах учеников.
- Оборудование: проектор, экран, персональные компьютеры с выходом в интернет.
Ход урока
Этап 1. Мотивация и актуализация знаний (5 мин)
Цель этапа: актуализировать базовые знания о WWW и создать проблемную ситуацию для перехода к динамическим страницам.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель: «"Здравствуйте! Мы каждый день пользуемся интернетом: заходим в соцсети, проверяем почту, ищем информацию. Скажите, задумывались ли вы, почему лента новостей в ВК у каждого из вас разная, хотя адрес сайта один и тот же? Чем отличается обычный текстовый файл, открытый в браузере, от личного кабинета в онлайн-банке?"» | Ученики отвечают: «"В соцсетях информация меняется под конкретного пользователя", "Банк требует авторизации и показывает баланс именно моего счета", "Текстовый файл всегда одинаковый для всех"». |
3 мин | Учитель: «"Верно. Мы подошли к ключевому вопросу: как сайт понимает, кто к нему обратился, и как он строит страницу специально для вас прямо в момент запроса? Сегодня мы разберемся, как работают современные веб-сервисы и чем динамика отличается от статики."» | Ученики фиксируют тему урока в тетрадях: «Веб-сайты. Динамические страницы и веб-сервисы». |
Завершение этапа: учитель подводит итог: «"Мы поняли, что интернет — это не просто набор документов, а сложная система сервисов. Давайте выясним, как они устроены изнутри."»
Этап 2. Открытие нового знания: Статика vs Динамика (10 мин)
Цель этапа: ввести понятия статической и динамической веб-страницы, объяснить механизм их формирования.
Время | Действие учителя | Действие учеников |
|---|---|---|
5 мин | Учитель объясняет на схеме (выводит на экран): «"Статическая страница — это готовый файл на сервере. Сервер просто отдает его браузеру 'как есть'. Динамическая страница же не существует заранее. Она собирается программой на сервере из шаблона и данных из базы данных в ответ на ваш клик. Представьте конструктор Лего: статика — это склеенная модель, динамика — это набор деталей, который собирается в нужную фигуру по инструкции, когда вы попросите."» | Ученики рисуют в тетрадях упрощенную схему: Пользователь -> Запрос -> Сервер (Скрипт + БД) -> Готовая страница -> Пользователь. |
5 мин | Учитель вводит понятия Frontend и Backend: «"Frontend — это то, что видит ваш браузер (HTML, CSS, JavaScript). Backend — это 'кухня' сервера, где работают скрипты на Python, PHP или Node.js. Как вы думаете, где происходит обработка вашего пароля, когда вы входите в систему?"» | Ученики предполагают: «"На сервере, чтобы никто не перехватил", "В бэкенде, потому что там есть доступ к базе данных с паролями"». |
Посмотрите план целиком
Зарегистрируйтесь — и откройте план урока по этой теме полностью: цели, ход урока и рефлексия по ФГОС.
Запись в тетрадях
- Статическая страница — неизменяемый файл (HTML), хранящийся на сервере.
- Динамическая страница — генерируется сервером «на лету» с использованием скриптов и баз данных.
- Backend — серверная часть приложения. Frontend — клиентская часть (в браузере).
Завершение этапа: учитель подводит итог: «"Теперь мы знаем, как создаются страницы. Но где хранятся те самые данные, из которых они собираются? Переходим к сетевому хранению."»
Этап 3. Сетевое хранение данных и Веб-сервисы (10 мин)
Цель этапа: разобрать принципы работы облачных хранилищ и взаимодействие приложений через API.
Время | Действие учителя | Действие учеников |
|---|---|---|
5 мин | Учитель: «"Современные приложения редко хранят всё в одном месте. Часто они используют сетевые хранилища или сторонние сервисы. Например, сайт интернет-магазина может использовать сервис оплаты или карты Google/Yandex. Это взаимодействие происходит через API — набор правил, по которым программы общаются друг с другом. Сетевое хранение данных позволяет нам иметь доступ к файлам с любого устройства. Какие примеры облачных дисков вы знаете?"» | Ученики перечисляют: «"Google Drive, Яндекс.Диск, iCloud, Dropbox"». Один ученик поясняет: «"Это удобно, потому что не нужно носить флешку, данные всегда в сети"». |
5 мин | Учитель задает вопрос на анализ: «"А в чем риск хранения всех данных в облаке? Что если сервер сервиса 'упадет' или ваш аккаунт взломают?"» | Ученики обсуждают в парах (приём Think-Pair-Share) и отвечают: «"Потеря доступа к информации", "Утечка личных фото или документов", "Зависимость от наличия интернета"». |
Завершение этапа: учитель подводит итог: «"Сетевое хранение — это фундамент современного веба. Без него невозможна работа ни одного крупного интернет-приложения."»
Этап 4. Практическое закрепление: Анализ веб-ресурсов (12 мин)
Цель этапа: научиться определять тип веб-ресурса и используемые технологии на практике.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель дает задание: «"Откройте на компьютерах три ресурса: 1) Любую статью в Википедии, 2) Главную страницу поисковика, 3) Свой личный кабинет в электронном дневнике. Заполните таблицу сравнения в тетради: тип страницы, наличие авторизации, меняется ли контент при обновлении."» | Ученики открывают браузеры и переходят на указанные типы сайтов. |
10 мин | Учитель проходит по классу, консультируя группы: «"Обратите внимание, Википедия кажется статичной, но у нее есть кнопка 'Править' — значит, за ней стоит база данных и скрипты. Это сложная динамика."» | Ученики заполняют таблицу. Выводят, что большинство современных сайтов — динамические, а статика осталась для простых визиток или документации. |
Эталон таблицы для проверки
Ресурс | Тип (Стат/Дин) | Признак динамики | Сетевое хранение |
|---|---|---|---|
Википедия | Динамический | Поиск, правка статей | Централизованная БД |
Поисковик | Динамический | Результаты под запрос | Индексы всей сети |
Эл. дневник | Динамический | Личные оценки, расписание | Облачная БД школы/региона |
Завершение этапа: учитель подводит итог: «"Вы отлично справились с анализом. Теперь вы видите веб не как картинку, а как работающий механизм."»
Этап 5. Рефлексия и Домашнее задание (8 мин)
Цель этапа: подвести итоги урока, оценить уровень усвоения материала и дать инструкции по самостоятельной работе.
Вопрос для ученика | Цель вопроса |
|---|---|
«В чем главное преимущество динамической страницы перед статической для владельца интернет-магазина?» | Проверка понимания функциональной ценности динамики (автоматизация, работа с товарами). |
«Какой этап взаимодействия клиента и сервера показался самым сложным для понимания?» | Выявление зон затруднения для коррекции на следующем уроке. |
«Может ли современный веб-сервис существовать без сетевого хранения данных?» | Осознание взаимосвязи изученных компонентов темы. |
Критерии оценивания практической работы
- "5" — Верно определены типы всех 3-х ресурсов, даны четкие обоснования признаков динамики, заполнены все графы таблицы.
- "4" — Верно определены типы ресурсов, но допущены неточности в описании механизмов хранения данных.
- "3" — Ученик различает статику и динамику, но не может объяснить роль серверных скриптов и БД.
Завершающее слово учителя
«"Сегодня мы приоткрыли завесу тайны над тем, как работает Всемирная паутина. Мы узнали, что за красивым дизайном скрывается сложная логика взаимодействия серверов, баз данных и API. Эти знания — фундамент для любого IT-специалиста, будь то разработчик, аналитик или дизайнер. На следующем уроке мы попробуем сами создать простейший скрипт, который превратит вашу статичную страницу в динамическую. Спасибо за работу!"»
Домашнее задание
Уровень | Что задать | Зачем |
|---|---|---|
Базовый | Составить краткий конспект-сравнение (5-7 пунктов) технологий Frontend и Backend на основе материала урока. | Закрепление терминологии и понимания разделения ответственности в веб-разработке. |
Средний | Найти и описать пример одного веб-сервиса, который использует API другого сервиса (например, сайт с погодой или картой). Описать, какие данные передаются. | Развитие навыка анализа межсервисного взаимодействия и понимания работы API. |
Продвинутый | Подготовить небольшое сообщение (или схему) о том, как работают протоколы безопасности (HTTPS) при передаче данных в сетевые хранилища. | Углубление знаний в области информационной безопасности и протоколов передачи данных. |
Контрольный вопрос перед выходом: «Если вы изменили цену товара в базе данных, нужно ли вам переписывать HTML-код страницы этого товара, если сайт динамический?»
