Ж у р н а л   о   к о м п ь ю т е р н ы х   с е т я х   и   т е л е к о м м у н и к а ц и о н н ы х   т е х н о л о г и я х
СЕТИ И СИСТЕМЫ СВЯЗИ on-line
  ПОИСК: ПОДПИСКА НА НОВОСТИ: НОМЕР:
    ДОМОЙ • Архив: Новостей | Конференций | НомеровПодписка
 
   
 
   
    
РЕДАКЦИЯ
 
Все о журнале
Подписка
Как проехать
Где купить
Отдел рекламы
График выхода журнала
Адреса в Интернет

РУБРИКАТОР
   
• Инфраструктура
• Информационные
   системы

• Сети связи
• Защита данных
• Кабельные системы
• Бизнес
• Колонка редактора
• Электронная
   коммерция

• Только на сервере
• Системы
   учрежденческой
   связи

• Новые продукты


Rambler's Top100

  

Технология Dynamic HTML: "раздвоение личности"

Томас Пауэлл

В последних версиях своих браузеров Internet Explorer 4.0 и Communicator 4.0 фирмы Microsoft и Netscape предлагают поддержку языка Dynamic HTML (DHTML), который расширит возможности Web-дизайнеров в области интерактивности и анимации. Однако до окончательного варианта DHTML еще далеко, поскольку и Microsoft и Netscape избрали различные подходы к его разработке.

Справедливо будет сказать, что даже при всей этой неопределенности время данной технологии уже пришло. Годами Web-мастера боролись с ограничениями, накладываемыми языком HTML на описание шрифтов, свойств, расположения и возможностей Web-страниц. Так как в синтаксисе HTML определенный уровень точности во многом недостижим (это касается, например, возможности абсолютного позиционирования таблиц или изображений), то создание усложненных Web-страниц приобрело черты своего рода "черной магии". Часто проблемы дизайна разрешались обращением к нестандартным элементам HTML, которые были введены в него поставщиками браузеров.

Совсем недавно HTML-страницы были статичными. Большинство технологий, применяемых для добавления к Web-страницам динамических элементов (CGI-программы, мини-приложения на языке Java, модули расширения для браузеров, управляющие элементы ActiveX и языки сценариев), не являются частью HTML. Многие дизайнеры Web-страниц просто не умеют ими пользоваться. Наиболее существенными среди появившихся в последнее время Web-технологий для клиентской части стали каскадные таблицы стилей первого уровня (Cascading Style Sheets - CSS1) и языки сценариев, подобные JavaScript. Их сочетание поможет решить множество проблем, возникающих при использовании языка HTML в рамках DHTML.

Что такое DHTML?

Технология DHTML - это не просто новые элементы или атрибуты HTML, "оживляющие" Web-страницы. Она расширяет возможности существующего набора HTML-элементов и некоторых других вещей, таких, как таблицы стилей (style sheets), разрешая доступ к ним и модификацию при помощи сценариев JavaScript и др. Последние могут определить какое-то действие, например изменение вида страницы при наступлении некоего события, что вносит новую динамику в процессе развития определенного действия на странице.

Каждый Web-документ состоит из различных элементов, доступ к которым осуществляется через его объектную модель - Document Object Model (DOM). Эта модель описывает документ как набор индивидуальных объектов: элементов заголовков, параграфов, таблиц, изображений и т. д. Каждый объект может иметь некоторые свойства, обычно в форме атрибутов HTML. В частности, элемент параграфа имеет атрибут выравнивания, принимающий различные значения - "слева", "справа" или "по центру". В объектной модели этот атрибут называется свойством объекта. Также возможна связь объекта с определенными воздействующими на него методами и событиями. Так, элемент изображения способен распознавать событие "onmouseover" - помещение пользователем курсора мыши на изображение, а элемент формы может быть связан с методом "submit", который используется для передачи заполненной формы выполняющейся на сервере CGI-программе.

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

Если вы хорошо знакомы с JavaScript, то, может быть, многое из вышеперечисленного не ново для вас, а известно с момента появления браузера Navigator 2.0, хотя и в более ограниченном варианте. Начиная с Navigator 2.0, JavaScript предоставляет объектную модель для обеспечения доступа ко многим частям Web-страницы, включая анкеры, элементы форм и изображений. Однако технология DHTML "продвинула" эту идею намного дальше. Она позволяет "работать" непосредственно с текстом, элементами и сценариями, а также выбирать тот или иной стиль прямо из HTML-страницы, модифицируя всю ее целиком.

Центральным компонентом DHTML является DOM. Согласно определению World Wide Web Consortium (W3C) (www.w3.org/pub/WWW/MarkUp/DOM/), DOM представляет собой "нейтральный по отношению к платформе и языку интерфейс, который обеспечивает динамическое обновление содержания, структур и стиля документов". Комитет по стандартам Web уже создал предварительную версию документа, где функции DOM детализируются; ведется работа по созданию базового стандарта для документации объектной модели, уже используемой в браузерах Navigator 3.0 и Internet Explorer 3.0.

Определение DHTML как объектной модели не совсем то, что подразумевается под ней в коммерческой сфере, где в эту технологию часто включают таблицы стилей, абсолютное позиционирование в форме расширений к ним или новые элементы, наподобие <LAYER>, эффекты мультимедиа, средства доступа к базам данных, изменяемые шрифты и все остальное, что помогает сделать Web-страницу динамической. Вот где возникает путаница с DHTML. Фирмы Netscape и Microsoft имеют в основном одинаковое представление о DOM, и обе работают совместно с консорциумом W3C над стандартом. Однако дело продвигается медленно. По сообщению наблюдателей из W3C, возможно, потребуется не меньше года, чтобы версии DHTML, которые "доводят до ума" Netscape и Microsoft, слились наконец в единый стандарт. Если говорить о конкретных деталях, то технологии DHTML двух ведущих производителей Web-браузеров часто очень отличаются друг от друга и такая ситуация может сохраняться некоторое время.

Технология DHTML фирмы Microsoft

Вариант технологии DHTML фирмы Microsoft, реализованный в версии Internet Explorer 4.0 для Windows 95 или Windows NT, возможно, более всего соответствует идеям, заложенным в документе консорциума W3C, в котором сформулированы требования к модели DOM. Microsoft полностью поддерживает открытую объектную модель, обеспечивающую доступ ко всем элементам страницы (модель Netscape поддерживает только часть их). Более того, реализация DHTML в браузере IE 4.0 обеспечивает немедленное обновление содержания, позиционирования и стиля без перезагрузки страницы. При этом после загрузки страницы можно изменять не только размер текста, но и его расположение.

Способ доступа и модифицирование элементов не зависят от языка сценария - их одинаково хорошо осуществляют и VBScript и JavaScript. Фирма Microsoft также поддерживает модель событий, позволяющую работать с множеством других событий, кроме нажатия кнопки мыши. Microsoft усовершенствовала DHTML настолько, насколько DOM позволяет сделать это. Хотите на вашей странице создать кнопку, которая могла бы заменить, например, во всех текстах шрифт bold на italic? Нет проблем!

Вместе с тем разработка Microsoft выходит за границы полностью открытой и управляемой объектной модели. С появлением браузера IE 3.0 создание каскадных таблиц стилей (cascading style sheets) стало приоритетным направлением в стратегии фирмы Microsoft. С браузером IE 4.0 фирма "пошла" еще дальше, обеспечив с его помощью CSS1-позиционирование, т. е. абсолютное позиционирование в таблицах стилей, которое позволяет автору Web-страницы размещать ту или иную ее часть на экране с точностью до пиксела. Абсолютное позиционирование на экране означает не только расположение объекта в точке с координатами X и Y на экране браузера. Используя его, можно размещать объекты один поверх другого и при этом делать их прозрачными. Такое расположение объектов - "стопкой", похожей на слои Photoshop, - открывает новый способ оформления Web-страниц. Как часть объектной модели, стилевые таблицы, включая CSS1-позиционирование, могут быть доступны из сценариев. Это позволяет перемещать изображение по экрану или получать разнообразные эффекты с помощью технологии DHTML. На рис. 1 приведен пример техники использования кода, в котором версия DHTML фирмы Microsoft используется для создания кнопок прокрутки экрана и динамического изменения отображенных данных.

Поскольку многие Web-дизайнеры хотели бы иметь более богатые возможности для представления своей страницы на Web-узле, компания Microsoft включила в число стандартных компонентов браузера IE 4.0 набор мультимедийных управляющих элементов ActiveX. Это микшер для воспроизведения аудиофайлов формата wav, элемент для управления движущимися объектами, генераторы сложных последовательностей действий нескольких элементов, графические элементы для выполнения простых анимаций, структурированный графический управляющий элемент для создания векторных графических изображений, управляющий элемент для перехода от страницы к странице или от объекта к объекту путем плавного "выцветания" первого и такого же плавного появления другого (как в кино) и визуальный фильтр, "снабжающий" определенными спецэффектами тексты или изображения. Все это может быть использовано для добавления эффектов мультимедиа к Web-странице, причем без длительного ожидания загрузки страницы из сети. Однако управляющие элементы ActiveX вряд ли будут приняты Netscape, и их не следует рассматривать как базисные части технологии DHTML фирмы Microsoft.

Следующим и последним рассматриваемым нами аспектом реализации DHTML фирмой Microsoft является привязка данных (data binding), которая дает авторам Web-страниц возможность легко осуществлять доступ к базам данных при помощи управляющих элементов ActiveX или мини-приложений Java. Используя расширение к HTML-элементу <TABLE> и два элемента ActiveX, поставляющиеся вместе с браузером IE 4.0: TDC (Tabular Data Control - управление табличными данными) и ADC (Advanced Data Control - расширенное управление данными), - можно формировать запросы к БД из Web-страницы без программирования или дополнительного серверного промежуточного ПО, подобного Cold Fusion корпорации Allaire (www.allaire.com). Посредством TDC данные из текстового файла сразу же выводятся на экран как в виде таблицы, так и построчно. Почти каждая СУБД способна делать это, разделяя их знаком табуляции или запятой, что позволяет быстро просматривать содержимое БД. Элемент ADC обладает еще большими возможностями, т. е. извлекает данные из MS SQL Server или других баз данных, совместимых с технологией Open Database Connectivity (ODBC), при помощи стандартных SQL-запросов, а также производит их обновление. Microsoft обеспечивает доступ к БД посредством языка Java, применяя технологию JDBC (Java Database Connectivity). Кроме простого доступа браузера к БД, все эти формы связи с данными обеспечивают ему способность фильтровать или сортировать данные во время выполнения запроса без повторных обращений к серверу за дополнительной информацией.

Используя элементы ActiveX для управления размещением содержимого на странице подобно позиционированию при помощи таблиц стилей и открыв полный доступ к объектной модели браузера посредством сценариев, фирма Microsoft создала очень привлекательную технологию. Возможно, единственным слабым местом в варианте DHTML, использованном в предварительной версии IE 4.0, является отсутствие кроссплатформенности. Как обещает Microsoft, все браузеры IE 4.0, включая версии для Macintosh и Unix, будут поддерживать DHTML. Посмотрим. Между тем кроссплатформенная поддержка - это весьма существенная часть стратегии Netscape.

Технология DHTML фирмы Netscape

Подход Netscape очень похож на подход Microsoft. Основой его реализации является модель DOM, доступ к которой осуществляется с помощью языка JavaScript версии 1.2. Несмотря на то что в ПО Communicator 4.0 "открыта" большая часть объектной модели, чем в предыдущих версиях, полностью она еще недоступна. Разработчикам дан доступ только к некоторым элементам Web-страницы, таким, как формы, фреймы, модули расширения, изображения, связи, окна, слои и таблицы стилей. Этого с избытком хватает для решения многих задач, но далеко не все на странице изменяется. Реально после загрузки содержание страницы оказывается довольно статичным. Хотя объекты на ней можно перемещать, а изображения - вставлять и убирать, динамически "переписать" часть текста невозможно.

При просмотре DHTML-демонстраций фирмы Netscape последнее утверждение может показаться ошибочным, но здесь не обошлось без некоторого лукавства со стороны фирмы. Обычно различные динамические элементы страницы определяются заранее, а затем, при необходимости, открываются или передвигаются, в частности после нажатия кнопки - разница достаточно условная. Тем не менее решение Netscape не является полностью динамическим: невозможно простым нажатием кнопки выбрать, например, все элементы с атрибутом bold и преобразовать их в italic, необходимо оба варианта подготовить заранее.

На рис. 2 дан пример техники использования DHTML-кода фирмы Netscape. Заметьте, что в этом случае можно обеспечить (хотя и несколько более сложными способами) такую же функциональность, какая достигнута при реализации подхода фирмы Microsoft. Мы были вынуждены использовать ссылки для прокрутки изображения, так как элемент <DIV> у Netscape не поддерживает события "onmouseover". В реальной ситуации текст, вероятно, будет представлять собой главным образом ссылки, а это означает, что решение DHTML фирмы Netscape нельзя рассматривать как общее.

Кроме обеспечения базовой объектной модели, в подходе Netscape предусмотрены средства для позиционирования. Первоначально многие функции для позиционирования, доступные в Communicator 4.0, работали на базе фирменного элемента <LAYER>. Теперь компания ввела позиционирование посредством каскадных таблиц стилей. Communicator 4.0 поддерживает обычные спецификации CSS1 и таблицы стилей с доступом из JavaScript (JavaScript Accessible Style Sheets - JASS). Название может ввести в заблуждение, так как эту технологию надлежит использовать вовсе не для определения атрибутов стиля из JavaScript-программ, а для доступа к ним. В соответствии с подходом Netscape таблицы стилей следует определять по стандарту CSS1 и затем, при необходимости, оперировать ими с помощью языка JavaScript. Таким образом, средства CSS1 и средства позиционирования одинаковы в обеих версиях DHTML. Страницы, созданные по этой технологии, будут "вести себя" одинаково в каждом из браузеров. Поскольку Internet Explorer не поддерживает элемент <LAYER>, его, возможно, фирма исключит из своего варианта DHTML; большинство его функций можно выполнить, сочетая элемент <DIV> с таблицами стилей и позиционированием.

Помимо абсолютного позиционирования с применением таблиц стилей или слоев и усовершенствованной модели DOM, Netscape также включила в реализацию своего подхода динамические шрифты. Работая с Communicator 4.0, вы можете динамически вставлять шрифты в документ и посылать их вместе с ним. Раньше, чтобы воспользоваться предварительно установленным шрифтом, вам пришлось бы прибегнуть к элементу <FONT FACE=>. При динамическом подходе становятся доступными и неустановленные шрифты. Процесс добавления динамического шрифта к странице очень прост - это можно сделать посредством элемента <LINK> или модификации CSS1.

Технологию динамических шрифтов фирмы Netscape, как и мультимедийные управляющие элементы фирмы Microsoft, по-видимому, не следует рассматривать в качестве части ядра DHTML. Возможно, для широкого внедрения она слишком "фирменная". Реализация технологии DHTML фирмы Netscape обеспечивает много полезных функций, особенно для позиционирования и перемещения элементов по странице. Решение, предложенное Netscape, не является таким общим, как решение Microsoft, хотя может оказаться вполне подходящим для многих разработчиков. В его пользу говорят следующие факты: браузер Netscape все еще пользуется успехом у большинства пользователей, а технология DHTML фирмы Netscape уже реализована на многих платформах. Вопрос состоит лишь в том, смогут ли эти две технологии "сосуществовать" вместе или разработчику придется делать свой выбор.

Попробуем сложить все вместе

Если не брать во внимание различные дополнительные возможности, то основные идеи Microsoft и Netscape по реализации проекта DHTML имеют много общего. Усовершенствованные форматы с поддержкой CSS1 и абсолютным позиционированием можно "заставить" работать с каждым браузером. К несчастью, сходство заканчивается, когда речь заходит об объектной модели и о сценариях. У Netscape и Microsoft одни и те же вещи называются по-разному, поэтому для использования динамической страницы в обоих браузерах, возможно, потребуются написание довольно сложного кода, учитывающего тип браузера, и выполнение различных фрагментов этого кода в каждом отдельном случае. Может быть, это и не самый изящный способ работы, тем не менее он позволяет достичь цели. В конце концов обе реализации, конечно, сблизятся и основные функции DHTML будут стандартизованы, но поскольку W3C медлит с этим, то в обозримом будущем, вероятно, существование своей версии DHTML для каждого браузера.

"Скрещивая" HTML с языками сценариев, DHTML-технология облегчает разработчикам создание усложненных интерактивных страниц. Однако за мощь DHTML им приходится расплачиваться. Создание страниц на основе DHTML включает в себя программирование и использование динамических элементов, т. е., по сути дела, при этом происходит переход от парадигмы статических страниц к идее Web-страниц как программ.

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

Можно ожидать, что скоро на Web появятся страницы, созданные на основе DHTML, но не следует сильно радоваться этому заранее, так как данные страницы зависят, в частности, от языка сценариев. И, поскольку только для одного языка JavaScript существует несколько версий, будет нелегко "заставить" DHTML работать на всех платформах, даже используя исключительно все версии браузеров Netscape. Возможно, кроссплатформенность легче обеспечить с помощью других технологий?





  
12 '1997
СОДЕРЖАНИЕ

колонка редактора

• Старая песня о главном

локальные сети

• Средства кластеризации серверов Windows NT

• Главный недостаток Windows NT в России, или Почему я за архитектуру клиент—сервер

• Серверы NetWare в зеркальном отражении

• ЭМС и Европейская Директива

• Оценка эффективности работы персонала

• Novell Education: кузница сетевых инженеров

корпоративные сети

• Службы LANE — мост в XXI век?

• Новейшая история транзакционных технологий

• Внезапные потери связи

• Новейшие Интернет-технологии от Novell

услуги сетей связи

• Телефонные станции для быстро растущих и крупных предприятий

• CDMA — россиянам

• О пригодности телефонных каналов для передачи данных

• Тарификационные системы для учрежденческих АТС

• Маршрутизаторы ISDN со встроенными концентраторами

интернет и интрасети

• Распределение нагрузки Web-сервера

• Естественная эволюция индустрии Интернет

• Игры в Интернет

защита данных

• Управление ИБП

новые продукты

• Network Exchange 2550 фирмы Netrix

только на сервере

• Технология Dynamic HTML: "раздвоение личности"

• Тестируем АТМ-адаптеры



 Copyright © 1997-2007 ООО "Сети и Системы Связи". Тел. (495) 234-53-21. Факс (495) 974-7110. вверх