Кафедра ИСиТ ВГТУ
🎓 ВТиП — Веб-технологии и программирование

Введение в веб технологии

👤 Бизюк Андрей 📅 16.01.2025 ⏱️ 6 мин. чтения lecture

Роль веб-технологий в современном мире

Описание

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

Доступ к информации

Веб-технологии позволяют нам получать доступ к огромному объему информации и ресурсов через браузер. Это включает в себя новости, образовательные материалы, развлечения, социальные сети и многое другое.

Электронная коммерция

Онлайн-магазины и платформы для электронной коммерции строятся на веб-технологиях. Они позволяют пользователям покупать товары и услуги, сравнивать цены, читать отзывы и многое другое.

Социальные сети

Популярные социальные сети, такие как Facebook, Twitter, Instagram и LinkedIn, базируются на веб-технологиях и позволяют людям общаться, делиться контентом и устанавливать профессиональные связи.

Образование

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

Работа и бизнес

Многие компании используют веб-технологии для создания веб-портфолио, организации онлайн-конференций, ведения электронной почты и многих других задач, связанных с бизнесом и работой.

Развлечения и мультимедиа

Сервисы потокового видео, онлайн-игры и мультимедийные контент-платформы также являются результатом веб-технологий.

Мобильные устройства

Мобильные приложения и веб-приложения, оптимизированные для мобильных устройств, позволяют нам оставаться связанными и использовать интернет в движении.

Блокчейн и криптовалюты

Веб-технологии также используются в сфере криптовалют и блокчейна, позволяя создавать децентрализованные приложения и обеспечивать безопасность транзакций.

Интернет вещей (IoT)

Веб-технологии активно применяются для управления и мониторинга устройств в Интернете вещей, таких как умные дома и умные города.

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

История развития веб-технологий

История развития веб-технологий восходит к далеким временам, но наиболее заметное и революционное развитие произошло в последние несколько десятилетий. Вот краткий обзор ключевых этапов в истории развития веб-технологий:

Ранние этапы (1940-1990-е)

1940-1950-е

Идея “гипертекста” была предложена Французским философом и инженером Ванневаром Бушем, который придумал устройство под названием “Мемекс”, предвосхитившее идеи гипертекстовой связи и ссылок.

Ванневар Буш

Ванневар Буш{#fig-bush width=“80%” fig-align=“center”}

Memex

Memex{#fig-memex width=“80%” fig-align=“center”}

1960-е

Разработаны первые концепции компьютерных сетей и гипертекстовых систем, таких как Xanadu.

Xanadu{#fig-xanadu width=“80%” fig-align=“center”}

1980-е

Тим Бернерс-Ли создал и представил первую концепцию веба и систему управления информацией, которая стала прародителем современного Всемирной Паутины (World Wide Web).

Тим Бернерс-Ли

Создатель URI, URL, HTTP, HTML и Всемирной паутины и действующий глава Консорциума Всемирной паутины. Автор концепции семантической паутины, множества других разработок в области информационных технологий

Тим Берренс-Ли{#fig-tim-berrens-lee width=“80%” fig-align=“center”}

Зарождение Всемирной паутины (1990-1993)

1990

Тим Бернерс-Ли разработал первый веб-браузер (WorldWideWeb) и веб-сервер (httpd) на основе протокола HTTP (HyperText Transfer Protocol).

WorldWideWeb{#fig-worldwideweb width=“80%” fig-align=“center” width=“81%”}

1991

Первый сайт, представляющий Всемирную паутину, был размещен в Интернете. http://info.cern.ch

Первый сайт{#fig-first-site width=“80%” fig-align=“center”}

1993

Веб-браузер Mosaic, созданный Марком Андрессеном и Эриком Бина, стал первым популярным веб-браузером, который позволил пользователям просматривать веб-страницы с графикой.

Mosaic{#fig-mosaic width=“80%” fig-align=“center”}

Развитие браузеров и серверов

История браузеров и серверов{#fig-broeser-history width=“80%” fig-align=“center”}

Эра браузерных войн и стандартизации (1994-2000)

  • 1994-1997: Браузерные войны между Microsoft Internet Explorer и Netscape Navigator привели к интенсивному развитию веб-технологий и функциональности браузеров.
  • 1996: Веб-сервер Apache начал свою работу, и с тех пор остается одним из наиболее популярных веб-серверов в мире.
  • 1998: Веб-консорциум W3C был создан с целью разработки и стандартизации веб-технологий, таких как HTML и CSS.

Эра динамических веб-приложений (2000-2010)

  • 2004: Запуск веб-приложения Gmail, которое продемонстрировало возможности создания сложных приложений, работающих в браузере.
  • 2005: AJAX (Asynchronous JavaScript and XML) стал популярным методом для создания интерактивных и асинхронных веб-приложений.
  • 2008: Google Chrome был выпущен и стал конкурентоспособным браузером, способствующим развитию веб-технологий.

Эра мобильности и HTML5 (2010-н.в.)

  • 2010: HTML5 и CSS3 были внедрены, предоставив разработчикам мощные инструменты для создания богатых веб-приложений и мультимедийного контента.
  • 2010-е: Рост мобильного интернета и развитие мобильных браузеров привели к необходимости создания адаптивных и мобильных веб-сайтов.
  • 2020-е: Веб-технологии продолжают развиваться, включая прогрессивные веб-приложения, WebAssembly, и усиленное внимание к безопасности.

Клиент-Серверная модель

Описание

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

Клиент (Client)

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

Сервер (Server)

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

Взаимодействие между клиентом и сервером

Процесс взаимодействия между клиентом и сервером обычно выглядит следующим образом:

  1. Клиент отправляет HTTP-запрос на сервер, указывая, какие данные или ресурсы он хочет получить.

  2. Сервер принимает запрос и обрабатывает его, включая доступ к базам данных или другим ресурсам, если это необходимо.

  3. Сервер формирует HTTP-ответ с запрошенными данными и отправляет его обратно клиенту.

  4. Клиент получает ответ от сервера и отображает содержимое на экране или выполняет другие действия в зависимости от содержания ответа.

Статический веб-сайт

 1digraph StaticWebsite {
 2  // Названия узлов
 3  node [shape=box, style=rounded];
 4
 5  // Клиент
 6  client [label="Клиент\n(Браузер)"];
 7
 8  // Веб-сервер
 9  webserver [label="Веб-сервер\n(Apache, Nginx)"];
10
11  // Файлы
12  html [label="HTML"];
13  css [label="CSS"];
14  media [label="Медиа \n(изображения,\n видео, аудио)"];
15
16  // Зависимости
17  client -> webserver [label="HTTP/HTTPS"];
18  webserver -> html;
19  webserver -> css;
20  webserver -> media;
21}

Динамический веб-сайт

 1digraph DynamicWebsite {
 2  // Названия узлов
 3  node [shape=box, style=rounded];
 4
 5  // Клиент
 6  client [label="Клиент\n(Браузер)"];
 7
 8  // Веб-сервер
 9  webserver [label="Веб-сервер\n(Apache, Nginx)"];
10
11  // Бэкенд-приложение
12  backend [label="Бэкенд\n(Язык программирования,\nФреймворк)"];
13
14  // База данных
15  database [label="База данных\n(MySQL, PostgreSQL, MongoDB)"];
16
17  // Файлы
18  html [label="HTML"];
19  css [label="CSS"];
20  js [label="JavaScript"];
21  media [label="Медиа"];
22
23  // Зависимости
24  client -> webserver [label="HTTP/HTTPS"];
25  webserver -> backend;
26  backend -> database [label="SQL, NoSQL"];
27  backend -> html;
28  backend -> css;
29  backend -> js;
30  backend -> media;
31}

Веб-приложение

 1digraph WebApplication {
 2  // Названия узлов
 3  node [shape=box, style=rounded];
 4
 5
 6  // Фронтенд
 7  frontend [label="Фронтенд\n(HTML, CSS, JS)\nФреймворк (React, Angular, Vue ...)"];
 8
 9  // Бэкенд
10  backend [label="Бэкенд\nЯзык программирования (JS, Python, Java, PHP ...),\nФреймворк(Express, Django, Spring, Laravel ...)"];
11
12  // База данных
13  database [label="База данных\n(MySQL, PostgreSQL, MongoDB)"];
14
15  // Облачная платформа
16  cloud [label="Облачная Платформа\n(AWS, Azure, GCP ...)"];
17
18  // Зависимости
19  frontend -> backend [label="HTTP/HTTPS, JSON"];
20  backend -> database [label="ORM/ODM\n (SQLAlchemy, Mongoos ...)"];
21  backend -> cloud [label="Деплой, Хостинг"];
22
23}
Протокол HTTP →