Конспект урока информатики 11кл Веб-сайт и веб-страница. Взаимодействие браузера с сервером. Динамические страницы и разработка интернет-приложений.

Конспект урока информатики. 11 класс (ФГОС, базовый уровень)

Тема: Веб-сайт и веб-страница. Взаимодействие браузера с сервером. Динамические страницы и разработка интернет-приложений.

Тип урока: Урок открытия новых знаний с элементами исследования. Продолжительность: 45 минут.

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

Ход урока

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

Прием «Черный ящик»: Учитель просит учеников открыть любой современный сайт (например, новостной портал или социальную сеть). Вопросы:

1. Почему при открытии одной и той же ссылки vk.com утром вы видите одни новости, а вечером — другие?

2. Если вы зайдете на этот же сайт из библиотеки или с телефона друга, увидите ли вы свои личные сообщения?

3. Где физически хранятся ваши фотографии, если их нет в памяти вашего компьютера? Вывод: Сайт — это не просто файл на диске, это сложная программа, которая работает где-то далеко и общается с вашим браузером по строгим правилам.

2. Актуализация опорных знаний (5 минут)

Краткий опрос для связи с предыдущей темой (сети):

• DNS: Зачем мы вводим google.ru, а не набор цифр? (Для преобразования домена в IP-адрес).

• IP/TCP: Что гарантирует протокол TCP? (Доставку пакетов без ошибок и в нужном порядке).

• HTTP/HTTPS: Какая буква делает соединение безопасным и почему? («S» — Secure, шифрование трафика).

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

Мини-лекция с визуализацией схемы взаимодействия.

Блок А. Базовые понятия

• Веб-страница: Документ, написанный на языке HTML (разметка), CSS (стили) и JS (логика). То, что видит пользователь.

• Веб-сайт: Совокупность взаимосвязанных страниц, объединенных одним доменным именем и дизайном.

• Браузер (Клиент): Программа-интерпретатор. Она получает код от сервера и рисует страницу на экране пользователя.

• Веб-сервер: Мощный компьютер с постоянным доступом в Интернет, на котором запущено ПО (Apache, Nginx), ожидающее запросов.

Блок Б. Цикл запроса-ответа (Request-Response Cycle)

1. Пользователь вводит URL.

2. Браузер через DNS находит IP-адрес сервера.

3. Браузер отправляет HTTP-запрос (GET /index.html).

4. Сервер ищет файл или запускает скрипт.

5. Сервер отправляет HTTP-ответ (код состояния 200 OK + тело страницы).

6. Браузер рендерит (отображает) результат.

Блок В. Статика vs Динамика

• Статические страницы: Готовые файлы (.html, .css), лежащие на диске сервера. Одинаковы для всех. Пример: сайты-визитки, лендинг учителя.

• Динамические страницы: Генерируются «на лету». Сервер выполняет программу (скрипт на Python, PHP, Node.js), обращается к базе данных и вставляет данные в шаблон.

  • Пример: Лента новостей. Для каждого пользователя она разная, хотя адрес страницы один.

Блок Г. Сетевое хранение данных Данные сайта (фото пользователей, посты, товары) редко лежат там же, где программный код. Используются:

• Облачные хранилища (S3, Яндекс.Облако): Хранение файлов.

• СУБД (MySQL, PostgreSQL): Хранение структурированных данных (таблицы пользователей, логины, пароли).

4. Практическая часть: Задания для решения на уроке (18 минут)

Задание 1. «Анатомия ошибки» (Диагностика HTTP-статусов) (5 минут) Ученикам выдается список ситуаций. Нужно определить код ответа сервера, который увидит браузер.

Задание 2. «Инспекция кода» (Исследование заголовков) (7 минут) Инструкция: Откройте инструменты разработчика в браузере (F12 →\rightarrow→ вкладка Network/Сеть). Обновите главную страницу поисковика.

1. Найдите самый первый запрос (обычно /).

2. Посмотрите колонку Status. Какой код там стоит?

3. Нажмите на запрос и посмотрите раздел Headers (Заголовки).

4. Ответьте на вопросы:

   • Какой метод использован? (GET).

   • Кто отправил запрос (строка User-Agent)? (Название вашего браузера).

   • Есть ли строка Set-Cookie в ответе сервера? (Да, сервер передает браузеру куки для отслеживания сессии).

Задание 3. Моделирование бизнес-логики (6 минут) Задача: Описать алгоритм работы динамического сайта «Покупка билета в кино». Заполните пропуски в схеме передачи данных:

1. [КЛИЕНТ] Пользователь выбирает место в зале и нажимает «Купить».

2. [БРАУЗЕР] Отправляет POST-запрос на сервер с номером места и ID сеанса.

3. [СЕРВЕР] Получает запрос, запускает скрипт проверки.

4. [БАЗА ДАННЫХ] Скрипт спрашивает: «Свободно ли место №12?».

5. [БАЗА ДАННЫХ] Возвращает ответ: «Да, свободно».

6. [СЕРВЕР] Записывает в базу данных информацию о том, что место забронировано за этим пользователем.

7. [СЕРВЕР] Формирует HTML-страницу «Оплата прошла успешно» и отправляет её клиенту.

5. Рефлексия и домашнее задание (9 минут)

Мозговой штурм «Архитектор»: Представьте, что вам нужно создать сайт школьного расписания.

• Какие части будут статическими? (Логотип школы, контакты администрации, шапка сайта).

• Какие части должны быть динамическими? (Сами уроки, которые меняются каждую четверть; ФИО учителей; кабинет, если он изменился сегодня утром).

• Где лучше хранить PDF-файлы со сканами приказов: прямо в папке с сайтом или в облачном хранилище? (В облаке, чтобы не перегружать хостинг сайта тяжелыми файлами).

Домашнее задание:

1. Базовый уровень: Используя поисковую систему, найти определения понятий: API (Application Programming Interface), CMS (Система управления контентом, например WordPress), CDN (Content Delivery Network).

2. Практический уровень: Зайти на любой крупный маркетплейс. Через инспектор (F12) во вкладке «Сеть» найти запрос картинок товаров. Посмотреть размер одного изображения. Рассчитать, сколько таких изображений сможет скачать пользователь с мобильным интернетом скоростью 10 Мбит/с за 1 секунду. (Формула: Скорость (бит/с) / Размер файла (бит)).