Как сделать интерактив на сайте
Как использовать интерактивные элементы для увеличения конверсии сайта
Для интернет-маркетинга три главных задачи: привлечь внимание, удержать и побудить пользователей что-то сделать – позвонить, подписаться, заказать, купить. Интерактивные элементы на сайте сильно в этом помогают. Ведь, чем активнее посетитель взаимодействует с контентом – тем больше шансов на конверсию.
В этой статье по материалам известного предпринимателя Нила Пателя вы узнаете как использовать интерактивные элементы на конкретных примерах.
Что такое интерактивные элементы?
Это элементы сайта, с которыми человек взаимодействует. Основная идея – изменить модель поведения посетителя, побудить его перейти от пассивного просмотра к активному.
Есть понятие «интернет-серфинг». Оно очень точно характеризует как большинство пользователей ведет себя в сети. Они сканируют кучу источников без конкретных целей. Даже если посетитель пришел на вашу страницу – он может уйти в любой момент, отвлечься на что-то.
Статистика показывает: большинство юзеров сосредотачивает внимание на странице менее 10 секунд:
Еще хуже ситуация с контентом ниже сгиба. Чем дальше пользователи скроллят, тем сильнее снижается и их внимание.
Соответственно, как только пользователь зашел на страницу – счет идет на секунды. Либо вам удастся «зацепить» его, либо он просто уйдет.
Интерактивные элементы и контент-маркетинг
Тому, что юзеры с трудом фокусируют внимание, мы во многом обязаны социальным сетям. В этом их суть – короткие посты, видеоролики, картинки с мемами.
Контент-маркетинг в классическом своем понимании не совсем вписывается в эту концепцию. Обычно это объемные статьи с иллюстрациями и подзаголовками, но интерактивные элементы в них используются редко. И зря. Контент-маркетинг более эффективен для достижения бизнес-целей, если активно подталкивает читателей к какому-то действию, а не просто дает информацию.
К примеру, первое, что бросается в глаза в блоге Нила Пателя – вопрос «Вы хотите больше трафика»? и предложение ввести адрес своего сайта:
В результате вы получаете доступ к сервису веб-аналитики и рекомендации по улучшению SEO-стратегии.
За счет чего интерактивные элементы повышают конверсию?
Они могут мотивировать людей на конкретные действия: заполнить форму, нажать кнопку, смотреть видео и так далее. Измеримые эффекты:
Снижение показателя отказов
Это процент посетителей, ушедших без совершения целевого действия. Пришел юзер, просканировал страницу, взгляд ни за что не зацепился, он ушел. Интерактивные элементы вовлекают во взаимодействие со страницей, у вас появляется намного больше шансов установить контакт.
Улучшение SEO
SEO – это не только работа с мета-тегами и файлом robots.txt. Интерактив улучшает пользовательский опыт (user experience), следовательно влияет на повышение в поисковой выдаче.
Примеры интерактивных элементов
Формы
Например, так выглядит форма на посадочной странице CRM-системы SalesForce. Классический вариант:
А вот Typeform подает пример того, как сделать форму более простой и элегантной. Поля появляются по мере заполнения. Сайт как будто ведет диалог с посетителем с фразы «Как тебя зовут, незнакомец?»
Видео
Уровень интерактива видео ниже, чем у опроса или викторины. Но, по крайней мере, один клик пользователь сделает – начало просмотра. Кроме того, можно вставлять кликабельные ссылки и баннеры в сам ролик – как это часто делают на Youtube.
Пример использования короткого видео на странице Microsoft:
Викторины и опросы
На сайте Telegraph в обычные новостные статьи блестяще интегрированы викторины и опросы:
Еще один новостной сайт, поклонник этого приема – Buzzfeed. Они разбавляют контент множеством вопросов с вариантами ответов. Темы – самые разнообразные. Вот, например, опрос «Кто для вас идеальный партнер для отношений?»
Анкетирование
Хороший инструмент, который иногда не совсем удачно используют. К примеру, вы пытаетесь войти на сайт, но натыкаетесь на всплывающее окно с предложением ответить на несколько вопросов в целях улучшения качества сервиса. Однако о каком улучшении пользовательского опыта можно говорить, если само по себе это окно – серьезный повод для раздражения?
А вот пример от уже упомянутого The Telegraph. Пользователи видят серию коротких вопросов на тему зависимости от мобильных телефонов, и тут же дают расшифровку результатов, которую затем можно сравнить с результатами других участников:
Правило одного клика
Интерактивность не должна предполагать сложных действий. Достаточно одного клика.
Обратите внимание на разноцветные кнопки «Личности», «Опрос», «Видео», «Тест» на сайте Apester. Они открывают доступ к разным категориям контента.
На том же сайте – пример быстрого опроса на тему того, как вы зарабатываете деньги. Достаточно кликнуть на один из вариантов ответа:
Еще один пример – проект Google Art Projeсt. Это целый набор интерактивных инструментов – для подробного просмотра произведений искусства, их сравнения, составления собственных коллекций и многого другого.
Вместо заключения
Сколько конкретно должно быть интерактивных элементов на странице, и каких? Однозначного ответа быть не может. В помощь не только вдохновение и креатив, но и здравый смысл. Потому что цель интерактива – не просто привлечение внимания, а улучшение user experience и в конечном итоге увеличение конверсии.
Как создавать интерактивную инфографику: 9 важных советов
Время чтения: 6 минут Нет времени читать? Нет времени?
С помощью инфографики маркетологи могут преодолевать защиту от информационного шума и доносить до потребителей свои сообщения. Эффективность этого типа контента многократно усиливается благодаря интерактивности. В данной статье вы найдете советы, которые помогут вам создавать интерактивную инфографику.
Совет № 1: узнайте секрет эффективности интерактивной графики
Человек воспринимает визуальную информацию в 60000 раз быстрее по сравнению с текстом. Вот еще несколько факторов, определяющих эффективность инфографики:
Обратите внимание на последний фактор. Люди запоминают 80 % того, что видят и делают. В этом случае объединяются два канала восприятия информации: визуальный и кинестетический. Секрет эффективности интерактивной инфографики как раз заключается в активации визуального и кинестетического канала восприятия.
Иными словами, интерактивная инфографика заставляет человека совершать какие-либо целенаправленные действия во время чтения. Это значительно облегчает передачу и усвоение информации.
Совет № 2: заставьте пользователя прокручивать страницу
Многие интернет-пользователи страдают от гиподинамии. Раз уж они не хотят делать зарядку и гулять по парку, заставьте их хотя бы двигать пальцем. Это повысит интерактивность вашей графики.
С помощью скроллинга пользователь может активировать анимацию и переходить от слайда к слайду. В этом случае он точно докрутит инфографику до конца, так как ему будет жалко бросать начатое на полпути. Посмотрите, как с помощью скроллинга эксперты ВОЗ сделали инфографику на скучную тему довольно веселой и захватывающей.
Совет № 3: используйте пагинацию
Пагинация — это структурирование информации с помощью страниц. Этот способ повышения интерактивности графики практически не отличается от скроллинга. Чтобы просмотреть следующую страницу, пользователю придется пошевелить пальцем и нажать на клавишу мыши.
Обратите внимание на инфографику, приведенную чуть ниже. Ее создатели использовали пагинацию и другие способы повышения интерактивности. Чтобы посмотреть ее целиком, кликните по картинке.
Совет № 4: Позвольте пользователям выделять элементы графики и получать дополнительную информацию
Лучшие образцы инфографики представляют собой один небольшой график, который можно читать часами. Это достигается благодаря возможности выделения элементов и получения сведений о них.
Чуть ниже приведен пример реализации этого решения. Информация о величине невостребованного возмещения по налогам в разрезе штатов могла бы занять 50 слайдов. Вместо этого авторы создали один слайд. Выделив интересующий штат, пользователь получает необходимые данные. Мало кто удержится от соблазна выделить парочку соседних штатов, а потом посмотреть, как обстоят дела на Гавайских островах и Аляске.
А создатели следующей графики объединили два подхода: пагинацию и выделение элементов графики для получения дополнительных сведений. Чтобы посмотреть ее целиком, кликните по картинке.
Совет № 5: позвольте получать дополнительные сведения с помощью кликов
Это еще один простой и эффективный способ заставить пользователя действовать ради получения необходимых сведений. Создатели интерактивной карты мозга стимулируют пользователей нажимать на рисунок мозга и читать о функциях его отделов.
Создателям инфографики о безопасности жилья удалось объединить клики и скроллинг. В результате получился познавательный интерактивный гайд для домовладельцев.
Совет № 6: используйте данные о клиенте
Попросите пользователя предоставить какие-либо сведения и используйте их в инфографике. Вот пример реализации этого подхода: пользователь вводит сведения о своей годовой зарплате, а система показывает, сколько минут требуется супертрейдеру Джону Полсону, чтобы заработать эти деньги.
Вот еще один пример использования данных клиента. Веб-приложение создает графическую модель, которая показывает сферу распространения твитов того или иного пользователя сервиса микроблогов.
Совет № 7: изучите CSS3-переходы, трансформации, анимации, фильтры
Рост популярности интерактивной инфографики коррелирует с аналогичным ростом числа руководств и учебников по CCS3-переходам, анимации и другим свойствам и возможностям. На этом англоязычном сайте вы найдете подробные обзоры и руководства по использованию CSS-переходов, анимации, трансформации включая 3D, а также фильтров. Полезную информацию на русском языке можно получить в онлайне-учебнике HTML5.
Совет № 8: попробуйте эти классные переходы
На этом сайте вы найдете коллекцию переходов, которую можно использовать при создании инфографики.
Совет № 9: воспользуйтесь библиотекой JavaScript для создания D3-объектов
Эта библиотека позволит вам анимировать данные множеством способов с помощью HTML, SVG и CSS. Библиотеку можно использовать абсолютно бесплатно. Кто знает о существовании этой библиотеки, никогда не станет создавать статичную графику.
Интерактивность нужна для вовлечения читателя
Самый простой способ вовлечения посетителя сайта — воспользоваться его любопытством и заставить покрутить колесико мышки. Однако по-настоящему интерактивная инфографика невозможна без действительно ценной и полезной информации. Помните об этом, создавая визуальный контент.
Интерактив, динамика, анимация: делаем сайт, который вызывает эмоции
Когда вы делаете имиджевый сайт, страницу с поздравлением или промо-лендинг, чтобы рассказать о продукте, вы решаете одни и те же задачи: вызвать у посетителя эмоциональный отклик и запомниться. В этом случае недостаточно собрать понятную и удобную страницу: нужно выделиться на фоне других.
К нам в Atman иногда обращаются за сайтами и лендингами, которые должны вызвать у посетителей удивление, радость и любопытство. Рассказываем, как подойти к работе и какие инструменты использовать, чтобы получившийся сайт вызывал положительные эмоции и запоминался.
Эмоциональный сайт начинается с концепции — истории, в основе которой лежит описание целевой аудитории, задача, которую должен решить сайт, и креативная идея. Концепция описывает, кто окажется на сайте, что он должен сделать, и почему сайт ему запомнится. Если не задумываться об аудитории и задаче, то входящий трафик уйдёт в молоко. Если забыть про креативную идею, получится среднестатистический сайт, который вряд ли вызовет эмоцию.
В конце 2019 года к нам обратился производитель онлайн-касс Эвотор. Они хотели сайт-поздравление для сотрудников и партнёров: небольшой лендинг, на котором перечислены достижения компании за последний год. Логика такая: сотрудник видит, как Эвотор развивался на протяжении года, гордится и радуется за себя и коллектив, заполняет открытку в конце и делится ей с друзьями или у себя в соцсетях.
Получается, у Эвотора уже была часть вводных для концепции:
Аудитория — сотрудники и партнёры.
Осталось доработать креативную идею.
В Эвоторе знали, что хотят видеть на сайте анимацию при скролле, новогодние иллюстрации в цветах и стиле компании, а также интерактивный элемент с поздравлением, которым можно было бы поделиться через соцсети, почту или мессенджер.
Вместе с партнерами из Multiways мы придумали креативную идею: Дед Мороз проникает в дом Эвотора, ходит по этажам и собирает подарки, каждый из которых символизирует достижение компании. Дед Мороз складывает их в мешок, который постепенно растёт. В какой-то момент на дедушку налетает снежный ком и подарки рассыпаются. Пользователь собирает из них открытку и делится с друзьями и коллегами.
Продумайте, у кого и в ответ на что должна возникнуть эмоция. Соберите мысли в текст и подкрепите набросками. У вас получится концепция — основа будущего сайта.
В проекте для Эвотора задачей открытки было подтолкнуть пользователя поделиться брендовым контентом. Но использовать интерактив можно и для других целей: вовлечь в изучение нужного раздела, предложить посоревноваться с друзьями, дать возможность собрать продукт или услугу из индивидуальных опций.
У интерактивного сайта больше шансов вызвать у посетителя эмоции. В этом помогают ползунки с конфигурациями, тесты, анимация объектов на сайте при наведении или клике. Когда пользователь может с чем-то взаимодействовать, он сильнее вовлекается в изучение контента, сайт получается живее.
Например, открытку в проекте с Эвотором мы решили построить вокруг механики перетаскивания: подарки Деда Мороза рассыпаются, теперь ими можно украсить ёлку, перетащив по одному. Над ёлкой оставляем пустое место для имени получателя. Когда пользователь заканчивает собирать подарки на ёлку, он нажимает «создать открытку» и отправляет картинку по почте или в мессенджере.
Но будьте осторожнее. Главная сложность в работе с интерактивными элементами — продумать, как они будут работать на мобильных устройствах. Так, чтобы сделать открытку, мы использовали связку из нескольких JS-библиотек и самописный рендер картинки из вектора в растр. Это помогло оптимизировать открытку под любые устройства, но потратило дополнительно время разработчика. С одной стороны — трата, с другой — дополнительная ценность для пользователя — открытку создало 400 человек.
Нестандартные интерактивные элементы могут повлиять на бюджет проекта. Но затраты зачастую окупаются положительными эмоциями от сайта.
Красиво показать продукт и вызвать «вау-эффект» у пользователя стоит дорого. Если вы строите жилой комплекс или развиваете сеть отелей, то для хорошей фото или видеосъёмки придётся остановить работу, убраться на площадке, вывести сотрудников. Товарному бизнесу немного проще, но всё равно нужно найти подходящего фотографа, подготовить реквизит, списать часть товара, который будет использован во время съёмки.
Мы используем более доступный способ достигать «вау-эффекта» на сайте — живые иллюстрации. Это анимированные картинки, которые мы умеем по-разному подать: анимировать при скролле, клике, наведении или движению мыши, зацикливать воспроизведение. Способ анимации зависит от задачи.
Тренд на использование рисованных иллюстраций появился несколько лет назад, и сейчас они встречаются довольно часто, поэтому одними иллюстрациями пользователя не удивить. Но когда эта штука вдруг начинает двигаться — это всегда приятный сюрприз.
Самый простой сделать живую иллюстрацию — создать gif-файл (гифку), но тут есть три проблемы. Во-первых, у гифки нельзя сделать прозрачный фон, так что её сложно сочетать с фоном сайта. Во-вторых, гифка — это, по сути, последовательность изображений, поэтому она может весить несколько мегабайт, а для сайта это слишком — скорость загрузки снизится. В-третьих, гифку не привяжешь к скроллу, поэтому возможности использования ограничены.
Вместо gif-файлов мы рисуем векторные иллюстрации и анимируем их в After Effects. Чтобы добавить анимацию на сайт, используем плагин Bodymovin. Если делаем сайт не с нуля, а на конструкторе Webflow, то разработчик не потребуется: анимации настраиваются в два клика.
Добавляем интерактивные компоненты на сайт в соответствии с веб-стандартами
Интерактивные компоненты и анимация, добавленные к дизайну, не должны быть слишком сложными или делать сайт недоступным при использовании современных веб-стандартов. В этой статье мы рассмотрим несколько примеров и концепций, в которых задействованы CSS, HTML, SVG, элемент холста и JavaScript. Возможно, кое-что из этого вам уже знакомо, а что-то вы не принимали во внимание. Начнем с азов.
1. HTML и JavaScript
Использование библиотек JavaScript, таких как jQuery, поможет вам забыть о проблеме кросс-браузерности. Библиотека также обеспечивает стандартную функциональность для более быстрого взаимодействия с HTML. Перед началом работы с jQuery, необходимо изучить основы JavaScript, с тем, чтобы знать не только возможности библиотеки, но и понимать, как это реализуется. Если вы будете это понимать, то сможете писать свои собственные скрипты на языке JavaScript.
Пример слайд-шоу
На сайте Momento App вы видите горизонтальное слайд-шоу. При каждом клике вправо или влево картинки сменяются.
На сайте Momento App встроен собственный jQuery плагин для организации слайд-шоу.
Как это реализовано
На картинке вы можете видеть, как пять слайдов расположены для движения внутри своих контейнеров. Контейнер будет обрезать всё, что находится за его границами, поскольку overflow установлен в значении hidden, что и создаёт эффект проекционного окна.
Вид контейнера и скрытых элементов
Такую структуру можно реализовать, используя только CSS и HTML. Здесь JavaScript используется для того, чтобы слайды прокручивались, при нажатии кнопок “Next” и “Previous”. Использованный на сайте Mamento App JavaScript достаточно сложный, надеюсь, что читателям будет интересно самим в нём разобраться. Мне кажется, это станет хорошим примером того, как элементы HTML изменяются, в то время как структура документа остаётся неизменной.
В каких случаях следует использовать JavaScript
На сайте Mamento App мы видим, насколько JavaScript полезен для контролирования доступа к содержимому. Показ и скрытие объектов помогают сохранить видимые объекты чёткими, что значительно улучшает их восприятие пользователем.
Сайт должен продавать, и слайд-шоу делает товар в глазах зрителя более привлекательным, чем это есть на самом деле. Такие интерактивные решения наилучшим образом подходят для рекламного контента.
В каких случаях не следует использовать JavaScript
Если использование JavaScript не будет отвечать всем вышеперечисленным требованиям, то лучше его и не использовать. Задумайтесь, нужны ли вам дополнительные броские элементы.
Всё может быть удобно и доступно, но это не всегда значит, что все компоненты могут быть технически реализованы на сайте. Так же сайт должен быть простым и понятным для пользователей любого возраста и в любой ситуации.
Материалы по теме
Рамочная модель CSS
Слова «интерактивность» и JavaScript стали практически синонимами в веб-дизайне, и всё же JavaScript не всегда необходим, в чём вы сможете убедиться, рассмотрев следующие примеры.
2. CSS3 переходы
Дизайнер Кристофер Зилгенс (Christoph Zillgens) использует CSS3 переходы для усиления эффекта от применения псевдо-класса :hover. Ниже представлены этапы перехода:
Три этапа перехода: по умолчанию, промежуточный, с наведённым курсором
Как это реализовано?
Мы можем видеть, что в HTML и CSS тэги a и span преобразованы в блочные элементы, что даёт возможность устанавливать позицию и размер. Они имеют два значения, «по умолчанию» и «с наведённым курсором» (A и C на рисунке выше)
По умолчанию, элемент span имеет значения: opacity 0 и top 150px. С наведённым курсором, span имеет значения: opacity 1 и top 130px. Между позициями A и C ссылка имеет стандартный цвет фона.
В данном случае, этап «с наведённым курсором» идёт сразу же после этапа «по умолчанию». Это прекрасно работает в старых браузерах, но в CSS3 можно создать плавный переход между этими двумя этапами.
Добавление перехода
| 1 | transition: [transition-property] [transition-duration] [transition-timing-function] |
Создать новый переход так же просто, как задать состояние по умолчанию и с наведённым курсором в CSS, а переход между ними будет анимироваться при помощи свойства transition.
Когда стоит использовать CSS переход
Использование свойства перехода с помощью псевдо-класса :hover является очень удобной техникой, без применения JavaScript, что может сэкономить время и пространство.
Так же переход может быть осуществлён за счёт динамического HTML с использованием JavaScript. Если вы уже привыкли к добавлению классов на JavaScript для изменения стилей, давайте рассмотрим различия, возникающие в таком случае.
Хорошие новости для любителей всё портить. В ранних версиях браузера Internet Explorer данные свойства игнорируются, и изменение стиля применяется мгновенно. Таким образом, будет сложно найти ситуацию, при которой использование перехода снизит функциональность.
Другие примеры
Вот несколько сайтов, на которые стоит обратить внимание, где так же используются CSS переходы.
Материалы по теме
Здесь представлены статьи, в которых тщательно рассматриваются CSS переходы:
3. Анимация с использованием SVG
Hover-эффект хорошо применять на ссылках, но это может сбить с толку, когда он неожиданно срабатывает на других элементах. Так же его сложнее применять на тачскринах. Несомненно, добавление интерактивных компонентов, отвечающих на клик пользователя, является удачным решением, поскольку обеспечивает обратную связь, а в некоторых случаях делает сайт удобнее в использовании.
На сайте Get Satisfaction использована оригинальная техника для демонстрации 12 различных картинок. В данном случае использована масштабируемая векторная графика (SVG).
В «колесе удовольствия» анимируется растровое изображение.
Часть HTML кода для колеса выглядит так:
| 4 | preserveAspectRatio = «none» href = «sites/all/themes/getsatisfaction/images/wheel_logos.png» |
Вы можете увидеть, что колесо находится внутри svg элемента. SVG основанн на XML, поэтому может быть прописан в HTML. SVG является более удобным форматом, поскольку ему можно задать свойство attribute, что позволяет поворачивать, масштабировать и искажать объект (в отличии от стандартных HTML тегов).
Чтобы создать и анимировать колесо, на сайте Get Satisfaction была использована библиотека под названием Raphaël, а так же jQuery:
Настоящая SVG анимация
| 2 | animate attributeType = «CSS» attributeName = «opacity» from = «1» to = «0» dur = «5s» repeatCount = «indefinite»/> |
Для лучшей интерактивности, SVG может содержать даже ECMAScript (стандартный язык описания, на котором основан JavaScript) Если вы хотите узнать больше по данной теме, я бы предложил вам начать со статьи Питера Колингринджа “Mouseover Effects in SVGs.”
Когда стоит использовать SVG анимацию
Всегда рассматривайте все плюсы и минусы новой технологии. Самое логичное решение не всегда самое простое. Формат SVG предоставляет альтернативное графическое окружение, а его масштабируемый размер является безусловным преимуществом в сравнении с растровыми изображениями.
Причиной, по которой SVG редко используется, является то, что Internet Explorer (ниже 9 версии) не поддерживает данный формат. В библиотеке Raphaël, которая используется на сайте Get Satisfaction, SVG автоматически заменяется на VML (язык векторной разметки), который IE понимает.
Статьи по теме.
Масштабируемая векторная графика редко используется Веб-дизайнерами. Здесь представлены несколько статей для вдохновения.
4. Анимация с использованием элемента холста
CSS переходы, которые мы рассмотрели выше, могут изменить любое количество свойств создать много визуальных эффектов, но они ограничены стилями CSS и переходами с заданной длительностью. Есть ли способ создать более продвинутую анимацию?
На странице ОС компании Google можно увидеть hover-эффект с непрерывной анимацией.
Особенности Chrome: каждый объект анимируется с hover-эффектом.
Чтобы узнать, как это работает, давайте взглянем на код:
| 2 | canvas class = «c1» height = «150» id = «canvas-uuid-1» onmouseout = «javascript:hideBadge(0)» onmouseover = «javascript:showBadge(0);» width = «150» style = «cursor: default; » > |
Тут есть ссылка a, содержащая элемент холста (который содержит изображение). В браузерах, не поддерживающих холст, это изображение не будет видно.
Гугловский 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 является запатентованной программой, и не имеет открытого кода. Но следует признать, что во многих случаях он может быть намного эффективнее, а в некоторых случаях (например, при работе с видео), может быть единственным средством.
Однако всегда стоит учитывать все за и против. Вы будете сильно удивлены, узнав, что можно сделать при помощи современных стандартов. Несмотря на негативную критику со стороны многих веб-дизайнеров и разработчиков, флэш остаётся конкурентоспособным форматом. Но при внедрении новых стандартов это всё больше обсуждается.
Подведем итоги
Мы рассмотрели несколько отличных примеров того, что может быть достигнуто с помощью современных веб-стандартов.
Несколько основных моментов, которые стоит запомнить:
И напоследок
Когда же необходимы библиотеки JavaScript? Мы уже рассмотрели примеры с canvas и SVG, в которых они используются. Так же библиотеки JavaScript предназначены для того, чтобы обеспечить стандартную функциональность, что поможет сэкономить ваше время при выполнении проекта. Но использование их для создания отдельного элемента может привести к излишней нагрузке. На сайте Get Satisfaction библиотека Raphaël использована только для создания эффекта вращения. Можно ли этого добиться без Raphaël?
Да… но всё не так просто. Браузеры типа Internet Explorer не поддерживают SVG, поэтому в библиотеке Raphaël используется VML. Внимательно изучите проблему, прежде чем предложить своё собственное решение. Это может оказаться сложнее, чем вы думали.
Существуют библиотеки, такие как Modernizr, с помощью которых можно легко изолировать отдельные функции. На неё определённо стоит обратить внимание. После превью бета-версии Modernizr, это стало очевидно, и теперь Modernizr предоставляет полноценную библиотеку под ваши конкретные нужды.