Color Picker для веб-приложений

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

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

Описанные выше доводы, по всей видимости, стали одной из причин реализации photoshop-style color picker для веб-приложений. И не просто какой-то отдельно взятой реализации, а целой толпы JavaScript-аналогов.

Один из хороших примеров CP сделан на основе уже упоминавшейся раньше библиотеки Mootools. Окошко с палитрой появляется прямо внутри страницы:

На странице проекта продемонстрированы разные варианты внедрения color picker-а. Например, еще есть вот такой миниатюрный:

Вариант на базе Mootools ине понравился больше других, но если кому-то противит использование JS-фреймворков (по религиозным причинам или по причине 90 килобайт, на которые несжатый MT утяжеляет первую загрузку), можно отдать предпочтение «независимому» скрипту.

Один из них отличается тем, что появляется в виде отдельного popup окна и имеет дополнительную возможность ограничения выбора только из палитры безопасных цветов:

А другой — тем, что дружит не только с цветовой моделью RGB, но и HSB:

Ссылки по теме

• «How to Create a Color Picker in JavaScript» by Mark Kahn — большое и подробное описание того, как написать color picker самостоятельно.
• Mootools — упомянутый выше фреймворк Mootools, предназначение которого отнюдь не ограничено описанным в данной заметке применением.
• Yahoo! UI Library: Color Picker Control — еще одно заслуживающее и внимание решение с поддержкой RGB и HSV.

PS: А вы знаете, что Миша Квакин бесплатно рисует всем желающим прикольные оранжевые иконы для RSS-фидов? RSS-кружка, в левом верхнем углу этой страницы — его творчество (она видна, если вы читаете заметку на сайте, а не в каком-нибудь Гуглридере). И если он нарисует для меня за этот анонс что-то совсем бесподобно-потярсающее, буду ему премного благодарен. Кстати, да, это был неприкрытый PR.

Массовая загрузка файлов

Загрузка файлов — достаточно типовая и несложная задача в реализации веб-приложений. Несложная — с точки зрения разработчика, т.к. самое очевидное (и поэтому самое массовое) ее решение сводится к написанию обработчика для HTML формы с одним или несколькими элементами <input type=”file”>. В итоге для пользователя возникает необходимость открывать диалог выбора файлов столько раз, сколько файлов нужно загрузить, что, мягко говоря, неудобно, когда этих файлов больше одного. Кроме того, стандартное решение содержит в себе еще один недочет, проявляющий себя при большом объеме загружаемых данных. Процесс загрузки практически никак не отражается стандартными средствами интерфейсов большинства браузеров, не смотря на то, что он может затянуться на десятки секунд, а то и минуты. Сообщение в статусной строке типа «Sending request to http://blah-blah-blah.com» неприметно и малоинформативно, т.к. никак не иллюстрирует динамику загрузки.

Многие веб-сервисы предоставляют специальные утилиты для массовой загрузки, которые частично решают проблему. Особенно это распространено на фотохостингах, где хорошими примером может стать Picasa для Picasa Web Albums. Тем не менее, такой подход не всегда пригоден, т.к. существует множество причин, которые могут помешать пользователю пользоваться подобными инструментами. Например, отстутствие технической возможности из-за ограниченных прав, нежелание захламлять компьютер, нехватка времени или банальная лень (99% случаев).

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

А сегодня совершенно случайно я наткнулся именно на то, чего раньше не хватало. Это инструмент для массовой загрузки файлов на сервер, который для своей работы не требует ничего кроме браузера с установленным Flash. FancyUpload основан на JavaScript-фреймворке MooTools и, как обещают разработчики, дружит с Internet Explorer 6+, Opera 9, Firefox 1.5+ и Safari 2+.

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

• Описание FancyUpload
• Демонстрация работы загрузчика
• Пример серверного скрипта для обработки загруженных файлов на PHP
• MooTools скачиваются отдельно