Что такое динамический html какие технологии он использует
Национальная библиотека им. Н. Э. Баумана
Bauman National Library
Персональные инструменты
Dynamic HTML
 | |
| Семейство | HTML |
|---|---|
| Первый появившийся | 1997 |
| Язык физической реализации | HTML |
| Платформа | web-браузеры Microsoft и Netscape |
| OS | Windows, MAC |
| Формат файлов | .dhtml |
Динамическая веб-страница представляет собой широкую концепцию, которая может охватывать любую веб-страницу, сгенерированную персонально для каждого пользователя, вхождение загрузки или конкретных значений переменных. Эта концепция включает в себя страницы, созданные с помощью скриптов на стороне клиента и страницы, созданные с помощью скриптов на стороне сервера (PHP, Perl, JSP или ASP.NET), где веб сервер генерирует контент перед отправкой его клиенту.
DHTML отличается от Ajax тем, что DHTML основана на запросах и перегрузках. При использовании DHTML может вовсе отсутствовать взаимодействие между клиентом и сервером после загрузки страницы, так как вся обработка происходит в JavaScript на стороне клиента. Страница Ajax использует функции DHTML для инициации запроса (либо подзапроса) к серверу для выполнения дополнительных действий. Например, если на странице имеется несколько вкладок, DHTML будет подгружать содержимое всех вкладок и динамически отображать только ту, которую необходимо отобразить в данный момент. В то время как Ajax подгружает каждую из вкладок только тогда, когда это необходимо.
Содержание
Использование
DHTML позволяет авторам добавлять на страницы эффекты, которые трудно достичь с помощью объектной модели документа или каскадной таблицы стилей. Например, с помощью использования сочетания HTML, CSS и JavaScript возможно осуществить:
Структура веб-страницы
Пример настройки страницы на DHTML.
Отличия DHTML от HTML
Несмотря на то, что по своей сути DHTML является ответвлением семейства HTML, а в настоящее время он был заменен HTML5, который обладает тем же и большим функционалом, между HTML и непосредственно DHTML существует ряд значительных различий. [Источник 2]
Среди этих различий выделяют:
Объектная модель документа
Кроме того, DOM обеспечивает доступ к действиям пользователя, например, таким, как нажатие клавиши или щелчок мыши. Можно перехватывать и обрабатывать подобные события, создавая функции и процедуры обработчика событий. Обработчик событий, в свою очередь, будет получать управление каждый раз, когда происходит заданное событие и будет выполнять любые соответствующие действия, включая использование DOM для изменения документа.
Каскадные таблицы стилей
Динамические возможности DHTML
Возможности DHTML позволяют создавать полностью интерактивные сайты. Это полезно в практических целях. Например, на сайтах интернет-магазинов с помощью DHTML пользователь может выбирать товары, задавать вопросы и получать ответы, созвать заявки и оформлять заказы. И все это осуществляется при помощи запрограммированных на определенное реагирование скриптов.
С помощью DHTML можно создавать сайты-презентации, слайд-шоу, проводить рекламные промоакции, развлекать и увлекать потенциальных клиентов. Разумеется, DHTML придумывали не для игр, а именно для решения практических коммерческих задач, для которых в обычном сайте требовалось наличии живого менеджера для ответов на вопросы посетителей.
Однако DHTML сегодня уже прошлый век. В настоящее время для создания динамических сайтов реализуется новая версия HTML 5. Этот инновационный язык гипертекста представляет собой своего рода компиляцию наработок всех предыдущих версий HTML.
Сайты на основе HTML 5 одинаково выглядят как на стационарных, так и на мобильных компьютерах. А также и на любых операционных системах.
Для HTML 5 даже не предусмотрено использование Flash-плейера для просмотра видео. Все реализовано за счет тегов HTML 5. [Источник 3]
DHTML
DHTML (динамический HTML) – это набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера. Другими словами, определенные действия посетителя ведут к изменениям внешнего вида и содержания страницы без обращения к серверу.
DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тегов и атрибутов, а просто обеспечивает возможность программного управления всеми тегами, атрибутами и каскадными листами стилей (CSS).
События динамичеcкого HTML
На WEB-страницах можно обеспечить реакцию на определенные действия посетителя или изменения состояния документа или окна, которые вызывают определенные события.
Посетитель генерирует события при передвижении мыши, нажатии кнопок мыши и клавиатуры. Изменения состояния документа генерируют события при загрузке документа, изображений или объектов, при появлении ошибки на странице или переходе фокуса от одного элемента к другому.
Модель событий DHTML связана с определенной иерархией HTML-контейнеров и основана на всплывании событий и действии по умолчанию.
Всплывание событий заключается в том, что на событие может быть получена реакция не только от элемента-источника события, но также и от всех его родительских элементов вплоть до тела документа и самого документа. Событие может быть обработано на любом уровне. В приведенном ниже примере обработчик щелчков мышью на ссылке будет также обрабатывать щелчки мышью на изображении.
Пример 1
Всплывание события
Для получения информации можно щелкнуть мышкой как на изображении, так и на тексте:
Связывание событий
Установление связи между определенным событием и сценарием называется связыванием событий. События можно связать с помощью специальных атрибутов любого элемента или с помощью тега script.
Связывание событий с атрибутами удобно, но требует расширения языка HTML каждый раз при изобретении нового события. А так как HTML развивается медленно, данный подход используется только для небольшого набора встроенных событий. Как атрибуты любого элемента в DHTML представлены события мыши и клавиатуры.
Пример 2
Смена графического объекта
Для смены графического объекта переместите на него мышку – Иоганн Себастьян Бах сменит Людвига ван Бетховена.
Уведите с него мышку – Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
Пример 3
Изменение вида данного элемента
Для изменения цвета и шрифта данного текста нажимайте и отпускайте кнопку мыши
Обратите внимание на то, что в примере 2 область действия обработчика события определена с помощью идентификатора B_B, а в примере 3 – с помощью указателя this.
Применение script является более общим механизмом связывания события со сценарием. Все события представлены как свойства в DOM. Используя это, перепишем наш пример в таком виде:
Пример 4
Можно также использовать метод addEventListener():
Пример 5
События мыши
События клавиатуры
Событие прокручивания
События фокуса
Пример 6
События формы
Пример 7
OnReset Возникает после щелчка на кнопке Reset. Назначение – вывод предупреждения о сбросе.
События документа
Пример 8
OnUnload Возникает при выгрузке страницы. Используется для освобождения каких-либо ресурсов и вывода дополнительных сообщений. OnAbort Возникает при срыве загрузки графического объекта. OnError Возникает лишь при неудачной загрузке графического элемента или всей WEB-страницы. Все остальные ошибки это событие не отлавливает. Если в примере 9 файл m.gif не будет найден, то на экране появится предусмотренное сообщение.
Пример 9
Событие помощи
Объект event
Для получения информации о событии служит объект event.
Свойства объекта event
Пример 10
type Определение события. Имя события возвращается в нижнем регистре без префикса on.
Пример 11
Пример 12
altKey Состояние клавиши (true/false). ctrlKey Состояние клавиши (true/false). shiftKey Состояние клавиши (true/false). keyCode ASCII-код нажатой клавиши.
Динамическое содержание
Содержание HTML-документа можно менять после загрузки страницы.
Свойства динамического содержания
Пример 13
Данные свойства динамического содержания могут обращаться к элементу или его содержанию только как к целому. Если, например, требуется изменить лишь один символ в параграфе, то придется заново переписать весь параграф. Однако, можно напрямую манипулировать любой частью HTML-документа. Такую возможность предоставляет объект TextRange, который будет рассмотрен чуть позже.
Методы Adjacent
Кроме перечисленных четырех свойств динамического содержания имеются еще два метода для вставки содержания:
insertAdjacentText Вставка текста. insertAdjacentHTML Вставка HTML.
Оба метода Adjacent имеют по два аргумента: место вставки и содержание. Место вставки определяется ключами:
Пример 14
Методы Adjacent удобно использовать для вставки новых параграфов или элементов списков.
Объект TextRange
Используя объект TextRange можно редактировать любой текст, а также менять текст, выделенный посетителем на экране.
Свойства доступа к тексту
Метод вставки HTML
Методы позиционирования объекта TextRange
Методы move, moveStart и moveEnd возвращают число, равное расстоянию перемещения. Если будет задано перемещение на 100 слов в документе, содержащим 50 слов, то объект TextRange будет помещен в последнее слово, а метод возвратит расстояние перемещения. Для проверки успешности проведения перемещения возвращаемое значение сравнивается с заданным расстоянием перемещения.
Пример 15
moveToPoint(prm1, prm2) Определяет элемент, который выведен в точке, координаты которой заданы параметрами prm1, prm2. Работает не совсем корректно. В чем можно убедиться на примере.
Пример 16
Динамический HTML
DHTML отличается от Ajax тем, что страница DHTML по-прежнему основана на запросе / перезагрузке. При использовании DHTML после загрузки страницы между клиентом и сервером может не быть никакого взаимодействия; вся обработка происходит в JavaScript на стороне клиента. Напротив, страница Ajax использует функции DHTML для инициирования запроса (или «подзапроса») к серверу для выполнения дополнительных действий. Например, если на странице есть несколько вкладок, чистый подход DHTML будет загружать содержимое всех вкладок, а затем динамически отображать только ту, которая активна, в то время как AJAX может загружать каждую вкладку только тогда, когда это действительно необходимо.
Содержание
Использует [ редактировать ]
DHTML позволяет авторам добавлять на свои страницы эффекты, которые иначе трудно достичь, путем изменения объектной модели документа (DOM) и стиля страницы. Комбинация HTML, CSS и JavaScript предлагает способы:
Структура веб-страницы [ править ]
Обычно веб-страница, использующая DHTML, настраивается следующим образом:
Пример: отображение дополнительного блока текста [ править ]
Следующий код иллюстрирует часто используемую функцию. Дополнительная часть веб-страницы будет отображаться только по запросу пользователя.
Объектная модель документа [ править ]
DOM также предоставляет доступ к действиям пользователя, таким как нажатие клавиши и щелчок мышью. Эти и другие события можно перехватывать и обрабатывать, создав функции и подпрограммы обработчиков событий. Обработчик событий получает управление каждый раз, когда происходит данное событие, и может выполнять любое соответствующее действие, в том числе использовать DOM для изменения документа.
Динамические стили [ править ]
Объектная модель обеспечивает программный доступ к стилям. Это означает, что вы можете изменять встроенные стили для отдельных элементов и изменять правила стилей с помощью простого программирования на JavaScript.
Динамический HTML
Динамический HTML (DHTML) — это набор новых функциональных возможностей, которые изначально были представлены в веб-браузере Microsoft Internet Explorer 4.0. С помощью динамического HTML разработчики могут создавать привлекательные веб-сайты, которые не увеличивают нагрузку на сервер. Отображение и контент веб-страницы изменяются динамически при выполнении пользователем определенных действий.
С помощью динамического HTML можно легко реализовывать на страницах сложные эффекты, которые ранее были труднодостижимы.
Например, можно выполнять следующие задачи:
—Скрытие контента до истечения указанного времени или до тех пор, пока пользователь не выполнит какие-либо действия на странице.
—Анимация текста и изображений в документе посредством независимого перемещения отдельного элемента из любой начальной точки в любую конечную точку по траектории, указанной разработчиком или пользователем.
—Вставка бегущей строки, которая автоматически обновляет контент, например новости, котировки акций или другие данные.
—Использование объекта form для получения данных, вводимых пользователем, с последующей мгновенной обработкой данных.
Для реализации этих эффектов динамический HTML изменяет представление текущего документа в памяти и автоматически переформатирует его для отображения изменений. При этом не требуется перезагружать документ, загружать новый документ или создавать новый контент на удаленном сервере. Для отслеживания и реализации изменений используются ресурсы компьютера пользователя. Это означает, что перед просмотром результатов пользователю не требуется ожидать завершения обработки данных и текста на сервере. Кроме того, для реализации изменений динамический HTML не требует дополнительных приложений или встроенных элементов управления. Как правило, документы, созданные с помощью языка DHTML, являются самостоятельными, поэтому обработка пользовательского ввода и прямое управление элементами HTML, атрибутами, стилями и текстом документа осуществляется с помощью стилей и сценариев.
Одним словом, динамический HTML устраняет недостатки статических страниц. Разработчики могут создавать веб-сайты с новыми функциональными возможностями как в Интернете, так и в интрасети без ущерба для производительности. Динамический HTMLпозволяет не только улучшить восприятие документа пользователем, но и повысить производительность сервера за счет уменьшения числа запросов к серверу.
Как работает динамический HTML
Когда при создании документа используется динамический HTML, все элементы документа считаются объектами. Любой элемент может быть назван подобъектом главного или супер-объекта, которым является документ. В документ могут включаться части из других файлов HTML. Они также считаются подобъектами главного объекта. Примером такого внешнего элемента как подобъект может служить таблица стилей. Каждый элемент CSS считается порожденным элементом объекта CSS.
Каждый тэг HTML также является объектом. К этим объектам можно обращаться и манипулировать ими несколькими методами. Динамический HTML позволяет напрямую изменять свойства тэгов. Другим способом является манипуляция свойствами через таблицы стилей.
Созданный посредством динамического HTML документ является объектом, который можно использовать для манипуляции документом, например, для включения нового элемента.
Сами скрипты также являются объектами. Они могут включать собственные подобъекты. Используя объектно-ориентированное программирование, можно значительно расширить возможности создания HTML-документов. По сигналу таймера или определенному действию пользователя (например, при помещении указателя мыши на какой-то элемент документа) запускается обрабатывающий это событие скрипт.
Основы динамического HTML.
Динамический HTML предлагает дополнительные возможности в управлении обликом документа, а также в двухмерной компоновке и связывании данных.
Компоненты динамического HTML.
Динамический HTML имеет четыре компонента: content (содержание), structure (структура), style (стиль) и interaction (взаимодействие). Ниже рассмотрены эти компоненты.
Content.
Главным различием между динамическим НТМL и обычным HTML-документом является способ представления его содержания. Динамическое представление предполагает реакцию на действия пользователя, например, на нажатие кнопки или перемещение указателя мыши.
Structure.
Структурное иерархическое дерево документа обычно отбрасывается браузером при выводе документа на экран. Динамический HTML на основе структуры документа создает группу (коллекцию) данных и держит ее постоянно наготове как ссылку на другие страницы и объекты, загружаемые по определенным событиям и действиям пользователя. В табл. 14.1 показаны дополнительные элементы, связанные с компонентом structure.
| Элемент | Описание |
| Structure | Структура динамического HTML-документа. |
| Event | Событие, обрабатываемое скриптом. |
| Object | Контейнер для элементов HTML. |
| Collection | Группа элементов и объектов, используемая для ссылок. |
70. Корпоративный и фирменный стиль. Соотношение понятий.
Корпоративный стиль (англ. corporate identity) — набор графических форм и принципов построения визуальной коммуникации, объединённых одной идеей, основная задача которых — выделить компанию среди себе подобных и создать узнаваемый образ в глазах потребителей. «Корпоративный» или «фирменный» стиль часто понимается как набор словесных и визуальных констант, обеспечивающих единство восприятия товаров, услуг, информации, исходящих от фирмы или торговой марки к потребителю. Корпоративный дизайн наряду с корпоративной философией, корпоративной культурой и корпоративным поведением является одним из элементов корпоративной идентичности.
Корпоративный стиль разрабатывается на основе логотипа и знака. Вначале проводится общий анализ компаний, аналогичных той, которая заказала логотип или фирменный знак. Затем вычленяются отличительные особенности данной компании. После этого формируется идея «смыслового образа», который впоследствии станет основополагающим в фирменном стиле данной компании. В этот образ вкладываются не только графические элементы, но и психология продаж (например, агрессивный маркетинг) и географическое местоположение компании, социологические образы общественной среды. Затем разрабатывается логотип. В начале разработки определяются основные элементы: стилеобразующая идея, цветовая гамма, шрифты. Разрабатываются стандарты и рекомендации по нанесению корпоративной символики на носители стиля. Носителем стиля может быть всё что угодно: внутренняя документация, наружная реклама, веб-сайт, здание офиса. После окончания работы по разработке стиля составляется руководство по его применению. Руководство называют по-разному: брендбук, гайдлайн, стандарты оформления.
Корпоративный стиль объединяет в себе образы фирм, которые существуют в корпорации.
БИЛЕТ
30. Современные технологии разработки web-приложений. Принципы использования СУБД в web-приложениях.
Задачи, решаемые web-сервером, в основном сводятся к поддержке протокола HTTP и передаче клиенту запрашиваемых информационных ресурсов. Однако часто возникает необходимость выполнения каких-либо нестандартных действий, расширяющих возможности web-сервера. В этом случае используются специальные программы, выполняемые на WWW-сервере и взаимодействующие как с web-сервером, так и с клиентом.Эти программы принято называть расширениями web-сервера, или web-приложениями.Существует много различных типов приложений, использующихся в качестве расширений web-серверов.
Современные веб-приложения ушли довольно далеко от простых статических страниц и накладывают серьезные ограничения на инфраструктуру, требующуюся для их работы. Вне зависимости от их направленности, большинство веб-приложений сейчас интерактивны и предлагают высокую степень кастомизации своим пользователям. Это в первую очередь требует высокой скорости приложения и высокой эффективности хранения и обработки пользовательских данных.
Основные требования:
-Расширяемость, быстрая разработка. Быстрое и несложное добавление нового функционала. Компонентная структура front- и back-office.
Высокая готовность к частым изменениям представления и обработки по желанию заказчика.
-Масштабируемость, желательна совместимость кода с промышленными серверами приложений.
-Поддержка нескольких языков (i18n & l10n).
Поддержка нескольких выходных форматов. Например, система может выдавать результат в XML-формате (стилизация может производиться как у клиента, так и на сервере, последнее пока надежнее), HTML, WML, предоставлять пользователю несколько переключаемых цветовых стилей или частные настройки, иметь версию для печати, генерировать на лету документы PDF и т.п.
-Поддержка тонкого разграничения доступа к функционалу веб-приложения и обеспечение возможности персонализации пользователей (customization).
Часть IV.
Динамические Веб-страницы:
технологии DHTML
«Фильм должен начинаться с землетрясения, а потом
напряжение должно нарастать.»
Глава 4.1. Введение в Dynamic HTML
4.1.1. Что такое Dynamic HTML?
Последние годы развитие World Wide Web происходит по знаком Dynamic HTML (сокращенно DHTML). Трудно найти публикацию, посвященную WWW, в которой не шла бы речь о DHTML, но еще труднее найти публикацию, в которой это понятие было бы четко сформулировано. В этом разделе мы попытаемся дать определение Dynamic HTML, приемлемое для практического использования, и проследить этапы его становления.
В самом общем виде можно сказать, что Dynamic HTML это набор технологий, работающих на стороне клиента и призванных преодолеть статичность традиционных Веб-страниц. Точнее говоря, это технологии, которые обеспечивают
Для достижения перечисленных целей используются следующие методы:
Все эти явно разнородные методы покоятся, в действительности, на двух китах. Первым из них является интеграция HTML-документа, каскадных стилей и сценариев клиента, основанная на объектной модели документа. Вторым использование компонентного программирования, позволяющего нам встраивать однажды разработанные компоненты во вновь создаваемые документы.
Что же дает DHTML разработчику Веб-узлов? По нашему мнению, основных преимуществ три:
См. также мою статью WDH+: Влияние DHTML на трафик.
Если присмотреться внимательнее, то противодействие распространению DHTML вызвано совершенно другой причиной. Дело в том, что до сих пор создание Веб-страниц не требовало специальных знаний, кроме знакомства с HTML и умения минимально манипулировать графикой. С появлением DHTML ситуация изменилась в корне: разработка динамической страницы требует программирования на сценарном языке, сопряженного с пониманием работы обозревателя на уровне генерации и обработки событий, владением основами пользовательского интерфейса и т. п. Иными словами, Веб-дизайн востребовал специалистов, что у многих вызывает неприятие. На самом деле, демократическая сущность WWW от этого не пострадала. По-прежнему любой желающий может создать, скажем, свою домашнюю страничку на уровне своих знаний, и DHTML этому не помеха. Другое дело, что профессиональные разработки должны соответствовать по уровню лучшим из наличествующих технологий, но на то они и называются профессиональными.
4.1.2. Краткая история DHTML
Dymanic HTML родился в процессе конкурентной борьбы между Веб-обозревателями корпораций Netscape и Microsoft. Он появился в обозревателе Netscape Navigator 4, где были введены два новых тега LAYER и ILAYER, которые позволяли создавать на Веб-страницы слои с динамически изменяемыми свойствами (положением на странице, стилями отображения и т. п.). В ответ на это Microsoft в Internet Explorer 4 предложили намного более мощную поддержку динамических страниц, которая не использовала нестандартных тегов и опиралась на единый подход к HTML-документу как к дереву объектов с динамически изменяемыми атрибутами и свойствами стилей.
Основное различие между двумя подходами состояло в парадигме самого понятия «динамическая страница». Netscape под этим понимал динамическое формирование Веб-страницы в процессе ее загрузки и последующую косметическую правку в ответ на действия пользователя без существенных изменений содержания страницы. Microsoft с самого начала занял позицию динамического формирования и изменения любых элементов страницы в любой момент ее существования.
Понятно, что такое различие моделей DHTML в основных обозревателях никак не соответствует базовой концепции WWW как платформо-независимой информационной сети. Поэтому W3C был вынужден предпринять усилия по стандартизации Dynamic HTML и начал с разработки спецификации объектной модели документа (DOM), в основу которой была положена модель Microsoft, предложенная W3C в качестве Веб-стандарта. В результате в октябре 1998 г. был принята рекомендация W3C по первому уровню DOM (DOM 1), а в ноябре 2000 г. приняты рекомендации по второму уровню DOM (DOM 2), существенно расширяющему DOM 1.
Тем временем Microsoft выпустил обозреватели Internet Explorer 5 и 5.5, которые существенно расширили возможности DHTML, причем во многом в направлениях, не предусмотренных стандартами W3C. Параллельно шла работа над обозревателем Netscape 6, который был призван вернуть часть рынка, завоеванного Microsoft (летом 2000 г. 86% пользователей WWW использовали Internet Explorer и только 14% Netscape). С этой целью была создана независимая группа Mozilla.org 
, которая опубликовала в Сети исходные тексты обозревателя Netscape и собрала группу независимых разработчиков для приведения его в соответствие стандарту. Результатом их работы стало ядро обозревателя Gecko, почти в полной мере соответствующее стандартам HTML 4.0, CSS1 и DOM 1 (поддержка стандартов CSS2 и DOM 2 реализована частично) и одновременно сохранившее некоторую совместимость с моделью Netscape 4. Gecko является основой обозревателя Netscape 6, который после двух с половиной лет обещаний вышел, наконец, в свет в конце 2000 г. Выпущенная версия Netscape 6 пока очень сырая, и в ближайшее время следует ожидать появления ее новых сборок, которые должны будут заменить Netscape 4.
Таким образом, сегодня на рынке присутствуют:
В соответствии со сказанным, наше описание Dynamic HTML построено следующим образом. В этой части мы рассматриваем спецификацию объектной модели документа согласно стандартам W3C и ее реализацию в MSHTML и Gecko. Нестандартные возможности Microsoft DHTML и Gecko DHTML рассматриваются в статьях WDH+ (за исключением объекта window, который пока не стандартизован, и в силу своей важности рассматривается здесь (см. гл. 4.13 и 4.14). Динамическую модель Netscape 4.x мы решили не описывать, как представляющую скорее исторический интерес, чем практический (решающим аргументом здесь послужил тот факт, что сама корпорация Netscape отказалась от поддержки слоев в новом обозревателе).
О Gecko-обозревателях см. также: WDH+: Богач, бедняк.
1 Сторонникам этого романтического подхода можно посоветовать только одно: заключайте весь документ в теги PRE это единственный шанс, что ваша страница будет отображаться более или менее одинаково во всех обозревателях. Что касается политического подтекста подобной позиции (обычно связанного с пресловутым лозунгом «Microsoft must die»), то этот справочник написан не для борцов с монополиями, а для тех, кто хочет создавать качественные продукты, пользуясь для этого всеми доступными средствами.