Cyrill

Из RSS-потока Information Aesthetics почерпнул великолепную закладку - Information Design Patterns

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

Те, кто хоть раз сталкивался с задачей “описать неописуемое” — оценят.

Вы когда-нибудь играли в ассоциации? Типа “вода — мокрая, “превед — медвед” и “маша — растеряша”? Наверняка, в детстве. Тепрь у вас есть шанс поиграть в ассоциации со всей планетой — встречайте Human braincloud:

Идея очень простая: вы можете либо играть в ассоциации, вводя первое, что приходит на ум при виде задаваемого вам слова “Маша? Растеряша!”, либо задавать слова, глядя на реакцию пользователей, либо просто смотреть на движение облака. Чем толще связывающая два слова нить — тем прочнее ассоциация. На картинке — реакция посетителей сайта на известный мем =)

Попробуйте — вам понравится — я уже полчаса не могу оторваться.

Via information aesthetics (a must-read!).

Маленький плагинчик к jQuery, позволяющий оградить пользователей от ввода букв в цифровые поля, цифр в буквенные и всякой излишней гадости в цифро-буквенные =)

Разумеется, как и любая проверка на клиенте, этот скрипт имеет лишь превентивное действие. Если вы опасаетесь попыток взлома (а вы их опасаетесь, я уверен), обязательно проверяйте данные и на сервере.

Скрипт доработан напильником и понимает по-русски. Использовать его очень просто:

1. Добавьте в ваш код jQuery (если еще не добавили =)) и модифицированный alphanumeric:

2. Обозначьте поля ввода, которые требуется отслеживать классами. Например, alpha_only, alphanum и num_only:

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

Скачайте обрусевший скрипт тут. За дополнительной документацией и примерами — проходите на сайт разработчика плагина.

Перевел плагин date_input для JQuery на русский. Там три строчки, я знаю =) Тем не менее, пользуйтесь на здоровье.

Date_input – плагин для того, чтобы из унылых полей ввода даты (”введите 01-02-2005 и не пропустите ни одного дефиса”) делать вот такие конструкции:

Очень легкий скриптик, при этом – изначально очень симпатичный =))

Чтобы воспользоваться плагином, выполните ряд несложных действий:

1. Добавьте в ваш javascript JQuery, JQuery.dimension , собственно, date_input и, наконец, мой файлик с локализацией:

2. Автор плагина рекомендует присваивать всем элементам ввода единый класс – так и вправду удобнее инициализировать плагин. Я делаю это по готовности страницы:

Все, красивое и удобное поле ввода даты готово к работе.

В предыдущей записи я начал обзор средств построения графиков для веб. Там речь шла о разнообразных flash-компонентах, позволяющих визуализировать ваши данные. Пришло время продолжить – сегодня вашему вниманию 16 средств для построения графиков при помощи CSS/AJAX/Javascript. Никаких серверных скриптов и никакого flash – только javscript, CSS и динамический HTML. Этот обзор дополняет предыдущий, завершая тем самым мини-цикл, посвященный построению client-side графиков и диаграмм.

1. PlotKit - Javascript Chart Plotting

PlotKit – свободно распространяемый скрипт, основанный на Mochikit и предназначенный для отрисовки разнообразных диаграмм. Существует два режима работы:

• при помощи html-объекта canvas с поддержкой браузеров Safari 2+, Opera 9+, Firefox 1.5+ и IE 6 в режиме эмуляции canvas
• SVG (в Opera 9+, Firefox 1.5+ с ограничениями и IE6 с поддержкой Adobe SVG)

2. Plotr

Легкий (12Кб) свободно распространяемый скрипт, основанный на предыдущем – PlotKit. Не требует наличи MochiKit, ради чего, собственно, и задумывался (правда, добавился Prototype :-)). В отличие от PlotKit, использует только html canvas. Декларируется работа в следующих браузерах: Firefox 1.5+, Safari 2.0+, Opera 9.0+ и IE6+ в режиме эмуляции html canvas.

3. Flot

Свободно распространяемый плагин для jQuery, предназначенный для построения графиков из различных наборов данных на лету на стороне клиента. Фишка – в простоте использования (все настройки являются опциональными), привлекательном внешнем виде и интерактивных примочках, типа увеличения на лету. Несмотря на простоту в использовании, Flot достаточно продвинут для работы в сложных Web2.0 приложениях.

Плагин должен работать на всех свежих браузерах, отрисовка производится при помощи тега canvas везде, кроме IE. Там используется javascript-эмуляция – excanvas.

Под катом - еще 13 javascript-графиков.
Читать полностью »

Если вы занимаетесь разработкой интерфейсов, то наверняка сталкивались с необходимостью разместить на страницах вашего проекта график или диаграмму того или иного содержания и вида: в одном случае это мог быть график суточного отсева спам-сообщений, в другом – “живая” диаграмма, отображающая количество комментариев к вашей статье.

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

Однако, ситуация меняется к лучшему, о чем я и решил написать. Итак, flash-средства построения графиков, чартов и диаграмм для веб. Они имеют единственный, правда весьма заметный недостаток – если у посетителя отключен флэш, он ничего не увидит. Если вы хотите подстраховаться - было бы неплохо проверять наличие включенного flash и отдавать либо статические графики, либо предупреждение о том, что нужно включить отображение flash.

Кстати, я установил Snap – стало ли от этого удобнее?

1. FusionCharts Free

Мощное и достаточно распространенное бесплатное средство для построения 22 типов графиков и диаграмм на страницах вашего сайта или интранета. Предлагается обертка для упрощения построения графиков на PHP. На сайте производителя существует шикарная документация с примерами использования для различных языков программирования и статического XML.

Для тех, кому всегда мало – имеется коммерческая версия FusionCharts, предлагающая дополнительные опции визуализации типа трехмерного освещения, еще 23 типа графиков и, как уверяет разработчик, полную поддержку AJAX/Javascript. Цены - от 69 до 4500 долларов.

Кроме бесплатного решения для разработчиков, FusionCharts предлагает воспользоваться своим компонентом в виде Google Gadget -визуального конструктора, позволяющего создать график и получить код для его размещения на страницах вашего сайта.

2. amCharts

Еще одно средство построения анимированных графиков на flash. Умеет строить кольцевые диаграммы, классические графики X-Y и многое другое. На сайте и в блоге разработчика приводятся образцы использования и документация. Имеется форум технической поддержки.

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

3. AnyChart Flash Chart Component

Исключительно коммерческий и весьма недешевый (от $499 за лицензию на одного разработчика) flash-компонент для построения анимированных диаграмм. Предлагается более 60 типов графиков и ряд интересных опций – например, возможность сохранить график как картинку.После регистрации на сайте становится доступна пробная версия компонента.

Под катом - еще восемь flash-компонентов для построения графиков.

Читать полностью »

Допустим, вы - крутой фотограф. Или крутой художник. Или, в конце-концов, купили по дешевке хорошую зеркальную камеру с большим объективом ™ и хотите выложить свои фотографии в интернет на обозрение публики. Тут два варианта: либо у вас уже есть правильный хостинг, либо его у вас еще нет =) Если нет - ваш путь лежит на всякие разные фотосайты, fotki, flickr и прочие picasa. если говорить про чужой хостинг, мне лично нравится fishup, правда там есть ряд ограничений в бесплатном аккаунте.

Если у вас есть хостинг, можно попробовать разместить собственную галерею: тут от выбора начинают разбегаться глаза, поскольку вариантов технической реализации -уйма. Тут и масса phpMy*-style галерей, надстроек к различным форумным движкам, наконец - галерей, построенных при помощи Flash. PHP, как средство построения, хорош всем, за исключением необходимости поддержки его на хостинге (что, правда, уже весьма распространено) и, галереи, построенные на PHP как правило требуют наличия базы MySQL, что немного сложнее. С другой стороны, flash-галереи можно кидать где угодно, но требуется знание ActionScript. Кроме того, не всегда возможно отредактировать исходник - например, если автор не распространяет *.fla файл в составе галереи.

Выход из ситуации - CSS/DHTML/Javascript - эта связка не требует серверной поддержки, и, на мой взгляд, значительно более изящна чем все вышеперечисленные. Огромный плюс всех перечисленных решений - они все значительно красивее галерей, которые предлагает, например, narod.ru. Поэтому, имея фотографии на народ.ру, достаточно использовать любой из перечисленных ниже скриптов, чтобы заиметь действительно красивую фотогалерею. Проблема у такого подхода всего одна: совсем старые браузеры могут некорректно отображать или вовсе не отображать вашу галерею. Но таких браузеров, к счастью, уже не так много =

Впрочем, к делу: вашему вниманию обзор ряда фотогалерей и сопутствующих решений, построенных на CSS/DHTML/Javascript. Да, чуть не забыл: превьюшки для галерей, скорее всего, придется генерить самостоятельно

1. Lightbox 2
Ненавязчивый скриптик, позволяющий отображать картинки поверх открытой страницы. Поддерживает серии изображений и крайне прост в использовании. Простота, помимо всего, открывает широкие горизонты для доработчиков напильником, позволяя интегрировать скрипт в более сложные проекты.

2. Imago
Скрипт галереи, построенный на mootools. Умеет показывать картинки как из папки на сервере, так и с Flickr. Как утверждает автор, его миссия - сделать простую в использовании, но достаточно хорошо настраиваемую галерею.

3. Adobe Spry Photo Gallery
С удивлением для себя обнаружил очередной AJAX-фреймворк - Adobe Spry. Подозреваю, что он - тема для отдельного обзора, но сейчас имею предложить вниманию читателя фотогалерею, построенную с помощью этого фреймворка. Судя по всему, это не самый простой путь, но возможности открывает достаточно широкие. Взгляните сами:

Под катом - еще пять вариантов фотогалереи без применения PHP или любого другого серверного языка =)

Читать полностью »

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

Если вы работаете в веб-разработке (дизайне, юзабилити или смежных областях), вам, вероятно, хочется добавить удобства вашим табличнеым данным — сортировка, отбор данных по заданным критериям и даже редактирование — все это возможно. Но как? Ниже — обзор нескольких решений, позволяющих прокачать ваши таблицы до предела. Стоит оговориться - все это происходит на стороне клиента, поэтому следует озаботиться наличием у ваших посетителей современных браузеров.

1. Tablesorter
Плагин для JQuery, позволяющий легко добавить сортировку (по нескольким столбцам!) к таблицам. Достаточно легкий, поддерживает пакеты стилей (скины), имеет интерфейс для написания и подключения виджетов, одним из которых является поставляемая в комплекте зебра. Имеется автоматическое определение типа данных в столбце - впрочем, не всегда корректно работающее — мне пришлось писать собственный сортировщик для дат в формате дд-мм-гггг, что, впрочем, нисколько не умаляет достоинств этого скриптика.
A favorite of mine =)

2. ExtJs Grid
Поддержка схлопывающихся строк, вписывания в площадь, выбора строк стандартными чекбоксами и горизонтальной прокрутки. Можно навешивать свои панели инструментов.

3. dhtmlxGrid
Постраничное разбиение больших таблиц, отбор данных, итоговые поля, поддержка drag’n'drop, сериализация и импорт данных в/из xml и csv, поддержка скинов либо пользовательских css.

4. Phatfusion sortable
Сортировка таблиц с возможностью отбора данных. Требует наличия mootools > 1.11

Под катом — еще деcять разновидностей воплощения динамической таблицы с применением DHTML/Javascript/AJAX. А местами —даже Ruby On Rails Читать полностью »