This page is an archived copy on Gagin.ru personal site




АрхивРеклама в журналеКнига отзывов
ПодпискаВыходные данныеОбратная связь






Живой HTML


Дмитрий КИРСАНОВ
www.symbol.ru/dk/

Даты выпуска новых программных продуктов всегда были естественными вехами компьютерной истории. Поэтому начало последнего этапа войны между Netscape и Microsoft правильнее всего датировать концом декабря 1996 года, когда корпорация Netscape явила миру первую "предварительную" ("preview") версию своего Коммуникатора. Начиная с этого момента над полем битвы стоит неумолчная канонада: каждый месяц конкуренты выстреливают друг в друга очередной preview-версией, маневрируя в попытках нащупать слабые места противника и спешно подтягивая обозы с технической документацией. Только в июне этого года Netscape, собравшись с силами, объявила об окончательной готовности своего продукта. Теперь остается лишь дождаться ответа Microsoft, который, цитируя официальные заверения компании, "is just around the corner" (за углом).

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

Страницы истории
Стремлению сделать веб-страницу динамичной и интерактивной столько же лет, сколько и самому WWW. Первая версия языка HTML не могла даже создавать бланки (формы) с заполняемыми полями и кнопками. Версия HTML 2.0, в которой уже были теги <FORM> и <INPUT>, приобрела тем самым известную долю интерактивности, но осталась столь же статичной. Даже самый слабенький компьютер вполне в состоянии представить текст и графику на своем экране гораздо живее, динамичнее и разнообразнее, чем это позволяет сделать чистый HTML. Собственно говоря, гипертекстовые ссылки и заполняемые бланки - до сих пор единственное принципиальное отличие HTML-документов от бумажных страниц.

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

Вот почему одновременно с поддержкой языка Java разработчики Netscape встроили в свой броузер еще один язык, более простой и гораздо теснее связанный с HTML, - язык сценариев JavaScript. Этот язык по своей роли близок к макроязыкам, которые с давних пор встраиваются в любую достаточно сложную программу. JavaScript-сценарий не замыкается в изолированном "апплете", а свободно переплетается и взаимодействует с HTML-разметкой страницы. Первая версия JavaScript уже позволяла, среди прочего, открывать и закрывать окна броузера, загружать в них документы, управлять фреймами и взаимодействовать с полями бланков.

Развиваясь, JavaScript открывал сценариям доступ ко все большему количеству элементов страницы. С его помощью стали возможны такие трюки, как, например, плавное изменение цвета фона при загрузке страницы (www.webreference.com/javascript/960513/fade.html) или "живые" меню, каждый пункт которых изменяется, когда над ним проводишь мышью (www.webreference.com/javascript/960930/index.html). Пожалуй, именно эти примеры ближе всего к тому, что сейчас называется "динамическим HTML". Противопоставив языку Java свою технологию ActiveX, корпорация Microsoft не оставила без ответа и JavaScript; броузер Internet Explorer поддерживает сейчас целых два языка сценариев - JScript (аналог JavaScript) и VBScript (родственный языку Visual Basic).

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

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

Три источника и три составные части
Основную идею динамического HTML можно сформулировать очень просто: полный контроль языка сценариев над всеми без исключения элементами документа, параметрами их оформления и размещения (как подразумеваемыми в HTML, так и задаваемыми с помощью CSS) и даже над самим текстом страницы. Благодаря этому любой элемент HTML-документа сможет двигаться в произвольном направлении, как угодно изменять свое форматирование и буквально переписываться - как в ответ на действия пользователя, так и по собственной инициативе.

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

1. Первой идет подсистема абсолютного позиционирования (absolute positioning) элементов. Это расширение языка CSS позволяет располагать любой объект (фрагмент текста, изображение и т.п.) в произвольной точке плоскости страницы, в том числе с наложением объектов друг на друга (и с указанием, какой должен лежать снизу, а какой - сверху). Само абсолютное позиционирование не содержит в себе ничего особенно динамического, но без него было бы невозможно реализовать многие из самых впечатляющих визуальных эффектов динамического HTML.

Эта составляющая новой технологии - единственная, реализованная более или менее совместимым образом в двух броузерах. Причина проста: из всего репертуара динамического HTML пока что только система абсолютного позиционирования стандартизована Консорциумом W3C (www.w3.org/pub/WWW/TR/WD-positioning). И хотя качество и полнота реализации этого стандарта оставляют желать лучшего (особенно у броузера Netscape, который в версии 3.0 вообще не имел поддержки CSS), эту технологию уже можно применять, не боясь ограничить свою аудиторию пользователями лишь одного из броузеров-конкурентов.

рис.2

www.daily.umn.edu/~rebholz/N4/ex1.html

Из-за несоблюдения разработчиками Netscape рекомендаций W3C автору этой демо-страницы страницы пришлось создать для прукрутки текста кнопки "Read More" и "Go Back" вместо напрашивающейся полосы прокрутки с движком - увы абсолютно недоступной для объектов с абсолютным позиционированием в Netscape Communicator (как, впрочем, и в Internet Explorer)

К сожалению, вместо того чтобы поточнее соблюдать требования стандарта W3C, фирма Netscape сочла более важным застолбить новую территорию с помощью очередного нестандартного тега. Тег <LAYER>, появившийся в Netscape Communicator 4.0, хотя и предоставляет ровно те же возможности, что и абсолютное позиционирование средствами CSS, рекламируется фирмой намного активнее (так, вместо термина "absolute positioning" в документации Netscape гораздо чаще употребляется "layers" или "layer technology"). Хотя до сих пор смелое теготворчество давало Netscape известное преимущество в конкурентной борьбе, я сильно сомневаюсь, что кто-то станет пользоваться тегом <LAYER> при наличии полноценной альтернативы, предложенной Консорциумом W3C (рис. 2).

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

Разница в подходах, как всегда, отражается в терминологии. Netscape, расширив JavaScript новыми объектами и сравнительно развитыми средствами работы с событиями ("events"), присвоила новой версии номер 1.2, а средства доступа из JavaScript к стилевым спецификациям вынесла в отдельный модуль, называемый "JavaScript Accessible Style Sheets" (JASS). Microsoft же, не замыкаясь ни на каком-то конкретном языке сценариев (которых у него два), ни на стилевых спецификациях (без которых динамический HTML, строго говоря, может и обойтись), называет ядро своей технологии "объектной моделью документа" ("Document Object Model", DOM). К сожалению, Консорциум W3C еще не успел подготовить в этой области ничего, кроме списка достаточно общих требований (www.w3.org/pub/WWW/MarkUp/DOM/), которым удовлетворяет лишь объектная модель Microsoft.

Пожалуй, впервые за всю историю конкурентной борьбы двух фирм объективный наблюдатель может без натяжек и оговорок признать, что одна из них далеко превзошла другую в полноте, элегантности и даже законности (с точки зрения W3C) реализации одной и той же идеи. Объектная модель Microsoft обеспечивает значительно более богатые и гибкие средства контроля над элементами документа и их атрибутами. Вот основные преимущества Microsoft DOM в сравнении с JavaScript 1.2 и JASS:

  • В объектной модели Microsoft любому элементу документа соответствует объект, доступный из сценария, и любой объект способен реагировать на некий минимум стандартных событий (например, щелчок мыши). У Netscape количество объектов и связанных с ними событий значительно меньше.

  • DOM позволяет изменять любые атрибуты элементов в любой момент времени, и броузер при этом отслеживает взаимозависимости элементов (например, если сценарий изменил размеры изображения, текст, обтекающий это изображение, будет автоматически переверстан). JASS, напротив, позволяет устанавливать большинство атрибутов только в момент загрузки страницы, теряя тем самым большую часть своей "динамичности" (исключение - объекты с абсолютными координатами; как видно из примера ниже, их положением можно управлять и после загрузки страницы).

  • В DOM события могут "всплывать" ("bubble") по иерархии элементов. Например, если для изображения не предусмотрено никакой реакции на щелчок мыши, это событие будет передано выше по иерархии тому элементу, частью которого является данное изображение (например, гипертекстовой ссылке или абзацу). В JavaScript вместо всплывания реализована менее удобная техника "перехвата событий" ("event capturing").

3. Наконец, третья группа объединяет несколько разнородных нововведений, имеющих лишь косвенное отношение к собственно динамическому HTML. У Netscape к этой группе относится поддержка "динамических шрифтов" ("dynamic fonts"). Это новшество основано на технологии TrueDoc компании BitStream (www.bitstream.com/world/) и позволяет ссылаться из HTML-документа на файл шрифта в формате TrueDoc (с расширением .prf). Указав URL-адрес файла шрифта, автор может пользоваться этим шрифтом для оформления текста на странице; броузер же, встретив ссылку на шрифт, поступит с ним так же, как поступает с файлами изображений - загрузит из сети и положит в свой кэш для использования на этой и последующих страницах.

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

Со стороны Microsoft основным дополнением к динамическому HTML служит система "связи с данными" ("data binding"). Встроив в свой документ особый управляющий элемент ActiveX, называемый "источником данных" ("data source control"), вы сможете генерировать и изменять текст HTML-таблиц на вашей странице на основе информации из какой-либо базы данных, доступной через сеть (например, реализующей протокол SQL). Взаимодействие с базой данных берет на себя компонент ActiveX, а HTML-код вашей страницы (в сотрудничестве с языком сценариев) позволяет реализовать, к примеру, сортировку и фильтрацию таблиц без обращения к базе данных, динамическое обновление таблиц, а также перенос информации из таблицы в текст или поля бланков.

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

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

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

Страница, загруженная в броузер (online-версию примера вы найдете по адресу: www.symbol.ru/dk/dyn_demo.html), показывает исходный текст нашего примера и одновременно служит полем, по которому движется динамический объект - изображение шарика. Вылетая сразу после загрузки страницы из левого верхнего угла по диагонали вниз, шарик безостановочно движется, отражаясь от краев окна, как от бортов бильярдного стола.

Код примера распадается на три части, написанные на разных языках программирования. Первой идет CSS-спецификация объекта-шарика, расположенная либо внутри тега <STYLE>, либо прямо в теге <IMG> с помощью атрибута STYLE. (На самом деле страница содержит еще один объект - текст листинга, но в самом листинге он, разумеется, не показан во избежание дурной бесконечности.) С помощью CSS для шара указаны: тип размещения - абсолютное (при этом координаты объекта отсчитываются от левого верхнего угла элемента-родителя, в нашем случае - от левого верхнего угла окна), начальные координаты (0, 0) и так называемый z-индекс - число, определяющее видимость объекта при наложении (объекты с большим z-индексом располагаются поверх тех, у которых z-индекс меньше). Здесь z-индекс используется для того, чтобы шар катался под текстом страницы, не заслоняя его.

Функции собственно HTML сводятся в этом примере к созданию самого объекта-изображения с помощью тега <IMG>. Основная же роль принадлежит JavaScript-сценарию, который и приводит шарик в движение. Функция move_it сдвигает его на некую величину, изменяя значение CSS-свойств left и top соответствующего объекта, проверяет, не дошел ли шарик до края окна, и в заключение рекурсивно вызывает саму себя с помощью функции setTimeout. Достаточно вызвать эту функцию первый раз, чтобы шар начал летать по окну броузера.

Как видите, между версиями примера для двух броузеров немало различий. В JScript фирмы Microsoft нет аналога window.innerWidth и .innerHeight (введенных Netscape в JavaScript 1.2), поэтому для определения размеров окна приходится создавать при помощи тега <DIV> пустой объект, указав для него width=100% и height=100%, а затем "измерять" из сценария получившиеся габариты в пикселах. Для доступа к объектам с абсолютным позиционированием в Netscape применяется специальный массив document.layers; у Microsoft же можно пользоваться стандартным средством - "коллекцией" ("collection") document.all, отражающей в виде объектов и их свойств все теги документа и их атрибуты.

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

Что ж - правило рынка, по которому "конкуренция выгодна потребителю", должно, как и любое правило, иметь свои исключения...

Больше о Dynamic HTML можно прочитать по адресу: www.webreference.com/dhtml/



Ваше имя:   E-mail:
Как вам материал?
Хороший   Так себе   Плохой
А длина?
В самый раз   Перебор   Слишком мало  
Ваше мнение:


АрхивСледующий материалКнига отзывов
К оглавлениюПредыдущий материалОбратная связь

Журнал "Интернет". Регистрационное свидетельство Госкомпечати РФ N. 016370 от 16.07.1997 г. Распространяется через сети розничной торговли, через компьютерные сети, а также путем подписки. Мнение редакции по тем или иным вопросам может не всегда совпадать с мнениями авторов. Редакция не несет ответственности за содержание рекламных материалов. Перепечтка или копирование запрещены, при цитировании ссылка на журнал "Интернет" обязательна.
Copyright © 1997 Журнал "Internet"
Copyright © 1997 Netskate
E-mail: imag@netskate.ru
Телефон: 245-45-84