Веб-сайт и сетевые технологии

Слайд 1. Веб-сайт и сетевые технологии

Взаимодействие браузера с сервером, динамические страницы и хранение данных

Слайд 2. Разрыв шаблона: Имена vs Числа

Почему ввод адреса $\mathrm{142.250.74.46}$ открывает Google?

Человеку проще запомнить имя (домен), а компьютеру — числовой адрес ($IP$). Сегодня мы проследим путь от нажатия клавиши до получения данных из сетевого хранилища.

Слайд 3. Основные понятия веб-среды

Слайд 4. Анатомия URL-адреса

Разберем структуру на примере:

https://www.rbc.ru/news/12345

- Протокол: https

- Домен (сайт): rbc.ru

- Путь к странице: /news/12345

- Параметры: передаются после знака $?$

Слайд 5. Шаг 1-2: DNS и поиск сервера

Слайд 6. Шаг 3: Пакетная передача (TCP/IP)

Ваш запрос не летит одним куском. Он разбивается на мелкие пакеты.

Каждый пакет содержит IP отправителя, IP получателя и часть данных. Они могут идти разными путями и собираться воедино только в точке назначения.

Слайд 7. Шаг 4: Как сервер готовит ответ

Файл (index.html) просто лежит на диске. Сервер читает его и отправляет «как есть». Это быстро, но контент одинаков для всех.

Генерируется «на лету». Сервер запускает скрипт, берет данные из базы и вставляет их в шаблон. Контент зависит от пользователя.

Слайд 8. Шаг 5-6: Отрисовка в браузере

1. Получение HTTP-ответа (код 200 OK)

2. Построение DOM-дерева (структура)

3. Загрузка внешних ресурсов (CSS, JS, картинки)

4. Применение стилей и выполнение скриптов

5. Визуализация страницы пользователю

Слайд 9. Практика: Инструменты разработчика

Нажмите $F12$ и откройте вкладку Network:

- Обновите страницу ($Ctrl+R$)

- Изучите «водопад» загрузки

- Найдите самый тяжелый файл

- Посмотрите заголовки User-Agent

Слайд 10. Что такое интернет-приложение?

Клиентская часть (Frontend), с которой взаимодействует человек

Серверные скрипты (Backend), обрабатывающие запросы

Базы данных, где информация лежит в структурированном виде

Способность обновлять данные без полной перезагрузки страницы

Слайд 11. Ролевая игра: Разработка магазина

Верстка карточки товара: фото, цена и кнопка «Купить»

Код, который проверяет наличие товара в БД при клике

Таблица с полями ID, Название, Цена, Остаток

Слайд 12. Сетевое хранение данных

Данные живут в дата-центрах на мощных серверах.

Для ускорения работы используется кэширование: браузер сохраняет копию страницы локально, чтобы не запрашивать её у сервера повторно при каждом входе.

Слайд 13. Интерактив: Верю — Не верю

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

Слайд 14. Итоговая цепочка взаимодействия

Слайд 15. Итоги и Домашнее задание

Браузер и сервер обмениваются данными по протоколу HTTP.

Динамические страницы создаются сервером на основе баз данных.

ДЗ Базовый: Эссе «Путешествие одного запроса».

ДЗ Профи: Создать index.html с формой отправки GET-запроса.

ДЗ Творческий: Схема БД для приложения «Список заметок».