<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Paradigm.ru &#187; mootools</title>
	<atom:link href="http://paradigm.ru/tag/mootools/feed" rel="self" type="application/rss+xml" />
	<link>http://paradigm.ru</link>
	<description>Блог Александра Мусаева</description>
	<lastBuildDate>Sat, 08 May 2010 16:13:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Color Picker для веб-приложений</title>
		<link>http://paradigm.ru/2008/05/javascript-color-picker</link>
		<comments>http://paradigm.ru/2008/05/javascript-color-picker#comments</comments>
		<pubDate>Fri, 09 May 2008 14:45:07 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Дизайн интерфейсов]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[веб-дизайн]]></category>
		<category><![CDATA[дизайн интерфесов]]></category>
		<category><![CDATA[цвета]]></category>

		<guid isPermaLink="false">http://paradigm.ru/?p=313</guid>
		<description><![CDATA[Когда-то давным-давно в&#160;застенках Adobe изобрели простой и&#160;удобный интерфейс инструмента, выбирающего цвета из&#160;палитры. Интерфейс получился настолько удачным, что почти без изменений пережил множество версий Photoshop и&#160;другого ПО&#160;этого производителя. Кроме того, он&#160;превратился в&#160;&#171;народное достояние&#187; и&#160;стал использоваться сторонними разработчиками, как решение де-факто. Одной из&#160;значимых характеристик интерфейса любого правильного приложения является неспособность &#171;удивлять&#187; пользователя, ставя его перед необходимостью думать [...]]]></description>
			<content:encoded><![CDATA[<p>Когда-то давным-давно в&nbsp;застенках Adobe изобрели простой и&nbsp;удобный интерфейс инструмента, выбирающего цвета из&nbsp;палитры. Интерфейс получился настолько удачным, что почти без изменений пережил множество версий Photoshop и&nbsp;другого ПО&nbsp;этого производителя. Кроме того, он&nbsp;превратился в&nbsp;&laquo;народное достояние&raquo; и&nbsp;стал использоваться сторонними разработчиками, как решение де-факто.</p>
<div class="i"><img src="http://paradigm.ru/;-)/2008/05/00photoshop-cp.jpg" alt="" title="photoshop color picker" width="548" height="364" /></div>
<p>Одной из&nbsp;значимых характеристик интерфейса любого правильного приложения является неспособность &laquo;удивлять&raquo; пользователя, ставя его перед необходимостью думать не&nbsp;только о&nbsp;выполняемой работе, но&nbsp;и&nbsp;об&nbsp;инструменте. Это одно из&nbsp;обоснований унификации UI&nbsp;и&nbsp;применения общепринятых решений (конечно, не&nbsp;стоит интерпретировать такое утверждение, как пропаганду консерватизма и&nbsp;унылого ретроградства, просто любое решение, в&nbsp;том числе отклонение от&nbsp;стандартов, должно быть осмыслено и&nbsp;обосновано).</p>
<p>Описанные выше доводы, по&nbsp;всей видимости, стали одной из&nbsp;причин реализации photoshop-style color picker для веб-приложений. И&nbsp;не&nbsp;просто какой-то отдельно взятой реализации, а&nbsp;целой толпы JavaScript-аналогов.</p>
<p>Один из&nbsp;хороших примеров CP&nbsp;сделан на&nbsp;основе уже упоминавшейся раньше библиотеки <a href="/tag/mootools">Mootools</a>. Окошко с&nbsp;палитрой появляется прямо внутри страницы:</p>
<div class="i"><img src="http://paradigm.ru/;-)/2008/05/01mootools-cp.jpg" alt="" title="mootools color picker" width="431" height="355" /></div>
<p>На&nbsp;странице проекта продемонстрированы разные варианты внедрения color picker-а. Например, еще есть вот такой миниатюрный:</p>
<div class="i"><img src="http://paradigm.ru/;-)/2008/05/02mootools-cp.jpg" alt="" title="mootools color picker" width="431" height="151" /></div>
<p>Вариант на&nbsp;базе Mootools ине понравился больше других, но&nbsp;если кому-то противит использование JS-фреймворков (по&nbsp;религиозным причинам или по&nbsp;причине 90&nbsp;килобайт, на&nbsp;которые несжатый MT&nbsp;утяжеляет первую загрузку), можно отдать предпочтение &laquo;независимому&raquo; скрипту.</p>
<p><a href="http://b23.ru/pqu">Один из&nbsp;них</a> отличается тем, что появляется в&nbsp;виде отдельного popup окна и&nbsp;имеет дополнительную возможность ограничения выбора только из&nbsp;палитры <a href="http://b23.ru/pqx">безопасных цветов</a>:</p>
<div class="i"><img src="http://paradigm.ru/;-)/2008/05/03js-cp.jpg" alt="" title="advance color picker that handles rgb, hsl, and hexadecimal values" width="471" height="399" /></div>
<p>А&nbsp;<a href="http://b23.ru/pq7">другой</a>&nbsp;&#8212; тем, что дружит не&nbsp;только с&nbsp;цветовой моделью RGB, но&nbsp;и&nbsp;HSB:</p>
<div class="i"><img src="http://paradigm.ru/;-)/2008/05/04imageaxd.jpg" alt="" title="PhotoShop-like JavaScript Color Picker by John Dyer" width="450" height="300" /></div>
<h3>Ссылки по&nbsp;теме</h3>
<ul>
<li>&laquo;<a href="http://b23.ru/pq6">How to&nbsp;Create a&nbsp;Color Picker in&nbsp;JavaScript</a>&raquo; by&nbsp;Mark Kahn&nbsp;&#8212; большое и&nbsp;подробное описание того, как написать color picker самостоятельно.</li>
<li><a href="http://b23.ru/pq2">Mootools</a>&nbsp;&#8212; упомянутый выше фреймворк Mootools, предназначение которого отнюдь не&nbsp;ограничено описанным в&nbsp;данной заметке применением.</li>
<li><a href="http://b23.ru/pqd">Yahoo! UI&nbsp;Library: Color Picker Control</a>&nbsp;&#8212; еще одно заслуживающее и&nbsp;внимание решение с&nbsp;поддержкой RGB и&nbsp;HSV.</li>
</ul>
<p>PS:&nbsp;А&nbsp;вы&nbsp;знаете, что Миша Квакин бесплатно рисует всем желающим <a href="http://www.design-freak.com/2008/05/06/rss-icons-campaign/">прикольные оранжевые иконы</a> для RSS-фидов? RSS-кружка, в&nbsp;левом верхнем углу этой страницы&nbsp;&#8212; его творчество (она видна, если вы&nbsp;читаете заметку на&nbsp;сайте, а&nbsp;не&nbsp;в&nbsp;каком-нибудь Гуглридере). И&nbsp;если он&nbsp;нарисует для меня за&nbsp;этот анонс что-то совсем бесподобно-потярсающее, буду ему премного благодарен. Кстати, да,&nbsp;это был неприкрытый&nbsp;PR.</p>
]]></content:encoded>
			<wfw:commentRss>http://paradigm.ru/2008/05/javascript-color-picker/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Массовая загрузка файлов</title>
		<link>http://paradigm.ru/2007/11/mass-upload</link>
		<comments>http://paradigm.ru/2007/11/mass-upload#comments</comments>
		<pubDate>Wed, 28 Nov 2007 22:42:18 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Веб-разработка]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[загрузка файлов]]></category>

		<guid isPermaLink="false">http://www.paradigm.ru/2007/11/29/%d0%bc%d0%b0%d1%81%d1%81%d0%be%d0%b2%d0%b0%d1%8f-%d0%b7%d0%b0%d0%b3%d1%80%d1%83%d0%b7%d0%ba%d0%b0-%d1%84%d0%b0%d0%b9%d0%bb%d0%be%d0%b2/</guid>
		<description><![CDATA[Загрузка файлов &#8212; достаточно типовая и несложная задача в реализации веб-приложений. Несложная &#8212; с точки зрения разработчика, т.к. самое очевидное (и поэтому самое массовое) ее решение сводится к написанию обработчика для HTML формы с одним или несколькими элементами &#60;input type=&#8221;file&#8221;&#62;. В итоге для пользователя возникает необходимость открывать диалог выбора файлов столько раз, сколько файлов нужно [...]]]></description>
			<content:encoded><![CDATA[<p>Загрузка файлов &#8212; достаточно типовая и несложная задача в реализации веб-приложений. Несложная &#8212; с точки зрения разработчика, т.к. самое очевидное (и поэтому самое массовое) ее решение сводится к написанию обработчика для HTML формы с одним или несколькими элементами &lt;input type=&#8221;file&#8221;&gt;. В итоге для пользователя возникает необходимость открывать диалог выбора файлов столько раз, сколько файлов нужно загрузить, что, мягко говоря, неудобно, когда этих файлов больше одного. Кроме того, стандартное решение содержит в себе еще один недочет, проявляющий себя при большом объеме загружаемых данных. Процесс загрузки практически никак не отражается стандартными средствами интерфейсов большинства браузеров, не смотря на то, что он может затянуться на десятки секунд, а то и минуты. Сообщение в статусной строке типа «Sending request to http://blah-blah-blah.com» неприметно и малоинформативно, т.к. никак не иллюстрирует динамику загрузки.</p>
<p>Многие веб-сервисы предоставляют специальные утилиты для массовой загрузки, которые частично решают проблему. Особенно это распространено на фотохостингах, где хорошими примером может стать Picasa для <a href="http://picasaweb.google.ru/">Picasa Web Albums</a>. Тем не менее, такой подход не всегда пригоден, т.к. существует множество причин, которые могут помешать пользователю пользоваться подобными инструментами. Например, отстутствие технической возможности из-за ограниченных прав, нежелание захламлять компьютер, нехватка времени или банальная лень (99% случаев). </p>
<p>Некоторое время назад я искал готовое решение для организации массовой загрузки фотографий на веб-сервер. В тот раз ничего подходящего обнаружено не было, и пришлось писать своё. В тогдашней реализации использовалось десктопное приложение: это было работающее, но, как показала практика, идеологически не слишком хорошее решение. Нарушалась концепция тонкого клиента веб-приложения, т.к. помимо браузера требовалась дополнительная программа со всеми вытекающими последствиями.</p>
<p>А сегодня совершенно случайно я наткнулся именно на то, чего раньше не хватало. Это инструмент для массовой загрузки файлов на сервер, который для своей работы не требует ничего кроме браузера с установленным Flash. FancyUpload основан на JavaScript-фреймворке <a href="http://mootools.net/">MooTools</a> и, как обещают разработчики, дружит с Internet Explorer 6+, Opera 9, Firefox 1.5+ и Safari 2+.</p>
<p><img src='http://paradigm.ru/;-)/2007/11/fancyupload.png' width="500" height="221" alt='fancyupload.png'  style="border:1px solid silver;" /></p>
<p>Скрипт позволяет за один раз выбирать множество файлов и умеет отображать состояние загрузки для каждого из них в виде прогрессбаров. При желании, загрузку можно прервать на любом этапе. Что еще интересно, у FancyUpload нет никакой зависимости от серверной стороны, т.е. обработчик загруженных файлов можно писать на чем угодно.</p>
<ul>
<li><a href="http://digitarald.de/project/fancyupload/">Описание FancyUpload</a></li>
<li><a href="http://digitarald.de/playground/uplooad.html">Демонстрация</a> работы загрузчика</li>
<li><a href="http://digitarald.de/playground/server/upload.phps">Пример серверного скрипта</a> для обработки загруженных файлов на PHP</li>
<li>MooTools <a href="http://mootools.net/download">скачиваются отдельно</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://paradigm.ru/2007/11/mass-upload/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->