[ПРЕДЫДУЩАЯ СТРАНИЦА][СЛЕДУЮЩАЯ СТРАНИЦА]
[ОГЛАВЛЕНИЕ][ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ]
[КОНЕЦ СТРАНИЦЫ]

Дополнительные средства представления информации в WWW

Вполне понятно и естественно желание многих авторов публикаций в WWW сделать свои опусы как можно более привлекательными и удивить видавших виды WWW-путешественников не только (и даже, к сожалению, не столько) информационной насыщенностью и новизной содержания, но и формой его представления. Ведущие фирмы-разработчики программного обеспечения для работы в WWW спешат удовлетворить все возрастающие потребности Internet'овского сообщества и предлагают одну за другой всевозможные новинки, изучение которых - увы - грозит вскоре занять все 100% времени потенциальных авторов, не оставляя им шанса заняться собственно содержанием своих шедевров.

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

Рамки
(Frames)

Одновременно видеть в окне программы просмотра два, три или более документа, которые можно рассматривать и "прокручивать" независимо друг от друга, подчас бывает весьма удобно. Представьте себе, например, что при помощи программы просмотра вы читаете какое-либо учебное пособие, имеющее сложную вложенную структуру глав и разделов. В этом случае вашим верным путеводителем будет оглавление, составленное в виде списка, где каждый элемент списка является гиперссылкой на соответствующий раздел. Такое оглавление обычно помещают в отдельный файл. Для поиска нужного раздела вы загружаете файл с оглавлением, "щелкаете" на соответствующей гиперссылке, и программа просмотра загружает файл с нужной главой. Беда, однако, заключается в том, что для быстрого просмотра разделов вам каждый раз необходимо возвращаться к оглавлению, щелкая по кнопке "Back" или вызывая список закладок, поскольку при загрузке разделов документа это оглавление, очевидно, из окна программы просмотра исчезает. Естественной кажется идея разделить окно на два "подокна", расположив в одном из них оглавление, а во втором - сами документы. Тогда "навигация" становится намного удобнее: вы "щелкаете" по оглавлению в одном "подокне", а в ответ на это программа просмотра загружает соответствующие разделы во второе "подокно". Такой подход легко осуществим при помощи расширения HTML, называемого рамками (frames). Это расширение поддерживается многими программами просмотра [116] и в недалеком будущем явно станет общепринятым, несмотря на бурное негодование многих сторонников "чистоты" HTML и приверженцев логического стиля описания документов на этом языке.

Для описания "рамочной" структуры необходимо создать специальный HTML-файл, в котором указано, на сколько рамок разбить окно, как эти рамки расположить и какой файл в какую из рамок загрузить. Не приводя полного руководства по использованию рамок, [117] мы ограничимся примером, позволяющим понять основную идею. Итак, пусть у нас имеется файл с оглавлением и два файла с содержанием документа - Введение и Глава 1. Создадим четыре файла, один из которых (frames.html) описывает рамочную структуру, второй (toc.html) содержит оглавление, а третий и четвертый, соответственно, - Введение (intro.html) и Главу 1 (ch1.html). Ниже приведено содержание этих файлов с комментариями, которые, как мы уже знаем, в HTML открываются сочетанием символов <!-- и закрываются сочетанием символов -->

frames.html

<HTML>
<HEAD><TITLE>Справочное руководство по...</TITLE></HEAD>
<!--
Обратите внимание на ОТСУТСТВИЕ флагов <BODY> и </BODY>
Разделить окно по вертикали на две рамки, отведя под
первую 20% окна, под вторую - 80%. (Если нужно разделить окно
по горизонтали, используйте ROWS вместо COLS).
-->
<FRAMESET COLS="20%,80%">
<!--
В левую рамку загрузить файл TOC.html и присвоить этой рамке имя
toc для последующей идентификации
-->
<FRAME SRC="TOC.html" NAME="toc">
<!--
В правую рамку загрузить файл Intro.html и присвоить этой рамке имя the_document
-->
<FRAME SRC="Intro.html" NAME="the_document">
</FRAMESET>
</HTML>

toc.html

<HTML>
<HEAD><TITLE>Оглавление</TITLE></HEAD>
<BODY>
<H1>Оглавление</H1>
<UL>
<!--
Атрибут TARGET задает имя рамки, в которую программа просмотра
должна вывести документ при выборе гиперссылки.
-->
<LI><A HREF="Intro.html" TARGET="the_document">Введение</A></LI>
<LI><A HREF="Ch1.html" TARGET="the_document">Глава 1</A></LI>
</UL>
<!--
Внимание: Если требуется, чтобы при выборе гиперссылки границы
рамок уничтожались и документ выводился в полном окне, используйте
для атрибута TARGET зарезервированное имя _top. Если имя рамки
вообще не указано, документ будет выведен в рамке, содержащей выбранную
гиперссылку. Если задано зарезервированное имя _blank, то старое окно
сохранится, а документ будет показан в созданном для него новом,
независимом, окне.
-->
<A HREF="index.html" TARGET="_top">Домашняя страница автора</A>
</BODY>
</HTML>

intro.html

<HTML>
<HEAD><TITLE>Введение</TITLE></HEAD>
<BODY>
<H1>Введение</H1>
<P>Данное руководство предназначено для...</P>
</BODY>
</HTML>

ch1.html

<HTML>
<HEAD><TITLE>Глава 1</TITLE></HEAD>
<BODY>
<H1>Глава 1</H1>
<P>В первой главе мы рассмотрим основные понятия...</P>
</BODY>
</HTML>

>>Как выглядит на дисплее<<

Если пользователь щелкает на якоре гиперссылки Введение или Глава 1, то соответствующие документы (из файлов intro.html или ch1.html соответственно) будут загружены в правую рамку, при этом левая рамка остается без изменений. При щелчке на якоре Домашняя страница автора деление окна на рамки исчезает и документ из файла index.html (содержание которого мы здесь не приводим) выводится в "полном" окне.

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

Выводы:

Заполняемые формы
(Fill-out Forms, Fill-in Forms)

Всевозможные формы и бланки, в которые что-то надо вписать, какие-то пункты отметить крестиком, а что-то зачеркнуть ("мужской, русский, член ВЛКСМ, нет, нет, не участвовал, не был, не имеет..."), давно и прочно вошли в жизнь каждого человека, служа удобным инструментом быстрого сбора информации. Стандарт HTML 2 предоставляет аналогичное "бумажному" прототипу средство запроса, называемое заполняемая форма (fill-out form или fill-in form).

Программа просмотра, выводя на экран документ, содержащий форму, дает читателю возможность заполнить ее, впечатывая текст в специальные поля, [118] отмечая "щелчками" мыши "галочки" и выбирая нужные элементы из списков. После заполнения формы читатель нажимает экранную кнопку "Submit Query" ("послать запрос") - и программа просмотра высылает введенную информацию на указанный WWW-сервер, который передает запрос определенной программе, специально предназначенной для его обработки. Затем сервер, при необходимости, высылает программе просмотра ответ в виде заранее подготовленного или сгенерированного "на лету" документа. Описанный механизм обработки известен как Common Gateway Interface (CGI).

Программы для обработки CGI-запросов пишутся квалифицированными программистами, чаще всего на языках C или Perl. [119] Установка этих программ на WWW-сервере осуществляется администратором. Вы, как автор WWW-страниц, можете узнать у администратора, какие программы обработки запросов установлены на вашем сервере, и как их использовать, а также можете попросить установить на сервере ту или иную необходимую вам программу. При необходимости, вы можете взять образец заполняемой формы, обработка которой осуществляется нужной программой, отредактировать эту форму в соответствии с вашими требованиями и использовать в своих WWW-страницах. Как мы увидим ниже, в некоторых случаях использование CGI при работе с формами не обязательно: введенная в форму информация может обрабатываться локально, без взаимодействия с сервером (например, при помощи JavaScript, как будет рассказано на стр. 161), а данные из нее высылаться по электронной почте.

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

Пример заполняемой формы

<HR>
<FORM NAME="simple_form" 
ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query" METHOD = "POST">[120]
<UL><LI>Ваше имя:
<INPUT TYPE="text" NAME="name_field" VALUE=""></LI>
<LI>Пол: <INPUT TYPE="radio" NAME="sex" VALUE="male" CHECKED>Муж.
<INPUT TYPE="radio" NAME="sex" VALUE="female">Жен.</LI>
<LI>Ваш родной язык:
<SELECT NAME="lang_menu">
<OPTION SELECTED>Русский
<OPTION>Украинский
<OPTION>Белорусский
<OPTION>другой
</SELECT></LI>
<LI>Читаете по-английски 
<INPUT TYPE="checkbox" NAME="read_english" VALUE="Yes" CHECKED></LI></UL>
<INPUT TYPE="hidden" NAME="ID_field" VALUE="Form1">
<INPUT TYPE="submit">
<INPUT TYPE="reset">
</FORM>
<HR>

Как выглядит на дисплее



В вышеприведенном примере описание формы на HTML открывает специальный флаг <FORM ...>, а закрывает - флаг </FORM>.

Атрибут NAME="..." присваивает форме символическое имя, используя которое можно на эту форму ссылаться в дальнейшем. [121] Нашу форму мы, как видно из примера, назвали simple_form.

Атрибут ACTION="..." задает URL программы обработки запроса; в нашем случае это программа с именем post-query, расположенная в директории cgi-bin [122] на WWW-сервере hoohoo.ncsa.uiuc.edu.

Атрибут METHOD="..." задает программе просмотра метод оформления запроса. Допустимы методы POST или GET, о которых мы поговорим несколько ниже.

Внутри формы разрешается располагать любой форматированный в соответствии с правилами HTML текст. Однако, главное, что можно располагать только внутри формы, - это описание элементов ввода, с помощью которых, собственно, читатель и сообщает запрашиваемую от него информацию. В нашем примере использовано шесть типов элементов ввода: 1) поле текстового ввода (text field), 2) раскрывающийся список (pull-down listbox), 3) "радиокнопка" (radio button), 4) "кнопка-флажок" (checkbox), 5) скрытый элемент (hidden) и 6) экранная кнопка (button).

Поле текстового ввода описано непарным [123] флагом <INPUT TYPE="text" NAME="name_field" VALUE="">. Атрибут TYPE="..." задает тип поля ввода (в данном случае - text, с другими доступными типами мы познакомимся чуть ниже). Атрибут NAME="..." присваивает данному элементу ввода символическое имя (идентификатор). Атрибут VALUE="..." указывает, какой текст появится в этом поле по умолчанию, то есть до того, как пользователь что-либо введет в это поле (the default text).

Непарные флаги <INPUT TYPE="radio" NAME="sex" VALUE="male" CHECKED> и <INPUT TYPE="radio" NAME="sex" VALUE="female"> описывают две радиокнопки. [124] Отличительным свойством радиокнопок является то, что в любой момент в группе одноименных (то есть, имеющих одинаковые атрибуты NAME="...") радиокнопок, принадлежащих одной форме, только одна может быть включена. Включение любой другой радиокнопки (как правило, щелчком мыши на ней) вызывает автоматическое выключение предыдущей. Атрибут CHECKED указывает радиокнопку, включенную по умолчанию. Очевидно, что радиокнопки необходимо использовать, когда один из предложенных вариантов ответа на вопрос исключает другие варианты.

Парный флаг <SELECT NAME="lang_menu"> ... </SELECT> задает поле ввода, предлагающее пользователю выбрать одну из предложенных возможностей. По выполняемой функции этот элемент аналогичен рассмотренному выше, но более удобен при выборе из большого числа альтернатив. В нашем примере с его помощью создан раскрывающийся список, предлагающий пользователю выбор одной из четырех альтернатив, каждая из которых, как мы видим из примера, задана при помощи флага <OPTION>. Атрибут SELECTED при этом указывает альтернативу, выбранную по умолчанию (the default option).

Непарный флаг <INPUT TYPE="checkbox" NAME="read_english" VALUE="Yes" CHECKED> описывает кнопку-флажок. Кнопки-флажки по свойствам похожи на радиокнопки, описанные выше, но, в отличие от последних, могут быть включены или выключены независимо от других одноименных кнопок-флажков.

Непарный флаг <INPUT TYPE="hidden" NAME= "ID_field" VALUE="Form1"> описывает скрытый элемент, который программа просмотра на экран не выводит. В нашем примере этому элементу присвоено имя ID_field и значение Form1. Такой элемент может быть использован, например, для идентификации одинаковых форм, включенных в различные документы, чтобы программа обработки CGI-запроса могла определить, из какого именно документа был сделан запрос.

Непарный флаг <INPUT TYPE="reset"> описывает экранную кнопку, при "нажатии" на которую программа просмотра восстанавливает заданное по умолчанию состояние всех элементов ввода в пределах данной формы.

Непарный флаг <INPUT TYPE="submit"> описывает экранную кнопку, при "нажатии" на которую программа просмотра отправляет запрос на сервер.

Теперь настал подходящий момент, чтобы сказать о том, как же происходит отправка запроса на сервер при "нажатии" кнопки "Submit". Как мы уже упоминали, для этого используют один из двух доступных методов: GET или POST; при этом требуемый метод указывается атрибутом METHOD="..." внутри флага <FORM ...>.

1) METHOD="GET"

Содержимое элементов ввода собирается в запрос, который выглядит примерно так:

action?name=value&name=value&name=value

где action - это URL программы обработки запроса, указанной при помощи атрибута ACTION="..." внутри флага <FORM ...>. Каждая пара name=value указывает значение элемента ввода с именем name, - вот для чего было необходимо присваивать элементам ввода символические имена при помощи атрибута NAME="..."! Возможные значения элементов ввода различаются для элементов разных видов. Для поля текстового ввода это, очевидно, введенный пользователем текст; [125] для радиокнопок и кнопок-флажков - их значения, указанные атрибутом VALUE="...".[126] Строку запроса name=value&name=value&name=value..., а также и много другой служебной информации, WWW-сервер передает программе обработки запроса при помощи специально зарезервированных для этого переменных окружения операционной системы (environment variables).127

2) METHOD="POST"

В отличие от метода GET, строка запроса посылается не как "хвост", добавленный к URL программы обработки и начинающийся со знака вопроса, а в виде отдельного блока данных, который WWW-сервер передает программе обработки через стандартное устройство ввода (stdin). В большинстве случаев предпочтительнее использовать метод POST, поскольку при этом на длину строки запроса не накладывается ограничений.

Если у вас есть доступ к Internet и установлена программа просмотра, то вы можете проверить работу приведенного выше примера. В ответ на ваш запрос сервер (разумеется, если он в этот момент будет доступен) вышлет "декодированные" значения элементов ввода, например:

Query Results

You submitted the following name/value pairs:
name_field = Дима
sex = male
lang_menu = Русский
read_english = Yes
ID_field = Form1

Теперь откроем маленький секрет: результаты запроса можно послать на желаемый адрес по электронной почте, даже не пользуясь услугами CGI! [128] Для этого необходимо изменить атрибуты флага FORM следующим образом:

<FORM NAME="simple_form" ACTION="mailto:e_mail_address" ENCTYPE="text/plain">,

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

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

Карты
(Maps, Clickable Images, Imagemaps)

Как мы уже знаем, в HTML-документ можно включать изображения, которые считываются программой просмотра из файлов в одном из графических форматов. Ранее (стр. 119) было сказано, что всё изображение целиком можно сделать якорем гиперссылки. Однако, подчас возникает вполне естественное желание сделать различные части одного изображения гиперссылками на различные документы. Представим себе, например, документ с изображением электронной схемы прибора, более подробные сведения об элементах которого пользователь может немедленно получать, щелкая мышью на соответствующих участках чертежа. Удобно? - Несомненно. HTML предлагает для этого следующий способ: добавив к флагу <IMG ...> специальный атрибут ISMAP и/или USEMAP, вы можете "сказать" программе просмотра, что данное изображение является картой. Реакция на щелчок мыши на изображении-карте будет различной в зависимости от координат курсора мыши в момент щелчка.

Стандарт HTML 2.0 определяет только атрибут ISMAP, который предусматривает обработку "щелчка на карте" на WWW-сервере при помощи CGI-запросов, аналогичных применяемым для обработки заполняемых форм (см. предыдущий раздел, стр. 141). Пусть, например, изображение включено в документ следующим образом:

<A HREF="http://www.test.test/cgi-bin/imagemap/example.map"><IMG SRC="example.gif" ISMAP></A>

Тогда щелчок на точке с координатами (в пикселах) 98,80 относительно верхнего левого угла изображения вызовет такой CGI-запрос:

http://www.test.test/cgi-bin/imagemap/example.map?98,80[129]

где example.map - имя файла в специальном формате, в котором указано, какие области на карте являются якорями гиперссылок и на какие URL они ссылаются. Формат этого описания зависит от типа WWW-сервера.[130]

При таком способе обработки координатных запросов читатель WWW-документа должен щелкнуть на интересующей его точке и дождаться отклика сервера, прежде чем он получит возможность хотя бы узнать, соответствует данная точка какой-нибудь гиперссылке, или нет.[131] Таким образом, медленная реакция на щелчок и дополнительная загрузка сетей и сервера являются недостатками этого подхода. Еще один его существенный недостаток - это невозможность работы с документами, использующими ISMAP-карты, без обращения к WWW-серверу, что особенно печально в связи с все большим применением формата HTML для рассылки документов на дискетах и компакт-дисках.

Если вы, как автор, хотите включить ISMAP-карту в свой документ, то вам придется во-первых, узнать формат *.map-файла, поддерживаемого вашим сервером, а во-вторых, попросить администратора разместить созданный вами *.map-файл в директории cgi-bin, которая в системе UNIX обычно закрыта для записи для "обычных" пользователей.

Альтернативу описанному выше механизму обработки "щелчков на карте" сервером составляет предложенный в проекте версии HTML 3.0 механизм обработки клиентом, то есть, самой программой просмотра. Этот механизм, пока еще не вошедший в ранг официального стандарта, поддерживается большинством современных графических программ просмотра, например, Netscape Navigator 2.0 и старше и Internet Explorer 3.0 и старше. Карты такого рода определяются при помощи атрибута USEMAP. Описание областей изображения, ассоциированных с различными гиперссылками, помещается в HTML-файл, как показано в нижеследующем примере. Представим себе несложную радиосхему, состоящую из трех диодов и двух резисторов. Картинку с радиосхемой мы поместили в файл mapex.gif, а описание функций каждого из элементов схемы - в файлы diode1.html, diode2.html, diode3.html, res1.html и res2.html (содержание этих файлов мы здесь не приводим). Мы хотим, чтобы читатель, щелкая на изображении того или иного элемента, загружал соответствующий документ с описанием данного элемента. Вот как это делается:

Пример карты - простая радиосхема

<HTML><HEAD><TITLE>Client-side Clickable Image Example</TITLE></HEAD><BODY>
<IMG USEMAP="#mapex" SRC="mapex.gif" HEIGHT=78 WIDTH=73>
<MAP NAME="mapex">
<AREA SHAPE="circle" COORDS="17,33,9" HREF="diode1.html">
<AREA SHAPE="circle" COORDS="17,49,8" HREF="diode2.html">
<AREA SHAPE="circle" COORDS="17,64,9" HREF="diode3.html">
<AREA SHAPE="rect" COORDS="27,12,35,28" HREF="res1.html">
<AREA SHAPE="rect" COORDS="38,44,57,54" HREF="res2.html">
<AREA SHAPE="default" NOHREF></MAP>
<p><a href="../advanced.html#back_from_map">[Назад к основному тексту]</a>
</BODY></HTML>

>>Как выглядит на дисплее<<

Как вы можете видеть из приведенного выше текста примера, изображение-карта включено в HTML-документ при помощи уже хорошо знакомого нам флага <IMG ...>. Но в отличие от рассмотренных нами ранее "пассивных" изображений, в данном случае при помощи атрибута USEMAP="#mapex" мы "сказали" программе просмотра, что она должна интерпретировать это изображение как карту и искать информацию о разбиении этого изображения на активные области в HTML-файле по символическому имени карты mapex. [132] Описание активных областей изображения-карты начинается флагом <MAP NAME="имя_карты"> и заканчивается флагом </MAP>. Каждая область описывается при помощи флага <AREA SHAPE="форма" COORDS="список координат" HREF="url">, где форма может принимать одно из четырех значений: rect (прямоугольник), poly (многоугольник), circle (окружность) и default ("по умолчанию" - все части изображения, оставшиеся не описанными явно). Атрибут COORDS задает список координат. Для прямоугольной области это x,y-координаты левого верхнего и правого нижнего углов, для многоугольной - x,y-координаты каждого из углов, для окружности - x,y-координата центра и радиус. Для default координаты не задаются и атрибут COORDS опускается. Напоминаем, что все координаты отсчитываются в пикселах относительно левого верхнего угла изображения. Атрибут HREF="url" задает URL или путь к файлу с документом, на который данная область рисунка ссылается. Если вместо HREF="url" записано NOHREF, то данная область не является якорем гиперссылки, и щелчок на ней будет проигнорирован.

Как мы видим, формат описания карт на HTML довольно прост. Однако, возникает вопрос, как же автору документа вычислить координаты областей-гиперссылок на рисунке, хранящемся в данном графическом файле, чтобы указать эти координаты в атрибутах COORDS="..."?

Первый, довольно трудоемкий, способ - это загрузить изображение, которое предполагается использовать в качестве карты, в какую-нибудь программу для рисования или обработки изображений, например, LView или PaintShop Pro. Можно воспользоваться и "рисовалкой" Paintbrush из Windows 3.1 или Paint из Windows 95, но тогда графический файл необходимо предварительно конвертировать в формат BMP (о форматах графических файлов см. стр. 57). Затем придется, перемещая курсор по изображению в окне программы для рисования, фиксировать его координаты в соответствующих точках. [133] Да, действительно путь не из легких... К счастью, существуют специальные программы, которые существенно облегчают разметку и даже автоматически генерируют описание карты. Одна из лучших программ такого рода - MapEdit, информацию о которой, как и саму программу, можно получить по адресу: http://www.boutell.com/mapedit/ Кстати, там же вы найдете и дополнительные сведения о картах.

Другая программа для разметки - MapThis! - может быть получена из http://www.ecaetc.ohio-state.edu/tc/mt/ Эта программа не уступает MapEdit, да еще и распространяется бесплатно!

Рекомендуем также взглянуть и на страницу Netscape, посвященную расширениям HTML, где вы найдете дополнительную информацию о картах: http://home.netscape.com/assist/net_sites/html_extensions_3.html

Замечание: карты поддерживаются не всеми программами просмотра; к тому же, пользователи часто отключают загрузку изображений, в результате чего карты не появляются на экране. Поэтому следует дублировать все гиперссылки, созданные при помощи карт, "обычными" гиперссылками.

Некоторые специальные графические эффекты

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

Прозрачный фон

При создании графического файла в формате GIF (версия 89а) или PNG [134] один из цветов, присутствующих на данном изображении, можно пометить как прозрачный (transparent). [135] В результате, при выводе такого изображения все участки изображения, окрашенные в "прозрачный" цвет, становятся невидимыми. Сквозь такие участки просвечивает предыдущий графический слой окна, как показано на рисунке, где изображения рожицы с прозрачным и непрозрачным фоном накладываются на фон.

FaceTransparent face

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

"Прогрессивные изображения"

Форматы GIF, JPEG и PNG поддерживают так называемую "прогрессивную" (progressive) загрузку, известную также как перемежающаяся (interlaced). Это позволяет программам просмотра при загрузке файла с "прогрессивным" изображением быстро показать на экране грубые очертания всего этого изображения целиком, и далее, по мере загрузки графического файла, постепенно "прорисовывать" все более мелкие детали (обычные, "непрогрессивные", изображения появляются на экране строка за строкой сверху вниз). [136] Чтобы сделать изображение "прогрессивным", в программе для работы с графикой достаточно указать, что вы желаете сохранить данное изображение в форматах GIF (версии 89a), JPEG или PNG как progressive, или interlaced, если, конечно, используемая вами программа дает такую возможность. [137] Из трех упомянутых форматов лучше использовать Interlaced GIF, так как он в настоящее время поддерживается почти всеми графическими программами просмотра.

"Живые картинки"

Живые картинки (animated images) в последнее время становятся популярным украшением WWW-страниц. Секрет живых картинок, являющихся как бы промежуточным звеном между статическими изображениями и настоящими multimedia-фильмами, прост: в графический файл в формате Animated GIF при помощи программ для работы с графикой (например, программы WebImage, которую можно найти в архиве TUCOWS, см. стр. 37) записывается несколько изображений (кадров), а также время демонстрации каждого кадра и количество прокруток такого "мультфильма". В HTML-документ "живое" изображение включается совершенно аналогично статическому изображению при помощи конструкции <IMG SRC="..."> (см. стр. 65 и 109). Программа просмотра, загрузив такой файл, приступает к демонстрации "мультфильма", показывая кадр за кадром с заданной задержкой. [138] Собираясь использовать "живые картинки" в своей "серьезной" WWW-страничке, помните, что их мелькание очень отвлекает внимание читателя от содержания вашей публикации, и часто вызывает раздражение.

Java

Апплеты

При загрузке чьей-либо WWW-страницы программой Netscape [139] вы иногда становитесь свидетелем каких-то странных и непонятных событий, подчас наводящих мысль о нашествии компьютерных вирусов: после довольно продолжительной паузы Netscape в нижней строке окна (status bar) сообщает нечто вроде Applet ScrewUpThePage loaded, затем там же появляется сообщение типа Applet ScrewUpThePage running, после чего в окне возникают пустые черные (белые, серые) прямоугольники (или же все окно остается совсем пустым, или же там появляется некоторое количество текста с прямоугольными "белыми пятнами") и некоторое время ровным счетом ничего заслуживающего внимания не происходит. Проведя с полминуты в предвкушении захватывающего зрелища и устав от долгого и утомительного ожидания, вы только было собираетесь навсегда покинуть разочаровавшую вас страницу, как в вышеупомянутых прямоугольниках выскакивают всевозможные движущиеся и неподвижные картинки, а из динамиков компьютера на вас обрушивается каскад звуков, часто сопровождаемый нелестными комментариями коллег, которым в этот момент посчастливилось работать рядом. Дальнейшие события зависят от мастерства и вкуса автора просматриваемой страницы, а также от ваших собственных действий, часто заканчиваясь - увы - "безвременной кончиной" этих самых прямоугольников, которые немеют, застывают и перестают реагировать на ваши самые отчаянные щелчки мышью и мощные удары по клавиатуре. При этом Netscape не упускает возможности выдать в строке состояния (status line) скорбную эпитафию типа:

Applet ScrewUpThePage exception: java.lang.NullPointerException.

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

Загрузив в Netscape WWW-страницу с описанными выше эффектами и просмотрев ее исходный текст на языке HTML при помощи команды меню View | Document Source, легко обнаружить фрагменты типа приведенного ниже:

<APPLET CODE=LabeledImage.class CODEBASE="classes"
WIDTH=315 HEIGHT=285 HSPACE=10 VSPACE=10 ALIGN=LEFT>
<PARAM NAME="Debug" VALUE="OFF">
<PARAM NAME="BackgroundColor" VALUE="#FFFFFF">
<PARAM NAME="ImageFile" VALUE="dima_tim.jpg">
<PARAM NAME="Area1" VALUE="69;10;115;72; Dima; index.html">
<P><IMG SRC="dima_tim.jpg" HSPACE=10 VSPACE=10
HEIGHT=205 WIDTH=315><BR>
</P>
<P><FONT COLOR="#FF0000">Your browser does not support
Java applets. The image is shown.</FONT></P>
</APPLET>

Флаги <APPLET> и </APPLET> маркируют начало и конец включения в страницу так называемого Java-апплета (Java-applet). [140] Апплет представляет из себя компьютерную программу, предназначенную для включения в HTML-документы. Такая программа пишется на языке программирования высокого уровня Java и компилируется в команды ("байт-коды") для так называемой виртуальной Java-машины, то есть, интерпретатора байт-кодов. Программа просмотра, натолкнувшись при загрузке страницы на фрагмент HTML-текста, промаркированного флагами <APPLET> и </APPLET>, отводит в окне с документом прямоугольник с размерами (в пикселах), определенными атрибутами WIDTH и HEIGHT, и пытается загрузить с сервера файл с байт-кодами. Имя такого файла, всегда имеющее суффикс .class, указывается при помощи атрибута CODE, а местонахождение - при помощи атрибута CODEBASE. При успешной загрузке файла с байт-кодами, программа просмотра запускает апплет, [141] передавая ему значения параметров, заданные при помощи <PARAM NAME="..." VALUE="...">. [142] Далее апплет начинает свою работу, выполняя (в идеальном случае) задачи, предусмотренные его автором, и выводя результаты этой работы в выделенный прямоугольник в окне с WWW-документом, запустившим этот апплет. Апплет может создать свои окна, не зависимые от окна с HTML-документом, и рисовать в них, выводить текст на так называемую Java-консоль, [143] проигрывать звуковые файлы и обмениваться информацией с WWW-сервером. Как и любая компьютерная программа, работающая в графической среде, апплет способен воспринимать ввод пользователя с клавиатуры и манипуляции мышью. Кроме того, апплет может заставить программу просмотра выполнить определенные действия, например, загрузить тот или иной документ с WWW-сервера.

Из соображений безопасности на апплеты накладывается ряд ограничений. В частности, загруженный с удаленного сервера (а НЕ с локального диска) апплет не может считывать что-либо или записывать на локальный жесткий диск [144] или устанавливать соединение с каким-либо сервером, кроме того, с которого он был загружен. Апплету позволено резвиться лишь в отведенном ему интерпретатором байт-кодов участке памяти. Безопасность при запуске апплетов является темой для оживленных дискуссий в телеконференциях, - ведь несмотря на все ухищрения разработчиков Java, апплет предоставляет еще одну возможность потенциальному взломщику проникнуть в ваш компьютер. Уклоняясь от более глубокого обсуждения этого важного вопроса, скажем, что для большинства пользователей персоналок риск такого вмешательства исчезающе мал. А если вы все-таки очень боитесь вооруженного апплетом взломщика - то "отключите" встроенный в программу просмотра интерпретатор байт-кодов. [145]

Даже несмотря на наложенные ограничения, потенциальные возможности апплетов весьма велики. Кроме ставшего уже традиционным рисования всевозможных красивых "живых" заставок в WWW-страницах, апплет, не загружая при этом WWW-сервер, [146] может производить сложные вычисления, выводить на экран файлы в нестандартных специализированных форматах (например, трехмерные изображения, графики и т. п.), играть с пользователем в компьютерные игры и многое, многое другое. Примеры? - пожалуйста, вашему вниманию предлагается целая коллекция: http://www.gamelan.com/

Краткая характеристика языка Java

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

Язык Java является детищем небольшой группы энтузиастов, работающих под крылом компании Sun Microsystems. Их первоначальной целью было создание языка для разработки надежных и переносимых распределенных систем реального времени.

Java - это объектно-ориентированный язык высокого уровня, весьма похожий на существенно упрощенный C++ [147] с добавлением встроенных в язык средств поддержки параллельного (многопотокового) программирования. Важной особенностью Java является наличие большой стандартизированной библиотеки классов, использование которой существенно облегчает разработку переносимых графических и сетевых приложений, использующих оконный графический интерфейс.

Java-компилятор генерирует архитектурно-независимые байт-коды для последующей их интерпретации виртуальной Java-машиной [148] на разных компьютерных платформах под управлением различных операционных систем. [149] Скомпилированная Java-программа может работать как включенный в WWW-страницу апплет, как это уже было описано выше. Однако, кроме апплетов, на Java создают и "полнокровные" приложения (applications), работающие независимо от каких бы то ни было программ просмотра WWW-документов. Для запуска таких Java-приложений необходим интерпретатор байт-кодов для соответствующей компьютерной платформы. Вскоре можно определенно ожидать появления все большего количества программ различного назначения, написанных на Java и поставляемых в виде байт-кодов, так что опыт работы с Java-приложениями может оказаться весьма полезным.

Более подробную информацию о Java, документацию и программное обеспечение для запуска Java-приложений на различных компьютерных платформах, а также набор средств для разработки собственных Java-программ (Java Development Kit, JDK), заинтересованный читатель может получить совершенно бесплатно из домашней страницы Java: http://java.sun.com/

Язык сценариев JavaScript

При создании WWW-страниц хочется сделать их просмотр более удобным и придать им некоторые дополнительные функциональные возможности, отсутствующие в языке HTML. Наиболее часто средств стандартного HTML не хватает при создании интерактивных документов, заданным образом откликающихся на внешние события, например, действия читателя или сигналы таймера. Отвечая на потребности WWW-авторов, фирма Netscape Corporation, автор самой популярной в настоящий момент программы просмотра Netscape Navigator, разработала специальный язык программирования JavaScript, [150] поддержка которого включена в Netscape Navigator, начиная с версии 2.0. Сейчас уже можно определенно сказать, что JavaScript скоро станет стандартом, поддерживаемым подавляющим большинством программ просмотра других фирм. Действительно, уж если сверхгигант Microsoft снизошел до включения интерпретатора этого языка в свой Internet Explorer 3.0, [151] то JavaScript стоит самого пристального внимания.

JavaScript можно рассматривать как расширение HTML, - фрагменты программ на JavaScript включаются непосредственно в текст HTML-документа и интерпретируются программой просмотра при его загрузке. [152] Поскольку при помощи JavaScript HTML-документ задает программе просмотра определенную последовательность действий - сценарий (script) - этот язык называют языком сценариев (scripting language). Несмотря на сходство названий, JavaScript и Java, о котором речь шла выше, - два созданных независимыми группами разработчиков совершенно разных языка. Между ними имеется, конечно, и некоторое сходство: синтаксис выражений JavaScript похож на таковой в Java, который, в свою очередь, похож на C++, - чувствуется, что обе группы разработчиков находились под обаянием языков C и C++. В существующей на данный момент версии JavaScript предоставляет следующие основные возможности:

Для программистов, пишущих на C/C++, освоение JavaScript не представляет особого труда, тогда как не-программистов явно ожидают большие трудности, тем более что сама структура языка JavaScript как бы подталкивает на создание крайне запутанных программ-сценариев. Лучше всего, как нам представляется, изучать JavaScript на примерах, просматривая исходные тексты на HTML с включенными в них JavaScript-сценариями и выясняя, каким способом их авторами получен тот или иной эффект. [153]

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

Пример

<!-- флаг SCRIPT обозначает начало фрагмента сценария -->
<SCRIPT LANGUAGE="JavaScript">
<!--
//Две косые черты обозначают
//однострочный комментарий,
//игнорируемый интерпретатором JavaScript.
//ВНИМАНИЕ: см. ВАЖНОЕ замечание о
//комментариях на русском языке далее в тексте!
//Ниже следует определение функции,
//пересчитывающей градусы Фаренгейта
//в градусы Цельсия:
function fahr_to_cel(f)
{return (5.0/9.0)*(f-32.0);}
function show_result() {
//Получить введенную пользователем строку
//из поля ввода с именем temperature_fahr,
//принадлежащего заполняемой форме с именем
//user_input, которая находится внутри
//текущего документа (document). Заполняемая
//форма описана на HTML
//ниже, начиная с флага <FORM>.
var string_input=
document.user_input.temperature_fahr.value;
//Вычислить значение выражения, заданного
//текстовой строкой, при помощи встроенной
//функции eval.
var f=eval(string_input);
//Перевести Фаренгейты в Цельсии.
var c=fahr_to_cel(f);
//Вывести результат во всплывающем окне
//при помощи встроеной функции alert.
//Обратите внимание на автоматическое
//преобразование значений с плавающей
//точкой в строки и склеивание строк
//оператором +
alert("Temperature: " + f + " F = "
+ c + " C");
}
//-->
</SCRIPT>
</HEAD><BODY>
<b><i>Переводчик градусов Фаренгейта в градусы Цельсия</i></b>
<FORM NAME="user_input">
Введите температуру в градусах Фаренгейта и нажмите кнопку:<BR>
<INPUT TYPE="text" NAME="temperature_fahr">
<!-- при щелчке мышью на кнопке будет вызвана функция show_result,
в которую будет передана строка, введенная пользователем в поле текстового ввода -->
<INPUT TYPE="button" NAME="do_it" VALUE="Do it!" onClick="show_result()">
</FORM>

Как выглядит на дисплее

Переводчик градусов Фаренгейта в градусы Цельсия

Введите температуру в градусах Фаренгейта и нажмите кнопку:

При загрузке документа в окне программы просмотра появляется соответствующий текст, под которым расположено поле ввода [154] и кнопка, как показано на рисунке выше. Пользователь щелкает мышью на поле ввода (в Windows 3.1, NT или 95) или перемещает внутрь курсор мыши (в некоторых версиях X-Windows), вводит температуру в градусах Фаренгейта и щелкает мышью на кнопке "Do it!". Программа просмотра производит необходимые вычисления и выводит результат во всплывающем окне "Alert": [155]

Попробуйте набрать текст вышеприведенного примера, сохранить его в файле с расширением html или htm, загрузить в программу просмотра и проверить его работу. Комментарии внутри фрагментов на JavaScript, начинающиеся с двух косых черт, при наборе текста придется опустить, так как реализация JavaScript в Netscape Navigator 3.0 не допускает символов русского алфавита в комментариях и строковых литералах! [156] При проверке работы примера необходимо пользоваться программой просмотра, которая поддерживает JavaScript, предварительно убедившись в том, что интерпретатор JavaScript не отключен. [157]

По JavaScript имеется ряд учебных пособий. Неплохое введение, например, можно найти в документе Introduction to JavaScript by Stefan Koch: http://rummelplatz.uni-mannheim.de/~skoch/js/script.htm

Авторитетное справочное руководство по JavaScript, написанное самими разработчиками этого языка, доступно по адресу: http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html

Язык моделирования виртуальной реальности (VRML)

World-Wide Web, где в настоящее время почти полновластно царствует Его Величество Гипертекст, напряженно ожидает прихода на помощь гипертексту такого способа представления информации, который позволял бы передавать по Internet как бы реальные, трехмерные, осязаемые и "живые" модели окружающего нас или выдуманного нами миров. С разработкой Virtual Reality Modeling Language - языка моделирования виртуальной реальности - первый шаг в этом направлении уже сделан.

VRML - это специальный язык, предназначенный для описания трехмерных объектов. Первая версия VRML была создана фирмой Silicon Graphics, Inc. (SGI); после оживленного обсуждения, в котором приняли участие тысячи людей и многие крупные фирмы, такие как Sony Research и Mitra, недавно была выработана спецификация второй версии VRML, принятая теперь в качестве стандарта большинством разработчиков программного обеспечения для WWW.

Текстовый файл на языке VRML, [158] подобно файлу на языке HTML, интерпретируется специальной программой просмотра, выдающей на дисплей изображения описанных в файле объектов и реагирующей на действия пользователя. VRML - это сложный язык, рассказ о котором занял бы отдельную книгу. Чтобы дать некоторое первоначальное представление о VRML, приведем описание на этом языке простейших трехмерных объектов - сферы и куба. Этот пример вы можете перепечатать, записать в файл с расширением .wrl и проверить его работу при помощи одной из подходящих программ просмотра, о которых будет сказано чуть ниже.

#VRML V1.0 ascii [159]
Separator {
  DirectionalLight { #источник света
    direction 0 0 -1
  }
  Separator { #описание красной сферы
    Material { #свойства материала
        diffuseColor 1 0 0 #RGB-цвет
    }
    Transform
     { translation 3 0 1 }
    Sphere #форма
     { radius 2.3 }
  } #конец описания сферы
  Separator {  #описание голубого кубика
    Material {
        diffuseColor 0 0 1
    }
    Transform {
        translation -2.4 0.2 1
        rotation 0 1 1  0.9
    }
    Cube {}
  } #конец описания кубика
}

>>Пример VRML<< (Пример будет работать, только если у вас установлена программа просмотра с "приставкой" для VRML.)

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

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

К настоящему моменту создано довольно много программ просмотра VRML, среди которых наиболее доступными и широко используемыми являются Live3D фирмы Netscape Corporation и CosmoPlayer фирмы Silicon Graphics. Обе эти программы работают не самостоятельно, а как приставки (plug-ins) к программе просмотра Netscape Navigator, отображающие информацию в окне Navigator'а. Live3D входит в комплект вместе с Netscape Navigator 3.0 (в "расширенном" варианте - with plug-ins) и устанавливается автоматически при установке Navigator'а. [160] Установочный файл CosmoPlayer'а для IBM PC (под Windows 95 или Windows NT) или графической рабочей станции SGI можно получить из специальной страницы Silicon Graphics по адресу: http://vrml.sgi.com/moving-worlds/

Прежде чем устанавливать CosmoPlayer, установите Netscape Navigator 3.0 или старше.

Следует сказать, что операции с трехмерной графикой предъявляют весьма высокие требования к быстродействию компьютера, и даже 150-MHz Pentium, не говоря уж о 486-х машинах, оказывается недостаточно мощным для обеспечения быстрого вывода на экран и плавного перемещения изображений сложных объектов.[161] На какой-нибудь из средних моделей графических рабочих станций SGI "живая" трехмерная VRML-графика выглядит вполне реалистично; впрочем, производительность новых моделей персоналок растет так быстро, что скоро она уже не будет "узким местом" для программ просмотра VRML.

Путешествуя по WWW, вы пока еще не найдете описанных на языке VRML действительно непримитивных миров, населенных нетривиально ведущими себя "живыми" персонажами. Однако, существуют некоторые отдельные области, где VRML уже успешно применяется как весьма удобное средство передачи информации. Речь идет о тех случаях, когда трехмерные объекты легко могут быть представлены в виде комбинаций несложных геометрических фигур, а перемещения и взаимодействия объектов, составляющих сцену, носят вполне детерминированный характер. Такого рода информация представляется на VRML весьма компактно, и, кроме того, существует возможность автоматической генерации VRML-файлов соответствующим программным обеспечением. Например, некоторые программы, применяемые в квантовой химии, могут выдавать на языке VRML результаты расчетов распределения электронной плотности в атомах и молекулах. Среди "удобных" для VRML областей науки и техники можно также назвать математику, физику, проектирование механизмов и архитектуру. Соответствующие примеры вы найдете в упомянутой выше WWW-странице фирмы Silicon Graphics, посвященной VRML.

[НАЧАЛО СТРАНИЦЫ]
[ПРЕДЫДУЩАЯ СТРАНИЦА][СЛЕДУЮЩАЯ СТРАНИЦА]
[ОГЛАВЛЕНИЕ][ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ]

Просьба присылать замечания и предложения по адресу: www@chemnet.chem.msu.su. Последние изменения внесены: 15 Июль, 1997

(C) D.N. Rassokhin, A.I. Lebedev