Презентация на тему «Веб-разработка: как устроен сайт»

Слайд 1. Веб-разработка: как устроен сайт

• От доменного имени и сервера до разметки страницы: что происходит, когда мы открываем сайт

Доклад: Здравствуйте! Тема моего выступления — «Веб-разработка: как устроен сайт». Мы разберём, что скрывается за привычной страницей в браузере: от доменного имени и сервера до разметки, стилей и сценариев. Цель — собрать целостную картину, понятную и будущему разработчику, и любому, кто заказывает сайт.

Слайд 2. Содержание

• Введение
• Ключевые понятия
• История Всемирной паутины
• Пионеры Всемирной паутины
• Клиент и сервер
• Путь запроса к сайту
• Доменное имя и служба доменных имён
• Протокол передачи и защита соединения
• Три языка веб-страницы
• Внешняя часть: вёрстка и интерфейс
• Серверная часть: обработка запроса
• Базы данных и хранение содержимого
• Хостинг и центры обработки данных
• Виды сайтов
• Системы управления содержимым
• Мобильные устройства и адаптивность
• Что скрыто от посетителя
• Кто создаёт сайт
• Этапы создания сайта
• Выводы
• Список литературы

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

Слайд 3. Введение

• Сегодня в мире работает более миллиарда сайтов, и все они, от блога до банковского сервиса, строятся на одних и тех же принципах передачи данных.
• Понимание устройства сайта нужно не только программисту: редактор, маркетолог и руководитель ставят задачи подрядчику и принимают результат.
• За привычной страницей стоит цепочка технологий: доменное имя, сервер, база данных, разметка, стили и сценарии в браузере.
• Веб-разработка — одна из самых массовых отраслей цифровой экономики, и базовая грамотность в ней стала частью профессиональной подготовки.

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

Слайд 4. Ключевые понятия

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

Доклад: Начнём с языка, на котором будем говорить дальше. Сайт — это набор связанных страниц под одним доменным именем, лежащих на сервере; веб-страница — отдельный документ с разметкой. Браузер выступает клиентом, который просит страницу и рисует её на экране, а доменное имя — это удобный человеку адрес, за которым прячется числовой адрес сервера.

Слайд 5. История Всемирной паутины

• Всемирная паутина выросла из служебного проекта обмена документами в Европейской организации ядерных исследований.
• За три десятилетия сеть прошла путь от простых текстовых страниц до полноценных приложений в браузере.
• 1989 — проект гипертекстовой системы Бернерса-Ли
• 1991 — открыт первый сайт в сети
• 1993 — графический браузер Mosaic
• 1994 — создан Консорциум Всемирной паутины
• 1996 — первый стандарт таблиц стилей
• 2009 — начало эпохи мобильного интернета

Доклад: Всемирная паутина родилась не как коммерческий продукт, а как служебный проект обмена документами в Европейской организации ядерных исследований. В 1989 году Тим Бернерс-Ли предложил гипертекстовую систему, в 1991-м появился первый сайт, а графический браузер Mosaic в 1993 году сделал сеть массовой. Дальше были стандарты консорциума, таблицы стилей и, наконец, мобильная эпоха, изменившая требования к сайтам.

Слайд 6. Пионеры Всемирной паутины

• Тим Бернерс-Ли, 1955 — н. в., Создал Всемирную паутину: язык разметки, систему адресов и протокол передачи страниц.
• Брендан Айк, 1961 — н. в., Автор языка сценариев JavaScript, благодаря которому страницы стали интерактивными.
• Хокон Виум Ли, 1965 — н. в., Предложил каскадные таблицы стилей CSS — отдельный язык оформления страниц.

Доклад: За технологиями стоят конкретные люди. Тим Бернерс-Ли придумал сам принцип паутины: разметку, адреса и протокол передачи страниц. Брендан Айк создал язык сценариев, который превратил статичные документы в интерактивные приложения, а Хокон Виум Ли предложил вынести оформление в отдельный язык стилей — именно этому решению мы обязаны современным дизайном сайтов.

Слайд 7. Клиент и сервер

• Работа любого сайта — это диалог двух сторон: программы на устройстве посетителя и программы на удалённом компьютере.
• Отправляет запрос по адресу нужной страницы
• Получает разметку, стили, сценарии и изображения
• Собирает и рисует готовую страницу на экране
• Хранит небольшие данные посетителя и настройки
• Принимает запрос и определяет, что именно нужно отдать
• Обращается к базе данных за актуальным содержимым
• Формирует ответ и передаёт файлы обратно браузеру
• Ведёт журнал обращений и распределяет нагрузку

Доклад: Ключевая идея всей веб-разработки — разделение на клиента и сервер. Браузер отправляет запрос, получает файлы и собирает из них картинку на экране; сервер принимает запрос, обращается к базе данных и формирует ответ. Такое разделение позволяет одному серверу обслуживать миллионы разных устройств, ничего не зная об их устройстве заранее.

Слайд 8. Путь запроса к сайту

• Открытие страницы занимает доли секунды, но складывается из нескольких обязательных шагов.
• Сбой на любом из них посетитель видит как ошибку или бесконечную загрузку.
• Знание цепочки помогает быстро находить причину неполадки.
• Одна страница обычно требует десятков отдельных запросов к серверу.
• Ввод адреса — посетитель набирает имя сайта или переходит по ссылке
• Поиск сервера — служба доменных имён превращает имя в числовой адрес
• Соединение — браузер устанавливает защищённый канал с сервером
• Ответ — сервер собирает страницу и отдаёт её файлами
• Отрисовка — браузер строит дерево документа и показывает готовый экран

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

Слайд 9. Доменное имя и служба доменных имён

• Числовые адреса серверов неудобны человеку, поэтому у сайта есть имя.
• Служба доменных имён работает как телефонная книга всей сети.
• Регистрация — имя закрепляется за владельцем на срок от года
• Делегирование — имя привязывается к серверам имён хостинга
• Запрос — браузер спрашивает у службы числовой адрес сервера
• Кэширование — ответ сохраняется и ускоряет повторные обращения

Доклад: Отдельно остановлюсь на доменном имени. Имя регистрируют на срок от года, затем делегируют — то есть указывают, какие серверы имён отвечают за этот адрес. Когда браузер впервые обращается к сайту, он спрашивает у службы доменных имён числовой адрес, а полученный ответ кэшируется, поэтому повторные заходы происходят заметно быстрее.

Слайд 10. Протокол передачи и защита соединения

• 1991 — Протокол передачи гипертекста — Свод правил, по которому браузер просит документ, а сервер его отдаёт.
• 443 — Порт защищённого соединения — По нему идёт зашифрованный обмен, недоступный посторонним.
• 404 — Код ответа «не найдено» — Результат запроса сервер сообщает браузеру трёхзначным числом.
• 85% — Доля защищённых загрузок — Столько страниц в мире открывается по шифрованному протоколу.

Доклад: Обмен между браузером и сервером подчиняется протоколу передачи гипертекста, появившемуся ещё в 1991 году. Сегодня почти весь трафик идёт по защищённому варианту, шифрующему данные, — по нему открывается порядка восьмидесяти пяти процентов страниц в мире. Результат каждого запроса сервер сообщает трёхзначным кодом: знакомый всем 404 означает, что документ по такому адресу не найден.

Слайд 11. Три языка веб-страницы

• Страница собирается из трёх слоёв, и у каждого своя зона ответственности.
• Разделение упрощает поддержку: оформление меняют, не трогая содержание.
• Разметка HTML — структура: заголовки, абзацы, списки, таблицы, изображения
• Стили CSS — оформление: цвета, шрифты, сетка, отступы, поведение при изменении экрана
• Сценарии JavaScript — поведение: проверка форм, выпадающие меню, подгрузка данных
• Готовая веб-страница — содержание, вид и поведение, работающие как одно целое

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

Слайд 12. Внешняя часть: вёрстка и интерфейс

• Вёрстка превращает макет дизайнера в работающую страницу, которая одинаково выглядит в разных браузерах.
• Интерфейс проектируют от задач посетителя: понятная навигация, читаемый шрифт, заметные кнопки действия.
• Современная вёрстка строится на гибких сетках, поэтому один макет подходит и монитору, и телефону.
• Качество проверяют по доступности: контраст текста, размер области нажатия, работа только с клавиатуры.

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

Слайд 13. Серверная часть: обработка запроса

• Приём запроса: сервер определяет, какая страница или какие данные нужны посетителю.
• Проверка прав: система решает, доступен ли этот раздел данному пользователю.
• Обращение к базе данных: из хранилища извлекаются тексты, товары, записи, заказы.
• Сборка ответа: данные подставляются в шаблон страницы либо отдаются набором значений.
• Отправка и запись в журнал: ответ уходит браузеру, а обращение фиксируется для анализа.

Доклад: Серверная часть скрыта от глаз, но именно она отвечает за смысл происходящего. Сервер принимает запрос, проверяет права доступа, обращается к базе данных за содержимым, подставляет полученные данные в шаблон и отправляет ответ браузеру. Каждое обращение записывается в журнал — это основа и для аналитики, и для расследования сбоев.

Слайд 14. Базы данных и хранение содержимого

• Изменяемое содержимое сайта хранится не в файлах страниц, а в базе данных.
• Тип хранилища выбирают по структуре данных и ожидаемой нагрузке.

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

Слайд 15. Хостинг и центры обработки данных

• Хостинг — аренда места и вычислительных мощностей на постоянно работающем сервере.
• Виртуальный хостинг дешевле, но соседи делят с вами ресурсы; выделенный сервер даёт полный контроль.
• Оборудование стоит в центрах обработки данных с резервным питанием, охлаждением и круглосуточной охраной.
• Надёжность площадки измеряют доступностью: 99,9% в год — это около 8,8 часа простоя.

Доклад: Чтобы сайт был доступен круглосуточно, его размещают на хостинге — арендуют место и мощности на постоянно работающем сервере. Виртуальный хостинг дешевле, но ресурсы делятся с соседями, выделенный сервер дороже и даёт полный контроль. Само оборудование стоит в центрах обработки данных с резервным питанием, охлаждением и охраной, а надёжность площадки измеряют доступностью: 99,9 процента в год — это около восьми с половиной часов простоя.

Слайд 16. Виды сайтов

• Сайты принято делить по основной цели — от одной страницы до сложного сервиса с личными кабинетами.
• Новостной портал
• Блог
• Справочник
• Отраслевой журнал
• Сайт-визитка
• Посадочная страница
• Каталог
• Интернет-магазин
• Личный кабинет
• Обучающая платформа
• Бронирование
• Социальная сеть

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

Слайд 17. Системы управления содержимым

• Большинство сайтов создают не с нуля, а на готовой системе управления содержимым.
• Такая система даёт редактору привычную панель: тексты и картинки меняются без участия программиста.

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

Слайд 18. Мобильные устройства и адаптивность

• Больше половины обращений к сайтам приходит с телефонов, поэтому вёрстку проектируют «от мобильного экрана».
• Адаптивная сетка перестраивает страницу под ширину экрана, не требуя отдельной мобильной версии сайта.

Доклад: Мобильные устройства изменили правила вёрстки. Доля посещений с телефонов выросла с двадцати процентов в 2013 году до почти двух третей сегодня, и рост продолжается. Поэтому современный сайт проектируют «от мобильного экрана», а адаптивная сетка сама перестраивает страницу под ширину устройства, избавляя от необходимости поддерживать отдельную мобильную версию.

Слайд 19. Что скрыто от посетителя

• Посетитель видит только верхний слой — готовую страницу.
• Под ней постоянно идёт незаметная работа по защите и поддержке.
• Пренебрежение скрытой частью рано или поздно оборачивается сбоем или утечкой данных.
• Именно эта часть определяет, проживёт ли сайт годы без потерь.
• Видимая страница — тексты, изображения и интерфейс на экране
• Защита данных — шифрование канала и проверка всего, что вводит посетитель
• Резервные копии — ежедневные архивы базы и файлов на отдельной площадке
• Обновления — своевременная установка исправлений безопасности
• Мониторинг — постоянное наблюдение за доступностью и скоростью ответа

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

Слайд 20. Кто создаёт сайт

• Дизайнер проектирует структуру экранов и визуальный стиль, опираясь на задачи заказчика и привычки посетителей.
• Разработчик внешней части собирает интерфейс, разработчик серверной — логику, базу данных и обмен с другими системами.
• Тестировщик проверяет работу на разных устройствах и браузерах, инженер сопровождения отвечает за развёртывание и мониторинг.
• Небольшой сайт способен сделать один универсальный специалист, крупный сервис требует команды из десятков человек.

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

Слайд 21. Этапы создания сайта

• Сбор требований и постановка задачи
• Проектирование структуры и прототипы
• Дизайн макетов ключевых страниц
• Вёрстка и программирование
• Наполнение и тестирование
• Запуск, поддержка и развитие

Доклад: Работа над сайтом идёт последовательно: сбор требований, проектирование структуры и прототипы, дизайн ключевых макетов, вёрстка и программирование, наполнение и тестирование, запуск. Важно понимать, что запуск — не финал, а начало этапа поддержки и развития. Пропуск ранних этапов почти всегда приводит к переделкам на поздних, а они обходятся значительно дороже.

Слайд 22. Выводы

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

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

Слайд 23. Список литературы

• Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов / Д. Дакетт. — Москва : Эксмо, 2017. — 480 с.
• Дунаев, В. В. HTML, скрипты и стили / В. В. Дунаев. — Санкт-Петербург : БХВ-Петербург, 2015. — 816 с.
• Макфарланд, Д. Большая книга CSS / Д. Макфарланд. — Санкт-Петербург : Питер, 2016. — 720 с.
• Никсон, Р. Создаём динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Р. Никсон. — Санкт-Петербург : Питер, 2019. — 816 с.
• Флэнаган, Д. JavaScript. Подробное руководство / Д. Флэнаган. — Москва : Вильямс, 2013. — 1080 с.

Доклад: В списке литературы приведены проверенные учебные издания по вёрстке, стилям и серверному программированию. Книги Дакетта и Макфарланда хороши для старта во внешней части, руководство Флэнагана считается настольным по языку сценариев, а работа Никсона показывает создание динамического сайта целиком. Все описания оформлены по действующему стандарту библиографического описания.

Слайд 24. Спасибо за внимание!

Доклад: На этом моё выступление завершено. Мы прошли путь от определения сайта до этапов его создания и увидели, что за простой страницей стоит стройная и логичная система. Благодарю за внимание, готов ответить на ваши вопросы.