Добавляем интерактивные компоненты на сайт в соответствии с веб-стандартами
Дизайн и разработка
17 февраля 2011
Интерактивные компоненты и анимация, добавленные к дизайну, не должны быть слишком сложными или делать сайт недоступным при использовании современных веб-стандартов. В этой статье мы рассмотрим несколько примеров и концепций, в которых задействованы CSS, HTML, SVG, элемент холста и JavaScript. Возможно, кое-что из этого вам уже знакомо, а что-то вы не принимали во внимание. Начнем с азов.
1. HTML и JavaScript
Использование средств HTML с JavaScript - наиболее распространенный вариант добавления интерактивности на сайт. Но прежде чем начать пользоваться JavaScript, важно хорошо разобраться с моделью визуального форматирования и рамочной моделью CSS . Это необходимо, чтобы понять, как изменяются элементы HTML и сразу видеть результаты своих изменений. Когда вы динамически изменяете стиль элемента HTML, он может оказать влияние на весь документ. Может оказаться сложным научиться предупреждать и контролировать это влияние.
Использование библиотек JavaScript, таких как jQuery, поможет вам забыть о проблеме кросс-браузерности. Библиотека также обеспечивает стандартную функциональность для более быстрого взаимодействия с HTML. Перед началом работы с jQuery, необходимо изучить основы JavaScript, с тем, чтобы знать не только возможности библиотеки, но и понимать, как это реализуется. Если вы будете это понимать, то сможете писать свои собственные скрипты на языке JavaScript.
Пример слайд-шоу
На сайте Momento App вы видите горизонтальное слайд-шоу. При каждом клике вправо или влево картинки сменяются.
На сайте Momento App встроен собственный jQuery плагин для организации слайд-шоу.
Как это реализовано
Пять слайдов являются элементами img, вложены в div и расположены последовательно внутри своих контейнеров:
На картинке вы можете видеть, как пять слайдов расположены для движения внутри своих контейнеров. Контейнер будет обрезать всё, что находится за его границами, поскольку overflow установлен в значении hidden, что и создаёт эффект проекционного окна.
Вид контейнера и скрытых элементов
Такую структуру можно реализовать, используя только CSS и HTML. Здесь JavaScript используется для того, чтобы слайды прокручивались, при нажатии кнопок “Next” и “Previous”. Использованный на сайте Mamento App JavaScript достаточно сложный, надеюсь, что читателям будет интересно самим в нём разобраться. Мне кажется, это станет хорошим примером того, как элементы HTML изменяются, в то время как структура документа остаётся неизменной.
В каких случаях следует использовать JavaScript
На сайте Mamento App мы видим, насколько JavaScript полезен для контролирования доступа к содержимому. Показ и скрытие объектов помогают сохранить видимые объекты чёткими, что значительно улучшает их восприятие пользователем.
Сайт должен продавать, и слайд-шоу делает товар в глазах зрителя более привлекательным, чем это есть на самом деле. Такие интерактивные решения наилучшим образом подходят для рекламного контента.
В каких случаях не следует использовать JavaScript
Интерактивные компоненты могут выглядеть привлекательнее по сравнению со статичными, но не всегда являются лучшим решением для вашего сайта. Необходимо принять во внимание:
Всё ли будет понятно пользователю?
Если содержимое скрыто, поймёт ли пользователь, как его отрыть?
Не повлияют ли дополнительные действия, требующиеся от пользователя, на его общее впечатление от сайта?
Будет ли удобно пользоваться сайтом?
Если использование JavaScript не будет отвечать всем вышеперечисленным требованиям, то лучше его и не использовать. Задумайтесь, нужны ли вам дополнительные броские элементы.
Всё может быть удобно и доступно, но это не всегда значит, что все компоненты могут быть технически реализованы на сайте. Так же сайт должен быть простым и понятным для пользователей любого возраста и в любой ситуации.
Статья Дэна Молла (Dan Mall): Продвинутая анимация
Слова "интерактивность" и JavaScript стали практически синонимами в веб-дизайне, и всё же JavaScript не всегда необходим, в чём вы сможете убедиться, рассмотрев следующие примеры.
2. CSS3 переходы
Псевдо-класс :hover позволяет изменять стиль элемента, при наведении на него курсора. Обычно применяется к ссылкам (тегу <a>) и изменяет визуальное представление элементов. Не являясь по сути революционным, :hover может использоваться для достижения лучшего эффекта.
Дизайнер Кристофер Зилгенс (Christoph Zillgens) использует CSS3 переходы для усиления эффекта от применения псевдо-класса :hover. Ниже представлены этапы перехода:
Три этапа перехода: по умолчанию, промежуточный, с наведённым курсором
Как это реализовано?
Посмотрев на HTML код, мы мало что поймем. На первый взгляд перед нами обычная ссылка. Стандартная семантическая разметка, как же тогда удалось создать переход?
Единственное, что было добавлено в код – это тег span, в который заключён текст. В этом и весь секрет. Давайте рассмотрим подробнее (некоторые значения были опущены для лучшей читабельности):
Мы можем видеть, что в HTML и CSS тэги a и span преобразованы в блочные элементы, что даёт возможность устанавливать позицию и размер. Они имеют два значения, «по умолчанию» и «с наведённым курсором» (A и C на рисунке выше)
По умолчанию, элемент span имеет значения: opacity 0 и top 150px. С наведённым курсором, span имеет значения: opacity 1 и top 130px. Между позициями A и C ссылка имеет стандартный цвет фона.
В данном случае, этап «с наведённым курсором» идёт сразу же после этапа «по умолчанию». Это прекрасно работает в старых браузерах, но в CSS3 можно создать плавный переход между этими двумя этапами.
Добавление перехода
Теперь у нас есть начальная и конечная точки для создания hover-эффекта. Чтобы создать промежуточный этап, мы можем использовать свойство transition (подробнее тут) такого вида:
Это означает, что вне зависимости от заданного по умолчанию стиля, за счёт тега span будет происходить переход от текущего стиля к стилю по умолчанию. В таком случае будут затронуты все CSS свойства, а переход будет происходить при наведении курсора. Если мы хотим, чтобы изменялось только одно из свойств, на пример цвет фона ссылки, можно использовать такой приём:
Создать новый переход так же просто, как задать состояние по умолчанию и с наведённым курсором в CSS, а переход между ними будет анимироваться при помощи свойства transition.
Когда стоит использовать CSS переход
Использование свойства перехода с помощью псевдо-класса :hover является очень удобной техникой, без применения JavaScript, что может сэкономить время и пространство.
Так же переход может быть осуществлён за счёт динамического HTML с использованием JavaScript. Если вы уже привыкли к добавлению классов на JavaScript для изменения стилей, давайте рассмотрим различия, возникающие в таком случае.
Вы увидите, что браузеры Safari и Chrome поддерживают аналогичное свойство перехода -webkit-transaction , в Opera -o-transaction, а в Firefox 4 используется -moz-transaction.
Хорошие новости для любителей всё портить. В ранних версиях браузера Internet Explorer данные свойства игнорируются, и изменение стиля применяется мгновенно. Таким образом, будет сложно найти ситуацию, при которой использование перехода снизит функциональность.
Другие примеры
Вот несколько сайтов, на которые стоит обратить внимание, где так же используются CSS переходы.
При использовании перехода, элементы не всегда должны находиться внутри контейнера. На сайте Love Nonsense используются различные родственные простые селекторы, которые вызывают переход.
На страничке Simurai показано, как при помощи комбинации переходов и преобразований можно создать кнопку, используя только HTML и CSS.
Переход может осуществляться не только с помощью псевдо-класса :hover. Здесь Нил Гроскопф рассказывает об использовании псевдо-класса :target
Материалы по теме
Здесь представлены статьи, в которых тщательно рассматриваются CSS переходы:
Hover-эффект хорошо применять на ссылках, но это может сбить с толку, когда он неожиданно срабатывает на других элементах. Так же его сложнее применять на тачскринах. Несомненно, добавление интерактивных компонентов, отвечающих на клик пользователя, является удачным решением, поскольку обеспечивает обратную связь, а в некоторых случаях делает сайт удобнее в использовании.
Вы можете увидеть, что колесо находится внутри svg элемента. SVG основанн на XML, поэтому может быть прописан в HTML. SVG является более удобным форматом, поскольку ему можно задать свойство attribute, что позволяет поворачивать, масштабировать и искажать объект (в отличии от стандартных HTML тегов).
Чтобы создать и анимировать колесо, на сайте Get Satisfaction была использована библиотека под названием Raphaël, а так же jQuery:
Как показано в скрипте сверху, библиотека jQuery связывает клик мышкой с вращением колеса. При нажатии на кнопку, библиотека Raphaël анимирует вращение. Если посмотреть данный код в Firebug (компонент firefox), вы увидите, что свойство transform SVG изображения изменяется в момент, когда колесо крутится.
Настоящая SVG анимация
На примере выше мы увидели, что SVG файлом можно управлять при помощи JavaScript так же, как и HTML. Но знаете ли вы, что в SVG анимации есть собственные свойства? Они действительно есть, но крайне редко используются. Вот пример элемента от компании W3C:
Для лучшей интерактивности, SVG может содержать даже ECMAScript (стандартный язык описания, на котором основан JavaScript) Если вы хотите узнать больше по данной теме, я бы предложил вам начать со статьи Питера Колингринджа “Mouseover Effects in SVGs.”
Когда стоит использовать SVG анимацию
Всегда рассматривайте все плюсы и минусы новой технологии. Самое логичное решение не всегда самое простое. Формат SVG предоставляет альтернативное графическое окружение, а его масштабируемый размер является безусловным преимуществом в сравнении с растровыми изображениями.
Причиной, по которой SVG редко используется, является то, что Internet Explorer (ниже 9 версии) не поддерживает данный формат. В библиотеке Raphaël, которая используется на сайте Get Satisfaction, SVG автоматически заменяется на VML (язык векторной разметки), который IE понимает.
Статьи по теме.
Масштабируемая векторная графика редко используется Веб-дизайнерами. Здесь представлены несколько статей для вдохновения.
CSS переходы, которые мы рассмотрели выше, могут изменить любое количество свойств создать много визуальных эффектов, но они ограничены стилями CSS и переходами с заданной длительностью. Есть ли способ создать более продвинутую анимацию?
На странице ОС компании Google можно увидеть hover-эффект с непрерывной анимацией.
Особенности Chrome: каждый объект анимируется с hover-эффектом.
Чтобы узнать, как это работает, давайте взглянем на код:
Тут есть ссылка a, содержащая элемент холста (который содержит изображение). В браузерах, не поддерживающих холст, это изображение не будет видно.
Так же мы видим атрибуты onmouseover и onmouseout, которые должны вызывать функции JacaScript - hideBadge() и showBadge(). Это чем-то похоже на действие псевдо-класса hover, рассмотренного во 2 примере.
Гугловский JavaScript довольно объёмный, а основным принципом является последовательное выведение объектов в canvas для создания анимации.
Для анимации с использованием холста используются отдельные векторные изображения.
Если вы хотите узнать больше об анимации с использованием холста, посетите сайт Canvas Animation Kit Experiment (CAKE), посвящённый библиотеке JavaScript, которая используется в Google для создания hover-эффекта.
Насколько практична такая анимация?
Холст является очень гибким HTML-элементом для создания скриптовой (интерактивной) графики, и идеальным решением для создания интерактивности и анимации. Назначив похожие эффекты для click и hover в JavaScript, мы можем добиться большей интерактивности, не ограниченной рамками HTML и CSS.
Минусы? Пример с Google не является наглядным, а тот факт, что данные в элементе холста вызываются динамически, является реальной проблемой. У поисковых систем и скрин-ридеров могут возникнуть сложности с canvas-контентом на сайте,
Если вы хотите представить содержимое сайта при помощи canvas-элемента, то было бы замечательно, представить этот же контент в альтернативном, общедоступном формате. Холст, возможно одно из лучших средств для отображения визуальных данных, таких как графики, списки и диаграммы. В этих случаях контент может быть разделён и представлен в более лёгком для восприятия виде.
Интерактивность в холсте при помощи мыши и клавиатуры, Джонни Симпсон.
Несколько слов об Adobe Flash
Самое интересное я оставил напоследок (вы бы никогда не дочитали статью, если бы я написал об этом сразу же). Я расскажу вам о такой мощной программе, как Adobe Flash. Флэш не является веб-стандартом, но очень часто используется в интернете.
Adobe Flash предоставляет возможность создания интерактивного контента с использованием ActionScript. В ActionScript3 используется тот же язык, что и в JavaScript, так что научиться работать с Adobe Flash не составит особого труда. Единственная проблема в том, что Adobe Flash является запатентованной программой, и не имеет открытого кода. Но следует признать, что во многих случаях он может быть намного эффективнее, а в некоторых случаях (например, при работе с видео), может быть единственным средством.
Однако всегда стоит учитывать все за и против. Вы будете сильно удивлены, узнав, что можно сделать при помощи современных стандартов. Несмотря на негативную критику со стороны многих веб-дизайнеров и разработчиков, флэш остаётся конкурентоспособным форматом. Но при внедрении новых стандартов это всё больше обсуждается.
Подведем итоги
Мы рассмотрели несколько отличных примеров того, что может быть достигнуто с помощью современных веб-стандартов.
Несколько основных моментов, которые стоит запомнить:
HTML может управляться непосредственно JavaScript.
Если объединить CSS псевдо-класс и свойства перехода, можно создать огромное количество hover-эффектов.
Изображения могут содержаться внутри SVG, что позволяет изменять их вне рамок CSS и HTML.
Холст и JavaScript являются наиболее эффективными (но менее доступными) средствами для добавления интерактивности и создания анимации.
Рассмотренные методы оживят ваш сайт и изменят в лучшую сторону мнение пользователей о нём. В то же время, они могут сделать сайт похожим на своих предков из DHTML эры. Используйте рассмотренные приёмы осторожно. Всегда помните о доступности контента и мнении пользователей о лишних деталях.
И напоследок
Когда же необходимы библиотеки JavaScript? Мы уже рассмотрели примеры с canvas и SVG, в которых они используются. Так же библиотеки JavaScript предназначены для того, чтобы обеспечить стандартную функциональность, что поможет сэкономить ваше время при выполнении проекта. Но использование их для создания отдельного элемента может привести к излишней нагрузке. На сайте Get Satisfaction библиотека Raphaël использована только для создания эффекта вращения. Можно ли этого добиться без Raphaël?
Да… но всё не так просто. Браузеры типа Internet Explorer не поддерживают SVG, поэтому в библиотеке Raphaël используется VML. Внимательно изучите проблему, прежде чем предложить своё собственное решение. Это может оказаться сложнее, чем вы думали.
Существуют библиотеки, такие как Modernizr, с помощью которых можно легко изолировать отдельные функции. На неё определённо стоит обратить внимание. После превью бета-версии Modernizr, это стало очевидно, и теперь Modernizr предоставляет полноценную библиотеку под ваши конкретные нужды.
РћСигинал статьи: David Bushell(www.smashingmagazine.com)
