Web 1.0, Web 2.0, Web 3.0 Архитектура информационных ресурсов Front-end, Back-end API Толстый клиент, Тонкий клиент Web-клиент, Web-сервер Специальные файлы и директории на web-сервере URI, URL, URN, IRI, IDN Использованы материалы: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/

1. Лекция 2

2. Web 1.0
 "Интернет только для чтения“ - Tim Berners-Lee (W3C)
 Первый Интернет позволял нам искать информацию
и читать её.
 Взаимодействие с пользователями в составлении
содержания было ограничено.
 Основные цели информационных ресурсов web 1.0:
 «обозначить» свое присутствие в глобальной сети,
 сделать информацию доступной всем в любое время.
 Особенности web-проектирования:
 Статичные страницы
 Использование фреймов
 Гостевые книги, форумы, чаты
 Использование информеров
 Требования к монитору 2

3. Web 2.0
 Социальность и мобильность
 Предпосылки:
 широкополосные сети,
 улучшенные браузеры,
 технологии взаимодействия (например Ajax),
 развитие flash,
 появление виджетов (элементов управления),
 социальные сети,
 облачные хранилища.
 Принцип привлечения пользователей к наполнению и
многократной выверке информационного материала
(социальные сети, блоги, wiki).
 Интерактивность комментирование сообщений, и
создание групп пользователей, и прямой обмен данными.
 Мобильность – возможность доступа к ресурсу с любого
устройства, имеющего выход в Интернет. 3

4. Web 3.0
 В процессе эпохи Web 2.0 глобальная сеть
бесконтрольно наполнилась массивами
однообразной и бессмысленной информации
 Принципы:
 Строгая модерация контента информационных
ресурсов. Ключевую роль должны сыграть онлайн-
эксперты (Википедия). Аналогичный принцип
пытаются использовать информационно-поисковые
системы.
 «Web 3.0 – это семантическая паутина» (Тим Бернерс
Ли). Семантическая паутина – пространство данных,
доступ к которым происходит не на основе анализа
текста, а анализа смысла текста – примерно так, как
это бы делал человек
4

5. Web
5

6. Типовая архитектура информационных ресурсов
 Текстового ИР
6
Пользователь
?
data
Базы
данных
Сервера
приложений
Клиентская сторона Серверная сторона
Десктопный
(UI)
Толстый
Браузер
(Web UI)
Тонкий
Программа-
клиент
Web-сервер
Скрипты
Приложения
СУБД
HTML/CSS
JavaScript

7. Типовая архитектура информационных ресурсов
 Как правило, подобной архитектуре удовлетворяют
текстовые информационные ресурсы, мета-ресурсы,
некоторые поисковые системы.
 В первых информационных ресурсах диалог с
сервером осуществлялся преимущественно с
помощью десктопных клиентских приложений. То
есть приложений, установленных на локальный
компьютер и имеющих графический
пользовательский интерфейс (UI).
 В настоящее время подобная архитектура является
устаревшей
7

8. Типовая архитектура современных ИР
 Текстового ИР
 Социального
медиаресурса
 Пространственного ИР
Пользователь
?
data
Клиентская сторона
Серверная
сторона
back-end
front-end
(сервер приложений)
Кэш-сервер
Мобильный
(m.Web UI)
Десктопный
(UI)
Браузер
(Web UI)
Программа-
клиент
Толстый
Тонкий
API over HTTP(s)
ASP
php
node.js
HTML/CSS
JavaScript
WWW
СУБД
FCGI
Perl
Python
API-сервис
Widgets
DOM
RPC
JSON
XML
SOAP
REST
Web-сервер
AJAX
Binary
API over TCP Web-сервис

9. Типовая архитектура современных ИР
 Back-end полностью находится на серверной стороне
 Front-end (сервер приложений) является реализацией
middleware (связующее программное обеспечение) для
клиента и сервера.
 С появлением нового уровня, который обязательно
включает в себя интерфейс прикладного
программирования (API, как правило, функционирует по
протоколу HTTP(S)) архитектура становится гибче, не
нужно каждый раз переписывать Web-узел или
клиентские приложения, в случае изменений в
информационном ресурсе, необходимо подправить
функции API.
 Мобильное приложение реализовано в виде сайта (m.*)
либо полноценной программы для IOS, Android и т.п.
 Разные реализации клиента используют единый API 9

10. Back-end
 Back-end – программная часть информационного
ресурса, отвечающая за исполнение
пользовательских запросов на серверах и API-
сервисах: нахождение данных в базах ресурса,
агрегирование и ранжирование результатов,
предобработка для отправки клиенту и т.д.
 Невидимая для пользователя часть
информационного ресурса.
 Для создания back-end используют
 PHP, Python, Perl, Node.js и т.д.
 Активные страницы ASP, JSP.
 В качестве back-end может выступать
административная часть CMS
10

11. Front-end
 Front-end – видимая пользователю часть информационного
ресурса, его программный интерфейс, доступные
возможности.
 Может быть реализована в виде:
 API, функционирующем поверх HTTP, либо поверх TCP
(опциональный компонент front-end)
 HTML-вёрстки, стилей CSS, сценариев JavaScript (выполняются
всегда на стороне клиента). (обязательный компонент front-end)
 Приложения, которое непосредственно принимает запросы от
клиента (например, через HTTP) и в случае статического файла
сразу представляет его содержимое, а в случае исполняемого
сценария, передает соответствующему интерпретатору
(Например, web-сервер nginx).
 Пользовательской части CMS (content management system).
 Транспортные функции (запросы типа клиент->front-end,
front-end->back-end) реализуются посредством:
 Парадигм REST и RPC;
 Технологии AJAX;
 Проприетарного протокола.
 Для передачи параметров запроса и ответов используются
контейнеры данных: XML, JSON.
11

12. Понятие API
 Интерфейс прикладного программирования
(application programming interface) - набор готовых
классов, процедур, функций, структур и констант,
предоставляемых информационным ресурсом для
использования во внешних программных продуктах.
 Используется для интеграции сторонних
приложений.
 API определяет функциональность, которую
предоставляет информационный ресурс.
 Позволяет абстрагироваться от того, как именно эта
функциональность реализована.
 У многих информационных ресурсов есть API:
 VK
 Google
 Yandex
 Wikipedia
 Wolfram Alpha 12

13. Доступ к информационным ресурсам
 На сегодняшний момент наиболее
распространенным средством доступа к
информационным ресурсам являются
компьютерные сети, а самым прогрессивным
способом получения информации – интерактивный
диалоговый режим (on-line)
 Интерактивный диалоговый режим может быть
обеспечен двумя способами:
 посредством толстого клиента,
 посредством тонкого клиента.
13

14. Толстый клиент к ИР
 Толстый клиент (rich client) - это приложение,
обеспечивающее расширенную (по сравнению с тонким
клиентом) функциональность независимо от
информационного ресурса.
 Часто сервер в этом случае является лишь хранилищем
данных, а вся работа по обработке и представлению
данных переносится на машину клиента.
 Как правило, толстым клиентом снабжают пользователей
для расширения аудитории информационного ресурса и
раскрытия его функционала в полной степени:
 КонсультантПлюс,
 1С.
 Критерий: информационный ресурс для работы с
которым требуется установка дополнительного
приложения 14

15. Тонкий клиент к ИР
 Тонкий клиент (thin client) - программа-клиент, которая
переносит все или большую часть задач по обработке
информации на сервер.
 Тонкий клиент обеспечивает унифицированный и
единый доступ к разнородным информационным
ресурсам, как правило в ущерб сокращенной
функциональности (этот разрыв постепенно
нивелируется)
 Средством обеспечения такой работы служит web-
браузер
 Большинство публичных информационных ресурсов
работают по принципу тонкого клиента:
 поисковые системы,
 социальные сети,
 другие.
 Критерий: информационный ресурс, доступный
посредством любого браузера
15

16. Сравнение клиентов к ИР
16
Тонкий Толстый
Функциональные
возможности
ограниченные широкие
Быстродействие ограничено высокое
Дистрибутив - +
Настройка, установка - +
Поддержание версии - +
Бизнес-логика - +
Кроссплатформенность + -
Офлайн режим - +

17. Понятие web-клиента
 Web-клиент (далее – браузер) – общедоступное
программное обеспечение, предназначенное для
взаимодействия с web-серверами, DNS-, FTP-серверами,
обеспечивающее получение и обработку
информационных и служебных данных и формирование
web-страниц в соответствии со спецификациями W3C.
 Основное предназначение браузера – отображать веб-
ресурсы. Для этого браузер формирует совокупность
HTTP-запросов к ресурсам, расположенным на web-
сервере, объединяет ответы, формирует web-страницу и
отрисовывает её.
 Под ресурсами понимаются HTML-документы,
мультимедийные файлы и потоки, скрипты, файлы,
задающие правила отображения данных.
 Любой ресурс определен с помощью URI
(унифицированного идентификатора ресурсов).
 Web-клиент отображает страницы, в соответствии со
спецификациями W3C для HTML, CSS, XML, RDF и т.д.
17

18. Компоненты браузера
18
Пользовательский интерфейс
Механизм браузера
Модуль отображения
Сетевые
компоненты
Интерпретатор
JavaScript
Исполнительная
часть
пользовательского
интерфейса
Хранилище
данных

19. Компоненты браузера
 Пользовательский интерфейс – вкладки, элементы
управления и ввода данных
 Механизм браузера – управляет взаимодействием
интерфейса и модуля отображения.
 Модуль отображения – отвечает за синтаксический
анализ кода HTML+CSS, построение дерева отображения
и дерева содержания.
 Сетевые компоненты – предназначены для выполнения
сетевых вызовов, таких как HTTP-запросы.
 Исполнительная часть пользовательского интерфейса –
используется для отрисовки основных виджетов.
 Интерпретатор JavaScript – используется для
синтаксического анализа и выполнения кода JavaScript.
 Хранилище данных – браузер сохраняет на жесткий диск
данные различных типов, кэш, cookie, LSO (flash-cookie).
19

20. Модуль отображения
 В Firefox применяется Gecko – собственная
разработка Mozilla, в Safari и Chrome используется
WebKit.
 Chrome использует несколько экземпляров модуля
отображения, по одному для каждой вкладки.
 Модуль отображения:
 получает содержание запрошенного документа по
протоколу сетевого уровня;
 выполняет синтаксический анализ HTML-документа;
 переводит теги в узлы DOM;
 строит дерево содержания;
 выполняет анализ CSS-файлов;
 строит дерево отображения.
20

21. Модуль отображения WebKit
21

22. Дерево содержания Chrome
22

23. Дерево отображения Chrome
23

24. Понятие Web-сервера
 Web-сервер — программное обеспечение либо
аппаратно-программный комплекс,
предназначенный для асинхронной обработки
HTTP-запросов от клиентов, формирования HTTP-
ответов, интерпретации скриптов и хранения
ресурсов.
 Клиент, которым обычно является web-браузер,
передаёт web-серверу HTTP-запросы на получение
ресурсов, идентифицируемых URI-адресами.
 В ответ web-сервер возвращает клиенту
запрошенные данные.
 Обмен происходит по протоколу HTTP.
24

25. Функции web-сервера
 Помимо HTTP-диалога, web-сервер выполняет
следующие функции:
 Поддержка механизма сессий.
 Исполнение скриптов PHP, ASP, Perl, CGI-шлюзов
(передача их соответствующим интерпретаторам
и компиляторам, обработка ответов).
 Передача клиенту документов, мультимедийных
файлов и потоков, java-скриптов.
 Ведение журнала обращений пользователей к
различным ресурсам.
 Поддержка работы протокола HTTPS для TLS-
соединений с клиентами.
 Поддержка динамически генерируемых страниц
(AJAX).
25

26. Реализации web-сервера
 IIS (Internet Information Services) – проприетарный
набор серверов для нескольких служб Интернета от
компании Microsoft. (49% рынка)
 Apache – наиболее распространённый
кроссплатформенный web-сервер. (21%)
 nginx — свободный, простой, быстрый и надежный.
Пользуется популярностью на крупных web-сайтах.
(14%)
 GWS (Google Web Server) веб-сервер, используемый
Google для организации своей веб-инфраструктуры.
На основе Apache. (1%)
 Lighttpd свободный и защищённый, по скорости
доступа к диску выигрывает у Apache, поддерживает
Windows (Google, Wikipedia, Yandex)
26

27. Структура файлов на Web-сервере
 AdminScripts - сценарии сервера IIS
 ftproot - каталог службы FTP
 mailroot - каталог службы SMTP
 nntpfile - каталог службы NNTP
 logs - журналы регистрации посещений и ошибок
 tmp - для временных файлов и резервных копий
27
Apache + Linux
IIS + Win
Apache + Win
(denwer)

28. Структура файлов на Web-сервере
 Корневой каталог сайта
директория в структуре файлов
web-сервера, содержащая web-
страницы и документы
информационного ресурса.
Варианты наименования:
 public_html (nginx),
 htdocs (Apache),
 http (Apache),
 wwwroot (IIS),
 www (denwer),
 docs.
 Зависит от конфигурации web-
сервера. В примере это папка http.
28

29. Специальные файлы на Web-сайте
 В корневом каталоге web-сайта содержатся
файлы и директории соответствующего ресурса,
набор директорий, их наименование зависят от
системы управления сайтом (CMS).
 Вместе с тем есть общие правила. Сайт может
содержать следующий набор файлов:
 favicon
 index.html
 robots.txt
 sitemap.xml
 dublin.rdf
29

30. Favicon
 Favicon (favorites icon) - логотип веб-сайта или
веб-страницы.
 Отображается браузером во вкладке перед
названием страницы, а также в качестве
картинки рядом с закладкой, во вкладках и в
других элементах интерфейса.
 Традиционно использовались изображения
размера 16×16 пикселей формата .ico,
помещённые в корневой каталог сайта под
именем favicon.ico
 Поддерживаются и другие форматы
изображений jpg, png, gif (в том числе
анимированный). 30

31. Index
 По умолчанию при обращении к корневому
домену, поддомену, директории сайта, Web-
сервер производит поиск файла с именем index
(index.html, index.htm, index.php) и возвращает
его web-клиенту .
 Файл с таким именем web-сервер считает
начальным файлом в любом каталоге сайта в том
числе и корневом.
31

32. Index
 В каждой вновь созданной папке web-сайта
необходимо определять пустой файл с именем
index.html (index.htm).
32

33. Robots
 Robots.txt - cтандартизованный файл,
содержащий ограничения доступа к
содержимому для поисковых роботов в виде
набора директив.
 Файл должен находиться в корне сайта (то есть
иметь путь относительно имени сайта
/robots.txt).
 При наличии поддоменов файл должен
располагаться в корневом каталоге каждого из
них.
33

34. Robots
 Файл состоит из записей (директив) формата:
 <поле>:<значение>
 Поле = User-Agent, Disallow, Allow, другие директивы
 User-Agent — это наименование директивы, в
которую записывается идентификатор клиентского
приложения, осуществляющего доступ к web-сайту,
такого как браузеры, поисковые роботы мобильные
устройства и другие устройства.
 Возможные варианты User-Agent:
 BlackBerry9000/5.0.0.93 (мобильное устройство)
 AppleWebKit/533.21.1 (браузер с модулем WebKit)
 Safari/533.16 (браузер)
 Googlebot (робот)
 Yandex (робот) 34

35. Пример Robots на Yandex.ru
35
 Порядок следования директив в файле robots.txt
не влияет на использование их роботом

36. Sitemap
 Файл Sitemap.xml содержит структуру вашего сайта
и страниц (карту сайта).
 Помогает поисковым роботам ориентироваться в
вашем сайте.
 Содержит список всевозможных ссылок,
представляющих структуру web-сайта.
 Пример:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://analitika.ru/</loc>
<lastmod>2014-09-06</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
</urlset> 36

37. Dublin
 Файл dublin.rdf представляет собой набор
элементов для семантического ядра Dublin Core.
 Полезен для роботов поисковых систем, социальных
сетей и других сервисов, поддерживающих
семантическую обработку web-сайтов.
 Имеет нотацию XML. Состоит из 15-ти стандартных
и 3-х квалифицированных свойств.
 Используется для семантического описания
информационных ресурсов
 Пример:
<?xml version="1.0"?>
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-
syntax-ns#" xmlns:dc= "http://purl.org/dc/elements/1.1/">
<rdf:Description rdf:about="http://analitika.ru/">
<dc:title>Forex</dc:title>
<dc:creator>D.A.</dc:creator>
<dc:subject>Биржевая индустрия</dc:subject> 37

38. Идентификация ресурсов
 Существует стандарт универсальной
идентификации (RFC 3986):
 URI (Uniform Resource Identifier) —
унифицированный идентификатор ресурса, это
последовательность символов,
идентифицирующая абстрактный или
физический ресурс.
 Представлен в форме символьной строки,
позволяющей идентифицировать какой-либо
ресурс: документ, изображение, файл, службу,
электронную почту.
 URI на текущий момент является простым и
расширяемым способом идентификации
ресурсов.
38

39. Состав URI
Схема Источник Запрос Фрагмент: ? #
обязательно опционально
// Авторизация
/ Сегмент Сегмент/ / …
Путь
Имя пользователя @ Хост : Порт
Логин : Пароль
Ключ Значение= & …Ключ Значение= &

40. Пример URI
40

41. Схема URI
 Схема URI это метод обращения к ресурсу (часто
указывает на сетевой протокол). RFC7595
 Например:
 ftp: – протокол передачи файлов
 http/https: – гипертекстовый протокол
 mailto: – отправка почты
 telnet: – протокол реализации сетевого
интерфейса
 file: – выбор файла на хосте
 sip: - протокол установления сеанса
 tel: – телефонный номер
 steam:, bitcoin:, git:, teamspeak:, tv: … 41

42. Примеры URI
 http://tools.ietf.org/html/rfc3986#section-3.1
 urn:oid:1.3.6.1.4.1.23668 (URN Kaspersky Lab Ltd.)
 mailto:w@memfis.su
 sip:admin@analitika.ru
 tel:+7-(926)-161-90-33
 telnet://192.0.2.16:80/
 C:Windowsregedit.exe преобразуется в URI
file:///C:/Windows/regedit.exe
file://localhost/C:/Windows/regedit.exe
 URI может быть абсолютным и относительным.
 Абсолютный: «http://yandex.ru»,
 Относительный: «/» эквивалентен
http://yandex.ru/index.php 42

43. Адрес документа
43
Документ cancel.png
на Web-сервере

44. Адрес документа
44
URI документа cancel.png на Web-
сервере.
Схема «http»

45. Адрес документа
45
Документ cancel.png на локальном Web-сервере

46. Адрес документа
46
URI документа cancel.png на локальном Web-сервере
Схема «file», «localhost» пропущен

47. URI и URN
 URN (Uniform Resource Name) унифицированное
наименование объекта.
 URN — это URI, который только идентифицирует
документ в определённом пространстве имён, но не
указывает его местонахождения.
 URN ссылается на документ , и при перемещении
документа в другое место ссылка не изменится.
 Состоит из:
 NID (namespace identifier) идентификатора пространства
имен. (oid, isbn, mailto, sip)
 NSS (namespace-specific string) уникального для данного
пространства имен идентификатора объекта.
 Например:
 Страна Германия - oid:2.16.276
 Книга А. Эйнштейна - isbn:978-5-367-00842-5
47

48. URI и URL
 URL (Uniform Resource Locator) указывает путь к
объекту и метод получения доступа к нему.
 URL — это URI, который, помимо идентификации
ресурса, предоставляет ещё и информацию о
местонахождении этого ресурса.
 В URL можно использовать только ограниченный
набор символов даже меньший, чем в ASCII.
 Поэтому строка вида:
 http://yandex.ru/yandsearch?text=аэроэкспресс
 Будет конвертирована в:
 http://yandex.ru/yandsearch?text=%D0%B0%D1%8D%D1%80
%D0%BE%D1%8D%D0%BA%D1%81%D0%BF%D1%80%D0%B5
%D1%81%D1%81
 URN и URL — это частные случаи URI. 48

49. IDN
 IDN (Internationalized Domain Names) —
международные доменные имена.
 К IDN относятся
 Домены верхнего уровня с не ASCII-символами (.рф)
 Домены второго уровня, составленные из букв не
являющихся ASCII-символами (кириллический,
испанский, арабский алфавиты и др.) (9мая.рф)
 Символы национальных алфавитов используются
только в web-браузере.
 Вне браузера циркулируют доменные имена,
закодированные алгоритмом Punycode (RFC 3492)
Домены всех уровней начинаются с префикса «xn--»
 http://тигр.рф = http://xn--c1ajzf.xn--p1ai/
 почемужеонинеговорятпорусски = b1abfaaepdrnnbgefbaDotcwatmq2g4l
49

50. IRI
 IRI (Internationalized Resource Identifier) —
международный идентификатор ресурса.
 IRI призваны в будущем заменить URI.
 Цель: исключить ограничения на символы ASCII
в процессе идентификации какого‐либо ресурса:
документа, изображения, файла, службы, ящика
электронной почты и т. д.
 Проблема: идентичность начертания букв в
различных языках.
50