Введение

Не так уж часто предлагается взглянуть на происходящее за сценой вращение шестеренок и приводных ремней какого-либо действия. Сегодня именно такой день. Я собираюсь провести вас за сцену одной из самых популярных технологий, с которой вы уже возможно знакомы: World Wide Web (WWW).

В лекции рассматриваются нижележащие технологии, которые обеспечивают деятельность World Wide Web:

• Язык разметки гипертекста (HTML)
• Протокол передачи гипертекста ( HTTP )
• Система имен доменов (DNS)
• Серверы и браузеры Web
• Статический и динамический контент

Все это достаточно фундаментальный материал — хотя большая часть рассмотренного здесь материала не поможет создать лучший Web -сайт, он даст вам правильный язык, который необходим при разговоре с клиентами и с другими людьми о Web. Это как в "Звуках музыки" мудрая няня как-то говорит: "Когда мы учимся читать, то начинаем с АБВГД. Когда мы учимся петь, то начинаем с До-Ре-Ми". В лекции сначала кратко рассматривается реальная коммуникация компьютеров с помощью HTTP и TCP/IP, а затем различные языки, которые используются для создания Web -страниц, составляющих Интернет. Лекция имеет следующее содержание:

• Как компьютеры взаимодействуют через Интернет?
  • Анализ цикла запрос/ответ
• Типы контента
  • Простой текст
  • Стандарты Web
  • Динамические страницы Web
  • Форматы других приложений или подключаемых модулей (плагинов)
• Сравнение статических и динамических Web -сайтов
• Заключение
• Контрольные вопросы

Как компьютеры взаимодействуют через Интернет?

К счастью для компьютеров все происходит достаточно просто. Когда речь идет о World Wide Web, все говорят на одном языке: HTML. HTML является общим диалектом (спецификацией), позволяя, например, машине Windows звучать в гармонии с машиной, выполняющей самую последнюю и лучшую версию Linux (До Ре Ми!). С помощью браузера Web - специальной программы, которая интерпретирует код HTML и представляет его в доступной для человека форме - страницы Web, созданные с помощью HTML на компьютере любого типа, можно прочитать в любом месте с помощью различных устройств, включая телефоны, PDA (коммуникаторы) и даже популярные видео-игровые системы.

Хотя они и говорят на одном языке, но доступ различных устройств к Web должен следовать некоторым правилам, чтобы они могли общаться друг с другом — это как правило поднять руку, чтобы задать вопрос в классе. HTTP определяет эти базовые правила для Интернет. Согласно HTTP клиентская машина (например, компьютер) знает, что она должна инициировать запрос страницы Web на сервере. Сервер является компьютером, на котором выполняется программа Web - сервера, которая получает запрос, находит требуемую страницу, и посылает ее компьютеру, где она выводится в окне Web -браузера.

Анализ цикла запрос/ответ

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

1. Каждый запрос /ответ начинается с ввода Унифицированного указателя ресурса (URL, Universal Resource Locator) в адресной строке браузера Web, что-нибудь типа http://dev.opera.com. Откройте окно браузера и введите этот адрес.

   Необходимо сказать здесь об одном моменте, который вы можете не знать, что в действительности браузеры Web не используют URL для запроса на сервере сайтов Web, они используют Протокол Интернет (Internet Protocol) или IP-адреса (которые, по сути, похожи на телефонные номера или почтовые адреса, которые идентифицируют серверы ). Например, IP-адрес сайта http://dev.opera.com будет 213.236.208.98.
2. Попробуйте открыть новую вкладку или окно браузера, введите http://www.apple.com и нажмите клавишу ввода, затем введите http://17.149.160.10/ и нажмите клавишу ввода - вы попадете в одно и то же место. Попробуйте ввести http://213.236.208.98 в строке адреса и нажмите клавишу ввода - вы окажетесь в том же месте, которое было получено на шаге 1, хотя вы получите сообщение об ошибке 403 "Access Denied" — это связано с тем, что у вас нет прав доступа к реальному корню этого сервера.

   http://www.apple.com является фактически алиасом (псевдонимом, синонимом) для http://17.149.160.10/, но почему, и как? Это связано с тем, что людям легче запоминать слова, а не длинные последовательности цифр. Система, которая выполняет эту работу, называется Системой имен доменов (DNS), которая является фактически исчерпывающим автоматическим каталогом всех машин, соединенных с Интернет. Когда вы помещаете http://dev.opera.com в строке адреса и нажимаете клавишу ввода, этот адрес посылается серверу имен, который пытается связать его с IP-адресом. Существует множество машин, соединенных с Интернет, и не каждый сервер DNS имеет список всех имеющихся в сети машин, поэтому существует система, которая может переслать запрос для выполнения подходящему серверу.

   Система DNS находит Web -сайт http://www.apple.com, определяет, что он расположен по адресу 17.149.160.10 и посылает этот IP-адрес назад браузеру Web.

   Ваша машина посылает запрос машине по указанному IP-адресу и ожидает ответа. Если все проходит хорошо, то серверная машина посылает клиенту короткое сообщение, говорящее, что все прошло нормально (см. Рис 3.1), за которым следует сама Web -страница. Сообщение этого типа содержится в заголовке HTTP.

   
   
   Рис. 3.1.  В данном случае все прошло нормально, и сервер возвращает правильную Web-страницу

   Если что-то происходит неверно, например, адрес URL был введен неправильно, вы получите сообщение HTTP об ошибке, которое будет возвращено браузеру Web. Печально известная ошибка 404 "page not found" ("страница не найдена") является наиболее распространенным примером, с которым вы можете встретиться.
3. Попробуйте ввести http://dev.opera.com/joniscool.html - эта страница не существует, поэтому вы получите ошибку 404. Попробуйте сделать это для нескольких несуществующих страниц на различных Web -сайтах, и вы увидите множество различных возвращаемых страниц. Это связано с тем, что некоторые разработчики Web просто позволяют серверу Web возвращать используемые по умолчанию сообщения об ошибках, а другие создают специальные страницы ошибок, которые выводятся, когда запрашивается несуществующая страница. Это более сложный метод, который не рассматривается в данном курсе, но будем надеяться, что он будет рассмотрен скоро в одной из статей на сайте dev.opera.com.

В заключение замечание относительно URL — обычно первый адрес URL, по которому вы идете на сайт, не имеет реального имени файла в своем конце (например, http://www.mysite.com/), а последующие страницы иногда имеют, а иногда — нет. Всегда происходит обращение к реальным файлам, но иногда разработчики Web настраивают Web - сервер таким образом, чтобы он не выводил имена файлов в URL, это часто делается для создания более четкого, легкого для запоминания адреса URL, что ведет к лучшему восприятию Web -сайта пользователем. Мы не рассматриваем в курсе, как это сделать, это достаточно сложно. Загрузка файлов на сервер и структуры каталогов файлов/папок будут рассмотрены в другой лекции.

Типы контента

Теперь, после подробного рассмотрения запроса/ответа HTTP, обратим внимание на различные типы контента (любое содержательно-значимое наполнение информационного ресурса), который вы ожидаете увидеть в Интернет. Я разделил его на четыре типа — простой текст, стандарты Web, динамические Web -страницы, и форматы, требующие других приложений или подключаемых модулей (плагинов).

Простой текст

В самом начале, до появления каких-либо стандартов Web или плагинов, Интернет состоял в основном из изображений и простого текста — файлов с расширением .txt или похожим на него. Когда файл с простым текстом встречается в Интернет, браузер просто выводит его как есть, без какой-либо дополнительной обработки. Файлы с простым текстом все еще можно часто встретить на сайтах университетов.

Стандарты Web

Базовыми строительными блоками Всемирной паутины WWW являются три основных стандарта Web - HTML (или XHTML, эти два понятия будут использоваться здесь взаимозаменяемо для наших целей), CSS и JavaScript.

Язык разметки гипертекста (HTML) является в действительности довольно удачным названием, так как хорошо передает его назначение. HTML используется для разбиения документа, определения его содержания и структуры, и определения значения каждой части (того, что содержит весь текст и т.д., что мы видим на страницах Web ). Он использует специальные элементы для определения на странице различных компонентов.

Каскадные таблицы стилей (CSS) предоставляют полный контроль над тем, как выводится элемент. Очень легко, используя объявления стилей, вывести все параграфы через две строки ( line-height: 2em; ), или сделать все заголовки второго уровня зеленого цвета ( color: green; ). Существует множество преимуществ разделения структуры и форматирования, и мы рассмотрим это более подробно в следующей лекции. Чтобы продемонстрировать мощь совместного использования HTML и CSS, рисунок 3.2 показывает простой код HTML слева, вообще без дополнительного форматирования, а справа можно видеть тот же самый код HTML с добавленными к нему стилями CSS.

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

Динамические страницы Web

Иногда при просмотре Интернет можно встретить страницы Web, которые не используют расширение .html - они могут иметь расширение .php, .asp, .aspx, .jsp, или какое-нибудь другое странное расширение. Все это примеры динамических технологий Web, которые могут использоваться для создания страниц Web, имеющих динамические разделы - код, который выводит различные результаты из базы данных или другого источника данных в зависимости от определяемых для него значений. Мы рассмотрим страницы Web этого типа ниже в разделе "Сравнение статических и динамических Web -сайтов".

Форматы других приложений или подключаемых модулей (плагинов)

Так как браузеры Web могут только интерпретировать и выводить определенные технологии, такие как стандарты Web, то при запросе адреса URL, который указывает либо на сложный формат файла, либо на страницу Web, содержащую технологию, которая требует подключаемого модуля (плагина), файл будет либо загружен на компьютер, либо открыт с помощью требуемого плагина, если он установлен в браузере. Например:

1. Если вы встретите документ Word, файл Excel, PDF, сжатый файл (ZIP, или SIT, например), сложный файл изображения, такой как Photoshop PSD, или другой сложный файл, который браузер не понимает, браузер обычно спрашивает, хотите ли вы загрузить или открыть этот файл. Оба действия обычно имеют аналогичные результаты, за исключением того, что во втором случае файл будет загружен в компьютер и затем открыт приложением, которое его понимает, если такое приложение установлено на компьютере.
2. Если вы встретите страницу, содержащую фильм Flash, MP3 или другой музыкальный формат, MPEG или другой формат видео, то браузер будет воспроизводить его с помощью установленного плагина, если такой плагин был установлен. Если плагина нет, то либо будет выведена ссылка для установки требуемого плагина, либо файл будет загружен и будет сделана попытка найти на компьютере приложения для его выполнения.

Конечно, имеется некоторая серая область - например формат SVG (Масштабируемая векторная графика) является стандартом Web, который реализован в некоторых браузерах, таких как Opera, но не реализован в других, таких как Internet Explorer - IE требуется плагин для понимания SVG. Ряд браузеров поставляется с некоторыми предустановленными плагинами, поэтому вы можете не знать, что некоторый контент выводится через плагин, а не естественным образом в браузере.

Сравнение статических и динамических Web-сайтов

Итак, что же такое статические и динамические Web -сайты, и в чем между ними различие? Очевидно, что все зависит от начинки.

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

На динамическом Web -сайте, с другой стороны, контент сервера будет таким же, но кроме обычного кода HTML он содержит также динамический код, который может выводить различные данные, в зависимости от информации, которая передается на Web -сайт. Давайте посмотрим на пример — перейдите в своем браузере на сайт http://www.amazon.com, и выберите 5 различных продуктов. Сайт Amazon не посылает вам просто 5 различных страниц, он пришлет одну и ту же страницу 5 раз, но с различной динамически заполняемой каждый раз информацией. Эта различная информация хранится в базе данных, которая извлекает при запросе требуемую информацию и предоставляет ее серверу Web для включения в динамическую страницу.

Необходимо отметить также, что на сервере должно быть установлено специальное программное обеспечение, позволяющее создавать динамический Web -сайт. В то время как обычные статические файлы HTML хранятся с расширением файла .html, эти файлы содержат специальный динамический код в дополнение к HTML, и хранятся со специальным расширением файлов, чтобы сообщить серверу Web, что они требуют дополнительной обработки перед отправкой клиенту (такой как вставка данных из базы данных) — файлы PHP, например, имеют обычно расширение файла .php.

Существует множество динамических языков программирования — уже был упомянут PHP, а другими примерами являются Python, Ruby on Rails, ASP.NET и Coldfusion. В конечном счете, все эти языки имеют по большей части одинаковые возможности, такие как общение с базами данных, проверка вводимой в формы информации и т.д., но они делают все это немного по разному, и имеют некоторые достоинства и недостатки. Все сводится к тому, что вам лучше всего подходит.

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

• Rails: Fernandez, Obie. (2007), The Rails Way. Addison-Wesley Professional Ruby Series.
• Демонстрационные ролики для Rails (http://www.rubyonrails.org/screencasts)
• PHP: Powers, David (2006), PHP Solutions: Dynamic web development made easy, friends of ED.
• Сетевая документация по PHP (http://www.php.net/docs.php)
• ASP.NET: Lorenz, Patrick. (2003). ASP.NET 2.0 Revealed. Apress.
• ASP.NET: сетевая документация и руководства по ASP.NET (http://asp.net/).

Заключение

На этом завершается краткий обзор внутренней работы Интернет. Эта лекция в действительности только прикоснулась к поверхности множества упомянутых тем, но она полезна тем, что представила их все в перспективе относительно друг друга, показывая, как они связаны и совместно работают. Еще многое надо изучить о реальном синтаксисе языка, который формирует HTML, CSS и JavaScript, и к этому мы перейдем в следующей лекции, посвященной модели "стандартов Web " HTML, CSS и JavaScript для разработки приложений Web, и посмотрим на код страницы Web.

Контрольные вопросы

• Дайте краткое определение HTML и HTTP и объясните имеющееся между ними различие.
• Объясните функции браузера Web.
• Поищите в Интернет 5-10 минут и попробуйте найти несколько различных типов контента - простой текст, изображения, HTML, динамические страницы, такие как страницы PHP и .NET (.aspx), PDF, документы Word, фильмы Flash и т.д. Просмотрите некоторые из них и подумайте, как компьютер выводит их для просмотра.
• В чем различие между статической страницей и динамической страницей?
• Найдите список кодов ошибок HTTP, перечислите 5 из них, и объясните, что означает каждая из них.

Об авторе

Джонатан Лейн является Президентом компании Industry Interactive (http://industryinteractive.net/), занимающейся разработкой приложений Web и расположенной в Маун-Айленд, Британская Колумбия, Канада. Он начал заниматься разработкой приложений, работая в течение многих лет в Центре по разработке учебных курсов Университета Лейтбридж в качестве их координатора Web -проектов.

Он поддерживает блог по адресу http://www.flyingtroll.com/, и в настоящее занимается разработкой Mailmanagr (http://www.mailmanagr.com/), интерфейса e-mail для приложения по управлению проектами Basecamp.

Материалы этого курса имеют лицензию Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.