<?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>mega.genn.org &#187; gui</title>
	<atom:link href="http://mega.genn.org/blah/gui/feed/" rel="self" type="application/rss+xml" />
	<link>http://mega.genn.org</link>
	<description>Откровения синего кубика</description>
	<lastBuildDate>Tue, 08 Nov 2011 07:55:39 +0000</lastBuildDate>
	<language>ru</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>Два пробочных совета Яндексу</title>
		<link>http://mega.genn.org/2011/yandex-traffic-howto-better/</link>
		<comments>http://mega.genn.org/2011/yandex-traffic-howto-better/#comments</comments>
		<pubDate>Tue, 19 Jul 2011 14:08:33 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[advice]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[ux]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2840</guid>
		<description><![CDATA[Можно возмущаться тем, что Яндекс.Пробки не всегда дают актуальную или адекватную информацию (примерно каждое третье мое обращение к сервису не подтверждается ситуацией на дорогах), но более точного механизма, кроме водительской интуиции, чтобы следить за положением на дорогах города просто нет. Хорошо, что существует мобильная версия для айфона, так я могу оценить положение на набережной и [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2011/07/main1.gif" alt="" width="390" height="336" /></p>
<p>Можно возмущаться тем, что Яндекс.Пробки не всегда дают актуальную или адекватную информацию (примерно каждое третье мое обращение к сервису не подтверждается ситуацией на дорогах), но более точного механизма, кроме водительской интуиции, чтобы следить за положением на дорогах города просто нет. Хорошо, что существует мобильная <a href="http://itunes.apple.com/ru/app/id313877526?mt=8">версия для айфона</a>, так я могу оценить положение на набережной и мостах, чтобы решить, какой путь выбрать. Тем не менее, в этом приложении очень просятся два улучшения. Прямо вопят, как хотят быть воплощены в жизнь.<span id="more-2840"></span></p>
<h2>Механизм установки маркеров</h2>
<p>Несомненным плюсом является возможность сообщить о неприятности на дороге: пост ГАИ, ДТП, ремонтные работы или просто прокомментировать затор из-за проезда кортежа. Соответствующий маркер появляется на карте после того, как все заполнено. Вот только непонятно, почему его место выбирается исходя из положения автомобиля в момент окончания, а не начала создания маркера.</p>
<p>Вот, что произошло сегодня утром. На мосту Патона стукнулись на реверсе четыре машины. Проезжая мимо них, я попросил свою девушку отметить на картах Яндекса в айфоне, что тут ДТП на реверсе. Она нажала соответствующую кнопку, отметила «Левый ряд», поскольку варианта «Реверс» нет и уже собиралась сохранить маркер. Я вовремя ее остановил, потому что мы уже подъезжали к станции метро «Дружбы народов», и приложение решило, что ДТП произошло примерно рядом с домом мебели. Пришлось остановиться и вручную перенести маркер на несколько километров назад, в центр моста Патона.</p>
<p>Мне кажется очевидным, что надо засекать ту точку, в которой пользователь решил сообщить о ДТП или дорожных работах, чтобы поставить маркер именно в ней, а не где-то через несколько километров, когда у водителя будет возможность заполнить необходимую информацию. Разумеется, что возможность передвинуть маркер следует оставить.</p>
<h2>Внешний вид маркеров</h2>
<p>Даже если водитель удосужится перенести маркер примерно туда, где он встретил преграду на пути, все равно скорее всего окажется, что там двухстороннее движение, поэтому непонятно с какой стороны дороги стоит быть внимательнее. Очень редко направление движения, в котором случилась проблема, очевидно по дорожной обстановке, но зачастую нет.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/07/marker-obvious.png" alt="Редкий случай" width="636" height="304" /></p>
<p class="imgdesc">Очень редкий случай, когда понятно в каком направлении препятствие</p>
<p>Яндекс все равно «знает» направление движения ставящего маркер, так почему бы не запоминать его и не отображать его прямо на маркерах? Например так:</p>
<div style="font-size:18px; color:#777; width:848px;padding-bottom:5px;">
<div style="width:423px;float:left;">Текущая версия</div>
<div>Улучшенная версия</div>
</div>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/07/marker-better1.jpg" alt="Текущие и улучшенные Яндекс.Пробки"  width="848" height="635" /></p>
<p class="imgdesc">Слева текущая версия Яндекс.Карт, а справа улучшенная, благодаря даже небольшим стрелочкам, версия</p>
<p>Дополнительные плюсы в том, что водителям не придется заниматься пиксел-хантингом, размещая маркеры и в том, что даже на развязках будет понятно, где стоят посты ГАИ ;)</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/07/marker-better2.jpg" alt="Улучшенные Яндекс.Пробки" width="640" height="960" /></p>
<p class="imgdesc">С таким улучшением Яндекс.Пробки станут действительно понятнее</p>
<h2>***</h2>
<p>Тоже о дорожном движении: пост о светофорах «<a href="http://mega.genn.org/ru/2009/sorry-mario-the-princess-is-right-after-the-crossroads/">Sorry, Mario, the Princess is right after the crossroads</a>».</p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2011/yandex-traffic-howto-better/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Walkyrie × 100 — интерактивный каталог в мобильном устройстве</title>
		<link>http://mega.genn.org/2010/walkyrie-x-100/</link>
		<comments>http://mega.genn.org/2010/walkyrie-x-100/#comments</comments>
		<pubDate>Tue, 05 Oct 2010 06:54:16 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[baka-baka]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[emo]]></category>
		<category><![CDATA[friends]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[information]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[numbers]]></category>
		<category><![CDATA[reading]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2391</guid>
		<description><![CDATA[Недавно мы с дружественным минским фотографом гламура, путешествий и антиквариата запустили проект под названием Walkyrie. Шло время, и количество гельветизированных фотографий достигло сотни. Это не просто достижение или причина открыть шампанское, но и что-то вроде дня рождения. Поскольку мы планируем опубликовать печатный каталог «валькирий» в ближайшем будущем, но не сегодня, мы решили сделать что-то особенное, [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2010/10/main.jpg" alt="Walkyrie x 100" width="636" height="276" /></p>
<p>Недавно мы с дружественным <a href="http://kovenkin.com/">минским фотографом</a> гламура, путешествий и антиквариата <a href="http://mega.genn.org/ru/2010/walkyrie-walking-mythology/">запустили проект</a> под названием <a href="http://walkyrie.org/"><em>Walkyrie</em></a>. Шло время, и количество гельветизированных фотографий достигло сотни. Это не просто достижение или причина открыть шампанское, но и что-то вроде дня рождения.<span id="more-2391"></span></p>
<p>Поскольку мы планируем опубликовать печатный каталог «валькирий» в ближайшем будущем, но не сегодня, мы решили сделать что-то особенное, чтобы отметить эту сотню. Тут-то и появилось то, чего раньше нам встречать не приходилось, — электронная книга, набитая художественным материалом, как любой печатный каталог искусства или дизайна. В качестве формата электронной книги был выбран ePub. Его можно читать как на мобильных устройствах, так и на компьютерах. Получилось две версии художественного альбома (примерно по 15 мегабайтов каждая): <a href="http://walkyrie.org/walkyrie100.epub">Walkyrie × 100</a>, которая должна работать с любой программой для чтениия электроных книг, и специальная версия для iBooks <a href="http://walkyrie.org/iwalkyrie100.epub">Walkyrie × 100 Interactive</a>. Ссылки на обе из них также есть на <a href="http://walkyrie.org/">walkyrie.org</a>.</p>
<h2>Зачем интерактивность</h2>
<p>Идея создания интерактивного ePub, который можно было бы просматривать стандартными программами на ай-устройствах, посетила меня давно, но я не уделил ей должного внимания. Однажды ameagari поинтересовался в <a href="http://twitter.com/ameagari">своем твитере</a>, не встречал ли кто такого чуда. Я не встречал и, мало того, не нашел во всем интернете настоящей интерактивности. В который раз пришлось все делать самому ;)</p>
<h2>Это было непросто</h2>
<p>У моего друга есть привезенная из Нью-Йорка футболка, на которой написано «fuck rude people, fuck subways, fuck rain, fuck high prices…» и т. д. После создания интерактивной электронной книги я могу сделать такую же футболку, но вместе со словом <em>fuck</em> там будут еще <em>webkit</em>, <em>z-index</em>, <em>font-family</em>, <em>jquery</em>, <em>iBooks</em>. Ниже я расскажу почему.</p>
<p>Необычное для книг взаимодействие пользователя с каталогом «валькирий» осуществляется двумя путями. Во-первых, можно нажать на кружок (в формате SVG, чтобы красиво смотреться на любой странице) в начале книги и попасть на произвольную страницу с картинкой. Наша версия fortune cookie ;)</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/10/fortune.jpg" alt="Walkyrie fortune" width="320" height="460" /></p>
<p>Кроме этого, если читатель не сможет разобрать текст на картинке, к его услугам ссылка <em>Transcript</em>, прикосновение к которой покажет текст крупнее.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/10/pages.jpg" alt="Different pages" width="640" height="460" /></p>
<p>Ничего супер-удивительного, но большего нам и не требовалось. Во всяком случае, до следующей версии.</p>
<p>Интерактивность не поддерживается большинством программ для чтения электронных книг, как мобильных, так и компьютерных, кроме iBooks, но и там все не очень хорошо. У создателя книги нет почти никакого контроля над начертанием и размером шрифтов, над выравниванием текста. Невозможно задать наложение элементов с использованием z-index&#8217;а и позиционирования без каких-то прыжков через голову. Невозможно задать расположение элементов на странице (мне пришлось пользоваться таблицами как в 2002-м). Невозможно удостовериться, что объекты будут на одной странице и не расползутся непонятно куда. Например, мы заметили, что если листать страницы вперед, потом назад, а потом опять вперед, то может появиться пустая страница. Тут не мешало бы вспомнить футболку, о которой я рассказывал чуть выше:</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/10/fuck.jpg" alt="fuck everything t-shirt" width="474" height="489" /></p>
<h2>Уловки и советы</h2>
<p>Я думаю, что некоторым из моих любимых читателей и той замечательной девушке из Кореи, которая нашла эту страницу при помощи гугла, следующая информация покажется увлекательнее всего остального. Для тех, кому неинтересна техническая составляющая процесса, есть следующий раздел повествования, можно перепрыгнуть сразу на него.</p>
<p>Любой файл ePub представляет собой засунутую в архив мешанину из всяких служебных файлов, а также, что важно для нас, содержания книги, представленного .xhtml&#8217;ами с CSS и JavaScript&#8217;ом, а также всем тем, что необходимо для книги (например, картинками). Я создавал ePub&#8217;ы при помощи <a href="http://code.google.com/p/sigil/">Sigil</a>. Эта программа была выбрана неслучайно. Во-первых, у нее правильное концептуально и магически название. Во-вторых, она, в отличие от многих других, работает и существует под Mac OS X. Ну и еще она opensource, если кому-то это важно. Сокращенная версия структуры книги в неудобном как для просмотра, так и для редактирования (привет, opensource) древовидном состоянии представлена ниже.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/10/structure.png" alt="structure" width="375" height="556" /></p>
<p>Для того, чтобы работать с объектами на странице, я пользовался jQuery. На прикосновения он реагирует так:</p>
<ol class="h4x0r">
<li><code>$('#transcript').bind('touchstart', function(e){</code></li>
<li><code>…</code></li>
<li><code>});</code></li>
</ol>
<p>Для того, чтобы, не смотря ни на что, выводить подсказки поверх фотографий, я воспользовался следующим кодом:</p>
<ol class="h4x0r">
<li><code>var tra=$('.help').height()+30;</code></li>
<li><code>$('.help').css('-webkit-transform','translateY(-'+tra+'px)');</code></li>
</ol>
<p>Как встраивать SVG, думаю, все знают, так что там ничего особенного, только куча этих Midxmidymaxymidy ;)</p>
<h2>Читать нельзя потрогать</h2>
<p>Все программы для чтения на тач-устройствах не очень-то жалуют интерактивность в книгах. Проблема заключается в том, что в первую очередь  у программ есть свои интерфейсы, которые тоже управляются прикосновениями. Таким образом, если на какой-то из страниц есть интерактивная область, читатель может нажать на нее как для того, чтобы воспользоваться дополнительным функционалом, так и для того, чтобы воспользоваться интерфейсом приложения. Например, в нашей интерактивном электронном каталоге «валькирий» я был вынужден убрать подсказку по прикосновению к фотографии и создать для этого отдельную ссылку. Дело в том, что при нажатии на правую или левую часть экрана читатель ожидает перелистывания, а не подсказки. Картинка же занимает всю страницу, как и положено в арт-объектах ;)</p>
<p>Помимо конфликта интерфейсов книги и программы, невозможно почти ничего контролировать в расположении и взаимодействии элементов, так что создание удобного интерфейса книги превращается в подвиг. В iBooks также не существует навигации вперед/назад по последним посещенным страницам. Это приводит к тому, что, нажав на сноску, читатель не может вернуться к последней прочитанной странице без хитрых манипуляций.</p>
<h2>Так или иначе</h2>
<p>Скачивайте наши «<a href="http://walkyrie.org/">валькирии</a>» на свое мобильное устройство в удобном виде и таскайте с собой всюду. При помощи одной электронной книги вы сможете удивить друзей и коллег, а также иметь уникальный объект для занимания глаз во время поедания пиццы!</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/10/photo.jpg" alt="Catalogue on shelf" width="640" height="960" /></p>
<p class="imgdesc">Как и положено арт-объекту, каталог «валькирий» выделяется на любой книжной полке. Даже виртуальной!</p>
<h2>***</h2>
<p>Это уже второй проект, связанный с электронными книгами за последние полторы недели. Занял он у меня не намного больше времени, чем <a href="http://mega.genn.org/2010/33-hrs-project/">предыдущий</a>. Мне кажется, грядет что-то интересное ;)</p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2010/walkyrie-x-100/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Проект на 33 часа</title>
		<link>http://mega.genn.org/2010/33-hrs-project/</link>
		<comments>http://mega.genn.org/2010/33-hrs-project/#comments</comments>
		<pubDate>Thu, 30 Sep 2010 07:23:19 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[fan]]></category>
		<category><![CDATA[friends]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[information]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[numbers]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2357</guid>
		<description><![CDATA[За последнюю вечность я так и не написал ни одного поста. Теперь же я вернулся и надеюсь, что мои черновики не заплесневели — буду писать и постить! Писать и постись! Как лучше всего заставить свой мозг очнуться и начать работать? Сделать что-то интересное и ресурсоемкое. Этим мы с Юрой и занялись. Мы взялись сделать проект [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2010/09/33hrs.png" alt="33hrs" width="636" height="460" /></p>
<p>За последнюю вечность я так и не написал ни одного поста. Теперь же я вернулся и надеюсь, что мои черновики не заплесневели — буду писать и постить! Писать и постись! Как лучше всего заставить свой мозг очнуться и начать работать? Сделать что-то интересное и ресурсоемкое. Этим мы с <a href="http://cssing.org.ua/">Юрой</a> и занялись. Мы взялись сделать проект за 24 часа. На него у нас ушло около 33-х часов. На двадцать шестом часу мы стали подозревать, что не укладываемся в сутки, а на 30-м уже были уверены, что немного опаздываем. Так или иначе, проект мы завершили, и один из нас отправился ужинать, а другой — писать пост, уснул лицом в клавиатуре и только сейчас нажимает кнопку «Опубликовать» ;)<span id="more-2357"></span></p>
<h2>Идея проекта</h2>
<p>Идея проста и этим привлекательна — дать пользователям айфона читать книги без установки дополнительных приложений. Мне она понравилась тем, что я люблю простые и изящные решения. Юра же был заинтересован в ней невероятно, потому что на свой залоченный айфон он не мог установить ни одно приложение. Исходя из поставленной задачи (никаких установок из AppStore или Сидии), мы поняли, что придется делать настоящее html-приложение. Я не помню, как их называет Эппл ;)</p>
<h2>Проектирование</h2>
<p>Первые наработки, созданные более полугода назад, напоминали приложение iBooks, которого тогда еще не существовало. После присоединения к проекту я предложил идею «отдельная книга — отдельная иконка». Таким образом, каждая книга становилась отдельным приложением. Вся библиотека была на сервере, а у пользователя только то, чем он пользуется. Кроме этого трендового подхода к организации информации был и еще один плюс — чтение книги заключалось только в чтении и ничего лишнего. Сделать что-то еще с книгой было невозможно. К минусам данной идеи стоит отнести неудобство хранения больше двух-трех книг теми, у кого на экране айфона много иконок. Мы решили, что можем с этим смириться, а выход iOS 4 доказал, что мы приняли правильное решение: теперь книги можно дюжинами складывать в папки.</p>
<p>Работу приложения можно разделить на два этапа. Первый этап: выбор или создание книги и последующее добавление ее иконки на Home Screen. Второй этап: чтение добавленной книги, доступной даже если айфон не подключен к интернету.</p>
<p>На данный момент поддерживаются .html и .fb2, но мы добавим и другие в скором времени.</p>
<h2>Интерфейс</h2>
<p>Наконец-то картинки ;) Можно было сравнить макеты с готовым продуктом, но в данный момент сайт не работает. Мы работаем над тем, чтобы восстановить его как можно скорее.</p>
<p>Все началось с иконки приложения и различных размеров для нее. Я надеялся, что html-приложения тоже могут иметь различные иконки в зависимости от разрешающей способности экрана, на котором они показываются. Оказалось, что не могут ;(</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/09/icons.png" alt="icons" width="848" height="258"  /></p>
<p>Затем пошли страницы, экраны и длинные списки. Как только пользователь попадает на сайт приложения, он может найти книгу и посмотреть каталог книг или создать книгу из файла в интернете. Результаты поиска и каталог книг выглядят одинаково, разве что в каталоге можно отфильтровать книги по жанру.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/09/startscreens.png" alt="start screens" width="848" height="560"  /></p>
<p>После того, как пользователь выбрал книгу, она загружается. Можно начинать читать книгу еще до того, как она полностью загрузится. После полной загрузки на экране появляется подсказка как сохранить книгу, чтобы всегда иметь к ней доступ. Плашка в форме стрелки, на которой размещена подсказка, указывает как раз на иконку добавления в нижней панели инструментов iOS Safari.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/09/bookdownload.png" alt="book download" width="848" height="560" /></p>
<p>Иконка книги добавляется на Home Screen, и так завершается первый этап.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/09/homescreen.jpg" alt="home screen" width="848" height="560"  /></p>
<p>В следующий раз, когда пользователь нажмет на иконку книги, он увидит экран загрузки (на четвертом айфоне книга полностью загружается за пару секунд, а на айфоне 3GS немного дольше). После того, как книга загрузится в память телефона, ее можно читать. Приложение автоматически запомнит последнее прочитанное место и в следующий раз перемотает на него.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/09/bookload.png" alt="book load book show" width="848" height="560" /></p>
<p>Вот так просто и вот так здорово ;)</p>
<p>Для тех, кто зашел на сайт не с одного из поддерживаемых устройств, существует специальная красивая страница (сейчас немного отличается).</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/09/noidevice.jpg" alt="no idevice" width="848" height="500" /></p>
<h2>Интересные детали</h2>
<ul class="postlist">
<li><span>Весь интефейс на 100% создан в векторном редакторе</span></li>
<li><span>Все иконки и логотипы в приложении в векторном формате SVG</span></li>
<li><span>Все графические элементы кроме иконок, логотипов и плашки в форме стрелки, сделаны на чистом CSS. Да, именно так! Эти градиенты, тени и фоны не картинки, а строки в файле со стилями! </span></li>
<li><span>Иконка сайта, которая добавляется на Home Screen для веб-приложений в iOS 4.0 выглядит размытой и некрасивой. Единственный способ победить эту проблему — обновиться до  iOS 4.1</span></li>
<li><span>Все использованные шрифты установлены по-умолчанию в айфонах, айподах тачах и айпадах</span></li>
<li><span>Благодаря всему тому, что перечислено выше, приложение выглядит одинаково на  iPhone, iPhone 3G, iPhone 3GS, iPhone 4 and iPod Touch всех версий. Результаты работы на айпаде ожидаются в ближайшее время ;)</span></li>
</ul>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/09/iphonescreens.jpg" alt=""iphone screens comparison" width="875" height="960" /></p>
<p class="imgdesc">iPhone 4  и обычный iPhone. Практически идентично ;)</p>
<p>Того, что происходило за кулисами создания приложения очень много, я не буду перечислять все. Один из примеров: поиск варианта отображения и организации загрузки книги.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/09/downloadingpics.png" alt="downloading pics" width="848" height="1070"  /></p>
<h2>Ого, сколько текста. Я столько не прочту</h2>
<p>Отправляйся со своего айустройства на  сайт проекта (скоро вновь заработает) для того, чтобы скачать книги прямо на рабочий стол и прочесть их позже. Никакого дополнительного программного обеспечения не требуется. Поддерживаются форматы .html и .fb2. Мы любим вас!</p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2010/33-hrs-project/feed/</wfw:commentRss>
		<slash:comments>37</slash:comments>
		</item>
		<item>
		<title>Таблицы — скучно, инфографика — трудно</title>
		<link>http://mega.genn.org/2010/sparklines/</link>
		<comments>http://mega.genn.org/2010/sparklines/#comments</comments>
		<pubDate>Sat, 29 May 2010 08:18:36 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[information]]></category>
		<category><![CDATA[microsoft]]></category>
		<category><![CDATA[numbers]]></category>
		<category><![CDATA[sick]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2162</guid>
		<description><![CDATA[Какой способ организации информации кажется людям самым простым? На первом месте, конечно, выбросить все данные в мусор и забыть о них. На втором месте, я думаю, идут таблицы. Люди любят таблицы. Им они очень нравятся. Нравятся настолько, что компьютерам Эппл предрекали провал без программы для работы с электронными таблицами (что-то типа Numbers или Excel). И, [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2010/05/chess-snake-tetris.png" alt="chess-snake-tetris" width="636" height="330" /></p>
<p>Какой способ организации информации кажется людям самым простым? На первом месте, конечно, выбросить все данные в мусор и забыть о них. На втором месте, я думаю, идут таблицы. Люди любят таблицы. Им они очень нравятся. Нравятся настолько, что компьютерам Эппл предрекали провал без программы для работы с электронными таблицами (что-то типа Numbers или Excel). И, если мне не изменяет память, именно для выполнения этой задачи был взят на работу очкастый мальчик Билл с его компанией Майкрософт, который <a href="http://mega.genn.org/ru/2008/jolly-os/">жаждал добраться до Mac OS и вдохновиться ее идеями</a>… </p>
<p>Так, я отвлекся, вернемся к таблицам. Я знаком с многими офисными работниками, которые даже обычные тексты набирают в Экселе — так им легче организовать нужные им куски информации в пространстве и работать с ними. Таким образом, любовь к таблицам среди народных масс необычайно высока. К сожалению, любовь не значит умение делать их удобными для восприятия. Я влюбился в ничтожно малое количество таблиц из всех встреченных мной. Да и то, к паре из них и я приложил руку, а скорее голос, потому что объяснял, что исправить. Остальные же таблицы вызывают у меня ощущение тюрьмы для информации — она может быть интересной, увлекательной, удивительной, но при этом заключенной в маленькую камеру, из которой не выбраться. А все остальные данные тоже сидят по своим камерам и на них одинаковые оранжевые комбинезоны.<span id="more-2162"></span></p>
<h2>К чему такое длинное вступление?</h2>
<p>Когда мы начали работать над новым <a href="http://mega.genn.org/ru/2010/working-parts/">дизайном сайта Инвест-газеты</a>, ответственный за весь проект сразу предупредил меня, что нужно ощущение журнала (все время работы я потешался над тем, что журнал назвали газетой ;). Значит, без элементов визуализации информации, в какой-то мере инфографики, было не обойтись. Если со всякими гистограммами, ненавистными круговыми диаграммами, картами и прочим было все понятно, то таблицы, даже грамотно составленные и красивые, были все теми же клетками для несчастной информации. В поисках решения мы перебрали несколько вариантов и остановились на одном, который выглядел удивительно простым и в то же время самым подходящим. Так я познакомился со спарклайнами.</p>
<h2>Что такое спарклайны?</h2>
<p>Словарное или очень точное определение можно <a href="http://en.wikipedia.org/wiki/Sparkline">прочесть в википедии</a>, но до него я сам добрался только что (в русской версии вики спарклайны назвали искрографиками, что опять напоминает нам о <a href="http://mega.genn.org/ru/2009/what-translation-foo/">странных переводах</a>). Спарклайны — маленькие графики прямо в таблице или в тексте, раскрывающие дополнительную информацию о данных, представленных в определенной ячейке, но при этом не так точны как детальные графики. Например, если мы указываем стоимость мяса единорога, то график рядом с цифрой может показывать динамику изменения этой стоимости за последний год. Конечно, это не даст нам точных данных, но мы сможем проследить общую картину изменений. Как известно, мясо единорога подросло в цене за последний квартал, что и будет отражено на графике рядом с цифрой: <img src="http://mega.genn.org/=^_^=/uploads/2010/05/unicorn.png" alt="unicorn" width="86" height="13" /></p>
<h2>Как делать удобные спарклайны?</h2>
<p>Для того, чтобы спарклайны помогали воспринимать информацию в таблицах, а не затрудняли ее чтение, сначала надо определиться, нужны ли они и в каких колонках. После этого надо принять важное решение: какую же из сторон информации в колонке следует иллюстрировать, а также, что за тип графика будет наиболее полезен? Если вернуться к описанному выше мясу единорога, то можно показывать динамику изменения цены, при этом указав среднюю величину, или популяцию однорогих животных (график в виде кривой и выделение другим цветом фона или полоской среднего значения). Далее будет несколько примеров, в которых весь этот текст становится удобным и понятным.</p>
<p>Но перед тем как перейти  к картинкам-примерам (я — мастер нагнетания обстановки, правда?), хочу остановиться на некоторых графических характеристиках спарклайнов. Многие из них, если не все базовые, перечислены и проиллюстрированы Эдвардом Тафти (он и придумал название спарклайнам) еще в 2004-м году в статье <a href="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR">Sparklines: theory and practice</a>. Многие решения и выводы у нас с ним совпали, хотя я прочитал его статью в конце работы над спарклайнами.</p>
<h2>Как же все-таки это выглядит?</h2>
<p>Ниже несколько примеров, которые я делал для Инвест-газеты. Поскольку мне надо было показать разные типы спарклайнов, а рисовать сто-пятьсот-миллиардов таблиц не хотелось, я постарался уместить как можно больше данных и спарклайнов в каждую таблицу. В итоге их получилось три. Они хороши в качестве наглядного пособия, но делай я их для публикации в журнале или на сайте, я бы ограничился в каждой из таблиц иллюстрированием только одной колонки.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/05/seasonal-spirit.png" alt="seasonal-spirit" width="625" height="201" /></p>
<p>В этой таблице проиллюстрированы спарклайнами колонки с последней зафиксированной температурой (Last known temperature) и приятностью запаха воздуха (How likely air smells). Во втором случае используется похожее на progress bar решение, что позволяет быстро и удобно воспринимать информацию. </p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/05/explained0.png" width="568" height="253" /></p>
<p>В колонке с температурой показана динамика ее изменения на протяжении времени года и отмечен диапазон значений температуры, в котором человек чувствует себя комфортно. Благодаря спарклайнам нам удалось не только показать как скакал столбик термометра, но и дать общую картину того, насколько приятно и комфортно было в это время года. Превосходно! Единицы измерения температуры указаны рядом со значением — это была рекомендация по общему оформлению таблиц на портале. При небольших объемах информации так легче воспринимать данные. </p>
<p>Особое внимание хочу обратить на колонку продолжительности (Term). Вместо того, чтобы создавать две колонки для первого и последнего месяца времени года, достаточно указать их рядом в одной колонке. Меньше колонок — человечнее таблица ;)</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/05/oldschool-games.png" alt="oldschool-games" width="625" height="230" /></p>
<p>В этой таблице спарклайны пригодились для обозначения того, какое количество домашних работ было не сделано из-за той или иной игры и для демонстрации побед и проигрышей в каждой игре.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/05/explained1.png" width="492" height="198" /></p>
<p>Благодаря спарклайну в колонке невыполненных домашних работ (Homeworks spoiled) можно увидеть как часто с 1 по 10 класс та или иная игра завоевывала время и мешала сделать заданное домой.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/05/explained2.png" width="573" height="121"/></p>
<p>В колонке результатов (Overall result) видно как хорошо или плохо в случае с Pong проходилась та или иная игра. Чем больше палочек вверху, тем круче!</p>
<p>В первой колонке производитель игры указан сразу после ее названия. Таким образом, сэкономлена еще одна колонка. Таблица не стала менее приятной для восприятия и даже напротив — более удобной.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/05/alcohol.png" alt="alcohol" width="625" height="205" /></p>
<p>Делая эту таблицу, я веселился больше всего, прикидывая, оценивая, спрашивая друзей и пытаясь вспомнить то, что обычно не помнишь. </p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/05/explained3.png" width="549" height="72" /></p>
<p>Начнем с последней колонки — уровня громкости после 21 средней дозы (Music volume after 21 average doses). Данные указаны в децибеллах, что не мешает нам показать динамику изменения по ходу приема алкологя внутрь. Фактически это тот же график, что и в первом примере — динамика изменения значения — но оформлен он в стиле колонок эквалайзера, чтобы информацию было интереснее читать.</p>
<p>В колонке количества выпитых друзьями за 2005–2009 годы бутылок указано значение на начало периода (2005-й год) и на конец (2009-й), а также динамика изменений, скажем, по месяцам или даже по дням. Цвет цифры указывает на то, выросла ли цифра по сравнению с предыдущим отчетным периодом (начало 2005-го года). Для удобства чтения начало и конец графиков отмечены красными точками, а также добавлен легкий градиент, улучшающий их прочтение. Сравните с графиком в первом примере, где градиент был невозможен из-за указания диапазона комфортных температур.</p>
<h2>***</h2>
<p>Кроме украшения и превращения таблиц из тюрем в информационные курорты спарклайны помогают во многих случаях заменить различные детальные графические визуализации данных или даже представить информацию более полно и интересно, чем какая-то ничтожная круговая диаграмма (гори в аду!!!). Например, Google Analytics и <a href="http://www.flickr.com/photos/genn-org">Flickr</a> активно используют спарклайны для более наглядного представления статистики посещений в сжатом виде или даже обозначения ссылки на статистику, как в случае с фликром.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/05/google-flickr.png" alt="google-flickr" width="502" height="228" /></p>
<p class="imgdesc">Пример использования спарклайнов на фликре (вверху) и в Google Analytics</p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2010/sparklines/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Adobe-kadabra Creative Suite 5</title>
		<link>http://mega.genn.org/2010/adobe-kadabra-creative-suite-5/</link>
		<comments>http://mega.genn.org/2010/adobe-kadabra-creative-suite-5/#comments</comments>
		<pubDate>Wed, 28 Apr 2010 06:50:24 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[conference]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[emo]]></category>
		<category><![CDATA[fan]]></category>
		<category><![CDATA[friends]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[gui]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2239</guid>
		<description><![CDATA[Adobe устроила в Киеве презентацию своего Creative Suite 5. Я, зная как интересно слушать об их продукции еще с презентации мощи InDesign&#8217;a, с удовольствием приехал почти вовремя, забыл дома фотоаппарат, достал блокнот, ручку и приготовился записывать все-все-все о технологиях XXI века. — В Украине 87% людей очень довольны своей жизнью, — начал рассказ о Фотошопе [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2010/04/adobe-5.jpg" alt="adobe cs5" width="636" height="444"  /></p>
<p>Adobe устроила в Киеве презентацию своего <a href="http://adobe.com/go/creativesuite">Creative Suite 5</a>. Я, зная как интересно слушать об их продукции еще с <a href="http://mega.genn.org/ru/2008/quark-vs-adobe/">презентации мощи InDesign&#8217;a</a>, с удовольствием приехал почти вовремя, забыл дома фотоаппарат, достал блокнот, ручку и приготовился записывать все-все-все о технологиях XXI века. </p>
<p>— В Украине 87% людей очень довольны своей жизнью, — начал рассказ о Фотошопе Рассел Виерс (Russell Viers). — Нет, правда, я читал в журнале! Остальные 13% людей в Украине работают в аэропорту и я их всех встретил когда прилетел! </p>
<p>Не желая останавливаться на этом, он продолжил знакомиться с аудиторией:<br />
— Сегодня я представляю CS5, завтра — CS6, в следующий вторник — CS7… <span id="more-2239"></span></p>
<h2>Photoshop</h2>
<p>Дальнейшие прогнозы презентаций утонули в хохоте зала, а Рассел открыл Фотошоп и стал рассказывать о самых впечатляющих новшествах. К сожалению, все демонстранты пользовались стандартными примерами, так что Рассел больше не показывал свои замечательные фотографиии со всего мира с заваленными горизонтами и неправильными первыми планами. К счастью, все эти примеры есть на сайте Adobe, так что я смогу щедро проиллюстрировать свой рассказ.</p>
<p>Самым первым и удивительным, конечно же, стал Content Aware Fill — достаточно выделить какой-то объект или часть изображения, а потом сказать Фотошопу, что удалять надо аккуратно. Тот, в свою очередь, посмотрит на все изображение и постарается сделать то, что мы делали вручную при помощи выделений, feather, штампа и длительных (или не очень) промежутков времени. Результат поражает и потрясает. Этой функцией можно пользоваться не только для того, чтобы убрать нежелательный объект, но и для того, чтобы дополнить недостающие части изображения. Например, края при сборе панорамной съемке или стороны при выравнивании горизонта. Никаких больше crop, теперь только fill! </p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/PTvxlfBW96k&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/PTvxlfBW96k&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>Это действительно работает! Причем работает как просто с выделением, так и с healing brush — просто берешь и закрашиваешь то, что тебе не нравится.</p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/oRlnjAC_wXY&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/oRlnjAC_wXY&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>Улучшение распознавания изображения отразилось и на выделении объектов на фотографиях. Благодаря новым инструментам, Фотошоп сам выделяет, например, людей — достаточно приблизительно обозначить контуры и даже сам выделяет волосы, учитывая их прозрачность и растрепанность. Пока не попробую сам — не поверю, но на экране выглядело удивительно и волшебно. </p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/MkUizO67dJs&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/MkUizO67dJs&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>Следом за Content Aware Fill и новыми способами выделения, Рассел показал как работает фильтр Lens Correction — он теперь по искажениям даже узнает какой камерой был снят кадр, после чего выравнивает его. Теперь можно фотографировать нос любимой собаки вплотную, а потом выравнивать в Фотошопе одним кликом ;) Если фильтр не узнал фотоаппарат, то одним кликом можно поискать его профайл в интернете и скачать прямо в Фотошоп. </p>
<p>Также появились замечательные инструменты для работы с фотографиями — HDR Toning, позволяющий делать настоящий HDR из нескольких фотографий, убирая следы (ghosts) от двигающихся объектов, или ненастоящий HDR из обычных фотографий. </p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/Nd-0IHJLJ-E&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Nd-0IHJLJ-E&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>В Camera Raw появилось больше настроек и эффектов. Особенно потряс всех пример с уменьшением шума — его почти не осталось.</p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/TkScqJND1y8&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/TkScqJND1y8&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>То, чего не было в Фотошопе на протяжении всех версий, наконец-то в нем — Warp для пиксельных объектов. Программа сама проанализирует изображение и наложит на него сетку, а нам останется лишь гнуть их туда-сюда.</p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/jozjqrRTAyg&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/jozjqrRTAyg&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>Напоследок я приберег наиболее понравившийся мне инструмент — выравниватель горизонта! Достаточно провести линию параллельную заваленному горизонту и Фотошоп все сам повернет сам! Все, отныне если на фотографии якобы завален горизонт, значит, это специально, хватит уже об этом. </p>
<p>Резюмировать нововведения в Фотошопе можно фразой Рассела Виерса: You can be a really bad photographer and get perfect photographs! </p>
<h2>Illustrator</h2>
<p>Нововведений в Иллюстраторе вроде бы не много, но они очень приятные. Первое — Perspective Grid Tool. Работает примерно как Vanishing Point в Фотошопе, но немного иначе ;) Сначала следует нарисовать то, что хочется расположить в перспективе, потом построить сетку перспективы (выбрав количество точек, по которым строить), а затем перетащить на нее объекты. Иллюстратор сам их искривит так, как надо, учитывая пропорции и перспективу. Таким образом, нарисовать квартал небоскребов в перспективе проще простого — достаточно нарисовать один и размножить, расположив по сетке. </p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/9JhgTBt_u3I&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/9JhgTBt_u3I&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>Второе нововведение — возможность рисовать за объектом и в объекте. Если с первым все понятно, то второе выглядит фантастикой как для иллюстратора. Выбрав объект, можно рисовать в его границах все, что угодно. Эффект будет таким же, как и от clipping mask, но намного быстрее и удобнее.</p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/UJF3M5aXXWg&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/UJF3M5aXXWg&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>Следующее нововведение еще более фантастично — для того, чтобы «слепить» разные фигуры в одну или «вычесть» одну из другой, уже можно не прибегать к услугам Pathfinder, ведь появился новый инструмент, один взмах которым объединяет и разделяет все именно так, как надо. </p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/FW3J8yFttO4&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/FW3J8yFttO4&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>И наконец, самое невероятное нововведение! Можно менять ширину контуров (stroke) в рамках одной кривой! Для них существует несколько стилей, а ширина меняется пропорционально в зависимости от толщины линии. Таким образом можно сильнее варьировать оформление и легко создавать эффект рукописности у текста. Жду не дождусь, когда смогу растаговаться в Иллюстраторе и подтянуть ширину линий, чтобы было похоже на работу маркером по стене ;) Более того, для пунктирных контуров создана функция, которой непонятно почему не было с самого начала: разместить полосочки, а не пропуски на углах фигуры.</p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/VqbmKPVdoyY&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/VqbmKPVdoyY&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<h2>InDesign</h2>
<p>В этой программе для верстки, столь любимой Расселом Виерсом и заслуженно, добавили столько всего, что я просто быстро перечислю, а то спать хочется, но пока все не выдам, от распирающего восторга спать не смогу. </p>
<p>Отныне, если собрать InDesign Package, а потом открыть на другом компьютере, не обязательно устанавливать шрифты из package, чтобы Индизайн их увидел. Он просто будет использовать те, что шли в папке Document Fonts в package. Ниже длинный рассказ об этом.</p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/O20Gu14x54s&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/O20Gu14x54s&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>Появился новый инструмент Page Tool, который позволяет менять размеры страниц на лету и вообще творить с ними нечто невообразимое. Например, иметь страницы разного размера в пределах одного документа. </p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/XUgQuTPI3TM&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XUgQuTPI3TM&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>Очень много новшеств касаются ввода текста. Теперь можно в пределах одного текстового фрейма использовать и многоколоночную и одноколоночную верстку. Таким образом, заголовок статьи и несколько колонок текста теперь можно разместить в одном фрейме или длинный, но узкий список в многоколоночном текстке сделать в две колонки в пределах той, в которой написан текст. Все это есть в презентации Adobe. Все данные об объединении колонок можно указать в Paragraph Styles, что делает верстку еще удобнее и быстрее. </p>
<p>Квадратным фреймам теперь можно закруглять углы одним движением мышки и не только все, но и каждый в отдельности. Изменения можно сохранить в Object Style и применять для других фреймов. Что же касается размещения (place) внешних файлов, Индизайн стал размещать их более интеллектуально, регулируя расстояния между фреймами с изображениями и даже автоматически изменяя размер содержимого фрейма в зависимости от его размера. Для этого появилась функция Auto Fit. </p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/_Ez0xR1OwUQ&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/_Ez0xR1OwUQ&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>Для подписи изображений и более удобной верстки имеет смысл пользоваться функцией Generate Live Caption. Она берет информацию из мета-данных изображения и использует как подпись изображения. Можно выбрать даже поля, которые следует выводить и добавить до и после подписи нужный текст, примернить к ней стили и даже автоматически сгруппировать с картинкой. Если текстовое поле с Live Caption скопировать и перетащить так, чтобы оно соприкасалось с другой картинкой, то оно автоматически «подтянет» информацию из мета-данных этого изображения! </p>
<h2>Программы для post production</h2>
<p>В этой сфере я далеко не профессионал, но благодаря ораторскому и развлекательному таланту Маркуса Бледовски (Markus Bledowski), я с восторгом узнал много нового. Расскажу о том, что меня поразило. Надеюсь, что это не что-то обыденное и ежедневное для тех, кто занимается постом ;) </p>
<p>Для начала нам продемонстрировали фильм о том, как Аватар делали с использованием продукции Adobe. Как я и подзревал, создание фильмов и мультфильмов в современном мире очень тесно связанно если не с программированием, то с написанием скриптов. </p>
<p>Далее Маркус с воодушевлением начал рассказывать нам о том, чем живет — пост продакшене. </p>
<p>В Adobe Premier Pro меня поразило то, что программа распознает речь в видео и ассоциирует со строками сценария, подсвечивая то, что говорит герой. Можно просто щелкнуть мышкой по какому-то слову и перейти на нужный кадр фильма, или даже искать по фильму таким образом! Это единственное обоснованное и очень крутое применение технологии распознавания речи, которое я встречал. </p>
<p>Adobe Encore, в свою очередь, может экспортировать это все как в DVD, так и во Flash, причем со всеми субтитрами и возможностью поиска по ним. </p>
<p>Adobe After Effects радует распознаванием силуетов, выделением объектов и motion tracking. Функция трехмерного сдвига относительно камеры позволяет создавать интересные эффекты. Например, при помощи этой функции была создана нашумевшая недавно реклама телевизоров Samsung. Маркус при нас, вживую, показал как это делать. Все оказалось гораздо проще, чем я ожидал, но гораздо труднее, чем просто нажать кнопку «Сделать красиво!»</p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/H6mVWNLqtoA&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/H6mVWNLqtoA&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p class="imgdesc">Маркус при нас довольно быстро создал с имеющимся материалом что-то подобное, но, разумеется, требующее тщательной доводки</p>
<p>Все программы для поста пользуются одним кэшем на диске, таким образом, если открыть один и тот же файл, то его даже не надо будет сохранять после изменения в одной из программ, чтобы он обновился в остальных. Все изменения наступают мгновенно, потому что фактически программы обращаются к одному и тому же набору нулей и единичек. </p>
<h2>Интерактивность</h2>
<p>Adobe решили и дальше разносить флекс/флеш-программистов и дизайнеров. Для последних создали Flash Catalyst. Что-то вроде Flash для людей с ограниченными возможностями. Он позволяет анимировать, передвигаться между кадрами и объектами, задавать разные эффекты и создавать разные элементы управления, связывая их с действиями и объектами. В качестве примера была создана прокрутки для текстового поля за каких-то пять-десять минут девушкой из аудитории, которая флеша раньше в глаза не видела. Качество сгенерированного кода оценить не удалось. </p>
<p>В самом полноценном Flash появились улучшенные функции редактирования текста, почти такие же мощные как в Индизайне. Даже панели выглядят похоже!</p>
<p>Кстати, об Индизайне. В него добавили много функций для создания интерактивного контента. Эта часть интерфейса Индизайна стала похожа на пародию Power Point&#8217;а или Keynote ;) Например, благодаря нововведениями, имея на руках сверстанный в Индизайне журнал, можно за час сделать его флеш-версию. В нее даже можно вставить видео, анимации, слайд-шоу и прочие интерактивные элементы.</p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/y2013Cd4gZI&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/y2013Cd4gZI&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>Теперь понятно, почему Adobe так возмущался, что нельзя генерировать содержимое для айпада на флеше, ведь тогда они стали бы первой и единственной системой для создания интерактивных медиа. Кстати, флеш-версия журнала будет достаточно элегантной: все «прилинкованные» файлы будут сложены в отдельную папку, а не встроены прямо во флеш. Можно создать не только swf, но и файл исходника, который потом можно будет редактировать непосредственно в Flash. </p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/T0D4avXwMmM&#038;hl=en_US&#038;fs=1&#038;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/T0D4avXwMmM&#038;hl=en_US&#038;fs=1&#038;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p class="imgdesc"><a href="http://www.wired.com/">Wired</a> активно пользуется Adobe Creative Suite&#8217;ом для создания наиболее полноценного и разностороннего средства массовой информации. Жаль только, что на айпад не перебросят с той же легкостью</p>
<p>Dreamweaver не удивил ничем, кроме парочки платных функций. WYISWYG html-редактор as is. </p>
<h2>Интересные факты</h2>
<p>Если импортировать в Фотошоп какой-нибудь трехмерный файл и сохранить в PSD, то он все равно будет трехмерным для других программ. Например, для Adobe After Effects. Это называется Live Photoshop 3D, если я не ошибаюсь. </p>
<p>Во всех программах CS5 появился улучшенный Mini Bridge, который функционирует как очень навороченная и удобная замена диалога Open. Думаю, что буду им пользоваться. </p>
<p>Adobe все больше и больше концентрируется на интернет-сервисах, некоторые из них он уже предлагает за деньги, а некоторые только планирует. Думаю, что больше информации у них на сайте ;) Например, в Индизайне можно поделиться файлом, разослав ссылку на его preview сгенерированный на acrobat.com, а не рассылая PDF. Там же можно комментировать файл, а комментарии будут появляться в специальном окошке прямо в индизайне, откуда на них можно отвечать. Думаю, что это удобно, только жаль, что не настраивается на локальном сервере. </p>
<p>В Иллюстраторе можно менять размещение art boards, а также задавать им имена. Кстати, в Индизайн можно импортировать отдельные art boards, а не весь документ.</p>
<p>Интерфейс приложений Creative Suite стал более однородным, но в частях касающихся интернета и интерактива, да и просто тут и там прослеживаются слишком уж flex-подобные элементы интерфейса. Написать Фотошоп на флеше, кто только не пробовал, верно? ;)</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/04/adobe-splashes.jpg" alt="adobe splashes" width="636" height="319"" /></p>
<p>Иконки и splash screens приложений тоже изменились и стали более безудержными (не сложно быть более безудержным, чем прямоугольник с градиентом, правда?). Дизайнер Шоун Черис (Shawn Cheris) поведал об этих изменениях в <a href="https://xd.adobe.com/#/featured/article/536/">двух</a> <a href="https://xd.adobe.com/#/featured/article/543">частях</a>.</p>
<h2>Шутки и цитаты</h2>
<h3>Рассел Виерс</h3>
<p>— What’s your name?<br />
— Volodymyr.<br />
— Wha… Lah… Can I call you Bill? </p>
<p>Я давно предлагаю Adobe размещать рекламу в диалоговых окнах с прогресс-барами. Кучу денег бы заработали и благодаря этому сделали программы бесплатными. </p>
<p>Рассел выбирал в зале кого-то, кто не знал бы Флеша, знал Иллюстратор и помог бы ему продемонстрировать простоту Flash Catalyst. В итоге выбор пал на одну девушку. Единственным вопросом Рассела был: — Is your name hard to spell? (Твое имя сложно произносить?) </p>
<h3>Маркус Бледовски</h3>
<p>We don’t have problems — we have challenges! (У нас нет проблем — у нас есть вызовы!) </p>
<p>Don’t ask if it’s possible. Ask how it’s possible. (Не спрашивайте, можно ли это сделать. Спрашивайте как это сделать.) </p>
<p>Приходит клиент и говорит, что ему нужно перекрасить машину в видео в другой цвет. Какой? Он не знает. Удиви меня! Значит, розовый. Потом он просит тот же цвет (розовый), но другой оттенок. Значит, зеленый. </p>
<h3>Роман Менякин</h3>
<p>Роман демонстрировал в Фотошопе Content Aware Fill. Для этого он открыл файл с написанной задачей по высшей матеаматике. Выделив пустое место, Роман выбрал Content Aware Fill, Фотошоп подумал и решил задачу, даже начертил график. На второй фотографии, на которой Роман запечатлел игрушки сваленные в кучу его сыном, Фотошоп смог расставить их по местам ;) Роман предупредил, что это все пока что бета, так что не у всех может работать. </p>
<p>Во время ожидания выполнения какой-то задачи.<br />
Роман: Эдоби-кадабра!<br />
Рассел: Пау!</p>
<h2>***</h2>
<p>Я уверен, что запомнил и записал не все, но Adobe по непонятным мне причинам не устраивает ни съемку, ни раздачу материалов о программах, которые презентует. Только программку и листик с составом различных collection&#8217;s. Кроме того, не было вай-фая, так что я не смог осуществить свою давнюю мстительную мечту — заспамить <a href="http://twitter.com/genn_org/">по твиттеру</a> всех посетителей всяких баркемпов, которые засоряют твит-ленту своими сиюминутными впечатлениями от кофе с булочками на перерывах. Тем не менее, было очень интересно, блокнот с логотипом Adobe и ручка уже нашли свое место в моей душе и сумке, а магнитик «Я ♥ Adobe» грустит — я не люблю магниты на холодильники. Если кто-то хочет, я могу подарить.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/04/adobe-magnett.jpg" alt="i &lt;3 adobe" width="636" height="395"/></p>
<p class="imgdesc">Я опять поссорился с фотоаппаратом, поэтому резкой фотографии не получилось. Вот так выглядит магнитик ;)</p>
<p>В последних строках поста и совсем не относящимся к нему образом, я хочу поздравить с днем рождения моего друга Юру (<a href="http://cssing.org.ua/">akella</a>). Ему исполнилось 14 или 35, я не вдавался в детали. Юра, если тебе больше нечего в день рождения делать, кроме чтения этого поста — желаю тебе счастья и самоорганизованности!</p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2010/adobe-kadabra-creative-suite-5/feed/</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>Факт о Чаке Норрисе №∞: Он может испортить App Store террором</title>
		<link>http://mega.genn.org/2009/chuck-brought-pain-to-appstore/</link>
		<comments>http://mega.genn.org/2009/chuck-brought-pain-to-appstore/#comments</comments>
		<pubDate>Wed, 16 Dec 2009 09:50:31 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[baka-baka]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[emo]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[information]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[sux]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2055</guid>
		<description><![CDATA[Самый свежий факт о Чаке Норрисе: это он откусил кусок от логотипа Apple. Нет, это не шутка, он действительно это сделал. Если вкратце, то Чак обиделся, что его стрелялка в App Store плохо продается и обвинил в этом, кого бы вы думали, юзабилити магазина приложений. Чак терроризировал Apple тем, что уйдет со своей программой на [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/chuck-approved.png" alt="chuck-approved" title="chuck-approved" width="632" height="462" /></p>
<p>Самый свежий факт о Чаке Норрисе: это он откусил кусок от логотипа Apple. Нет, это не шутка, он действительно это сделал. Если вкратце, то Чак  <a href="http://osxreality.com/2009/12/12/chuck-norris-approves-of-new-app-store-layout/">обиделся</a>, что его стрелялка в App Store плохо продается и обвинил в этом, кого бы вы думали, юзабилити магазина приложений. Чак терроризировал Apple тем, что уйдет со своей программой на платформу Андроид (почему-то для кого-то это имеет значение) и отвергал предлагаемые Apple варианты дизайна. Как обычно, пришлось браться за дело самому. В результате оказалась, что Чак Норрис куда круче справляется со счетом до бесконечности и путешествиями на Марс, чем с UX консультациями.<span id="more-2055"></span></p>
<h2>Что не так</h2>
<p>Самое безобидное и некритическое изменение заключалось в создании другой сетки и перемене мест элементов. Теперь на странице приложений все блоки выглядят так, будто их старательно впихивали в окошко, не особо заботясь о том, чтобы сгруппировать их по смыслу. То, чем мог гордиться App Store раньше — считываемость информации с первого же взгляда без необходимости разбираться в том, что же эта информация значит, поскольку это было очевидно — сейчас утеряно. Для того, чтобы найти необходимую информацию ее приходится действительно искать и (в это сложно поверить) кликать и кликать для того, чтобы узнать то, что раньше было на виду.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/old.jpg" alt="old app store application page" title="old app store application page" width="636" height="502" /></p>
<p class="imgdesc">Так выглядела страница приложения в App Store до вмешательства Чака (изображение я нашел в Google Images)</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/new.jpg" alt="new" title="new" width="636" height="564"  /></p>
<p class="imgdesc">Так выглядит страница приложения сейчас, после того, как Чак применил болевые приемы к юзабилити</p>
<p>Эти изменения меркнут по сравнению с главной проблемой нынешнего дизайна магазина приложений — элементы перестали быть состоятельными. Я писал <a href="http://mega.genn.org/2008/gui-elements-affordance/">пост о состоятельности элементов интерфейса</a> и о том, почему это важно, сейчас же напомню его главную мысль. Все элементы интерфейса должны выглядеть так, чтобы было понятно что они делают. Например, кнопка выглядит как кнопка, а <a href="http://mega.genn.org/2007/visible-links/">ссылки синие и/или подчеркнутые</a>. И не надо в рамках одного интерфейса создавать сотни стилей для кнопок. Это приведет пользователей в замешательство. Также нельзя оформлять другие элементы так же, как и кнопки — это приведет в еще большее замешательство.</p>
<p>В App Store это не учли. Вот несколько примеров:</p>
<h2 style="color: #f53b12;">—</h2>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/progress-scroll.png" alt="progress-scroll" title="progress-scroll" width="300" height="24"  />
</p>
<p class="imgdesc">Кто-то может определить какая из этих полосок показывается состояние загрузки, а какая — полоса прокрутки? Они выглядят одинаково! При этом обе похожи на индикатор состояния</p>
<p>Ок, вот подсказка:</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/progress-scroll-hint.jpg" alt="progress-scroll-hint" title="progress-scroll-hint" width="556" height="398" /></p>
<p class="imgdesc">И все равно не очевидно</p>
<p>Я сначала подумал, что блок с приложениями загружается, пока случайно не кликнул туда и не увидел, что это, оказывается, полоса прокрутки. Даже у Гугла получилось не так плохо с их <a href="http://mega.genn.org/2009/gui-fails-of-google-waves/">ужасными полосами прокрутки в Google Wave</a>.</p>
<h2 style="color: #f53b12;">—</h2>
<p>Вот задача посложнее: укажите все ссылки в текстовом блоке ниже.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/which-is-the-link.png" alt="which-is-the-link" title="which-is-the-link" width="636" height="136" style="border: 10px solid #fff; -webkit-box-shadow: 2px 2px 5px rgba(135, 139, 144, 0.4); -webkit-border-radius: 5px;-mozilla-border-radius: 5px;" /></p>
<p class="imgdesc">Кроме синего текста (это очевидно) ссылками также являются «Report a Concern ›» и «Yes | No». Остальной черный текст, оформленный так же, не ссылка. Не спрашивайте почему</p>
<p>Кстати, синим цветом также отмечены заголовки, которые не являются ссылками.</p>
<h2 style="color: #f53b12;">—</h2>
<p>«Хлебные крошки» тоже подверглись изменениям.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/crumbs.png" alt="crumbs" title="crumbs" width="699" height="216" style="border: 10px solid #fff; -webkit-box-shadow: 2px 2px 5px rgba(135, 139, 144, 0.4); -webkit-border-radius: 5px;-mozilla-border-radius: 5px;"/></p>
<p class="imgdesc">Вверху страницы они больше похожи на ссылки на сайты (подсвечены после краткого описания приложения), а не на «хлебные крошки», которые использует Apple по всему сайту и раньше использовала в App Store</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/crumbs-real.png" alt="crumbs-real" title="crumbs-real" width="636" height="33" /></p>
<p class="imgdesc">В то же время «хлебные крошки» внизу страницы не изменились</p>
<h2 style="color: #f53b12;">—</h2>
<p>Кнопка, отвечающая за покупку приложения, больше похожа на плод порочной любви выпадающего списка и закладки, чем на кнопку. На кнопку она не похожа вообще.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/dropdowns.png" alt="dropdowns" title="dropdowns" width="581" height="65" /></p>
<p class="imgdesc">Если приложение бесплатно, то нет ни слова «Buy», ни слова «Download», на кнопке просто констатация факта</p>
<h2 style="color: #f53b12;">—</h2>
<p>Для того чтобы наверняка призвать демона неудобных интерфейсов, разработчики добавили эффект мокрого пола к звездочкам в оценке приложения. Это сделало их больше похожим на что-то непонятное в рюшиках, чем на индикатор рейтинга — половину звезды с трудом различишь.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/wet-floor.png" alt="wet-floor" title="wet-floor" width="356" height="64" /></p>
<p class="imgdesc">Эффект мокрого пола менее агрессивный и затрудняющий чтение при оценке приложения</p>
<h2>Неужели все плохо?</h2>
<p>Нет. Общая гамма стала светлее, что, наверняка, облегчит кому-то чтение (если были трудности с этим ;). Тем не менее, это изменение сделало iTunes Store скорее похожим на сайт, открытый внутри iTunes, чем на его часть, которым он выглядел раньше.</p>
<h2>Факт</h2>
<p>Чак Норрис очень плох в роли UX эксперта, а Apple испортила интерфейс по непонятным причинам.</p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2009/chuck-brought-pain-to-appstore/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Sorry, Mario, the Princess is right after the crossroads</title>
		<link>http://mega.genn.org/2009/sorry-mario-the-princess-is-right-after-the-crossroads/</link>
		<comments>http://mega.genn.org/2009/sorry-mario-the-princess-is-right-after-the-crossroads/#comments</comments>
		<pubDate>Tue, 01 Dec 2009 10:56:39 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[baka-baka]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[hightech]]></category>
		<category><![CDATA[information]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2028</guid>
		<description><![CDATA[На dirty.ru запостили ссылку на концепт светофора Дамьяна Станковича (Damjan Stanković). Он предлагает расположить вокруг красного сигнала светофора сегменты, которые будут исчезать в зависимости от того, как скоро будет разрешен проезд. Это призвано помочь водителям экономить бензин и беречь окружающую среду — зная, когда сменится сигнал, водитель может заблаговременно заглушить двигатель, а потом завестись прямо [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/traffic-mario.png" alt="traffic-mario" title="traffic-mario" width="636" height="215" /></p>
<p>На dirty.ru <a href="http://dirty.ru/comments/263293">запостили</a> ссылку на <a href="http://www.yankodesign.com/2009/11/30/a-better-understanding-of-stoplights/">концепт светофора</a> Дамьяна Станковича (Damjan Stanković). Он предлагает расположить вокруг красного сигнала светофора сегменты, которые будут исчезать в зависимости от того, как скоро будет разрешен проезд. Это призвано помочь водителям экономить бензин и беречь окружающую среду — зная, когда сменится сигнал, водитель может заблаговременно заглушить двигатель, а потом завестись прямо перед сменой цветов на светофоре.<span id="more-2028"></span></p>
<p><img src="http://www.yankodesign.com/images/design_news/2009/11/29/eko04.jpg" width="468" height="331"/></p>
<p class="imgdesc">Концепт эко-светофора Дамьяна Станковича</p>
<p>Идея и цели хорошие, но в предложенном концепте есть несколько существенных недостатков:</p>
<ul>
<li>красный сигнал уменьшается — чем меньше времени осталось до смены цветов, тем меньше красный сигнал светофора, тем менее он заметен;</li>
<li>неопределенность окончания процесса — последний сегмент расположен там, где цифра 12 на циферблате, это интуитивно, но не очень хорошо читается — светофоры висят высоко вверху, а это самая верхняя точка светофора;</li>
<li>у светофоров разные интервалы, так что придется варьировать скорость исчезновения сегментов, что приведет к путанице — никто не хочет ни в чем разбираться и отслеживать закономерности, так что это нововведение усложняет объект, который должен быть предельно простым</li>
<li>устаревшая технология — сейчас для изготовления светофоров используются светодиоды, а не лампы за цветным стеклом. Такие светофоры видны в солнечную погоду. Если это делать как нарисовал автор концепта, а не на светодиодах, стоимость изделия получится намного выше.</li>
</ul>
<h2>Удобный светофор</h2>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/convenient-traffic-light-381x1024.png" alt="convenient-traffic-light" title="convenient-traffic-light" width="381" height="1024" /></p>
<p class="imgdesc"><a href="http://mega.genn.org/=^_^=/uploads/2009/12/convenient-traffic-light.png">Посмотреть крупнее</a></p>
<p>Для начала стоит создать светофор с увеличенным красным сигналом. Это полезно и удобно, все-таки красный — единственный сигнал, который нам строго настрого запрещает что-то делать, остальные сигналы светофора подобрее. Использовать светодиоды, а также полностью площадь светофора — уйти от круглой формы сигналов. Светодиоды позволяют это сделать, в отличие от устаревшей технологии с лампами и стеклами, ведь там углы все равно были бы темными. Если я не ошибаюсь, в Минске светофоры квадратные — очень удобно. Но даже если я ошибаюсь и в Минске светофоры на светодиодах круглые как в Киеве, то вряд ли я первый, кто это придумал ;) Время, оставшееся до конца сигнала, можно выводить прямо на табло с сигналом. Это не украдет полезную площадь, не рассеет внимание, но проинформирует об окончании запрета на движение тех, кто жаждет с визгом улететь с перекрестка.</p>
<h2>Шрифт удобного светофора</h2>
<p>Я набросал пиксельный шрифт, который может хорошо смотреться издалека и занимать как можно меньше места (украл по «пикселю» у некоторых цифр).</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/12/traffic-light-font.png" alt="traffic-light-font" title="traffic-light-font" width="848" height="134" /></p>
<p>В этом шрифте не путаются 1 с 7, а также заложена возможность отображения интервалов больше полутора минут и 9 секунд (:99 на табло светофора). Если интервал длиннее, то имеет смысл выводить количество минут, пока не дойдем до того, что до смены сигналов останется 59 секунд. Для перекрытых дорог, когда какой-то слуга народа несется в Кремль или на Банковую,  улучшать нашу жизнь, предусмотрен знак бесконечности.</p>
<h2>Дополнительные возможности</h2>
<p>Использование светодиодов открывает дополнительные возможности для более точного контроля дорожного движения и информирования водителей. Ниже несколько примеров, включая локализацию для стран с кириллицей ;)</p>
<div style="width: 838px;"><img src="http://mega.genn.org/=^_^=/uploads/2009/12/go-right.gif" alt="go-right" title="go-right" width="209" height="209" /><img src="http://mega.genn.org/=^_^=/uploads/2009/12/convenient-signs.png" alt="convenient-signs" title="convenient-signs" width="627" height="209" /></div>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2009/sorry-mario-the-princess-is-right-after-the-crossroads/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>Вниз по Google Wave</title>
		<link>http://mega.genn.org/2009/gui-fails-of-google-waves/</link>
		<comments>http://mega.genn.org/2009/gui-fails-of-google-waves/#comments</comments>
		<pubDate>Thu, 08 Oct 2009 05:02:27 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[baka-baka]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[sux]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=1784</guid>
		<description><![CDATA[Отлично сказано: больше разговоров об инвайтах, чем о самой Google Wave. Я помогу Гуглу и поговорю о Google Wave. Сразу хочу выразить грусть по поводу того, что инвайтов у меня нет и, скорее всего, не было — узнать это каким-либо законным путем вряд ли возможно, потому что об инвайтах даже в разделе «Помощь» ничего не [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2009/10/googlewave-ru.png" alt="googlewave-ru" title="googlewave-ru" width="635" height="449" /></p>
<p>Отлично сказано: больше разговоров об инвайтах, чем о самой <a href="http://wave.google.com/">Google Wave</a>. Я помогу Гуглу и поговорю о Google Wave. Сразу хочу выразить грусть по поводу того, что инвайтов у меня нет и, скорее всего, не было — узнать это каким-либо законным путем вряд ли возможно, потому что об инвайтах даже в разделе «Помощь» ничего не найти. О, Гугл, ты такой… такой… ррррр! Лишь потому, что пока действует система приглашений, не каждый может насладиться общением с этим, будем откровенными, гипотетически клевым, но практически бесполезным сервисом. Я опишу, как Гугл приложил все усилия, чтобы воплотить свою уникальную философию ужасного UX в еще одном интерфейсе. Не бойтесь, я кратко — расскажу лишь о трех самых вопиющих <s>неудачах</s> новинках в интерфейсе ;)<span id="more-1784"></span><br />
<img src="http://mega.genn.org/=^_^=/uploads/2009/10/waveee.png" alt="waveee" title="waveee" width="636" height="761"  /></p>
<p class="imgdesc">Google Wave собственной персоной</p>
<h2>Полосы прокрутки</h2>
<p>Эти мне не понравились больше всего. Такие блестящие штуковины, которые иногда позволяют прокручивать по всей высоте блока, а иногда лишь в его части. Поначалу я решил, что Гугл решил реализовать полосы прокрутки как на <a href="http://designcharts.com/">DesignCharts</a>, но быстро понял, что ошибался. Полосы прокрутки на DesignCharts куда удобнее, чем разработанные для GoogleWave. Вообще-то, самой полосы нет, есть лишь бегунок. Нельзя кликнуть на фон и прокрутить на страницу вверх или вниз. Можно либо тягать сам бегунок, либо нажимать на нем стрелочки — в этих случаях какая-то темная штуковина на фоне будет двигаться в указанном направлении. Содержимое блока тоже прокручивается, но это не выглядит чем-то похожим на причину и следствие во время работы с полосой прокрутки. Конечно, мы привыкнем и к этому, <a href="http://mega.genn.org/ru/2009/ppt-made-pretty/">пользуемся же мы Паверпоинтом</a>, но почему бы не сделать удобно сразу, а не переучивать нас? UX! UX!</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/10/scrollbars1.png" alt="scrollbars" title="scrollbars" width="636" height="493"  /></p>
<p>Если у вашей мышки есть колесо прокрутки, то вы сможете пользоваться им, что сделает работу намного удобнее. У меня Ваком и <a href="http://www.apple.com/mightymouse/">Mighty Mouse</a>, так что мне <a href="http://www.google.com.ua/search?hl=uk&#038;q=mighty+mouse+scrolling+problem&#038;btnG=Пошук&#038;meta=">пришлось</a> смириться с работой с полосами прокрутки.</p>
<p><span style="font-size: 24px; color: #005bcd;padding-right: 10px;">Итог:</span> это скорее похоже на прокрутку на каком-то необычном плешивом сайте, чем в приложении. Если вам пришлось сделать раздел в помощи касающийся полос прокрутки (а Гуглу пришлось), значит они совсем не интуитивные и не дружелюбные.</p>
<h2>Работа с панелями</h2>
<p>В то время как все <a href="http://mega.genn.org/ru/2008/zoomaximize/">двигаются вперед</a> и знают, что модальные интерфейсы отжили свое, Гугл прокладывает собственную дорожку в стремлении создании чего-то неудобного. Мне кажется, что кнопки в заголовках панелей — предвестники интерфейса Google OS. И образцом для подражания, похоже, выбрана Windows XP. Добро пожаловать в будущее интерфейсов.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/10/paneltop.png" alt="paneltop" title="paneltop" width="636" height="312" /></p>
<p>Итак, у нас есть три кнопки: свернуть вверх, развернуть и закрыть. Что они делают? Первая «сворачивает» окошко вверх к логотипу Google Wave — очень не очевидно (ожидаешь, что она просто свернет его в заголовок и оставит на том же месте) и, я уверен, большинство пользователей в первые разы ищут потерянные панели по всему экрану. Кнопка закрытия закрывает панель — ничего необычного. А вот кнопка развернуть устраивает ужасное «заполнить все 23&#8243; этим контентом». Мне повезло — окно броузера не распахнуто на всю возможную ширину и высоту, так что «разворачивание» удалось локализовать.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/10/close.png" alt="close" title="close" width="636" height="222" /></p>
<p>Механизм закрытия окон отличается от случая к случаю — либо есть возможность нажать на × или кликнуть за пределами окна, либо × нет и остается только клик.</p>
<p><span style="font-size: 24px; color: #005bcd;padding-right: 10px;">Итог:</span> если это прототип интерфейса Google OS, то создателям не помешало бы поискать ролевую модель лучше, чем копирование недочетов Windows XP.</p>
<h2>Семантика</h2>
<p>Не смотря на немаленькое количество недоразумений в интерфейсе, я остановлюсь на еще одном, показывающем, что Гугл действительно не очень переживал насчет того, как пользователям придется работать с его волнами. Речь о панели кнопок для редактирования вводимого текста. Во-первых, она находится где-то вверху, заменяя собой панель инструментов окна, а не рядом с вводимым текстом. Во-вторых, по виду кнопок нельзя понять, что они <a href="http://mega.genn.org/2008/gui-elements-affordance/">призваны делать</a>.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/10/editbar.png" alt="editbar" title="editbar" width="545" height="603" /></p>
<p>Некоторые кнопки изменяют текст сразу, а некоторые показывают выпадающие списки, но не у всех кнопок с выпадающими списками есть стрелочки вниз, так что понять их назначение можно лишь после нажатия на саму кнопку.</p>
<p><span style="font-size: 24px; color: #005bcd;padding-right: 10px;">Итог:</span> достаточно сравнить две одинаковые панели с кнопками, чтобы увидеть, что кнопки на них выглядят по-разному. Не так уж и целостно, не правда ли? ;)</p>
<h2>Фанатам и фанаткам Гугла</h2>
<p>Привет! Спасибо за то, что прочли. Я знаю, что Google Wave еще в стадии предпросмотра (создание бет и никаких релизов в течении тысячелетий — их стиль жизни) и я знаю, что все будет намного лучше. Я не очень-то люблю Гугл, но обожаю Gmail (который, вообще-то, считает, что все мои письма — спам) и ожидал Волн не меньше вас. Этот пост написан для того, чтобы помочь Гуглу сделать интерфейс получше. С Оперой <a href="http://mega.genn.org/ru/2009/we-dont-go-to-opera-today/">почти получилось</a> ;)</p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2009/gui-fails-of-google-waves/feed/</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>Сфотографируй мои «контакты»</title>
		<link>http://mega.genn.org/2009/business-card-with-qr-code/</link>
		<comments>http://mega.genn.org/2009/business-card-with-qr-code/#comments</comments>
		<pubDate>Sun, 04 Oct 2009 21:26:48 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[friends]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[genn.org]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[numbers]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=1764</guid>
		<description><![CDATA[Я сделал очередную замечательную визитку для фотографа и разместил на одной из ее сторон QR-код. Мне кажется, что это забавно: сфотографировать визитную карту фотографа для того, чтобы записать его контактную информацию в телефон. Мне почему-то совсем не хочется ничего писать, поэтому я нарисовал схему, как все работает при условии, что у вас есть визитная карта [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2009/10/kovenkincard.png" alt="kovenkincard" title="kovenkincard" width="636" height="472" /></p>
<p>Я сделал очередную замечательную визитку для <a href="http://kovenkin.com/">фотографа</a> и разместил на одной из ее сторон <a href="http://ru.wikipedia.org/wiki/QR-код">QR-код</a>. Мне кажется, что это забавно: сфотографировать визитную карту фотографа для того, чтобы записать его контактную информацию в телефон. Мне почему-то совсем не хочется ничего писать, поэтому я нарисовал схему, как все работает при условии, что у вас есть визитная карта с QR-кодом, сотовый телефон и программа на этом телефоне, которая распознает QR-коды:<span id="more-1764"></span></p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/10/howitworks.png" alt="howitworks" title="howitworks" width="636" height="278" /></p>
<p class="imgdesc">На самом деле в коде на иллюстрации зашифрована не контактная информация, а известный всем мем</p>
<p>Я использую <a href="http://block5.com/iphone">QR app</a> для распознавания кодов при помощи айфона. Это немного помогло мне на Сигете ;) Попрактиковаться в работе с QR-кодами можно используя любой из представленных в этом посте, включая код содержащий мою контактную информацию:</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2009/10/gennorgqr.png" alt="gennorgqr" title="gennorgqr" width="515" height="515" /></p>
<h2>Другие необычные визитные карты</h2>
<ul>
<li><a href="http://mega.genn.org/ru/2009/bo-card/">Бо кард</a></li>
<li><a href="http://genn.org/#/works/samsonov/">Карточка настоящего управленца</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2009/business-card-with-qr-code/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>iTunes 9 мне нравится больше, чем 8</title>
		<link>http://mega.genn.org/2009/i-love-itunes-9-more-than-8/</link>
		<comments>http://mega.genn.org/2009/i-love-itunes-9-more-than-8/#comments</comments>
		<pubDate>Sat, 19 Sep 2009 20:19:55 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[emo]]></category>
		<category><![CDATA[gui]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=1753</guid>
		<description><![CDATA[iTunes 8 и правильный iTunes 9 справа Легкие изменения элементов интерфейса, которые опять дистанцируют Mac OS X от «вдохновляющихся» так или иначе конкурентов. Предвкушаю новый дизайн ОС и надеюсь, что это его предвестник. Кстати, вы знали, как включается самый крутой режим мини-плеера в iTunes? Комбинацией ⌘W. Минималистичнее плеер и не придумаешь!]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2009/09/itunes.png" alt="itunes 8 and 9" width="636" height="246" class="alignnone size-full wp-image-1752" /></p>
<p class="imgdesc">iTunes 8 и правильный iTunes 9 справа</p>
<p>Легкие изменения элементов интерфейса, которые опять дистанцируют Mac OS X от «вдохновляющихся» так или иначе конкурентов. Предвкушаю новый дизайн ОС и надеюсь, что это его предвестник.</p>
<p>Кстати, вы знали, как включается самый крутой режим мини-плеера в iTunes? Комбинацией ⌘W. Минималистичнее плеер и не придумаешь!</p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2009/i-love-itunes-9-more-than-8/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>

