Проектирование и разработка веб-приложений

1. МДК 09.01 Проектирование и разработка веб-приложений

МДК 09.01
Проектирование и
разработка вебприложений
ПРЕПОДАВАТЕЛЬ: АЛЕКСАНДРОВА АЛЕНА
СЕРГЕЕВНА

2. Что мы узнаем сегодня?

•Основные понятия веба
•Клиент и сервер — кто есть кто?
•Как проходит запрос в интернете
•Примеры технологий (HTML, CSS, JavaScript,
серверы)
•Интерактивная игра: «Собери маршрут запроса!»

3. Что такое веб-разработка?

Что такое
вебразработка?
ВЕБ-САЙТ — ЭТО КАК ДОМ
•ИЗОБРАЖЕНИЕ ДОМА: ФУНДАМЕНТ
(СЕРВЕР), СТЕНЫ (HTML), КРАСКА (CSS),
ДВЕРИ (JS)
•АНАЛОГИЯ: САЙТ = ДОМ, ВЕБРАЗРАБОТКА = СТРОИТЕЛЬСТВО

4. Виды веб-разработки

Виды вебразработки
•FRONTEND (КЛИЕНТСКАЯ
ЧАСТЬ) — БРАУЗЕР
•BACKEND (СЕРВЕРНАЯ
ЧАСТЬ) — СЕРВЕР
•FULLSTACK — И ТО, И
ДРУГОЕ

5. Примеры сайтов

•ЯНДЕКС, RUTUBE,
ВКОНТАКТЕ
•ЧТО ДЕЛАЕТ КАЖДЫЙ:
ПОИСКОВИК, ВИДЕО,
СОЦСЕТЬ

6. Интернет — это не магия

Там, где происходит магия… на самом деле —
серверы

7. Кто такой клиент?

•БРАУЗЕР (YANDEX, CHROME)
•ПРИЛОЖЕНИЕ (TELEGRAM,
МОБИЛЬНЫЙ САЙТ)

8. Кто такой сервер?

•КОМПЬЮТЕР, КОТОРЫЙ
ХРАНИТ ДАННЫЕ И
ОТВЕЧАЕТ НА ЗАПРОСЫ
•РАБОТАЕТ 24/7

9. Сравнение — клиент vs сервер

Клиент
Сервер
Сравнение —
Пользовательский
Хранение данных
клиент vs
интерфейс
Обрабатывает
сервер
Отправляет запросы
запросы
Показывает
результат
Отправляет ответ

10. Как это работает?

СХЕМА:
Как это
работает?

11. Пример — заходим на сайт

1. ВВОДИМ VK.COM
2. БРАУЗЕР ОТПРАВЛЯЕТ
ЗАПРОС
3. СЕРВЕР ВК НАХОДИТ
ДАННЫЕ
4. ОТПРАВЛЯЕТ HTMLСТРАНИЦУ
5. БРАУЗЕР ОТОБРАЖАЕТ ЕЁ
❓ Может ли клиент работать без сервера?

12. Как проходит запрос?

ЧТО ТАКОЕ HTTP?
Как проходит
запрос?
•ПРОТОКОЛ ПЕРЕДАЧИ
ДАННЫХ
•HYPERTEXT TRANSFER
PROTOCOL
•"ЯЗЫК" ОБЩЕНИЯ КЛИЕНТА И
СЕРВЕРА

13. Запрос и ответ

•GET /INDEX.HTML → СЕРВЕР
ОТПРАВЛЯЕТ HTML
•POST /LOGIN → ДАННЫЕ
ФОРМЫ ОТПРАВЛЯЮТСЯ НА
СЕРВЕР

14.

15.

16.

17. DNS — как найти сервер?

• VK.COM → IP-АДРЕС
(НАПРИМЕР, 87.240.137.130)
• КАК ТЕЛЕФОННАЯ КНИГА
ИНТЕРНЕТА

18. Маршрут запроса

1. ПОЛЬЗОВАТЕЛЬ ВВОДИТ
URL
Маршрут
запроса
2. DNS НАХОДИТ IP
3. БРАУЗЕР ОТПРАВЛЯЕТ
HTTP-ЗАПРОС
4. СЕРВЕР ОБРАБАТЫВАЕТ
5. СЕРВЕР ОТПРАВЛЯЕТ
ОТВЕТ
6. БРАУЗЕР ОТОБРАЖАЕТ
СТРАНИЦУ
❓ Почему иногда сайты «не открываются»?

19. Технологии веба

FRONTEND — ЧТО ВИДИТ
ПОЛЬЗОВАТЕЛЬ
•HTML — СТРУКТУРА
•CSS — СТИЛЬ
•JAVASCRIPT — ПОВЕДЕНИЕ

20. Backend — что скрыто

•ЯЗЫКИ: PYTHON, PHP,
NODE.JS, JAVA
•БАЗЫ ДАННЫХ: MYSQL,
POSTGRESQL
•СЕРВЕРЫ: APACHE, NGINX

21. API — «посредник» между клиентом и сервером

ПРИМЕР: ПОГОДА В
ПРИЛОЖЕНИИ → ЗАПРОС К
СЕРВЕРУ ПОГОДЫ

22. Игра: «Собери маршрут запроса!»

ПРАВИЛА ИГРЫ
ЦЕЛЬ: ПРАВИЛЬНО СОБРАТЬ
ЦЕПОЧКУ ОТ ВВОДА URL ДО
ОТОБРАЖЕНИЯ СТРАНИЦЫ
ФОРМАТ:
•КОМАНДНАЯ ИГРА (2–3 КОМАНДЫ
ПО 3–5 ЧЕЛОВЕК)
•КАЖДОЙ КОМАНДЕ ВЫДАЮТСЯ
КАРТОЧКИ

23. Задание

❗ РАСПОЛОЖИТЕ ШАГИ В
ПРАВИЛЬНОМ ПОРЯДКЕ!

24. Правильный ответ

1.
ПОЛЬЗОВАТЕЛЬ ВВОДИТ
GOOGLE.COM
2.
DNS-СЕРВЕР ВОЗВРАЩАЕТ IPАДРЕС
3.
БРАУЗЕР ОТПРАВЛЯЕТ HTTPЗАПРОС
4.
СЕРВЕР GOOGLE ПОЛУЧАЕТ
ЗАПРОС
5.
СЕРВЕР ОБРАБАТЫВАЕТ И
ФОРМИРУЕТ ОТВЕТ
6.
СЕРВЕР ОТПРАВЛЯЕТ HTMLСТРАНИЦУ
7.
БРАУЗЕР ОТОБРАЖАЕТ
СТРАНИЦУ

25. ВОПРОСЫ

26. ❓ 1. Что такое клиент?

(A) СЕРВЕР В ДАТА-ЦЕНТРЕ
(B) БРАУЗЕР НА ВАШЕМ
КОМПЬЮТЕРЕ
(C) БАЗА ДАННЫХ

27. ❓ 2. Что делает DNS?

(A) ХРАНИТ ПАРОЛИ
(B) ПРЕОБРАЗУЕТ ДОМЕН В IPАДРЕС
(C) ШИФРУЕТ ДАННЫЕ

28. ❓ 3. Какой протокол используется для передачи веб-страниц?

(A) FTP
(B) HTTP
(C) SMTP

29. ❓ 4. Где выполняется JavaScript?

(A) ТОЛЬКО НА СЕРВЕРЕ
(B) ТОЛЬКО В БАЗЕ ДАННЫХ
(C) В БРАУЗЕРЕ

30. ❓ 5. Что такое backend?

(A) ТО, ЧТО ВИДИТ
ПОЛЬЗОВАТЕЛЬ
(B) СЕРВЕРНАЯ ЧАСТЬ
ПРИЛОЖЕНИЯ
(C) ТОЛЬКО HTML

31. Ответы

1–B
Ответы
2–B
3–B
4–C
5–B

32. Что мы узнали?

•КЛИЕНТ И СЕРВЕР —
ОСНОВА ВЕБА
Что мы
узнали?
•HTTP, DNS, HTML —
КЛЮЧЕВЫЕ ТЕХНОЛОГИИ
•ЗАПРОС ПРОХОДИТ
НЕСКОЛЬКО ЭТАПОВ
•ВЕБ-РАЗРАБОТКА — ЭТО
КОМАНДА ТЕХНОЛОГИЙ