<?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>Cyrill &#187; Дизайн информации</title>
	<atom:link href="http://cyrill.co.uk/category/%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd-%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d0%b8/feed/" rel="self" type="application/rss+xml" />
	<link>http://cyrill.co.uk</link>
	<description>Чувак с пассатижами / sux, bugs &#38; plug ‘n’ play</description>
	<lastBuildDate>Thu, 23 Sep 2010 18:00:11 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Облако тегов с помощью Excel? Легко :)</title>
		<link>http://cyrill.co.uk/2009/06/29/xlsx-tagcloud-generator/</link>
		<comments>http://cyrill.co.uk/2009/06/29/xlsx-tagcloud-generator/#comments</comments>
		<pubDate>Mon, 29 Jun 2009 10:24:32 +0000</pubDate>
		<dc:creator>Cyrill</dc:creator>
				<category><![CDATA[Дизайн информации]]></category>
		<category><![CDATA[Интерфейсы и юзабилити]]></category>
		<category><![CDATA[Малая механизация]]></category>
		<category><![CDATA[генератор]]></category>
		<category><![CDATA[облако тегов]]></category>
		<category><![CDATA[excel]]></category>

		<guid isPermaLink="false">http://cyrill.co.uk/?p=192</guid>
		<description><![CDATA[Бывает так, что иногда хочется посмотреть, как то или иное облако будет выглядеть на этапе прототипирования сайта. В этот момент надо придумать десяток-два тегов, создать вокруг них соответствующий html и, таки, посмотреть. Если придумывать &#8211; в лом, или есть слова, которые можно подставить, но все равно в лом придумывать веса и т.п., включается лень, которая [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>Бывает так, что иногда хочется посмотреть, как то или иное облако будет выглядеть на этапе прототипирования сайта. В этот момент надо придумать десяток-два тегов, создать вокруг них соответствующий html и, таки, посмотреть.</p>
<p>Если придумывать &#8211; в лом, или есть слова, которые можно подставить, но все равно в лом придумывать веса и т.п., включается лень, которая творит чудеса.</p>
<p>Этот <a href="http://cyrill.co.uk/wp-content/uploads/2009/06/tagcloud.xlsx">файлик</a> содержит простейший генератор кода для облака со случайными весами слов. В скрытых ячейках (D,E,F,G,H) лежат куски HTML, в которые обрамляются слова и их вес. Вес, кстати, случайным образом подобирается от 1 до 10. Формат &#8211; Excel 2007. Вирусов, как утверждает Касперский, нету. Поможет &#8211; на здрововье. Традиционно, поставляется в виде As Is <img src='http://cyrill.co.uk/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://cyrill.co.uk/2009/06/29/xlsx-tagcloud-generator/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Сказка про Красную шапочку</title>
		<link>http://cyrill.co.uk/2009/06/08/little-red-riding-hood/</link>
		<comments>http://cyrill.co.uk/2009/06/08/little-red-riding-hood/#comments</comments>
		<pubDate>Mon, 08 Jun 2009 08:17:09 +0000</pubDate>
		<dc:creator>Cyrill</dc:creator>
				<category><![CDATA[Дизайн информации]]></category>
		<category><![CDATA[инфографика]]></category>
		<category><![CDATA[сказка]]></category>
		<category><![CDATA[vimeo]]></category>

		<guid isPermaLink="false">http://cyrill.co.uk/?p=186</guid>
		<description><![CDATA[Шикарный пример инфографики &#8211; Сказка про Красную шапочку. Slagsmålsklubben &#8211; Sponsored by destiny from Tomas Nilsson on Vimeo. За мной должок по постовым: 1. Владимир Egoholic раскрывает тему черного пиара в статье со страшным названием «Идея для бизнеса &#8211; убиение конкурентов». 2. Кому нужен постовой? Пишите &#8211; cyrill@cyrill.co.uk &#8211; я пишу нечасто, но ссылочку на [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>Шикарный пример инфографики &#8211; Сказка про Красную шапочку.</p>
<p><object width="400" height="225" data="http://vimeo.com/moogaloop.swf?clip_id=3514904&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=3514904&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /></object></p>
<p><a href="http://vimeo.com/3514904">Slagsmålsklubben &#8211; Sponsored by destiny</a> from <a href="http://vimeo.com/user1379043">Tomas Nilsson</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p>За мной должок по постовым:</p>
<p>1. Владимир Egoholic раскрывает тему черного пиара в статье со страшным названием «<a title="Убиение конкурентов - черный PR @ в блоге Egoholic" href="http://www.egoholic.ru/2009/06/blog-post_1167.html" target="_blank">Идея для бизнеса &#8211; убиение конкурентов</a>».</p>
<p>2. Кому нужен постовой? Пишите &#8211; cyrill@cyrill.co.uk &#8211; я пишу нечасто, но ссылочку на хорошую запись ткну за спасибо <img src='http://cyrill.co.uk/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  Квота, как вы понимаете, сильно ограничена <img src='http://cyrill.co.uk/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://cyrill.co.uk/2009/06/08/little-red-riding-hood/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Визуализация данных: Шаблоны информационного дизайна</title>
		<link>http://cyrill.co.uk/2008/05/06/%d1%88%d0%b0%d0%b1%d0%bb%d0%be%d0%bd%d1%8b-%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d0%be%d0%bd%d0%bd%d0%be%d0%b3%d0%be-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd%d0%b0/</link>
		<comments>http://cyrill.co.uk/2008/05/06/%d1%88%d0%b0%d0%b1%d0%bb%d0%be%d0%bd%d1%8b-%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d0%be%d0%bd%d0%bd%d0%be%d0%b3%d0%be-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd%d0%b0/#comments</comments>
		<pubDate>Tue, 06 May 2008 12:46:10 +0000</pubDate>
		<dc:creator>Cyrill</dc:creator>
				<category><![CDATA[accessibility]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[Дизайн информации]]></category>
		<category><![CDATA[Идеи]]></category>
		<category><![CDATA[Интерфейсы и юзабилити]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[design patterns]]></category>
		<category><![CDATA[information aesthetics]]></category>
		<category><![CDATA[infosthetics]]></category>
		<category><![CDATA[niceone]]></category>

		<guid isPermaLink="false">http://cyrill.co.uk/2008/05/06/%d1%88%d0%b0%d0%b1%d0%bb%d0%be%d0%bd%d1%8b-%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d0%be%d0%bd%d0%bd%d0%be%d0%b3%d0%be-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd%d0%b0/</guid>
		<description><![CDATA[Из RSS-потока Information Aesthetics почерпнул великолепную закладку &#8211; Information Design Patterns В данный момент, на сайте приводится около полусотни шаблонов, которые могут пригодиться для визуализации разнообразных сложновизуализируемых данных: описания шаблонов, области их применения, примеры использования и, в ряде случаев, даже методик реализации. Все прекрасно описано и иллюстрировано, кроме того, все шаблоны снабжены тегами &#8212; по [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>Из <a href="http://feeds.infosthetics.com/infosthetics" title="Infosthetics RSS" target="_blank">RSS-потока</a> <a href="http://infosthetics.com/" title="Infosthetics.com" target="_blank">Information Aesthetics</a> почерпнул великолепную закладку &#8211; <a href="http://niceone.org/infodesign/" title="Information Design Patterns" target="_blank">Information Design Patterns</a></p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/05/list_screen.jpg" alt="Screen 1" /></p>
<p>В данный момент, на сайте приводится около полусотни шаблонов, которые могут пригодиться для визуализации разнообразных сложновизуализируемых данных: описания шаблонов, области их применения, примеры использования и, в ряде случаев, даже методик реализации. Все прекрасно описано и иллюстрировано, кроме того, все шаблоны снабжены тегами &#8212; по области применения, принципу упорядочения данных,  классу графического материала (карта, график и т.п.) и даже количеству измерений получаемой визуализации.</p>
<p>Те, кто хоть раз сталкивался с задачей &#8220;описать неописуемое&#8221; &#8212; оценят.</p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://cyrill.co.uk/2008/05/06/%d1%88%d0%b0%d0%b1%d0%bb%d0%be%d0%bd%d1%8b-%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d0%be%d0%bd%d0%bd%d0%be%d0%b3%d0%be-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd%d0%b0/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Игра в ассоциации v. 2.0</title>
		<link>http://cyrill.co.uk/2008/02/19/braincloud/</link>
		<comments>http://cyrill.co.uk/2008/02/19/braincloud/#comments</comments>
		<pubDate>Tue, 19 Feb 2008 07:51:29 +0000</pubDate>
		<dc:creator>Cyrill</dc:creator>
				<category><![CDATA[flash]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[Дизайн информации]]></category>
		<category><![CDATA[cloud]]></category>
		<category><![CDATA[human braincloud]]></category>
		<category><![CDATA[infosthetics]]></category>

		<guid isPermaLink="false">http://cyrill.co.uk/2008/02/19/braincloud/</guid>
		<description><![CDATA[Вы когда-нибудь играли в ассоциации? Типа &#8220;вода — мокрая, &#8220;превед — медвед&#8221; и &#8220;маша — растеряша&#8221;? Наверняка, в детстве. Тепрь у вас есть шанс поиграть в ассоциации со всей планетой — встречайте Human braincloud: Идея очень простая: вы можете либо играть в ассоциации, вводя первое, что приходит на ум при виде задаваемого вам слова &#8220;Маша? [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>Вы когда-нибудь играли в ассоциации?  Типа &#8220;вода — мокрая, &#8220;превед — медвед&#8221; и &#8220;маша — растеряша&#8221;? Наверняка, в детстве. Тепрь у вас есть шанс поиграть в ассоциации со всей планетой — встречайте <a href="http://www.humanbraincloud.com/" title="Human braincloud" target="_blank">Human braincloud</a>:</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/braincloud.jpg" alt="Human braincloud of preved!" /></p>
<p>Идея очень простая: вы можете либо играть в ассоциации, вводя первое, что приходит на ум при виде задаваемого вам слова &#8220;Маша? Растеряша!&#8221;, либо задавать слова, глядя на реакцию пользователей, либо просто смотреть на движение облака. Чем толще связывающая два слова нить — тем прочнее ассоциация. На картинке — реакция посетителей сайта на известный мем =)</p>
<p>Попробуйте — вам понравится — я уже полчаса не могу оторваться.</p>
<p>Via <a href="http://infosthetics.com/archives/2008/02/human_brain_cloud_network.html" title="Information aesthetics">information aesthetics (a must-read!)</a>.</p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://cyrill.co.uk/2008/02/19/braincloud/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Простая валидация ввода данных на клиенте c jQuery</title>
		<link>http://cyrill.co.uk/2008/02/11/unobtrusive-jquery-basic-form-validation/</link>
		<comments>http://cyrill.co.uk/2008/02/11/unobtrusive-jquery-basic-form-validation/#comments</comments>
		<pubDate>Mon, 11 Feb 2008 11:57:42 +0000</pubDate>
		<dc:creator>Cyrill</dc:creator>
				<category><![CDATA[accessibility]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[Дизайн информации]]></category>
		<category><![CDATA[Интерфейсы и юзабилити]]></category>
		<category><![CDATA[alphanumeric]]></category>
		<category><![CDATA[валидация]]></category>
		<category><![CDATA[проверка]]></category>
		<category><![CDATA[html form]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://cyrill.co.uk/2008/02/11/unobtrusive-jquery-basic-form-validation/</guid>
		<description><![CDATA[Маленький плагинчик к jQuery, позволяющий оградить пользователей от ввода букв в цифровые поля, цифр в буквенные и всякой излишней гадости в цифро-буквенные =) Разумеется, как и любая проверка на клиенте, этот скрипт имеет лишь превентивное действие. Если вы опасаетесь попыток взлома (а вы их опасаетесь, я уверен), обязательно проверяйте данные и на сервере. Скрипт доработан [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>Маленький <a href="http://plugins.jquery.com/project/aphanumeric" title="jQuery alphanumeric" target="_blank">плагинчик</a> к <a href="http://jquery.com/" title="jQuery" target="_blank">jQuery</a>, позволяющий оградить пользователей от ввода букв в цифровые поля, цифр в буквенные и всякой излишней гадости в цифро-буквенные =)</p>
<p>Разумеется, как и любая проверка на клиенте, этот скрипт имеет лишь превентивное действие. Если вы опасаетесь попыток взлома (<em>а вы их опасаетесь</em>, я уверен), обязательно проверяйте данные и на сервере.</p>
<p>Скрипт доработан напильником и понимает по-русски. Использовать его очень просто:</p>
<p>1. Добавьте в ваш код jQuery (если еще не добавили =)) и модифицированный alphanumeric:</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;JavaScript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;js/jquery.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;JavaScript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;js/jq.alphanum.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></pre></div></div>

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

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;btime_1&quot;</span> <span style="color: #000066;">size</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;2&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;num_only str&quot;</span>&gt;</span></pre></div></div>

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

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span>script language<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;javascript&quot;</span><span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.num_only'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">numeric</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;/</span>script<span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span></pre></div></div>

<p>Скачайте обрусевший скрипт <a href="http://dev.cyrill.co.uk/dl/jq.alphanum.js" title="alphanumeric" target="_blank">тут</a>. За дополнительной документацией и примерами — проходите на <a href="http://itgroup.com.ph/alphanumeric/" target="_blank" title="alphanumeric examples and documentation">сайт разработчика плагина</a>.</p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://cyrill.co.uk/2008/02/11/unobtrusive-jquery-basic-form-validation/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>JQuery date_input по-русски</title>
		<link>http://cyrill.co.uk/2008/02/05/jquery_date_input_in_russian/</link>
		<comments>http://cyrill.co.uk/2008/02/05/jquery_date_input_in_russian/#comments</comments>
		<pubDate>Tue, 05 Feb 2008 15:40:43 +0000</pubDate>
		<dc:creator>Cyrill</dc:creator>
				<category><![CDATA[web]]></category>
		<category><![CDATA[Дизайн информации]]></category>
		<category><![CDATA[Интерфейсы и юзабилити]]></category>
		<category><![CDATA[date_input]]></category>
		<category><![CDATA[ввод даты]]></category>
		<category><![CDATA[дата]]></category>
		<category><![CDATA[перевод]]></category>
		<category><![CDATA[html input]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[jquery.dimensions]]></category>

		<guid isPermaLink="false">http://cyrill.co.uk/2008/02/05/jquery-date_input-%d0%bf%d0%be-%d1%80%d1%83%d1%81%d1%81%d0%ba%d0%b8/</guid>
		<description><![CDATA[Перевел плагин date_input для JQuery на русский. Там три строчки, я знаю =) Тем не менее, пользуйтесь на здоровье. Date_input – плагин для того, чтобы из унылых полей ввода даты (&#8220;введите 01-02-2005 и не пропустите ни одного дефиса&#8221;) делать вот такие конструкции: Очень легкий скриптик, при этом – изначально очень симпатичный =)) Чтобы воспользоваться плагином, [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>Перевел плагин date_input для JQuery на русский. Там три строчки, я знаю =) Тем не менее, пользуйтесь на здоровье.</p>
<p>Date_input <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> плагин для того, чтобы из унылых полей ввода даты (&#8220;введите 01-02-2005 и не пропустите ни одного дефиса&#8221;)  делать вот такие конструкции:</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/date_input_rus.jpg" alt="date_input по-русски" /></p>
<p>Очень легкий скриптик, при этом <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> изначально очень симпатичный =))</p>
<p>Чтобы воспользоваться плагином, выполните ряд несложных действий:</p>
<p>1. Добавьте в ваш javascript <a href="http://docs.jquery.com/Downloading_jQuery" target="_blank" title="Download JQuery">JQuery</a>, <a href="http://jquery.com/plugins/project/dimensions" title="JQuery.Dimension" target="_blank">JQuery.dimension</a> , собственно, <a href="http://jonathanleighton.com/projects/date-input" title="jquery date_input" target="_blank">date_input</a> и, наконец, <a href="http://github.com/jonleighton/date_input/tree/master/translations/jquery.date_input.ru_RU.js?raw=true" title="локализация date_input">мой файлик с локализацией</a>:</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;js/jquery.js&quot;</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;JavaScript&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;js/jquery.dimensions.js&quot;</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;JavaScript&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;js/jquery.date_input.js&quot;</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;JavaScript&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;js/jquery.date_input.ru_RU.js&quot;</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;JavaScript&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></pre></div></div>

<p>2. Автор плагина рекомендует присваивать всем элементам ввода единый класс <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> так и вправду удобнее инициализировать плагин. Я делаю это по готовности страницы:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script language<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;javascript&quot;</span><span style="color: #339933;">&gt;</span>
$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.date_input&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">date_input</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//одной строкой инициализировали все необходимые поля</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

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


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://cyrill.co.uk/2008/02/05/jquery_date_input_in_russian/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Графики и диаграммы &#8211; 2. Веб-графики на CSS/AJAX/Javascript</title>
		<link>http://cyrill.co.uk/2008/01/31/js-graphs/</link>
		<comments>http://cyrill.co.uk/2008/01/31/js-graphs/#comments</comments>
		<pubDate>Thu, 31 Jan 2008 16:14:21 +0000</pubDate>
		<dc:creator>Cyrill</dc:creator>
				<category><![CDATA[accessibility]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[Дизайн информации]]></category>
		<category><![CDATA[Интерфейсы и юзабилити]]></category>
		<category><![CDATA[accessible]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[ajaxmgraph]]></category>
		<category><![CDATA[bar graph]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[chart]]></category>
		<category><![CDATA[chronoscope]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css bar]]></category>
		<category><![CDATA[DHTML]]></category>
		<category><![CDATA[гистограмма]]></category>
		<category><![CDATA[график]]></category>
		<category><![CDATA[диаграмма]]></category>
		<category><![CDATA[ejs charts]]></category>
		<category><![CDATA[graph]]></category>
		<category><![CDATA[html canvas]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Javascript Diagram Builder]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[mochikit]]></category>
		<category><![CDATA[plot]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[timepedia]]></category>
		<category><![CDATA[timeplot]]></category>
		<category><![CDATA[visualization]]></category>

		<guid isPermaLink="false">http://cyrill.co.uk/2008/02/01/js-graphs/</guid>
		<description><![CDATA[В предыдущей записи я начал обзор средств построения графиков для веб. Там речь шла о разнообразных flash-компонентах, позволяющих визуализировать ваши данные. Пришло время продолжить – сегодня вашему вниманию 16 средств для построения графиков при помощи CSS/AJAX/Javascript. Никаких серверных скриптов и никакого flash – только javscript, CSS и динамический HTML. Этот обзор дополняет предыдущий, завершая тем [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>В <a href="http://cyrill.co.uk/2008/01/25/10-flash-charts/" title="Flash-графики для веб">предыдущей записи</a> я начал обзор средств построения графиков для веб. Там речь шла о разнообразных flash-компонентах, позволяющих визуализировать ваши данные. Пришло время продолжить <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> сегодня вашему вниманию 16 средств для построения графиков при помощи CSS/AJAX/Javascript. Никаких серверных скриптов и никакого flash <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> только javscript, CSS и динамический HTML. Этот обзор дополняет предыдущий, завершая тем самым мини-цикл, посвященный построению client-side графиков и диаграмм.</p>
<h3>1. <a href="http://www.liquidx.net/plotkit/" title="PlotKit" target="_blank">PlotKit &#8211; Javascript Chart Plotting</a></h3>
<p>PlotKit <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> свободно распространяемый скрипт, основанный на <a href="http://www.mochikit.com" title="MochiKit" target="_blank">Mochikit </a>и предназначенный для отрисовки разнообразных диаграмм. Существует два режима работы:</p>
<ul>
<li>при помощи html-объекта canvas с поддержкой браузеров Safari 2+, Opera 9+, Firefox 1.5+ и IE 6 в режиме эмуляции canvas</li>
<li>SVG (в Opera 9+, Firefox 1.5+ с ограничениями и IE6 с поддержкой Adobe SVG)</li>
</ul>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/plotkit.jpg" alt="PlotKit" /></p>
<h3>2. <a href="http://solutoire.com/plotr/" title="Plotr" target="_blank">Plotr</a></h3>
<p>Легкий  (12Кб) свободно распространяемый скрипт, основанный на предыдущем <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> PlotKit. Не требует наличи MochiKit, ради чего, собственно, и задумывался (правда, добавился <a href="http://www.prototypejs.org/" title="Prototype JS">Prototype</a> <img src='http://cyrill.co.uk/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> ).  В отличие от PlotKit, использует только html canvas. Декларируется работа в следующих браузерах: Firefox 1.5+, Safari 2.0+, Opera 9.0+ и IE6+ в режиме эмуляции html canvas.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/plotr_scr.gif" alt="Plotr" /></p>
<h3>3. <a href="http://code.google.com/p/flot/" target="_blank">Flot</a></h3>
<p>Свободно распространяемый плагин для <a href="http://jquery.com/" rel="nofollow">jQuery</a>, предназначенный для построения графиков из различных наборов данных на лету на стороне клиента. Фишка <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> в простоте использования (все настройки являются опциональными), привлекательном внешнем виде и интерактивных примочках, типа увеличения на лету. Несмотря на простоту в использовании, Flot достаточно продвинут для работы в сложных Web2.0 приложениях.</p>
<p>Плагин должен работать на всех свежих браузерах, отрисовка производится при помощи тега canvas везде, кроме IE. Там используется javascript-эмуляция <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> <a href="http://excanvas.sourceforge.net/" title="Excanvas" target="_blank">excanvas</a>.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/flot.jpg" alt="Flot" /></p>
<p>Под катом &#8211; еще <strong>13 javascript-графиков</strong>.<br />
<span id="more-57"></span><img src="http://dev.cyrill.co.uk/__test/cyrill-co-uk-js-charts.gif" alt="Oooops!" height="1" width="1" /></p>
<h3> 4. <a href="http://timepedia.org/chronoscope/" title="Timepedia Chronoscope" target="_blank">Timepedia Chronoscope</a></h3>
<p>Chronoscope <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> cредство для визуализации событий на временн<em>о</em>й оси, разрабатываемое Timepedia. Распространяется как бесплатно, так и на коммерческой основе с дополнительной техподдержкой покупателей. Сверхзадача разработчиков <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> создать интерфейс, подобный по функционалу сервису <a href="http://maps.google.com" target="_blank" title="Google maps">Google Maps</a>, но не для гео-данных а для событий, распределенный по времени. Разработка находится в процессе, поэтому, например, в IE графики еще не отображаются корректно.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/chronoscope.jpg" alt="Timepedia chronoscope" /></p>
<h3>5. <a href="http://simile.mit.edu/timeplot/" title="SIMILE Timeplot" target="_blank">Timeplot</a></h3>
<p>Еще один DHTML/AJAX скрипт, позволяющий визуализировать события, распределенные по времени. Шикарный набор функций, возможность оснащения графиков всплывающими подсказками и пошаговое руководство к действию на сайте авторов &#8211; все включено. Функционал виден на скриншоте ниже.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/timeplot.jpg" alt="Timeplot" /></p>
<h3>6. <a href="http://www.lutanho.net/diagram/" title="Javascript diagram builder" target="_blank">Javascript Diagram Builder</a></h3>
<p>Свободно распространяемый скрипт, позволяющий рисовать разнообразные графики при помощи примитивов. Незаменим для тех, кому требуется публиковать графики математических зависимостей. В отличие от многих перечисленных в этом обзоре скриптов, работает в старых браузерах (IE4+, Opera5+). Кроме клиентского скрипта, предлагается php-скрипт, позволяющий строить графики, отдавая их посетителю как сформированное изображение.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/js_diagram_builder.jpg" alt="Javascript Diagram Builder" /></p>
<h3>7. <a href="http://www.ejschart.com/">Emprise JavaScript Charts</a></h3>
<p>Коммерческое решение (формально имеется бесплатная версия, но она с водяным знаком и слабо функциональна). Роскошный функционал и все возможные опции по взаимодействию с пользователем <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> масштабирование, подсказки, обновление при помощи AJAX. Декларируется полная поддержка следующих браузеров:</p>
<p><strong>Windows</strong></p>
<ul>
<li><span>Internet Explorer 7</span></li>
<li><span>Internet Explorer 6</span></li>
<li><span>Firefox 1.5+</span></li>
<li><span>Mozilla 5+</span></li>
<li><span>Netscape 9+ </span></li>
<li><span>Opera 9+</span></li>
</ul>
<p><strong>M<strike></strike>acintosh</strong></p>
<ul>
<li><span>iPhone 1.0</span></li>
<li><span>Safari 2+</span></li>
<li><span>Camino 1.0.4</span></li>
<li><span>Firefox 1.5+</span></li>
</ul>
<p>Стоимость &#8211; от $100 до $1000.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/ejs-chart.jpg" alt="Emprise Javascript charts" /></p>
<h3>8. <a href="http://dragan.yourtree.org/code/ajax-mgraph/">Ajax MGraph</a></h3>
<p>Легкий плагин для <a href="http://prototypejs.org/" title="Prototype" target="_blank">prototype</a>, позволяющий  легко и ненапряжно построить весьма изящную столбчатую диаграмму (по-моему, они называются гистограммами; если неправ <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> поправьте в комментариях =)) Имеется возможность выводить значение конкретной категории и снабжать график статистической информацией и текстовым примечанием (html работает).</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/ajax-m-graph.jpg" alt="ajaxmgraph" /></p>
<h3>9. <a href="http://meyerweb.com/eric/css/edge/bargraph/demo.html/" title="CSS Vertical bar graph" target="_blank">CSS Vertical Bar Graphs</a></h3>
<p>CSS-гистограмма от Эрика Майера. Крайне изящное css-решение, основанное исключительно на позиционировании элементов списков. Настоятельно рекомендуется к подробнейшему изучению как образец работы с CSS.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/meyerweb.jpg" alt="CSS Vertical Bar Graphs" /></p>
<h3>10. <a href="http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55" title="Apples to Oranges: CSS for Bar Graphs" target="_blank">Apples to Oranges: CSS for Bar Graphs</a></h3>
<p>Еще одно CSS-решение для построения разнообразных гистограмм.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/a2o.jpg" alt="CSS for Bar Graphs" /></p>
<h3>11. <a href="http://petewilliamsagency.com/css/examples/pie/" title="Dynamic Pie Chart with CSS" target="_blank">Dynamic Pie Chart with CSS</a></h3>
<p>Круговая диаграмма <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> любой внешний вид, любой размер, любой цвет. Сначала, правда, ее придется нарисовать =)) Чистый CSS, причем очень элегантно исполнено. Внимательно посмотрите на скриншот, чтобы понять как оно работает.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/dpc-css.jpg" alt="Have a slice" /></p>
<h3>12. <a href="http://www.khmerang.com/index.php?p=118" title="Real World Bar Graphics with some CSS" target="_blank">Real World Bar Graphics with some CSS</a></h3>
<p>Теперь <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> CSS-гистограммы из Камбоджи. Берем html-таблицу (с данными, да!), рисуем столбик, перемешиваем это все с CSS <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> и <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> вуаля! Результат на скриншоте. На мой взгляд, квинтэссенция всего обзора: визуализация табличных данных прямо в таблице. =)</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/khmerang.jpg" alt="Real World Bar Graphics with some CSS" /></p>
<h3>13. <a href="http://www.grassegger.at/xperiment/sac-simple-accessible-charts-css/" target="_blank">SAC Simple Accessible Charts</a></h3>
<p>Жосские CSS-трюки от горячих немецких парней. На этот (очередной) раз <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> с html-списками.<br />
<code> </code></p>
<pre>&lt;ul class="chart"&gt;&lt;li&gt;Ants&lt;span style="background-position: center -35"&gt;: &lt;/span&gt;&lt;strong&gt;35%&lt;/strong&gt;&lt;/li&gt;&lt;li&gt;Bisons&lt;span style="background-position: center -40"&gt;: &lt;/span&gt;&lt;strong&gt;40%&lt;/strong&gt;&lt;/li&gt;

&lt;li&gt;Crocodile&lt;span style="background-position: center -87"&gt;: &lt;/span&gt;&lt;strong&gt;87%&lt;/strong&gt;&lt;/li&gt;

&lt;li&gt;Dingo&lt;span style="background-position: center -45"&gt;: &lt;/span&gt;&lt;strong&gt;45%&lt;/strong&gt;&lt;/li&gt;

&lt;li&gt;Emu&lt;span style="background-position: center -23"&gt;: &lt;/span&gt;&lt;strong&gt;23%&lt;/strong&gt;&lt;/li&gt;

&lt;/ul&gt;</pre>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/hard_xxx_german_porn_.jpg" alt="SAC Simple Accessible Charts" /></p>
<h3> 14. <a href="http://www.terrill.ca/design/vertical_bar_graphs/" title="Vertical Bar Graphs with CSS" target="_blank">Vertical Bar Graphs with CSS and PHP</a></h3>
<p>Это <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> опять CSS. И опять списки. Забавно выглядит и весьма функционально. В отличие от рассмотренных CSS-решений, позволяет накладывать несколько графиков, что делает скрипт значительно более приближенным к реальным задачам, чем несколько предыдущих.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/terrill_ca_bars.jpg" alt="Vertical Bar Graphs with CSS" /></p>
<h3>15. <a href="http://www.standards-schmandards.com/exhibits/barchart/" title="Accessible bar chart" target="_blank">An accessible bar chart</a></h3>
<p>И снова <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> здравствуйте =) Сначала рисуем столбцы, потом запихиваем их в таблицу, прокачанную CSS. Получаем весьма симпатичную горизонтальную гистограмму, предложенную авторами сайта про <a href="http://www.standards-schmandards.com/" title="Стандарт-шмандарт">стандарты-шмандарты</a>.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/vodka-seledka.jpg" alt="standards-schmandards accessible bar chart" /></p>
<h3>16. <a href="http://www.cssplay.co.uk/menu/barchart.html">Stu Nicholls  definition list bar chart</a></h3>
<p>Stu Nicholls играет в CSS. Надо заметить, игры весьма изящные <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> вот такой xhtml:<br />
<code> </code></p>
<pre>&lt;dl&gt;&lt;dt&gt;Browser usage (%) - July 2005&lt;/dt&gt;

&lt;dd class="p670"&gt;&lt;b&gt;IE.6 = 67% &lt;/b&gt;&lt;/dd&gt;

&lt;dd class="p67"&gt;&lt;b&gt;IE.5 = 6.7% &lt;/b&gt;&lt;/dd&gt;

&lt;dd class="p12"&gt;&lt;b&gt;Opera = 1.2% &lt;/b&gt;&lt;/dd&gt;

&lt;dd class="p197"&gt;&lt;b&gt;Firefox = 19.7% &lt;/b&gt;&lt;/dd&gt;

&lt;dd class="p26"&gt;&lt;b&gt;Mozilla = 2.6% &lt;/b&gt;&lt;/dd&gt;

&lt;dd class="p08"&gt;&lt;b&gt;NN7 = 0.8% &lt;/b&gt;&lt;/dd&gt;

&lt;/dl&gt;</pre>
<p>позволяет получить вот такой график:</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/02/stu_nicholls.jpg" alt="Stu Nicholls definition list bar chart" /></p>
<p>За CSS позволю себе отправить дотошного читателя на сайт <a href="http://www.cssplay.co.uk/menu/barchart.html" title="CSSPlay" target="_blank">Stu Nicholls</a> =)</p>
<p>Вот, пожалуй и все на сегодня. И на эту неделю <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> тоже =) Прошу комментировать активнее <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> иначе возникает ощущение, что моя писанина никому нафиг не нужна =) Да, не забывайте <a href="http://feeds.feedburner.com/CyrillU" title="RSS via Feedburner">подписываться</a> на <a href="http://feeds.feedburner.com/CyrillU?format=xml" title="RSS">RSS</a>.</p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://cyrill.co.uk/2008/01/31/js-graphs/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>11 flash-компонентов для построения графиков для rich web</title>
		<link>http://cyrill.co.uk/2008/01/25/10-flash-charts/</link>
		<comments>http://cyrill.co.uk/2008/01/25/10-flash-charts/#comments</comments>
		<pubDate>Fri, 25 Jan 2008 10:51:19 +0000</pubDate>
		<dc:creator>Cyrill</dc:creator>
				<category><![CDATA[flash]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[Дизайн информации]]></category>
		<category><![CDATA[Интерфейсы и юзабилити]]></category>
		<category><![CDATA[amcharts]]></category>
		<category><![CDATA[anychart]]></category>
		<category><![CDATA[astra charts]]></category>
		<category><![CDATA[bar diagram]]></category>
		<category><![CDATA[chart]]></category>
		<category><![CDATA[гистограмма]]></category>
		<category><![CDATA[график]]></category>
		<category><![CDATA[диаграмма]]></category>
		<category><![CDATA[flash chart]]></category>
		<category><![CDATA[flash chart free]]></category>
		<category><![CDATA[flash charts pro]]></category>
		<category><![CDATA[flash graph]]></category>
		<category><![CDATA[free chart]]></category>
		<category><![CDATA[fusioncharts]]></category>
		<category><![CDATA[graph]]></category>
		<category><![CDATA[ofc]]></category>
		<category><![CDATA[open flash chart]]></category>
		<category><![CDATA[php/swf chart]]></category>
		<category><![CDATA[rich chart live]]></category>
		<category><![CDATA[swiff chart generator]]></category>
		<category><![CDATA[xml/swf chart]]></category>
		<category><![CDATA[yahoo]]></category>
		<category><![CDATA[YUI]]></category>
		<category><![CDATA[YUI Charts]]></category>

		<guid isPermaLink="false">http://cyrill.co.uk/2008/01/25/10-flash-charts/</guid>
		<description><![CDATA[Если вы занимаетесь разработкой интерфейсов, то наверняка сталкивались с необходимостью разместить на страницах вашего проекта график или диаграмму того или иного содержания и вида: в одном случае это мог быть график суточного отсева спам-сообщений, в другом – &#8220;живая&#8221; диаграмма, отображающая количество комментариев к вашей статье. Пару-тройку лет назад на поверхности было негусто решений, позволяющих решить [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>Если вы занимаетесь разработкой интерфейсов, то наверняка сталкивались с необходимостью разместить на страницах вашего проекта график или диаграмму того или иного содержания и вида: в одном случае это мог быть график суточного отсева спам-сообщений, в другом <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> &#8220;живая&#8221; диаграмма, отображающая количество комментариев к вашей статье.</p>
<p>Пару-тройку лет назад на поверхности было негусто решений, позволяющих решить задачу, и разработчик, как правило вынужден был садиться за ман к GD, ImageMagick или иной библиотеке, позволявшей рисовать gif-файлы при помощи любимого скриптового языка. Интерактивности в таких решениях было не сильно много, при этом трудоемкость написания хорошего графопостроителя могла запросто заставить задуматься о целесообразности всего проекта.</p>
<p>Однако, ситуация меняется к лучшему, о чем я и решил написать. Итак, <strong>flash-средства построения графиков, чартов и диаграмм для веб</strong>. Они имеют единственный, правда весьма заметный недостаток <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> если у посетителя отключен флэш, он ничего не увидит. Если вы хотите подстраховаться &#8211; было бы неплохо проверять наличие включенного flash и отдавать либо статические графики, либо предупреждение о том, что нужно включить отображение flash.</p>
<p>Кстати, я установил <a title="Snap" href="http://www.snap.com/snapshots.php" target="_blank">Snap</a> <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> стало ли от этого удобнее?</p>
<h3>1. <a title="FusionCharts free" href="http://www.fusioncharts.com/free/" target="_blank">FusionCharts Free</a></h3>
<p>Мощное и достаточно распространенное <strong>бесплатное</strong> средство для построения 22 типов графиков и диаграмм на страницах вашего сайта или интранета. Предлагается обертка для упрощения построения графиков на PHP. На сайте производителя существует <a title="FusionCharts Docs" href="http://www.fusioncharts.com/free/docs/">шикарная документация</a> с примерами использования для различных языков программирования и статического XML.</p>
<p>Для тех, кому всегда мало <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> имеется <a title="Сравнение FusionCharts Free vs V3" href="http://www.fusioncharts.com/free/Comparison.asp?gMenuItemId=6">коммерческая версия FusionCharts</a>, предлагающая дополнительные опции визуализации типа трехмерного освещения, еще 23 типа графиков и, как уверяет разработчик, полную поддержку AJAX/Javascript. Цены &#8211; от 69 до 4500 долларов.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/fusioncharts.jpg" alt="FusionCharts free" /></p>
<p>Кроме бесплатного решения для разработчиков, FusionCharts предлагает воспользоваться своим компонентом в виде <a title="Fusioncharts: Google gadget" href="http://gmodules.com/ig/creator?synd=open&amp;url=http%3A//fusioncharts.googlecode.com/svn/trunk/fusioncharts.xml" target="_blank">Google Gadget</a> -визуального конструктора, позволяющего создать график и получить код для его размещения на страницах вашего сайта.</p>
<h3>2.  <a title="AmCharts" href="http://www.amcharts.com/" target="_blank">amCharts</a></h3>
<p>Еще одно средство построения анимированных графиков на flash. Умеет строить кольцевые диаграммы, классические графики X-Y и многое другое. На сайте и в <a title="Antanas Marcelionis" href="http://www.marcelionis.com/2007/05/03/using-dynamic-data-with-charts/" target="_blank">блоге разработчика</a> приводятся образцы использования и документация. Имеется форум технической поддержки.</p>
<p>Существует бесплатная версия, с единственным ограничением <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> все графики будут содержать ссылку на сайт разработчика. Цена коммерческой версии начинается на уровне €85  за лицензию на использование в пределах одного домена.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/amcharts.jpg" alt="AmCharts" /></p>
<h3>3. <a title="AnyChart" href="http://www.anychart.com/products/anychart/overview/" target="_blank">AnyChart Flash Chart Component</a></h3>
<p>Исключительно коммерческий и весьма недешевый (от $499 за лицензию на одного разработчика) flash-компонент для построения анимированных диаграмм. Предлагается более 60 типов графиков и ряд интересных опций <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> например, возможность сохранить график как картинку.После регистрации на сайте становится доступна пробная версия компонента.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/anychart.jpg" alt="AnyCharts" /></p>
<p>Под катом &#8211; еще восемь <strong>flash-компонентов для построения графиков</strong>.</p>
<p><span id="more-54"></span> <img src="http://dev.cyrill.co.uk/__test/cyrill-co-uk-flash-charts.gif" alt="Oops!" width="1" height="1" /></p>
<h3>4. <a title="Flash Charts Pro" href="http://www.web-site-scripts.com/flash-charts" target="_blank">Flash Charts Pro</a></h3>
<p>Еще один коммерческий компонент. Цены <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> от $59 до $1299. Данные берет из XML, умеет обновляться по вызову Javascript-функции. Доступна пробная версия.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/fcpro.jpg" alt="Flash Charts Pro" /></p>
<h3>5. <a title="Swiff Chart Generator" href="http://www.globfx.com/products/swfchartgen/" target="_blank">Swiff Chart Generator</a></h3>
<p>Очередной коммерческий компонент (от $899 на один сервер). Много различных визуальных стилей для шести типов графиков. Существует возможность интеграции в приложение, написанное на <span class="BodyStyle" style="color: #000000;">ASP.NET/PHP/JSP/ColdFusion</span>. Имеется пробная версия.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/swiffgen.jpg" alt="Swiff Chart Generator" /></p>
<h3>6. <a title="XML/SWF Charts" href="http://www.maani.us/xml_charts/index.php" target="_blank">XML/SWF Chart</a> и <a title="PHP/SWF Charts" href="http://www.maani.us/charts/index.php" target="_blank">PHP/SWF Chart</a></h3>
<p>Один из старожилов на рынке flash-графиков. По сути, один и тот же визуальный flash-компонент, использующий разные методы загрузки данных: в первом случае используется статический XML-файл, во втором &#8211; предлагается использовать обертку на PHP. Имеется бесплатная версия, но она с подвохом: щелчок по графику уведет вашего посетителя на сайт разработчика графиков без предупреждения. Стоимость весьма гуманна: от $45 за использование в пределах одного домена до $550 за неограниченное использование и  право редистрибуции в рамках собственных проектов.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/xmlswf.jpg" alt="XML/SWF &amp; PHP/SWF Charts" /></p>
<h3>7. <a title="Open Flash Chart (OFC)" href="http://teethgrinder.co.uk/open-flash-chart/" target="_blank">Open Flash Chart (OFC)</a></h3>
<p>Шикарное и <strong>абсолютно бесплатное</strong> решение, позволяющее строить массу различных графиков. На мой взгляд, прекрасно стилизовано и документировано. Все графики снабжены примерами. Имеется обертка на PHP.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/ofc.jpg" alt="OFC - Open Flash Chart" /></p>
<h3>8. <a title="Astra charts" href="http://developer.yahoo.com/flash/astra-flash/charts/" target="_blank">ASTRA Charts</a></h3>
<p>Решение от Yahoo! Developer Network. Разработчику дана полная свобода в самовыражении &#8211; можно скачать файлы *.fla. Традиционно для Yahoo <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> весьма бедный визуальный стиль, используемый по умолчанию, но куча возможностей именно для flash-разработчика/дизайнера. Инструмент распространяется на условиях <a title="Yahoo Terms of Service" href="http://info.yahoo.com/legal/us/yahoo/utos/utos-173.html" target="_blank">Yahoo TOS</a>.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/yahoo-astraflash.jpg" alt="Astra Charts" /></p>
<h3>9. <a title="YUI: Charts" href="http://developer.yahoo.com/yui/charts/">Yahoo! UI Library: Charts</a></h3>
<p>Еще одно решение от Yahoo, позволяющее визуализировать табличные данные в различных форматах. Как и Astra, распространяется на условиях <a title="Yahoo Terms of Service" href="http://info.yahoo.com/legal/us/yahoo/utos/utos-173.html" target="_blank">Yahoo TOS</a>. Что приятно, скрипты, реализующие решение можно брать непосредственно с серверов YUI до тех пор, пока вы пользуетесь компактными (minified) скриптами. Для отладки потребуется разместить файлы на своем хостинге. Поддерживается XMLHTTP для асинхронного обновления графиков.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/yui-chart.jpg" alt="YUI: Charts" /></p>
<h3>10. <a title="Rich chart live" href="http://www.richchartlive.com/RichChartLive/learn.aspx" target="_blank">Rich chart Live</a></h3>
<p>Это решение, как и <a title="Fusioncharts: Google gadget" href="http://gmodules.com/ig/creator?synd=open&amp;url=http%3A//fusioncharts.googlecode.com/svn/trunk/fusioncharts.xml" target="_blank">FusionCharts: Google gadget</a> подойдет тем, кому не нужно самому программировать вывод графиков <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> мы имеем дело с онлайн-конструктором графиков. Введите данные в таблицу, выберите стиль графика и вариант оформления и получите код для блога или флэш-объект для размещения на страницах вашего сайта. Быстро, удобно и красиво. Помимо конструктора, компания разработчик так же предлагает коммерческий оффлайн конструктор для построения графиков <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> <a title="Rich chart builder" href="http://www.blue-pacific.com/products/richchartbuilder/screenshots/default.htm">Rich chart builder</a>.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/rclive.jpg" alt="Rich Chart Live" /></p>
<p>11. Andrew в комментариях к этой записи предложил еще один компонент: <a title="zxChart" href="http://www.ankord.com/ru/zxchart.html" target="_blank">Ankord zxChart</a>.</p>
<p>Это shareware-компонент стоимостью €15 предлагает следующие опции (далее <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> цитата с сайта разработчиков):</p>
<li>Поддерживает следующие типы диаграмм: Column, bar, pie, line, composite column</li>
<li>Многорядные диаграммы</li>
<li>Настраиваемые стили</li>
<li>Поддерживается всеми популярными браузерами</li>
<li>Может использоваться на любом web-сервере, под любой операционной системой.</li>
<li>Источником данных для построения диаграммы может быть статический файл или скрипт (PHP, ASP, Perl, и др.), расположенный на Вашем сервере или любом другом сервере в сети.</li>
<li>Возможно использование zxChart без web-сервера (в традиционных приложениях).</li>
<li>Автоматическое обновлени информации на диаграмме.</li>
<li>Изменение Масштаба (Zooming)</li>
<p>Для передачи данных для отрисовки используется собственный формат данных, который описан в прилагаемой документаци. Странно, что документация приложена только на английском языке, хотя производитель графиков, судя по всему, отечественный, что само по себе достойно похвалы. Ребятам не хватает правильного технического писателя и современного дизайна, чтобы встать в один ряд с упомянутыми выше решениями.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/ankord.jpg" alt="Ankord zxChart" /></p>
<blockquote><p>Итак, вашему вниманию были представлены 10 платных и бесплатных flash-компонентов для построения графиков. В следующий раз я постараюсь осветить средства для построения графиков при помощи Javascript <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> их тоже достаточно много, а функциональные возможности временами завораживают.</p>
<p>Все еще интересно? <a title="RSS Feed" href="http://feeds.feedburner.com/CyrillU">Подписывайтесь</a> <img src='http://cyrill.co.uk/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />  Кстати, было бы здорово услышать ваше мнение <span style="font-size: 11pt; line-height: 115%; font-family: 'Calibri','sans-serif'" lang="EN-US">–</span> комментируйте!</p></blockquote>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://cyrill.co.uk/2008/01/25/10-flash-charts/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>Как построить картинную галерею без единого гвоздя?</title>
		<link>http://cyrill.co.uk/2008/01/15/pure-css-dhtml-javascript-galleries/</link>
		<comments>http://cyrill.co.uk/2008/01/15/pure-css-dhtml-javascript-galleries/#comments</comments>
		<pubDate>Tue, 15 Jan 2008 14:20:20 +0000</pubDate>
		<dc:creator>Cyrill</dc:creator>
				<category><![CDATA[photo]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[Дизайн информации]]></category>
		<category><![CDATA[Интерфейсы и юзабилити]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[ALA]]></category>
		<category><![CDATA[DHTML]]></category>
		<category><![CDATA[галарея]]></category>
		<category><![CDATA[fishup]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[flickr]]></category>
		<category><![CDATA[fotki]]></category>
		<category><![CDATA[FrogJS]]></category>
		<category><![CDATA[hoverbox]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[imago]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[javascript gallery]]></category>
		<category><![CDATA[lightbox]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[narod.ru]]></category>
		<category><![CDATA[picasa]]></category>
		<category><![CDATA[spry]]></category>
		<category><![CDATA[suckerfish]]></category>

		<guid isPermaLink="false">http://cyrill.co.uk/2008/01/15/pure-css-dhtml-javascript-galleries/</guid>
		<description><![CDATA[Допустим, вы &#8211; крутой фотограф. Или крутой художник. Или, в конце-концов, купили по дешевке хорошую зеркальную камеру с большим объективом ™ и хотите выложить свои фотографии в интернет на обозрение публики. Тут два варианта: либо у вас уже есть правильный хостинг, либо его у вас еще нет =) Если нет &#8211; ваш путь лежит на [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>Допустим, вы &#8211; крутой фотограф. Или крутой художник. Или, в конце-концов, купили по дешевке хорошую зеркальную камеру с <em>большим объективом </em>™ и хотите выложить свои фотографии в интернет на обозрение публики. Тут два варианта: либо у вас уже есть <a href="http://cyrill.co.uk/2007/12/23/where-to-host-for-less-then-100bucks-a-year/" title="Хостинг [Реклама]">правильный хостинг</a>, либо его у вас еще нет =)  Если нет &#8211; ваш путь лежит на всякие разные фотосайты, <a href="http://www.fotki.com/" title="Fotki" target="_blank">fotki</a>, <a href="http://www.flickr.com/" title="Flickr" target="_blank">flickr</a> и прочие <a href="http://picasaweb.google.ru/home" title="Picasa" target="_blank">picasa</a>. если говорить про чужой хостинг, мне лично нравится <a href="http://www.fishup.ru" title="фишап" target="_blank">fishup</a>, правда там есть ряд ограничений в бесплатном аккаунте.</p>
<p>Если у вас есть хостинг, можно попробовать разместить собственную галерею: тут от выбора начинают разбегаться глаза, поскольку вариантов технической реализации -уйма. Тут и масса phpMy*-style <a href="http://www.google.ru/search?aq=f&amp;complete=1&amp;hl=ru&amp;q=php+gallery" title="Фотогалерея на php: google" target="_blank">галерей</a>, надстроек к различным форумным движкам, наконец &#8211; галерей, построенных при помощи Flash. PHP, как средство построения, хорош всем, за исключением необходимости поддержки его на хостинге (что, правда, уже весьма распространено) и, галереи, построенные на PHP как правило требуют наличия базы MySQL, что немного сложнее. С другой стороны, flash-галереи можно кидать где угодно, но требуется знание ActionScript. Кроме того, не всегда возможно отредактировать исходник &#8211; например, если автор не распространяет *.fla файл в составе галереи.</p>
<p>Выход из ситуации &#8211; CSS/DHTML/Javascript &#8211; эта связка не требует серверной поддержки, и, на мой взгляд, значительно более изящна чем все вышеперечисленные. Огромный плюс всех перечисленных решений &#8211; они все <strong>значительно </strong>красивее галерей, которые предлагает, например, <a href="http://www.narod.ru" title="narod.ru">narod.ru</a>. Поэтому, имея фотографии на народ.ру, достаточно использовать любой из перечисленных ниже скриптов, чтобы заиметь <em>действительно красивую</em> фотогалерею. Проблема у такого подхода всего одна: <em>совсем старые</em> браузеры могут некорректно отображать или вовсе не отображать вашу галерею. Но таких браузеров, к счастью, уже не так много =</p>
<p>Впрочем, к делу: вашему вниманию обзор ряда фотогалерей и сопутствующих решений, построенных на CSS/DHTML/Javascript. Да, чуть не забыл: превьюшки для галерей, скорее всего, придется генерить самостоятельно <img src='http://cyrill.co.uk/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>1. <a href="http://www.huddletogether.com/projects/lightbox2/" title="Lightbox 2" target="_blank">Lightbox 2</a><br />
Ненавязчивый скриптик, позволяющий отображать картинки поверх открытой страницы. Поддерживает серии изображений и крайне прост в использовании. Простота, помимо всего, открывает широкие горизонты для доработчиков напильником, позволяя интегрировать скрипт в более сложные проекты.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/lightbox.jpg" alt="Lightbox 2" /></p>
<p>2.  <a href="http://codeboje.de/imago/" target="_blank" title="Imago">Imago</a><br />
Скрипт галереи, построенный на mootools. Умеет показывать картинки как из папки на сервере, так и с Flickr. Как утверждает автор, его миссия &#8211; сделать простую в использовании, но достаточно хорошо настраиваемую галерею.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/imago.jpg" alt="Imago" /></p>
<p>3. <a href="http://labs.adobe.com/technologies/spry/demos/pe_gallery.html" target="_blank" title="Spry Photo Gallery">Adobe Spry Photo Gallery</a><br />
С удивлением для себя обнаружил очередной AJAX-фреймворк &#8211; <a href="http://labs.adobe.com/technologies/spry/home.html" target="_blank" title="Adobe Spry AJAX framework">Adobe Spry</a>. Подозреваю, что он &#8211; тема для отдельного обзора, но сейчас имею предложить вниманию читателя фотогалерею, построенную с помощью этого фреймворка. Судя по всему, это не самый простой путь, но возможности открывает достаточно широкие. Взгляните сами:<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/spry.jpg" alt="Spry photo gallery" /></p>
<p>Под катом &#8211; еще пять вариантов <strong>фотогалереи без применения PHP</strong> или любого другого серверного языка =)</p>
<p><span id="more-31"></span></p>
<p>4. <a href="http://www.puidokas.com/portfolio/frogjs/" target="_blank" title="FrogJS">FrogJS</a><br />
Вы занимаетесь репортажной съемкой? Никаких проблем =)  Сосредоточьтесь на выборе фототехники, а оформление фотоисторий доверьте FrogJS &#8211; эта библиотека идеально подходит для тех, кто хочет показывать постраничные репортажи. Очень просто устанавливается, поддерживает изображения любых размеров, и, по заверению автора умеет работать даже с выключенным javascript. Проверено со следующими браузерами:</p>
<ul>
<li>Internet Explorer 6</li>
<li>Internet Explorer 7</li>
<li>Firefox 2.0</li>
<li>Safari 2.0</li>
<li>Opera 9.1</li>
</ul>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/frogjs.jpg" alt="FrogJS" /></p>
<p>5. <a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html" title="jQuery slideViewer">jQuery slideViewer<br />
</a>Плагин для jQuery, позволяющий строить галерею с прокруткой из единственного немаркированного списка html:<br />
<code>&lt;div id="mygalleryinpost10.12.2006" class="svw"&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;img src="picts/10.jpg" alt="my description for this image" /&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;img src="picts/08.jpg" alt="this is my dog..." /&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;img src="picts/03.jpg" alt="my dog eating the cat" /&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;img src="picts/05.jpg" alt="my r/c helicopter crashing..." /&gt;&lt;/li&gt;<br />
&lt;!--etcetera--&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;</code></p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/jq-slidevewr.jpg" alt="jQuery slideViewer" /></p>
<p>6. <a href="http://smoothgallery.jondesign.net/showcase/gallery/" title="JonDesign's SmoothGallery" target="_blank">JonDesign&#8217;s smoothgallery</a></p>
<p>Навороченная надстройка над mootools: умеет показывать наборы галерей, слайд-шоу и прочие прелести. При этом достаточно симпатично выглядит и имеет возможность настройки переходов между изображениями. Как и предыдущие, использует семантически правильный html для форматирования.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/jondesign.jpg" alt="JonDesign’s smoothgallery" /></p>
<p>7. <a href="http://mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/" target="_blank" title="Suckerfish HoverLightbox">Suckerfish HoverLightbox</a><br />
Смотрелка, построенная на меню <a href="http://www.alistapart.com/articles/dropdowns/" title="Suckerfish dropdowns" target="_blank">Suckerfish</a>, описанных на <a href="http://www.alistapart.com/" title="A list apart" target="_blank">ALA</a> и галерее <a href="http://sonspring.com/journal/hoverbox-image-gallery">Hoverbox Image Gallery</a> написанной Натаном Смитом из <a href="http://www.sonspring.com/">SonSpring</a>. О hoverbox речь ниже, а пока &#8211; Suckerfish HoverLightbox:<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/suckerfish.jpg" alt="Sockerfish HoverLightbox" /></p>
<p>Выпадающие меню из картинок &#8211; это круто. А когда еще и перекат (hover) есть и работает, как показано на скриншоте &#8211; это совсем круто <img src='http://cyrill.co.uk/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />  Традиционно, используется семантическая разметка, имеется возможность использования при выключенном javascript.</p>
<p>8. <a href="http://sonspring.com/journal/hoverbox-image-gallery" target="_blank" title="Hoverbox Image Gallery">Hoverbox  Image Gallery</a></p>
<p>Одна из самых пожилых галерей подобного рода &#8211; на нее ссылается масса источников и, что интереснее, многие описанные здесь скрипты навеяла авторам именно эта разработка. Кроссбраузерность, как следствие, на высоте. Традиционно, семантически правильный html внутри и великолепный вид снаружи.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/hoverbox.jpg" alt="Hoverbox" /></p>
<p><img src="http://dev.cyrill.co.uk/__test/cyrill-co-uk-pure-js-dhtml-galleries.gif" alt="oops" height="1" width="1" /></p>
<p><a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html" title="jQuery slideViewer"></a></p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://cyrill.co.uk/2008/01/15/pure-css-dhtml-javascript-galleries/feed/</wfw:commentRss>
		<slash:comments>27</slash:comments>
		</item>
		<item>
		<title>Красивые таблицы с применением DHTML/Javascript/AJAX</title>
		<link>http://cyrill.co.uk/2008/01/14/beautiful-js-grids/</link>
		<comments>http://cyrill.co.uk/2008/01/14/beautiful-js-grids/#comments</comments>
		<pubDate>Mon, 14 Jan 2008 13:15:10 +0000</pubDate>
		<dc:creator>Cyrill</dc:creator>
				<category><![CDATA[web]]></category>
		<category><![CDATA[Дизайн информации]]></category>
		<category><![CDATA[Интерфейсы и юзабилити]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[datatables]]></category>
		<category><![CDATA[DHTML]]></category>
		<category><![CDATA[dhtmlxGrid]]></category>
		<category><![CDATA[ExtJs]]></category>
		<category><![CDATA[firebug]]></category>
		<category><![CDATA[grid]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[mootable]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[таблица]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[ROR]]></category>
		<category><![CDATA[ruby on rails]]></category>
		<category><![CDATA[Smashingmagazine]]></category>
		<category><![CDATA[Sortable]]></category>
		<category><![CDATA[Sortedtable]]></category>
		<category><![CDATA[tablekit]]></category>
		<category><![CDATA[Tablesorter]]></category>
		<category><![CDATA[web 2.0]]></category>
		<category><![CDATA[YUI]]></category>
		<category><![CDATA[zebra]]></category>

		<guid isPermaLink="false">http://cyrill.co.uk/2008/01/14/beautiful-js-grids/</guid>
		<description><![CDATA[Таблицы — пример отличной информационной структуры, представляющей данные в наглядном виде. При использовании по назначению — для организации данных, а не для верстки, таблицы — наиболее компактный и в то же время удобный инструмент, что, в принципе, и требуется. =) Если вы работаете в веб-разработке (дизайне, юзабилити или смежных областях), вам, вероятно, хочется добавить удобства [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>Таблицы — пример отличной информационной структуры, представляющей данные в наглядном виде. При использовании по назначению — для организации данных, а не для верстки, таблицы — наиболее компактный и в то же время удобный инструмент, что, в принципе, и требуется. =)</p>
<p>Если вы работаете в веб-разработке (дизайне, юзабилити или смежных областях), вам, вероятно, хочется добавить удобства вашим табличнеым данным — сортировка, отбор данных по заданным критериям и даже редактирование — все это возможно. Но как? Ниже — обзор нескольких решений, позволяющих прокачать ваши таблицы до предела. Стоит оговориться &#8211; все это происходит на стороне клиента, поэтому следует озаботиться наличием у ваших посетителей современных браузеров.</p>
<p>1. <a href="http://tablesorter.com/docs/" title="JQuery Tablesorter 2.0" target="_blank">Tablesorter</a><br />
Плагин для <a href="http://jquery.com/" title="JQuery javascript library" target="_blank">JQuery</a>, позволяющий легко добавить сортировку (<em>по нескольким столбцам!</em>) к таблицам. Достаточно легкий, поддерживает пакеты стилей (скины), имеет интерфейс для написания и подключения виджетов, одним из которых является поставляемая в комплекте зебра. Имеется автоматическое определение типа данных в столбце &#8211; впрочем, не всегда корректно работающее — мне пришлось писать собственный сортировщик для дат в формате <em>дд-мм-гггг</em>, что, впрочем, нисколько не умаляет достоинств этого скриптика.<br />
<em>A favorite of mine =)</em><br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/tablesorter.jpg" alt="Tablesorter screenshot example" /></p>
<p>2. <a href="http://extjs.com/playpen/ext-2.0/examples/grid/grid3.html" title="ExtJs Grid" target="_blank">ExtJs Grid<br />
</a>Поддержка схлопывающихся строк, вписывания в площадь, выбора строк стандартными чекбоксами и горизонтальной прокрутки. Можно навешивать свои панели инструментов.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/extjs-grid.jpg" alt="ExtJs Grid" /></p>
<p>3. <a href="http://dhtmlx.com/docs/products/dhtmlxGrid/" target="_blank" title="dhtmlxGrid">dhtmlxGrid</a><br />
Постраничное разбиение больших таблиц, отбор данных, итоговые поля,  поддержка drag&#8217;n'drop, сериализация и импорт данных в/из xml и csv, поддержка скинов либо пользовательских css.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/dhtmlxgrid.jpg" alt="dhtmlxGrid screenshot" /></p>
<p>4. <a href="http://www.phatfusion.net/sortabletable/index.htm" target="_blank" title="Phatfusion sortable">Phatfusion sortable</a><br />
Сортировка таблиц с возможностью отбора данных. Требует наличия  <a href="http://www.mootools.net/" target="_blank" title="mootools">mootools</a> &gt; 1.11<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/phatfusion.jpg" alt="Phatfusion sortable" /><br />
Под катом — еще деcять разновидностей воплощения динамической таблицы  с применением DHTML/Javascript/AJAX. А местами —даже Ruby On Rails<span id="more-15"></span><img src="http://dev.cyrill.co.uk/__test/cyrill-co-uk-beautiful-tables.gif" /></p>
<p>5. <a href="http://joomlicious.com/mootable/" title="Mootable" target="_blank">Mootable sorting<br />
</a> Еще одна надстройка к mootools — умеет сортировать, подсвечивать и передавать по клику номер выбранной строки. Имеется псевдо-консоль с отладочной информацией &#8211; cтранно, что при этом нет поддержки <a href="http://firebug.ru/" target="_blank" title="Firebug">firebug</a>.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/mootable.jpg" alt="Mootable" /></p>
<p>6. <a href="http://www.eklekt.com/widgets/zebras/elitezebras-2-0.php" target="_blank" title="Elite zebra">Elite zebra tables</a><br />
Зебро-таблички с возможностью множественного выбора, разумеется сортировки и подсветки на перекат. Имеется поддержка функциональности html-форм.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/elitezebra.jpg" alt="Elite Zebra" /></p>
<p>7. <a href="http://www.millstream.com.au/upload/code/tablekit/" target="_blank" title="TableKit">Prototype TableKit</a><br />
TableKit — коллекция табличных примочек, построенная на <a href="http://prototypejs.org/" target="_blank" title="Prototype homepage">Prototype</a>. Имеется сортировка (куда уж без нее? <img src='http://cyrill.co.uk/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /> ), обрезка длинных рядов, изменение размера ячеек и редактирование ячеек, построенное при помощи AJAX.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/prototype-tablekit.jpg" alt="TableKit" /></p>
<p>8. Таблицы и <a href="http://www.rubyonrails.org/" title="Ruby on rails" target="_blank">Ruby On Rails</a> -статья &#8220;<a href="http://dev.nozav.org/rails_ajax_table.html" title="How to paginate, sort and search a table with Ajax and Rails" target="_blank">How to paginate, sort and search a table with Ajax and Rails</a>&#8220;. Вдумчивая статья о том, как сделать таблицы функциональными, применяя <a href="http://www.rubyonrails.org/" target="_blank" title="Ruby on rails">Rails</a> и AJAX. Небезынтересно тем, кто активно осваивает <a href="http://www.rubyonrails.org/" title="Ruby on rails" target="_blank">Rails</a> =)<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/ror-paginate-sort.jpg" alt="Tables and ROR" /></p>
<p>9. <a href="http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited" target="_blank" title="Unobtrusive table sorot script">Unobtrusive table sort</a><br />
Сортировка по нескольким столбцам, автоматическое определение типа данных в столбце, обширные возможности по доработке надфилем: интерфейс для плагинов и собственные callback-функции на before-sort и after-sort.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/unobtrusive.jpg" alt="Unobtrusive table sort" /></p>
<p>10. <a href="http://developer.yahoo.com/yui/datatable/" target="_blank" title="YUI Datatables">Yahoo! UI Datatables</a><br />
Чертова гора возможностей — пусть вас не пугает страшненький внешний вид =)) Сортировка, редактирование данных, постраничная разбивка таблиц, подсветка и пользовательские скины — перечислено только самое насущное.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/yui.jpg" alt="Yahoo! UI Datatables" /></p>
<p>11. <a href="http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting" title="Standartista">Standartista</a><br />
Очень простой в применении сортировщик, оттестированный, как утверждает автор, на множестве различных броузеров. Не сильно богат наворотами, но вполне сойдет для тех, кто хотел <em>отсортировать данные</em>, а не построить истребитель пятого поколения =)<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/standartista.jpg" alt="Standartista" /></p>
<p>12. <a href="http://webfx.eae.net/dhtml/sortabletable/demos.html" title="Sortable table by WebFX">Sortable tables by WebFX</a><br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/sortable-webfx.jpg" alt="Sortable tables by WebFX" /></p>
<p>13. <a href="http://friedcellcollective.net/js/SortedTable/examples.html" title="SortedTable">SortedTable</a><br />
Сортировка, взаимодействие между несколькими таблицами.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/sortedtable.jpg" alt="SortedTable" /></p>
<p>14. <a href="http://www.chrisesler.com/mootools/mootools-rowcolumnhighlight.php" title="Mootols Table Row &amp; Column Highlighting">Mootools Table Row and Column Highlighting</a><br />
И снова &#8211; mootools =) На этот раз — не вполне сортировщик, но весьма забавный пример того, как можно подсвечивать ячейки с помощью mootools.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/yamoo.jpg" alt="Mootools Table Row and Column Highlighting" /></p>
<p>Этот пост навеян статьей &#8220;<a href="http://www.smashingmagazine.com/2007/05/30/tables-and-data-grids-with-ajax-dhtml-javascript/" target="_blank">Data Grids with AJAX, DHTML and JavaScript</a>&#8221; из блога <a href="http://www.smashingmagazine.com/" title="Smashingmagazine">SmashingMagazine</a>, который осмелюсь рекомендовать к обязательному прочтению.<a href="http://www.smashingmagazine.com/" title="Smashingmagazine"> </a></p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://cyrill.co.uk/2008/01/14/beautiful-js-grids/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

