Veb-tehnologii-v-dejstvii

1.

Веб-технологии в действии
Добро пожаловать! Мы — студенты 4-го курса, специализирующиеся на вебтехнологиях. Сегодня покажем короткие живые демонстрации и
практические примеры того, как создаются современные веб-приложения.
Вы увидите реальные навыки, которые применяются в индустрии каждый
день.

2.

Три кита веб-разработки
Любой сайт строится на трёх фундаментальных технологиях, которые работают вместе как единый механизм:
HTML
CSS
JavaScript
Структура и содержимое —
Стили и визуальное оформление —
Интерактивность и движение —
фундамент вашего цифрового дома.
делает сайт красивым и
оживляет страницу, реагирует на
Определяет, что будет на странице.
привлекательным для
действия посетителей.
пользователей.
Дальше покажем всё это на конкретных примерах, которые можно попробовать прямо сейчас.

3.

Маленькое чудо за одну минуту
Код простой кнопки
<button onclick="changeColor()">
changeColor() {
Нажми меня</button><script>function
document.body.style
.background = '#325F7B';}</script>
Всего 6–8 строк — и у вас работающая интерактивная кнопка.
Результат виден сразу
Нажатие кнопки мгновенно меняет цвет фона страницы. Никакой магии —

4.

Архитектура настоящего проекта
Фронтенд — Витрина
Бэкенд — Кухня
База данных — Кладовка
Всё, что видит пользователь: интерфейс,
Сервер обрабатывает запросы,
Хранилище всех данных: пользователи,
формы, кнопки, анимации
применяет бизнес-логику
контент, настройки
Пример из жизни: приложение для управления задачами — пользователь видит красивый список дел (фронтенд), сервер проверяет права
доступа (бэкенд), задачи хранятся в базе (данные).

5.

Фронтенд-умения: создаём удобство
Адаптивный дизайн
Сайт идеально выглядит на любом устройстве — от смартфона до широкого монитора. Один код, множество экранов.
Интерактивные элементы
Динамические формы с валидацией, выпадающие меню, модальные окна — всё работает плавно и отзывчиво.
Темы оформления
Переключение между светлой и тёмной темой одним кликом для комфорта пользователей.

6.

Бэкенд-умения: мозг приложения
01
02
03
Принимаем запрос
Обрабатываем данные
Отдаём ответ
Сервер получает HTTP-запрос от клиента
Проверяем права доступа, извлекаем
Формируем структурированный JSON-
— например, «показать список задач
нужную информацию из базы данных,
ответ и отправляем обратно клиенту
пользователя»
применяем фильтры
{ "tasks": [ {"id": 1, "title": "Подготовить презентацию", "status": "в работе"}, {"id": 2, "title":
"Код-ревью проекта", "status": "завершено"} ], "total": 2}

7.

Скорость и производительность
50
95
2.1s
Начальный балл
После улучшений
Время загрузки
Lighthouse до оптимизации
Значительный прирост производительности
Полная загрузка страницы
Плавные анимации
Умное кэширование
Оптимизация медиа
Скелетоны загрузки и микроанимации
Повторные посещения в разы быстрее
Современные форматы WebP, ленивая
создают ощущение быстроты
благодаря сохранению данных
загрузка изображений

8.

Безопасность без сложностей
Аутентификация и
авторизация
Валидация и ограничения
Надёжный вход по паролю с
Проверка всех входящих данных на
регистрации — отсутствовала
хешированием, система ролей
корректность, защита от SQL-
проверка длины пароля. Добавили
пользователей (admin, user, guest),
инъекций и XSS-атак, rate limiting
валидацию, внедрили требования к
защита от несанкционированного
для предотвращения спама и DDoS.
сложности, проблема решена за
доступа к данным.
Реальный кейс
Обнаружили уязвимость в форме
час.

9.

Путь в продакшн: от кода к
пользователям
Упаковка проекта
Сборка оптимизированной версии, минификация файлов, подготовка production-
конфигурации
Деплой на сервер
Загрузка на хостинг, настройка окружения, проверка работоспособности
Публикация
Сайт доступен по ссылке, пользователи могут начать работу
Безопасная сеть: система контроля версий позволяет откатить изменения за
минуты, если что-то пошло не так. Каждое обновление проходит через
автоматические тесты.

10.

Панорама навыков 4 курса
Не пугайтесь объёма — всему учатся постепенно, шаг за шагом. Вот полный спектр технологий, которыми мы владеем:
Верстка HTML/CSS
Анимации
Компоненты/SPA
Доступность A11y
Дизайн-системы
REST/GraphQL API
WebSocket
SQL/NoSQL базы
Тестирование
CI/CD
Docker
Облачные сервисы
Безопасность
Производительность
Результат: мы создаём быстрые, безопасные и масштабируемые веб-приложения, готовые решать реальные бизнес-задачи.