Языки и средства создания Web-приложений
Бурное развитие глобальной сети Internet оказывает огромное влияние на все сферы деятельности человека. Internet вызвал революционные изменения в индустрии программного обеспечения. Появилась новая категория приложений, специально разработанных для Интернета и учитывающих особенность серверов Web. Поэтому программы для Интернета часто называют приложениями Web. Например, организация образования через Интернет требует специальной организации учебных пособий, которые могут быть подготовлены в формате HTML, рассчитанном на просмотр учебника в одном из браузеров (Internet Explorer, Netscape Navigator). Для создания документов в формате HTML существуют различные программные средства. Например, текстовый редактор Word позволяет сохранять документ и отдельные его части в формате HTML и даже организовывать гиперсвязи между HTML-файлами. Для получения более сложного HTML-документа требуются навыки программирования на языке HTML.
Язык HTML - гипертекстовый язык, описывающий структуру документа, вид которого на экране определяется браузером.
Описание на HTML - это текст в формате ASCII и последовательность включенных в него команд (управляющих кодов, называемых также дескрипторами, или тегами). Эти команды расставляются в нужных местах текста, определяя шрифты, переносы, появление графических изображений, ссылки и т.п.
Команды имеют форму < >, где между скобками записывается имя команды.
Не вдаваясь в детали языка HTML, которые легко могут быть найдены в соответствующих книгах, приведем только необходимые сведения о нем.
Если открыть программу Блокнот, написать в нем следующие строчки
<HTML>
<HEAD>
<TITLE>Информационный раздел 1</TITLE>
</HEAD>
<BODY>
<FONT FACE=“Times New Roman”>
<P>Информационный раздел 1.</P>
<P>Текст</P>
</FONT>
</BODY>
</HTML>
и сохранить их в виде файла с расширением .html, то открытие этого файла с помощью браузера Internet Explorer
Можно ссылаться на определенное место в документе. Тогда
<A HREF="URL#метка"> Текст </A>.
Сама метка в документе имеет вид:
<A NAME="метка"> Текст </A>.
Ссылки на фрагменты данного документа можно упростить:
<A HREF="#метка" >Текст </A>.
Для того чтобы встроить растровое изображение в документ HTML, необходимо использовать тег <IMG>. Общий вид этого тега показан ниже:
<IMG SRС=“Адрес_файла_изображения”
NАMЕ=“Имя_изображения”
. . .
WIDТН=“Ширина” НЕIGНТ=“Высота”>
Здесь указаны только три параметра. Полный список параметров тега <IMG> с кратким их описанием находятся в таблице 7.1.
Таблица 7.1. Параметры тега <IMG>
|
Параметр |
Описание |
|
SRC |
Адрес URL файла с растровым графическим изображением |
|
NАМЕ |
Имя объекта, соответствующего растровому графическому изображению. Это имя может быть использовано для ссылки на объект в клиентском сценарии |
|
ALT |
Текстовая строка, которая отображается в тех случаях, когда браузер не может показывать графические изображения или когда такая возможность отключена |
|
ALIGN |
Выравнивание текста относительно графического изображения: LEFT - по левой границе; RIGHT - по правой границе; ТОР - по верхней границе; MIDDLE - по центру изображения; BOTTOM - по нижней границе; ТЕХТТОР - выравнивание по верхней границе относительно самых высоких символов в текстовой строке; ABSMIDDLE - выравнивание середины текстовой строки относительно середины изображения; BASELINE – выравнивание нижней рамки изображения относительно базовой линии текстовой строки; ABSBOTTOM - выравнивание нижней границы изображения относительно нижней границы текущей строки |
|
HEIGHT |
Высота изображения в пикселах |
|
WIDTH |
Ширина изображения в пикселах |
|
BORDER |
Ширина рамки (в пикселах) вокруг изображения (используется только браузером Netscape Navigator) |
|
HSPACE |
Ширина (в пикселах) свободного пространства, отделяющего изображение от текста по горизонтали |
|
VSPACE |
Ширина (в пикселах) свободного пространства, отделяющего изображение от текста по вертикали |
|
USEMAP |
Адрес URL файла, содержащего так называемую карту изображения, которая используется для сегментированной графики |
|
ISMAP |
Этот параметр указывает, что данное изображение является сегментированным |
Параметры тега <IMG> определяют адрес файла с изображением, выравнивание текста, расположенного возле изображения, и т. д. С помощью параметров HEIGHT и WIDTH выполняется масштабирование графических изображений. Значение этих параметров указано в процентах от ширины окна просмотра.
Масштабирование позволяет подготовить графический файл весьма небольшого размера: он занимает значительную площадь в окне браузера, но быстро передается через Интернет. Однако, масштабирование сегментированных графических и фоновых изображений невозможно.
Если в документе HTML размещено несколько растровых изображений, то можно адресовать соответствующие объекты как элементы массива document.images. Например, первое изображение адресуется следующим образом: document.images[0]. Однако в некоторых случаях удобнее пользоваться именами изображений, определенными параметром NAME оператора <IMG>. Объект-изображение имеет свойство src, соответствующее параметру SRC оператора <IMG>. Адресуясь к этому свойству, можно не только определять текущий адрес URL изображения, но и задавать новый.
Рассмотрим фреймовую структуру организации HTML-документа, когда окно просмотрщика (браузера) разделено на несколько частей, в каждую из которых выводится свой HTML-документ. Такая организация наиболее удобна для организации сайта или компьютерного учебника, т.к. позволяет совмещать удобную навигацию в пространстве сайта или учебника с удобным представлением его информации. Например, удобно разделять окно браузера на три части (три фрейма): в левой части расположить оглавление сайта (учебника) с гиперссылками на соответствующие информационные разделы, в правой части выводить содержание информационного раздела, к которому произведено обращение из фрейма оглавления, а в верхней части выводить название соответствующего информационного раздела (рис. 7.3).
Для того чтобы объединить несколько страниц HTML при помощи фреймов, нужно подготовить специальный документ HTML, в котором описаны такие параметры фреймов, как их размер и расположение.
Особенность такого документа - отсутствие на своем обычном месте области тела документа, выделенного тегами <BODY> и </BODY>. Вместо этого в файле описания фреймов присутствуют теги <FRAMESET>, </FRAMESET>, <NOFRAME> и </NOFRAME>:
<html>
<head>
. . .
</head>
<frameset rows=“Высота_строки” соls=“Ширина_колонки”
<frame src=“Aдpec_URL” nаmе=“Имя_фрейма”>
. . .
<frame src=“Aдpec_URL” nаmе=“Имя_фрейма”>
<noframe>
<body>
. . .
</body>
</noframe>
</frameset>
</html>
Параметры rows и cols тега <PRAMESET> определяют размеры фреймов и задаются в виде списка значений, разделенных запятой.
Для тех браузеров, которые не могут работать с фреймами, необходимо подготовить документ HTML, расположив его тело между операторами <NOFRAHE> и </NOFRAME>. В этот документ стоит поместить сообщение о том, что для просмотра данной страницы Web необходимо применять более современный браузер.
Параметры тега <FRAMESET>
Рассмотрим подробнее параметры оператора <FRAMESET>, предназначенного для определения набора фреймов. Эти параметры описаны в таблице 7.2.
Таблица 7.2. Параметры тега <FRAMESET>
|
Параметр |
Описание |
|
COLS |
Ширина колонки в процентах, пикселах или ее относительный размер |
|
ROWS |
Высота строки в процентах, пикселах или ее относительный размер |
|
FRAMEBORDER |
Если значение этого параметра равно 1, фреймы будут ограничены трехмерной рамкой, ширина которой задается в пикселах. В том случае когда указано значение 0, рамка не создается |
|
BORDER |
Используется только браузером Netscape Navigator. Задает толщину рамки фрейма в пикселах |
|
FRAMESPACING |
С помощью этого параметра задается дополнительное расстояние между фреймами в пикселах |
Если фреймы располагаются в одном столбце, параметр COLS
указывать не надо. Аналогично, если фреймы занимают только одну строку, не нужно указывать параметр ROWS.
Можно задать значения для параметров COLS и ROWS
либо в процентном отношении соответственно к ширине и высоте окна браузера, либо в пикселах. Если вместо значения указан символ “*”, колонка или строка занимают всю оставшуюся часть окна.
Например, в следующей строке задана высота первого фрейма, равная 80 пикселам, а второй фрейм занимает всю нижнюю часть окна браузера:
<FRAMESET ROWS=“90,*”>
В следующем примере два фрейма, расположенные рядом, занимают соответственно 20% и 80% ширины окна браузера.
<FRAMESET COLS=“20%, 80%”>
Параметры оператора <FRAME>
Между тегами <FRAMESET> и </FRAMESET> располагаются теги <FRAME>, определяющие параметры отдельных фреймов. Это параметры SRC и NAME. Первый задает адрес URL
документа HTML, который будет загружен в данный фрейм, а второй - имя фрейма, которое можно использовать в клиентском сценарии для адресации объектов, расположенных во фрейме. Параметры тега <FRAME> приведены в таблице 3.2.
Таблица 3.2. Параметры тега <FRAME>
|
Параметр |
Описание |
|
MARGINHEIGHT |
Используется только для “плавающих” фреймов в браузере Microsoft Internet Explorer. Задает выравнивание фрейма или текста, расположенного рядом с фреймом. Этот параметр может принимать следующие значения: LEFT, CENTER, RIGHT, TOP, BOTTOM |
|
MARGINWIDTH |
Размер отступа (в пикселах) по вертикали от границ фрейма |
|
FRAMEBORDER |
Размер отступа (в пикселах) по горизонтали от границ фрейма. Если значение этого параметра равно 1, фреймы ограничены трехмерной рамкой, ширина которой задается в пикселах. В том случае когда указано значение 0, рамка не создается |
|
NAME |
Этот параметр задает имя фрейма, которое используется в теге ссылки <А> для указания, в какой фрейм нужно загрузить новый документ |
|
NORESIZE |
Если указан этот параметр, пользователь не сможет изменять размеры фрейма, передвигая его границы мышью |
|
SCROLLING |
Параметр SCROLLING определяет, нужно ли создавать полосы просмотра для пролистывания содержимого фрейма. Для этого параметра можно указывать следующие значения: YES - полосы просмотра создаются всегда; NO - полосы просмотра не создаются; AUTO - полосы просмотра создаются только при необходимости, когда документ HTML не помещается полностью в окне фрейма |
|
SRC |
Адрес URL файла с документом HTML, который загружается в окно фрейма |
Взаимодействие между фреймами
Средства клиентских сценариев, составленных на языках программирования, позволяют наделить фреймы возможностями, недостижимыми при использовании одного лишь языка разметки гипертекста HTML. Например, один из фреймов может содержать ссылки на документы, которые при активизации этих ссылок загружаются в окно другого фрейма. Клиентский сценарий позволит таким образом загружать не один документ, а одновременно несколько документов в разные фреймы.
Большую известность приобрели технология и язык программирования сетевых приложений Java, разработаные фирмой Sun Microsystems для систем распределенных вычислений.
Язык Java объектно-ориентированный, прототипом является С++, но Java более прост в использовании (так, например, убраны указатели), в нем введены многопотоковость и дополнительная защита от вирусов.
Для пользователей важны также следующие черты языка:
аппаратная независимость (мобильность) за счет создания приложений в виде байт-кодов для некоторой виртуальной машины - каждая аппаратная платформа интерпретирует эти байт-коды; благодаря введению компиляции потеря эффективности, присущая интерпретации, здесь менее значительна;
интеграция с браузерами;
используемые программные объекты могут находиться в разных узлах, интерпретатор находит их и загружает в компьютер пользователя.
Другими словами, в узле-клиенте достаточно иметь лишь браузер, все остальное можно получить по сети. Однако при этом обостряется проблема информационной безопасности. В связи с этим, загружаемым по сети программам (они называются аплетами) обычно запрещается обновлять и читать файлы, кроме тех, которые находятся на компьютере самого аплета.
Java-аплеты доступны из HTML-документов (обращение к ним производится через тег <applet>), хотя могут использоваться и независимо от них. При обращении к аплету он компилируется на сервере, а для исполнения передается клиенту вместе с Web-страницей.
Большое распространение получил интерфейс CGI (Common Gateway Interface - общий шлюзовой интерфейс) - программное обеспечение связи HTML браузеров с другими прикладными программами и/или текстами, находящимися на серверной стороне.
Программа CGI - посредник между браузером и приложениями. Обычно программа CGI находится на сервере в специальном каталоге CGI_BIN, она является обработчиком запросов, идущих от браузера. Обращение к файлу из этого каталога означает запуск соответствующего обработчика. Если браузер обращается к документу не в HTML формате, то CGI преобразует форму документа в HTML и возвращает ее браузеру.
В гипертекстовых документах также широко используется JavaScript - язык и интерпретатор этого языка для генерации и управления просмотром составных гипертекстовых документов. JavaScript более прост, чем Java, и тексты JavaScript исполняются быстрее, чем тексты Java или запросы к CGI, поскольку обработчики событий JavaScript реализованы в браузере, а не на сервере. Тексты на JavaScript записываются непосредственно в HTML документе с помощью специальных тегов и имеют вид
<SCRIPT LANGUAGE = "javascript"> <!- - . . . //- -> </SCRIPT>
где <!- - . . . //- -> - текст в виде комментария. В отличие от Java программы на JavaScript полностью интерпретируются в браузере.
Для разработки приложений в Internet уже созданы специальные языки и средства. Это, кроме упомянутых языков, также язык Visial Basic Script (VBScript).
Microsoft разработала технологию создания и использования интерактивных сетевых приложений, названную ActiveX. Некоторые компоненты ActiveX передаются в составе HTML-документов, другие служат для взаимодействия сервера с приложениями. Microsoft предлагает среду разработки Web-документов и приложений, включающую ряд продуктов, например:
Internet Assistant - служит для создания HTML-документов, использует возможности редактора Word, взаимно преобразует форматы документов HTML и Word;
FrontPage - применяется Web-мастерами и администраторами для сопровождения гипертекстовой информационной базы;
Internet Studio - помогает художественному оформлению Web-страниц;
Visual J++ в составе компилятора Java, набора JDK, средств взаимодействия Java-аплетов и ActiveX-компонентов, и др.
Internet- функции становятся неотъемлемой частью сетевых операционных систем. Так, в ОС Windows NT, начиная с версии 4.0, входит Internet-сервер IIS (Internet Information Server), реализующий технологии WWW, Gopher, FTP, ISAPI.
В качестве примера рассмотрим методику создания простейшего компьютерного учебника в формате HTML, использующего фреймовую структуру.
Методика создания компьютерного учебника в формате HTML:
1) Подготовить все разделы учебника (оглавление, названия информационных разделов, главы, параграфы, примеры, контрольные вопросы и т.д.) в текстовом редакторе Word и сохранить из в виде отдельных файлов, например, oglavlenie.doc, title1.doc, title2.doc, …, titleN.doc, ch1. doc, 1.1. doc, 1.2. doc, …, 1.N. doc, ch2. doc, 2.1. doc, 2.2. doc, …, 2.N. doc, …, chN. doc, N.1. doc, N.2. doc, …, N.N. doc.
2) Преобразовать все файлы разделов учебника в формат HTML, для чего использовать опцию меню “Файл\Сохранить в формате HTML”. Например, oglavlenie.html, title1. html, title2. html, …, titleN. html, ch1.html, 1.1.html, 1.2.html, …, 1.N.html, ch2.html, 2.1.html, 2.2.html, …, 2.N.html, …, chN.html, N.1.html, N.2.html, …, N.N.html.
3) Организовать основной загрузочный файл Учебника index.html, из которого будет осуществляться управление Учебником.
В нашем случае создается HTML-файл с именем index.html, который является основным (первоначально загружающимся) файлом компьютерного учебника, из которого осуществляется все дальнейшее управление Учебником.
<html>
<head>
<title>Название учебника</title>
</head>
<frameset FRAMEBORDER=“1” rows=“100,*”>
<frame SCROLLING=“no” NAME=“title” SRC=“title.html” MARGINHEIGHT=“1”>
<frameset FRAMEBORDER=“1” cols=“300,*”>
<frame SCROLLING=“auto” NAME=“oglavlenie” SRC=“oglavlenie.html”>
<frame SCROLLING=“auto” NAME=“main” SRC=“main.html”>
</frameset>
<noframes>
<body BGCOLOR=“#FFFFFF”>
</body>
</noframes>
</frameset>
</html>
В нашем примере мы создаем три фрейма с именами oglavlenie, title и main. Результатом открытия этого файла в браузере является появление окна, представленного на рис. 7.4.
4) Организовать гипертекстовую среду Учебника. Последним шагом в разработке компьютерного учебника является реализация гиперссылок из фрейма oglavlenie, загружающих соответствующие HTML-документы во фреймы title и main. Для этого следует открыть в программе Блокнот файл oglavlenie.html и вставить в него после тега <body> следующую запись
<P><SCRIPT LANGUAGE=“JavaScript”><!--
function loadPage(szNewURL,szTitle)
{
parent.main.window.location.href=szNewURL;
parent.title.window.location.href=szTitle;
}
// --></SCRIPT>
В каждую строку оглавления, из которой осуществляется гиперссылка к какому-либо информационному разделу, следует вставить запись, указывающую, какие файлы будут загружаться во фреймы main и title:
<A HREF=“javascript:loadPage('Имя html-файла, помещаемого
в фрейм main',' Имя html-файла, помещаемого в фрейм title');”>
Получаем следующий код для файла oglavlenie.html:
<HTML>
<HEAD>
<TITLE>ОГЛАВЛЕНИЕ</TITLE>
</HEAD>
<BODY>
<P><SCRIPT LANGUAGE=“JavaScript”><!--
function loadPage(szNewURL,szTitle)
{
parent.main.window.location.href=szNewURL;
parent.title.window.location.href=szTitle;
}
// --></SCRIPT>
<FONT FACE=“Times New Roman”><P>ОГЛАВЛЕНИЕ</P>
<P><A HREF=“javascript:loadPage('ch1.html','title.html');”>Глава1.</P> </FONT>
<P><A HREF=“javascript:loadPage('1.1.html','title.html');”>1.1.</P>
<P><A HREF=“javascript:loadPage('1.2.html','title.html');”>1.2.</P>
<P><A HREF=“javascript:loadPage('1.N.html','title.html');”>1.N.</P>
<FONT FACE=“Times New Roman”>
<P><A HREF=“javascript:loadPage('ch2.html','title.html');”>Глава 2.</P></FONT>
<P><A HREF=“javascript:loadPage('2.1.html','title.html');”>2.1.</P>
<P><A HREF=“javascript:loadPage('2.2.html','title.html');”>2.2.</P>
<P><A HREF=“javascript:loadPage('2.N.html','title.html');”>2.N.</P>
<FONT FACE=“Times New Roman”>
<P><A HREF=“javascript:loadPage('chN.html','title.html');”>Глава N.</P> </FONT>
<P><A HREF=“javascript:loadPage('N.1.html','title.html');”>N.1.</P>
<P><A HREF=“javascript:loadPage('N.2.html','title.html');”>N.2.</P>
<P><A HREF=“javascript:loadPage('N.N.html','title.html');”>N.N.</P>
</BODY>
</HTML>
После указанной процедуры открытый в браузере основной управляющий файл Учебника index.html, приобретает вид, представленный на рис. 7.5.
