Недавно Алекс дал нам подробное представление о графической библиотеке JavaScript gRaphaël в новостной рассылке Design View . Мы полагали, что те из вас, кто не подписан на рассылку, могут получить удовольствие от этой статьи, поэтому мы публикуем ее здесь. И если вам случится получить от этого удовольствие, почему бы не заглянуть в раздел новостных рассылок sitepoint.com и подписаться на бесплатную ежемесячную порцию дизайнерского совершенства. Без дальнейших церемоний, вот статья Алекса.
Взгляните на статистику использования браузера ниже. Сколько времени вам понадобилось, чтобы построить мысленную модель того, что говорят данные?
Таблица 1. Статистика использования браузера
| браузер | Посетители |
|---|---|
| Fire Fox | 1149422 |
| IE | 551315 |
| Хром | 172095 |
| Сафари | 166565 |
| опера | 53329 |
| Mozilla | 18060 |
Пять секунд? 10? Может быть, вы потеряли интерес и ушли.
Теперь сравните это с круговой диаграммой с той же информацией на рисунке 1 «Круговая диаграмма использования браузера»
Несмотря на то, что отнюдь не невозможно понять таблицу, большинство из нас может получить лучшее понимание при беглом взгляде на круговую диаграмму.
Итак, мы все согласны с тем, что графики отличные, но как их использовать в Интернете? Давайте разберем ваши текущие варианты.
Наиболее очевидный подход — тот, который я использовал в приведенном выше примере: создайте график в стороннем приложении (например, Photoshop, Illustrator, Fireworks или другим способом) и экспортируйте файл изображения для встраивания в вашу страницу.
Хотя это просто, недостатки довольно очевидны.
Во-первых, любые новые или измененные данные требуют редактирования и повторной загрузки вашего изображения. Однако если вы технически подкованы, то серверные библиотеки кода, такие как PHP GDLibrary, позволяют создавать JPEG-файлы «на лету».
Во-вторых, ваши данные «запекаются» в файл изображения, что означает, что нет простого способа преобразовать вашу информацию обратно в числа. Изображение также постоянно заблокировано в одном размере и разрешении. Чуть катастрофичнее, но не идеально.
Интерактивные графики и диаграммы стали одной из самых успешных историй Flash, особенно их способности легко сочетаться со стандартным веб-контентом HTML.
Google Analytics , возможно, является мировым автором динамической флэш-инфографики. Сейчас существуют десятки библиотек ( Inchoo , FusionCharts и Flash Graph Application , для начинающих), чтобы сделать представление данных с помощью Flash относительно безболезненным.
Хотя я думаю, что визуализация данных является одним из лучших приложений для Flash, она все еще наследует часть багажа, связанного с Flash. Для меня проблема номер один — плохая поддержка мобильных браузеров, особенно Safari. Тем не менее, позиция Apple по Flash кажется маловероятной в ближайшем будущем.
Можно утверждать, что самой захватывающей новой веб-технологией 2009 года стало появление нескольких новых графических систем с векторным питанием. Действительно, в представлении « Дизайн» мы уже рассмотрели систему замены текста Cufon и библиотеку рисунков RaphaelJS .
Каждая из этих технологий использует JavaScript для нацеливания на стандартные элементы вашей страницы — текст и изображения соответственно — и заменяет их новыми и более мощными векторными эквивалентами. Классная вещь.
Позвольте мне представить Рафаэля — младшего брата Рафаэля. В то время как «Раф» — всесторонний парень, который рисует в векторе, gRaphaël придерживается того, что он делает лучше всего: рисовать гладкие, анимированные веб-графики без использования Flash.