О разделе
Раздел связывает как пользователь открывает сайт в браузере с тем, что происходит на сервере и в коде страницы.
Рекомендуемый порядок
| Этап | Статьи | Зачем |
|---|---|---|
| 1. Основы | Сайты и веб-сайты (от URL до пикселей), Адресная строка браузера | Клиент–сервер, DNS, HTTPS, рендеринг, URL |
| 2. Инфраструктура | Веб-серверы, Обработка внутренних ошибок браузера, 212 | Веб-серверы, CDN и origin, ошибки ERR_* |
| Nginx — конфиги под задачу | Готовые nginx.conf — статика, SPA, proxy, PHP, SSL | |
| Dockerfile — 10 типовых образов | React/Vue + nginx, Node API — образ для docker build | |
| Сетевые сервисы по ролям | DNS, HTTPS, SSH, БД, OAuth — порты для backend и DevOps | |
| 12 концепций архитектуры | Балансировка, кэш, CDN, gateway — шпаргалка с ссылками | |
| 3. Приложения | Архитектура веб-приложений, Архитектурные особенности современных веб-приложений, Фоновая работа и офлайн-режим веб-приложений, Polling, Long Polling, SSE и Webhook, Метрики производительности веб-страницы | SPA, SSR, Service Worker, метрики скорости страницы, обновления в реальном времени |
| React — компоненты-рецепты | Счётчик, todo, Router, fetch — практика SPA после 272 | |
| 4. Сборка без кода | Конструкторы сайтов, Справочник по Tilda | Конструкторы, CMS и справочник по Tilda |
| 5. Данные и реклама | Хранение данных в браузере и на сервере, Персонализация и пользовательские предпочтения, Рекламные технологии в вебе | Cookies, хранилища, персонализация |
| 6. Интерфейс | Дизайн веб-интерфейсов, Веб-дизайн — маршрут | UX/UI, структура страницы, типы сайтов |
Опционально: Push-уведомления и рассылки (PWA, push), SEO-оптимизация, Polling, Long Polling, SSE и Webhook (polling, SSE, webhook), Web API в браузере (Web API браузера), Web API на практике - примеры кода (Web API с кодом), BB-код — разметка постов на форумах (BB-код на форумах), История браузера и приватность на клиенте (история браузера и приватность), Движки браузеров и линейки продуктов (движки и линейки браузеров), HTTPS и TLS — шифрование веба (HTTPS и TLS), Интернет, сайт и HTTP — связь с культурой сети (мост с интернет-культурой), DevTools в браузере. Итоги — Веб-сайты и веб-приложения — итоги, самопроверка — Веб-сайты и веб-приложения — чек-лист. По платформенному запуску без кода смотрите Справочник по Tilda.
Связь с соседними разделами
- Пошаговая публикация статики на GitHub Pages (домен, DNS, Actions) — лабораторный кейс "Размещение своего сайта с GitHub Pages"
- Сети, DNS, TCP — 2.03. Сеть и интернет
- HTML и разметка — 3.09. HTML
- Целые HTML-файлы с разбором тегов (лаборатория) — HTML-страницы целиком
- Готовые макеты HTML+CSS (лаборатория) — HTML + CSS — готовые макеты
- SVG — рисунки кодом (лаборатория) — SVG — рисунки кодом
- Tailwind — готовые блоки (лаборатория) — Tailwind — готовые блоки
- CSS-анимации (лаборатория) — CSS-анимации — готовые эффекты
- Конфиги Nginx для VPS и лабораторных — Nginx — конфиги под задачу
- Dockerfile для фронта и API в контейнере — Dockerfile — 10 типовых образов
- JavaScript — 5.01. JavaScript
- Практика HTML/CSS/JS в браузере — WebEditor (домен экосистемы, исходники)
Сайты и веб-сайты
Как устроены сайты и веб-сайты - сборка, развёртывание и роль статических генераторов в современном веб-производстве.
Адресная строка браузера
Адресная строка браузера - как устроен ввод URL, отображение контекста безопасности и особенности интерфейса на мобильных устройствах.
Архитектура веб-приложений
Архитектура веб-приложений - сочетание серверного рендеринга и клиентской логики, влияющее на скорость загрузки и интерактивность.
Управление закладками и вкладками в браузере
Управление вкладками и закладками в браузере - как организовать сессии, сохранить контекст работы и быстрее переключаться между задачами.
Обработка внутренних ошибок браузера
Это определяет схожесть или различие в форматах ошибок.
Веб-серверы
Так, если клиент - это браузер и пользователь, то сервер - это мощный компьютер где-то далеко.
Конструкторы сайтов
Конструкторы сайтов - визуальная сборка страниц, шаблоны и ограничения no-code-подхода при создании веб-проектов.
Архитектурные особенности современных веб-приложений
Архитектурные особенности современных веб-приложений - протоколы, границы компонентов и отличия от классических сайтов.
Фоновая работа и офлайн-режим веб-приложений
Фоновая работа и офлайн-режим веб-приложений - Service Worker, кэширование и устойчивость интерфейса при нестабильной сети.
Хранение данных в браузере и на сервере
Где хранятся данные веб-приложения - распределение между браузером и сервером, а также границы ответственности клиента и backend-части.
Push-уведомления и рассылки
Push-уведомления — это короткие сообщения, которые веб-приложение может показать пользователю даже тогда, когда вкладка с сайтом закрыта, браузер свёрнут или работает в фоне.
SEO-оптимизация
SEO-оптимизация и аудит - как оценивать текущие позиции сайта, приоритизировать улучшения и формировать дорожную карту роста.
Персонализация и пользовательские предпочтения
Персонализация в вебе - как платформы учитывают поведение пользователя, формируют предпочтения и адаптируют контент под контекст.
Web API в браузере
Web API в браузере - что это такое, как работает и какие API лежат в основе современного веб-приложения.
Web API на практике - примеры кода
Web API на практике - короткие рабочие примеры кода для fetch, DOM, Storage, WebSocket, Workers, Notifications и других API.
Справочник по Tilda
Полный справочник по Tilda — блоки, Zero Block, формы, CRM, интернет-магазин, SEO, домены, публикация, интеграции, API и ограничения платформы.
BB-код — разметка постов на форумах
Теги BB-кода на форумах, преобразование в HTML на сервере, сравнение с Markdown и риски XSS в старых движках.
История браузера и приватность на клиенте
Журнал посещений, кэш, cookies и режим инкогнито — что хранит браузер, кто ещё видит активность и как это связано с веб-хранилищами.
Интернет, сайт и HTTP — связь с культурой сети
Как технические термины Интернет, сайт, HTTP и URL связаны с форумами, мемами и рунетской лексикой — мост между 2.03 и 9.10.
Движки браузеров и линейки продуктов
Chromium, Gecko, WebKit; Chrome, Edge, Firefox, Safari, Яндекс Браузер и наследие Internet Explorer — одна карта без дублирования учебника.
HTTPS и TLS — шифрование веба
Что даёт HTTPS, этапы TCP и TLS, сертификат и сессионный ключ; замок в браузере и куда копать глубже.
Polling, Long Polling, SSE и Webhook
Четыре базовых подхода к обновлениям в реальном времени — от периодического опроса до push-событий между сервисами.
Метрики производительности веб-страницы
Девять базовых показателей загрузки сайта — от TTFB и RTT до FCP, DOM Content Loaded и блокирующих ресурсов — и связь с Core Web Vitals.
Дизайн веб-интерфейсов
Базовые элементы дизайна веб-интерфейса - хедер, навигация и служебные блоки, которые определяют удобство взаимодействия с сайтом.
Рекламные технологии в вебе
Рекламные технологии в вебе - форматы, механики показа и технические ограничения, влияющие на эффективность и пользовательский опыт.
Веб-сайты и веб-приложения — итоги
Итоги раздела «Веб-сайты и веб-приложения» — FAQ и краткие ответы по теме.
Веб-сайты и веб-приложения — чек-лист
Чек-лист раздела «Веб-сайты и веб-приложения» — вопросы для самопроверки.
Веб-сайты и веб-приложения — о разделе
Подборка материалов раздела Веб-сайты и веб-приложения в энциклопедии Вселенная IT.
Базовый разбор HTTP и HTTPS находится в отдельной статье — HTTP как основа веб-интеграций.
В подборках
Статья входит в тематические подборки и блок "С чего начать?" на главной. Соседние шаги того же маршрута:
Сетевая грамотность — Веб-браузеры, Организация домашней сети, Сеть и интернет — о разделе, NAT и проброс портов, Сайты и веб-сайты, Основы информационной безопасности — о разделе.
Веб-разработка — Сеть и интернет — о разделе, Веб-браузеры, История интернета, HTML — о разделе, Интерфейс — о разделе, JavaScript — о разделе.