Разработка клиентских приложений Web-сайтов

Разработка клиентских приложений Web-сайтов

2-е издание, исправленное

Богданов М.Р.

Национальный Открытый Университет “ИНТУИТ”
2016

2

Разработка клиентских приложений Web-сайтов/ М.Р. Богданов - М.: Национальный Открытый
Университет “ИНТУИТ”, 2016

Курс направлен на формирование у студентов навыков разработки клиентских приложений Webсайтов. В процессе изучения курса слушатели познакомятся с HTML, CSS, JavaScript,
микроформатами, XML, SilverLight, приобретут навыки разработки RIA-приложений и обеспечения
безопасности web-сайтов.
В рамках курса, в первую очередь студенты получат теоретические знания о языке гипертекстовой
разметки версии 4.01 и практические навыки разработки web-страниц. Далее, студенты познакомятся
с каскадными таблицами стилей версии 2.1 и приобретут навыки применения внутренних и внешних
CSS. Следующей темой будут объектные модели документа и браузера на примере MS IE8, а также
объекты документа и их свойства и методы. Значительную часть курса планируется уделить языку
Java Script: синтаксические основы, взаимодействие с объектной моделью, встроенные функции,
скрипты во внешних файлах, технология AJAX. В рамках курса также рассмотрены расширения
языка гипертекстовой разметки – микроформаты, позволяющие придавать смысл определенным
объектам web-страницы.

(c) ООО “ИНТУИТ.РУ”, 2010-2016
(c) Богданов М.Р., 2010-2016

3

Разработка web-сайтов. Вводная лекция

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

Презентацию к данной лекции Вы можете скачать ссылка: здесь http://old.intuit.ru/department/internet/devcapw/1/Lecture_01.ppt.

Исторический экскурс

Начать наш курс хотелось бы с недавней истории. Для пользователей Интернета 90-х
годов Всемирная паутина представлялась набором неподвижных Web-страничек. На
этих страницах обычно отображалась табличная информация, например, курсы акций,
расписание движения железнодорожных поездов или результаты очередного
эксперимента. Web-странички тех времен сильно напоминали содержимое толстых
телефонных справочников, отпечатанных на дешевой желтой бумаге. Всемирно
известный ныне поисковый сервер Yahoo! в те времена предоставлял справочную
информацию, известную под именем Yahoo Yellow Pages.

Web-странички 80-х годов создавались с помощью языка гипертекстовой разметки
(Hyper Text Markup Language, HTML ). Интернет-контенту недоставало динамизма,
вследствие чего в 90-е годы были предприняты попытки “оживить” HTML. Появился
динамический DHTML (Dynamic HTML). Суть идеи заключалась в следующем. Webстранички, как известно, состоят из так называемых тэгов ( tags, например, <IMG SRC=

“1.JPG” WIDTH=300> ). Тэги являются командами языка HTML, которые
визуализируются с помощью браузера клиента (например, с помощью MS Internet
Explorer ). С помощью тэгов формируются элементы управления, образующие
интерфейс программы, например, кнопки, меню и так далее. В случае с динамическим
HTML’ом Web-странички начали сопровождать разделом сценариев ( <SCRIPT> ),
написанном на одном из скриптовых языков, например, на VBScript или JavaScript. В
разделе сценариев создавались подпрограммы-обработчики событий, связанные с тем
или иным элементом управления, например, с кнопкой. В результате, Web-странички
“ожили” и “заиграли” всеми цветами радуги. У такого подхода вскоре выявились
серьезные недостатки. Суть проблемы заключалась в том, что при загрузке Webстранички на клиентскую машину закачивались программы, о назначении которых
пользователь не имел ни малейшего представления. При этом приходилось уповать
лишь на порядочность и квалификацию разработчика данного сайта.

Проблема загружаемого на клиентскую машину ПО не потеряла актуальности и в наши
дни. Простенькие сценарии, изменяющие цвет кнопки превратились в изощренные
компоненты ActiveX фирмы Microsoft и Java Applet’ы компании Sun Microsystems. Для
решения проблем безопасности Sun и Microsoft пошли разными путями. Microsoft
решила снабжать компоненты ActiveX цифровыми сертификатами и уведомлять
пользователя об установке таких программ. Sun решила для запуска апплетов
использовать небольшую часть оперативной памяти клиентской машины, названную
“песочница” с тем, чтобы сбои в работе апплетов не влияли на другие программы.

4

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

В девяностых годах Интернет неожиданно приобрел взрывную популярность, людям
требовалось все больше и больше доступных данных. Для хранения и поиска
информации в настоящее время широко используются реляционные СУБД, такие как
MS SQL Server, IBM DB2 или Oracle. Возникла острая необходимость в технологии,
позволяющей Интернет-пользователям извлекать информацию из реляционных СУБД.

Вскоре такая технология появилась. Ее назвали “Активные серверные страницы”,
ASP.NET (Active Server Pages). Рассмотрим принцип ее работы на примере Web-сайта
некоего автосалона. Предположим, что информация о представленных в салоне
автомобилях хранится в базе таблице CAR_TBL базы данных MyCar.mdf. В таблице
существуют три столбца - Title, Photo и Description. Некий пользователь решил
приобрести автомобиль, предварительно ознакомившись с его техническими
характеристиками. Далее, ситуация будет развиваться по следующему сценарию. На
Web-сервере автосалона размещена ASP.NET-страничка index.aspx. На этой Webстраничке имеется раскрывающийся список drpCar, отображающий названия
автомобилей. У раскрывающего списка есть свойство DataSource - (источник данных),
которое можно связать со столбцом таблицы. Иными словами, чтобы заполнить
раскрывающийся список drpCar, нужно выполнить SQL-ный запрос:

SELECT Title FROM CAR_TBL

Пользователь, загрузив страничку index.aspx, видит на своем экране раскрывающийся
список с названиями автомобилей. Предположим, что его заинтересовал Mercedes Benz
CL 600. Он выбирает данную модель из раскрывающегося списка, для того, чтобы
ознакомиться с техническими характеристиками машины. При этом будет выполнен
примерно следующий SQL’ный запрос:

SELECT Title, Photo, Description FROM CAR_TBL 
WHERE Title='Mercedes Benz CL 600'

Через несколько секунд пользователь видит у себя на экране название, фотографию и
описание машины.

Как же работают ASP.NET-странички? Вначале они получают запрос от клиента по
протоколу HTTP. Запросом может быть, например, нажатие на кнопку, выбор элемента
из раскрывающегося списка и т.д. С элементами управления программист связывает
особые подпрограммы - обработчики событий. Результатом работы обработчиков
событий является HTML-код, посылаемый на компьютер клиента и визуализируемый
его браузером. Что очень важно, на клиентскую машину не посылается потенциально
опасный код, только инструкции языка HTML. Если дело касается извлечения

5

информации из СУБД, обработчики событий генерируют SQL-запрос, отправляемый
на сервер баз данных (рис. 1.1). Механизм баз данных обрабатывает поступивший
SQL-запрос и возвращает набор строк (обычно по протоколу XML ). Далее, обработчик
событий ASP.NET-странички преобразует полученный набор строк в инструкции
языка гипертекстовой разметки и отсылает их клиенту. При этом код ASP.NETстранички, отличается от того, что можно увидеть, нажав в браузере кнопки “Вид” 
“Просмотр HTML-кода” как небо и Земля [1] (рис. 1.1).

Рис. 1.1. 

В случаях, когда основная вычислительная нагрузка ложится на web-сервер, говорят,
что пользовательское приложение является “тонким клиентом”. Если вычисления
преобладают на пользовательской машине, мы имеем дело с “толстым клиентом”. Как
уже упоминалось выше, первым web-страничкам очень недоставало динамизма. В этом
они сильно уступали настольным приложениям. В рамках данного курса мы
познакомимся со многими инновациями Microsoft, придающими клиентским
приложениям интерактивность и зрелищность. Сюда, прежде всего, можно отнести
технологию Silverlight, RIA-приложения, средства визуального поиска и многое другое.

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

Протокол TCP/IP

Информация в компьютерных сетях передается не непрерывно, подобно воде в
трубопроводе, а порциями, или пакетами. Способ упорядочивания информации в
пакеты называется сетевой протокол. Самым распространенным сетевым протоколом,
используемым и в локальных сетях, и в Интернете, является TCP/IP (Transport control
protocol/Internet protocol). В институте открытых стандартов (Open Standards Institute,
OSI) была разработана семиуровневая модель передачи данных, применимая, в
частности, и для TCP/IP. Для рядовых пользователей представляет интерес самый
верхний уровень TCP/IP, или уровень прикладных программ. К этому уровню
относятся такие полезные технологии, как протокол передачи гипертекста ( Hyper Text
Transfer Protocol, http ), протокол передачи файлов ( File Transfer Protocol, ftp ) и
протокол передачи простых почтовых сообщений ( Simple Mail Transfer Protocol, smtp
). С помощью http осуществляется навигация в Интернет, благодаря ftp мы можем
скачивать большие файлы, а smtp используется при работе с электронной почтой.

IP-адреса

6

У всех устройств, подключенных к компьютерной сети, есть некий идентификатор,
именуемый ip-адресом. Существует две разновидности ip-адресов: общедоступные и
частные. Общедоступными ip-адресами обычно наделяются web-серверы, которые
должны быть доступны круглосуточно. Частные ip-адреса назначаются компьютерам,
входящим в состав локальных сетей. По соображениям безопасности они должны быть
“невидимы” извне, то есть из Интернета. В момент выхода во Всемирную паутину
таким компьютерам назначаются общедоступные ip-адреса.

IP-адреса в четвертой версии протокола IP (IPv4) являются 32-х битными двоичными
числами, которые можно представить в виде совокупности четырех групп по три
цифры, разделенных точками в диапазоне от 0 до 255, например, 192.168.0.1. Один ipадрес занимает 4 байта, или 32 бита. У такого подхода есть недостаток - потенциально
не очень большая емкость - 
 адресов. Постепенно на смену 4-й версии протокола IP

приходит более новая, шестая версия (IPv6), поддерживающая гораздо больший
диапазон адресов. В этом случае IP адрес имеет 128-битовое представление. Адреса
разделяются двоеточиями (напр. fe80:0:0:0:200:f8ff:fe21:67cf) [2].

Служба DNS

Как уже говорилось выше, web-серверам назначаются двоичные ip-адреса. Людям
гораздо удобнее запоминать символьные обозначения ресурсов, например, ссылка:
http://www.mail.ru. Для решения этой проблемы была создана служба разрешения
доменных имен (Domain Name Services, DNS ). Она работает подобно записной книжке
сотового телефона, где каждому телефонному номеру соответствует словесное
описание абонента. Если очень упростить ситуацию, можно представить службу DNS в
виде таблицы с двумя столбцами. В одном столбце находятся ip-адреса web-серверов,
которым соответствуют символьные обозначения во втором столбце. В развитых
странах есть организации, поддерживающие базы данных DNS, они называются
сетевыми информационными центрами. В нашей стране роль такого сетевого
информационного центра играет компания РОСНИИРОС (Российский научноисследовательский институт развития образовательных сетей). Когда пользователь
набирает в адресной строке браузера символьное название нужного ресурса, он
вначале соединяется с сетевым информационным центром. Если он набрал адрес с
ошибкой, или такого ресурса нет в базе данных DNS, то выдается сообщение об
ошибке. Если все нормально, то пользователь перенаправляется на ip-адрес
соответствующего web-сервера.

Советы начинающему web-мастеру

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

1. Регистрация домена. Прежде всего, нужно выбрать название будущего сайта,

например, ссылка: http://www.grisha.ru. Для этого нужно зайти на сайт компании
РОСНИИРОС (ссылка: http://www.nic.ru) и узнать, не занято ли данное доменное
имя. Предположим, оно оказалось занято. В этом случае можно или подыскать

7

свободный домен, например, недавно появился новый домен .РФ, или изменить
название, например, grigory вместо grisha. В конце концов, вы найдете удобный
для вас вариант названия сайта. После этого нужно заключить договор и заплатить
некоторую сумму. Например, регистрация домена в зоне .ru стоит 600 рублей в
год, в зоне .рф - 1200 рублей и так далее.

2. Делегирование домена. После регистрации домена нужно выбрать провайдера и

приобрести у него два ip-адреса: основной и резервный. После этого снова зайти
на сайт ссылка: http://www.nic.ru и указать эти ip-адреса напротив вашего
доменного имени.

3. Хостинг. Под хостингом подразумевается физическое размещение вашего сайта на

компьютере, подключенном к Интернет. Существует несколько схем хостинга в
зависимости от вашего бюджета и квалификации.

а) Самый бескомпромиссный. Вы приобретаете компьютер, подключаете его
к Интернету, устанавливаете серверную операционную систему, настраиваете
службу, запускающую web-сервер, размещаете свой web-сайт, настраиваете
сетевые подключения с провайдером и обслуживаете свое детище.
б) Вы приобретаете компьютер, устанавливаете на него необходимое ПО и
приносите его к провайдеру. Специалисты провайдера устанавливают ваш
компьютер в серверную стойку и подключают его к интернету. Они же и
обслуживают ваш сайт, хотя это можно делать и дистанционно. С вас будет
взиматься небольшая ежемесячная плата.
в) Вы записываете свой сайт на какой-нибудь носитель и приходите с ним к
провайдеру. Специалисты провайдера разместят ваш сайт на своем webсервере. С вас будет взиматься небольшая плата за аренду и обслуживание.
г) Бесплатный вариант. Вы можете воспользоваться одним из
многочисленных серверов, предоставляющих услуги бесплатного хостинга,
например, ссылка: http://www.narod.ru. К недостаткам можно отнести более
длинное доменное имя, уже не ссылка: http://www.grisha.ru, а ссылка:
http://www.grisha.narod.ru и некоторые технические ограничения, например,
объем дискового пространства, возможность использовать скрипты,
необходимость мириться с наличием чужой рекламы на вашем сайте и так
далее.

Краткие итоги

Web-технологии за последние 15 лет достигли своей зрелости. Они приняты бизнесом
и проникли в каждый дом. Основным способом хранения информации во Всемирной
паутине являются web-страницы. Первые web-страницы создавались с помощью
статического HTML и напоминали страницы из телефонного справочника.
Пользователям требовался более динамичный и красочный контент. В середине 90-х
годов прошлого века появились скриптовые языки, сделавшие web-страницы
интерактивными. В это же время обострилась война браузеров, победителем из
которой вышел Microsoft Internet Explorer. Для навигации в Интернет используется
протокол TCP/IP. У всех устройств, подключенных к компьютерной сети есть ipадреса. Различают общедоступные и частные ip-адреса. При регистрации web-серверов
используется база данных DNS. Служба разрешения доменных имен помогает, также,
пользователям соединяться с нужным ресурсом в Сети. Существует несколько

8

вариантов хостинга, отличающихся стоимостью и предоставляемыми сервисами.

Набор для практики

Вопросы:

1. Расскажите об истории развития web-технологий
2. Что такое браузер?
3. Что вы знаете о DHTML?
4. Как работают активные серверные страницы?
5. Что вы знаете о протоколе TCP/IP?
6. Чем общедоступные ip-адреса отличаются от частных?
7. Как разместить свой web-сайт?
8. Что такое служба DNS?

Упражнения:

1. Зарегистрируйтесь на сайте ссылка: http://www.yandex.ru. Выберите пункт

создания сайта на ссылка: http://www.narod.ru и создайте его. Разместите на своем
сайте счетчик посещений, а также информацию о погоде.

9

HTML 4.01

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

Цель лекции: Познакомить слушателей с развитием стандарта языка гипертекстовой
разметки, рассказать о проблемах языка и способах их решения, дать представление о
структуре HTML-документа, в частности, о разделе описания типа документа.

Дополнительные материалы: Презентацию к данной лекции Вы можете скачать
ссылка: здесь - http://old.intuit.ru/department/internet/devcapw/2/Lecture_02.ppt.

Информация в Интернете представлена преимущественно в виде web-страниц.
Большинство web-страниц написано на языке гипертекстовой разметки ( Hyper Text
Markup Language, HTML ). HTML является подмножеством стандартного обобщённого
языка разметки ( Standard Generalized Markup Language, SGML ). SGML позволяет
описывать данные с очень сложной структурой, например, технические документы,
однако, он весьма трудоемок. Среди областей применения SGML можно назвать
техническую документацию фирмы Boeing и документы Европейской Комиссии.
HTML интерпретируется специальными программами - браузерами, которые обработав
команды этого языка, формируют документ в удобном для пользователя виде.
Наиболее популярными на сегодняшний день браузерами являются Microsoft Internet
Explorer, Mozilla Firefox, Safari, Google Chrome и Opera. Язык гипертекстовой разметки
был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991-1992
годах, когда он работал в Центрально-Европейском Институте ядерных исследований
(CERN) в городе Женеве. HTML создавался как язык для обмена научной и
технической документацией. HTML состоит из команд, которые называются тэги (tag).
Теги заключаются в угловые скобки. Большинство тэгов - парные. Тэги без слэша
называются открывающими, тэги со слэшем, соответственно - закрывающими: <tag>

… </tag>. Открытые и закрытые тэги образуют блоки, внутри которых могут быть
вложены другие блоки:

<tag1>
    <tag2>

    </tag2>
</tag1>

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

Изначально HTML задумывался как платформенно-независимый язык. Он должен был

10