Интерактивная графика и анимация в веб-пространстве: новые технологии.

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

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

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

Flat Design. Особенность плоского дизайна заключается в отсутствии каких-либо стилистических особенностей, таких как объем, текстура или градиент. Плоский дизайн остается одним из главных трендов в веб-дизайне с 2010 года.

Дизайн реального мира Его особенность заключается в создании иллюзии полного погружения и взаимодействия с объектами, существующими в реальном мире.

Material Design Материальный дизайн не отступает от принципов плоского дизайна, но дополняется рядом особенностей: интуитивно поднятые поверхности, движение имеет смысл, используется синхронная анимация, действие подчинено законам физики.

 

Во многих случаях анимационные эффекты используются для привлечения пользовательского внимания к важным деталям. Также их используют, чтобы подчеркнуть кликабельность элемента на фоне прочих вещей. Создавая анимацию на сайте веб-мастера как правило используют одну или несколько технологий. Это может быть как Flash, Shockwave, GIF-анимация, так и видео- и звуковые эффекты. Анимация, по своей сути является набором недвижимых картинок, которые очень быстро сменяются друг за другом. Эффект неподвижности основывается на способности глаза удерживать одну картинку, так называемая инертность визуального восприятия, когда программный код, отображающий анимацию, воспроизводит на мониторе следующую картинку. Для того чтобы организовать эффект мягкого течения, программный код соответственно воспроизводит любую картинку или кадр на протяжении считанной доли секунды по завершению показа предшествующего изображения, в результате чего глаз наблюдает следующее изображение, только лишь предшествующее изображение пропадет. Анимация может заключать в себе не только двигательные эффекты, но и музыку и даже речь.

Анимация — является немаловажной частью дизайна веб-сайта, и у веб-мастера, есть все возможности, для того чтобы предпочесть из различных технологий те, какие поспособствуют в достижении определенных задач, которые вы ставите для своего сайта.

Динамические веб-страницы на основе JavaScript. Технологии Ajax.

Что такое JavaScript на самом деле?

JavaScript (" JS" для краткости) — это полноценный динамический язык программирования, который применяется к HTML документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.

Вы можете сделать очень многое с JavaScript. Вы можете начать с малого, с простых функций, таких как карусели, галереи изображений, изменяющиеся макеты и отклик на нажатие кнопок. Когда вы станете более опытным в языке, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!

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

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

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

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

 

ТЕХНОЛОГИИ AJAX

AJAX, Ajax (ˈ eɪ dʒ æ ks, от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее. По-русски иногда произносится по существующей аналогии у имени Ajax - Аякс, но у акронима AJAX нет устоявшегося варианта на кириллице.

Модель классических приложений для сети (слева) в прямом сравнении с применением AJAX (справа).

Сравнение стандартного подхода и AJAX.

В классической модели веб-приложения:

Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.

Браузер формирует и отправляет запрос серверу.

В ответ сервер генерирует совершенно новую веб-страницу и отправляет её браузеру и т. д., после чего браузер полностью перезагружает всю страницу.

При использовании AJAX:

Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.

Скрипт (на языке JavaScript) определяет, какая информация необходима для обновления страницы.

Браузер отправляет соответствующий запрос на сервер.

Сервер возвращает только ту часть документа, на которую пришёл запрос.

Скрипт вносит изменения с учётом полученной информации (без полной перезагрузки страницы).

Технология

AJAX — не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах:

использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например с использованием XMLHttpRequest (основной объект);

через динамическое создание дочерних фреймов[1];

через динамическое создание тега < script> [2].

через динамическое создание тега < img>, как это реализовано в Google Analytics.

использование DHTML для динамического изменения содержания страницы;

Действия с интерфейсом преобразуются в операции с элементами DOM (англ. Document Object Model), с помощью которых обрабатываются данные, доступные пользователю, в результате чего представление их изменяется. Здесь же производится обработка перемещений и щелчков мышью, а также нажатий клавиш. Каскадные таблицы стилей, или CSS (англ. Cascading Style Sheets), обеспечивают согласованный внешний вид элементов приложения и упрощают обращение к DOM-объектам. Объект XMLHttpRequest (или подобные механизмы) используется для асинхронного взаимодействия с сервером, обработки запросов пользователя и загрузки в процессе работы необходимых данных.

Три из этих четырёх технологий — CSS, DOM и JavaScript — составляют DHTML (англ. Dynamic HTML). По мнению некоторых специалистов (книг), [каких? ] средства DHTML, появившиеся в 1997 году, подавали большие надежды, но так и не оправдали их.

 

В качестве формата передачи данных могут использоваться фрагменты простого текста, HTML-кода, JSON или XML.

История

Впервые термин AJAX был публично использован 18 февраля 2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett) «Новый подход к веб-приложениям»[3]. Гарретт придумал термин, когда ему пришлось как-то назвать новый набор технологий, предлагаемый им клиенту.

Однако в той или иной форме многие технологии были доступны и использовались гораздо раньше, например в подходе «Remote Scripting», предложенном компанией Microsoft в 1998 году, или с использованием HTML-элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году.

AJAX стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.

Преимущества

Экономия трафика

Использование AJAX позволяет значительно сократить трафик при работе с веб-приложением благодаря тому, что вместо загрузки всей страницы достаточно загрузить только изменившуюся часть или вообще только получить/передать набор данных в формате JSON или XML, а затем изменить содержимое страницы с помощью JavaScript.

Уменьшение нагрузки на сервер

При правильной реализации AJAX позволяет снизить нагрузку на сервер в несколько раз.

В частности, все страницы сайта чаще всего генерируются по одному шаблону, включая неизменные элементы («шапка», «навигационная панель», «подвал» и т. д.), для генерации которых требуются обращения к разным файлам, время на обработку скриптов (а иногда и запросы к БД) — всё это можно опустить, если заменить полную загрузку страницы генерацией и передачей лишь содержательной части. Дизайн страницы также обычно содержит множество файлов, связанных с оформлением (картинки, стили), на повторную обработку которых не надо тратить время, используя AJAX (экономия на количестве HTTP-соединений значительно выгоднее, чем на сокращении трафика каждого из них).

Ускорение реакции интерфейса

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

Почти безграничные возможности для интерактивной обработки

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

Недостатки

Отсутствие интеграции со стандартными инструментами браузера

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

Другой недостаток изменения содержимого страницы при постоянном URL заключается в невозможности сохранения закладки на желаемый материал. Проблему можно успешно решить с помощью History.pushState[4].

Динамически загружаемое содержимое недоступно поисковикам (если не проверять запрос, обычный он или XMLHttpRequest)

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

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

Многие сервисы статистики ведут учёт просмотров новых страниц сайта. Для сайтов, страницы которых широко используют AJAX, такая статистика теряет актуальность.

Усложнение проекта

Перераспределяется логика обработки данных — происходит выделение и частичный перенос на сторону клиента процессов первичного форматирования данных. Это усложняет контроль целостности форматов и типов. Конечный эффект технологии может быть нивелирован необоснованным ростом затрат на кодирование и управление проектом, а также риском снижения доступности сервиса для конечных пользователей.

Требуется включенный JavaScript в браузере

JavaScript может быть выключен из соображений безопасности. И, конечно же, AJAX-страницы труднодоступны неполнофункциональным браузерам, роботам и веб-архивам.

Проблемы с отображением нестандартных кодировок в некоторых сценариях ajax-скриптов

О проблемах AJAX и кириллицы много сказано в обсуждениях в Интернете[5].

Низкая скорость при грубом программировании

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

Плохое поведение на ненадёжных соединениях

Если связь часто теряется (из-за потери несущей или перегрузки канала), обычную страницу можно как минимум перезагрузить. AJAX-страницу (например, с «бесконечной» прокруткой) приходится перезагружать с самого начала и искать, где остановился. Параллельная работа — особенность AJAX — здесь оказывает медвежью услугу, деля и без того узкий канал на множество маленьких соединений, и велика вероятность, что какое-то будет разорвано. Частично решается API истории.

⇐ Предыдущая567891011121314Следующая ⇒

Поделиться: