<?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; friends</title>
	<atom:link href="http://mega.genn.org/blah/bros-n-sistaz/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>Bbubles — короче 1024 ббайтов</title>
		<link>http://mega.genn.org/2011/bbubles/</link>
		<comments>http://mega.genn.org/2011/bbubles/#comments</comments>
		<pubDate>Wed, 06 Jul 2011 06:21:37 +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[numbers]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2819</guid>
		<description><![CDATA[Долго сказка сказывается, да быстро дело делается. Во всяком случае у нас с Юрой такое происходит регулярно. То читалку за 33 часа сделаем, то в конкурсе каком-нибудь поучаствуем. Так было и в этот раз. Около 10 утра вчерашнего дня, Юра сбросил мне ссылку на CSS1K — конкурс для маньяков, которым предлагается оформить страничку только средствами [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2011/07/main.png" alt="main" width="636" height="400"  /></p>
<p>Долго сказка сказывается, да быстро дело делается. Во всяком случае у нас с <a href="http://cssing.org.ua/">Юрой</a> такое происходит регулярно. То <a href="http://mega.genn.org/ru/2010/33-hrs-project/">читалку за 33 часа сделаем</a>, то в конкурсе каком-нибудь поучаствуем. Так было и в этот раз. Около 10 утра вчерашнего дня, Юра сбросил мне ссылку на  <a href="http://css1k.com/">CSS1K</a> — конкурс для маньяков, которым предлагается оформить страничку только средствами CSS, да еще и так, чтобы само описание стилей занимало меньше килобайта. Вдвоем мы взялись за дело. Я, рисуя в прямом эфире в Скайпе, где мы общались, предложил концепцию дизайна, которая, по-моему, должна была влезть в 1024 байта, а Юра взялся за реализацию. Перед чтением рассказа о создании килобайтной красоты можно взять и полюбоваться, что же получилось в результате: <a href="http://css1k.com/#bbubles">Bbubles</a>. Для того, чтобы оценить изящество такого решения, можно сравнить размер файла картинки с этим дизайном, который будет минимум в 20 раз больше, и это безо всяких анимаций и ссылок.<span id="more-2819"></span></p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/07/init.gif" alt="init" width="636" height="461"  /></p>
<p class="imgdesc">«Информация должна быть невидима и появляться лишь при наведении мышки. Шарики должны расти, чтобы вместить весь текст. Хорошо бы на фоне была отдельная масса, которая как бы обводит все три круга, но так, наверное, не получится из-за ограничений в размере кода. Пиу-пиу-пиу!», — примерно так я описывал изображение на экране</p>
<p>После всяких обсуждений типа «логотип можно сделать из любого шрифта без засечек, только дай ему контур потолще, ведь в вашем этом сиэсэс можно такое сделать вебкитом всяким?», Юра взялся за первичную реализацию, а я за раскрашивание в нормальные цвета. В целях оптимизации, я подбирал такие цвета, которые можно записать тремя символами. Например, если цвет белый, то CSS позволяет записывать его не как #ffffff, а как #fff. Немного поэксперементировав, я отправил в верстку такие коды:</p>
<p><span style="font-size: 24px; font-family: monospace;">#ccdd22 → #cd2</span> (зеленый)<br /><span style="font-size: 24px; font-family: monospace;">#eeeedd → #eed</span> (фон)<br /><span style="font-size: 24px; font-family: monospace;">#ddddcc → #ddc</span> (темные круги)<br /><span style="font-size: 24px; font-family: monospace;">#444444 → #444</span> (текст)<br /><span style="font-size: 24px; font-family: monospace;">#ffffff → #fff</span> (фон под ссылками)</p>
<p>В итоге получилась вот такая красивая цветовая схема:</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/07/colours.png" alt="colours" width="636" height="568"  /></p>
<p>В ходе реализации оказалось, что круги так красиво разместить не получится, так что Юра расположил их треугольником, а я подправил оформление.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/07/deco.png" alt="deco" width="636" height="562" /></p>
<p>Но в результате получилось немного иначе. Когда все было готово, я тоже немного покопался в CSS и дополнительно сэкономил больше десятка байтов. Например, заменив стандартное <i>sans-serif</i> на <i>Arial</i> в описании шрифта. Это не совсем красиво с точки зрения CSS, зато работает везде и экономит байты. Или, например, предложил заменить там же <i>1.3em</i> на <i>18px</i>, сэкономив таким образом еще один байт, а в итоге значение вообще превратилось в <i>130%</i> ;) Какие-то секреты верстки, наверное, <a href="http://cssing.org.ua/2011/07/06/css1k/">раскрывает в своем посте Юра</a>. В общем, повеселились от души и получили хороший результат: <a href="http://css1k.com/#bbubles">Bbubles</a>. </p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/07/bbubles.jpg" alt="bbubles" width="848" height="770" /></p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2011/bbubles/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Йодид? Йодат! — 2 • Инфографика в действии и верстка книг</title>
		<link>http://mega.genn.org/2011/infographics-and-book-layout-on-iodine-howto/</link>
		<comments>http://mega.genn.org/2011/infographics-and-book-layout-on-iodine-howto/#comments</comments>
		<pubDate>Mon, 06 Jun 2011 07:59:26 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[emo]]></category>
		<category><![CDATA[fan]]></category>
		<category><![CDATA[friends]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[information]]></category>
		<category><![CDATA[numbers]]></category>
		<category><![CDATA[reading]]></category>
		<category><![CDATA[unicef]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2806</guid>
		<description><![CDATA[Йодсодержащие морепродукты веселятся вместе не соблюдая масштаб Сейчас, в половине четвертого утра, когда я пишу этот пост, скорее всего печатается книга о пользе йодированной йодатом соли в производстве хлебобулочных изделий. Инфографика и таблицы, о которых я писал пару недель назад (пост «Создание инфографики: Йодид! Йодат!»), зажили полноценной жизнью на страницах печатного издания. Некоторые из них [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2011/06/fishprawnfishoyster.png" alt="fishprawnfishoyster" width="636" height="304" /></p>
<p class="imgdesc">Йодсодержащие морепродукты веселятся вместе не соблюдая масштаб</p>
<p>Сейчас, в половине четвертого утра, когда я пишу этот пост, скорее всего печатается книга о пользе йодированной йодатом соли в производстве хлебобулочных изделий. Инфографика и таблицы, о которых я писал пару недель назад (пост «<a href="http://mega.genn.org/ru/2011/infographics-on-iodine-howto/">Создание инфографики: Йодид! Йодат!</a>»), зажили полноценной жизнью на страницах печатного издания. Некоторые из них немного изменились, а некоторые совсем преобразились после уточнений и обсуждений того, что должен показывать и подчеркивать тот или иной график. Мало того, книг оказалось две. Вторая потоньше — перевод статьи об использовании йодированной соли в Дании. Сначала я расскажу об изменениях и дополнениях в графике, а потом и о самой верстке книг. <span id="more-2806"></span></p>
<h2>Графики</h2>
<p>Одни графики, очутившись на страницах книги, захотели стоять в определенных местах текста, чтобы их было удобнее воспринимать. Другие же просто были возмущены тем, что они могут предоставить больше информации или представить ее более наглядно. А третьи просто захотели быть еще красивее.</p>
<div class="showhide buttonset showhide-new">
<div class="visible"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/graph1b.png" alt="" width="636" height="294" /></div>
<div class="hidden"><img src="http://mega.genn.org/=^_^=/uploads/2011/05/graph1a.png" alt="" width="636" height="294" /></div>
</div>
<p class="imgdesc">Влияние кулинарной обработки на содержание йода в морепродуктах (Рис. 1, стр. 8)</p>
<p>Первый же график был переделан в соответствии с острым желанием иметь возможность сравнить показатели с полной нормой адекватного уровня потребления йода. Говоря проще, на графике надо отметить 100%, чтобы было видно, что в сырой морской рыбе йода больше, чем требуется, а в устрицах — половина адекватного уровня потребления йода.</p>
<div class="showhide buttonset showhide-new">
<div class="visible"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/graph2b.png" alt="" width="635" height="264" /></div>
<div class="hidden"><img src="http://mega.genn.org/=^_^=/uploads/2011/05/graph2.png" alt="" width="636" height="264" /></div>
</div>
<p class="imgdesc">Использование йодсодержащих добавок для обогащения хлебобулочных изделий йодом (Рис. 2, стр. 23)</p>
<p>В этом графике названия йодсодержащих добавок просто перепрыгнули вниз, чтобы не мешать заголовку графики.</p>
<div class="showhide buttonset showhide-new">
<div class="visible"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/graph3b.png" alt="" width="636" height="314" /></div>
<div class="hidden"><img src="http://mega.genn.org/=^_^=/uploads/2011/05/graph3.png" alt="" width="634" height="314" /></div>
</div>
<p class="imgdesc">Влияние йодированных солей на расплываемость теста (Рис. 3, стр. 30)</p>
<p>Длинный путь в поисках внешнего вида полосок, обозначающих расплываемость шарика теста, все-таки закончился довольно просто — обычными полосками. Несмотря на кажущуюся очевидность такого решения, без вариантов этого графика не были бы созданы правила оформления остальных графиков с полосками, включая первый.</p>
<div class="showhide buttonset showhide-new">
<div class="visible"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/graph4b.png" alt="" width="635" height="268" /></div>
<div class="hidden"><img src="http://mega.genn.org/=^_^=/uploads/2011/05/graph4.png" alt="" width="635" height="268" /></div>
</div>
<p class="imgdesc">Влияние йодсодержащих добавок на газообразующую способность муки (Рис. 4, стр. 31)</p>
<p>Поскольку показатели отличаются сотыми частями, показать разницу между ними в текущем размере графика было бы сложно. Поэтому она показана не в реальном соотношении, а будто бы под микроскопом. Для того, чтобы у читателя не возникало ощущения, что его обманывают, полосы прерываются. Из графика  длинная однообразная часть — три параллельные прямые.</p>
<div class="showhide buttonset showhide-new">
<div class="visible"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/graph679b.png" alt="" width="636" height="723" /></div>
<div class="hidden"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/graph679.png" alt="" width="636" height="723" /></div>
</div>
<p class="imgdesc">Рост диаметра со временем (Рис. 6, стр. 33; Рис. 7, стр. 34; Рис. 9, стр. 36)</p>
<p>Все три графика, визуализирующие рост диаметра колоний и мицелия, со временем тоже изменились. Они стали выглядеть менее авангардно, при этом цветовое кодирование и подписи стали более читаемыми и очевидными. На Биеннале я, пожалуй, повез бы первоначальный вариант, а вот в книгу для пекарей лучше подойдет финальный ;)</p>
<h2>Верстка</h2>
<p>Готовую книгу <a href="http://genn.org/junk/unicef/saltbook.pdf">можно скачать</a> в PDF (1,5 мегабайта), а можно быстро просмотреть в миниатюре:</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/06/saltbookpages.png" alt="Salt Book Pages" width="761" height="619" /></p>
<p>Сразу хочу сказать, что очень спешил, и хоть и старался оттипографить каждую строку, но наверняка что-то пропустил. Я понимаю, что так не годится, но тем не менее. Не хватило примерно недели и ящика португальского молодого вина, чтобы я мог вдумчиво пересортировать все переносы и уравновесить все строки.</p>
<p>В работе мне помогали одна вещь и одна пони. Сначала о второй. <a href="http://deinde.livejournal.com/">Ленка</a>, героически сжав зубы, продиралась сквозь хитросплетения текста, переписывая его в понятной форме, а также исправляя знаки препинания, тире и сноски, если таковые ею были замечены. Поскольку я только выгляжу очень злым, читала она текст уже в первой редакции верстки, так что примерно представляла где будут иллюстрации, где таблицы, а где список не должен перейти на следующую страницу.</p>
<div style="left: 674px; position: absolute; display: inline-block; width: 176px;"><span style="font-size: 11px;">Справочник Мильчина и Чельцовой рекомендует по ГОСТ 8.417—2002 отбивать знак % от числа, вот только не могут определиться, то ли на 2 пункта (6.1.8), то ли на полукегельную (6.4.2)</span></div>
<p>Вещь же, которая мне помогла, — «Справочник издателя и автора» Мильчина и Чельцовой (третье издание, исправленное и дополненное). Без него некоторые тонкости в отступах и отбивках были бы упущены. Кроме того, всегда приятно получить подтверждение своих древних знаний о выравнивании чисел в таблицах так, чтобы их было приятно читать.</p>
<p>Но обо всем по порядку. Сначала была сетка в индизайне, которая потом использовалась и во второй книге.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/06/grid.png" alt="Book Grid" width="652" height="475" /></p>
<p class="imgdesc">Модульная сетка книги, которая два раза изменялась в процессе изучения исходной информации, стала более гибкой и читаемой (на следующих иллюстрациях модульная сетка появляется, если навести на разворот курсор)</p>
<p>В модульной сетке предусмотрена верстка в одну колонку с широким внешним полем, на которое будут вылезать таблицы и графики, а также верстка в две колонки для всяких приложений, вступлений, списков литературы и т.п. Такое разнообразие позволяет не только создать разное ощущение от прочтения текста, но также показать, что приложение к книге не является частью ее основного текста.</p>
<div class="gridover"></div>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/06/spread.png" alt="" width="652" height="475" /></p>
<p class="imgdesc">Повествование о картофельной болезни хлеба на страницах 34—35 больше не выглядит скучным. Теперь его хочется перечитывать, всякий раз восхищаясь уменьшению на 30% площади поражения хлеба бактериями благодаря применению йодированной йодатом соли</p>
<p>Торчащие за пределы сверстанного в одну колонку текста графики и таблицы делают чтение более приятным и интересным. В детстве я не мог удержаться, чтобы не прочитать сначала все сноски и все, что относится к иллюстрациям, если такие попадались мне на страницах книг. В книге про пользу йодированной соли графики и таблицы расположены так, чтобы им предшествовал связанный с ними текст (а не как в этом посте, где объяснение идет после иллюстрации), поэтому перескочить не удастся, но дискомфорта это не вызывает, а напротив — закрепляет полученную информацию. В случаях, когда таблиц оказывалось слишком много для одного разворота, приходилось переносить их на следующие страницы, не забыв указать в тексте после ссылки на таблицу «(см. стр. Х)».</p>
<p>Для того, чтобы было удобно читать таблицы и сравнивать приведенные в них данные, большинство из первых пришлось повернуть на 90°. Кроме того, все числовые и нечисловые значения были выравнены так, чтобы было очевидно, что же надо сравнить: числа с дробной частью — по запятой, интервалы — по тире и т.п.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/06/table3.png" alt="Table 3" width="636" height="220" /></p>
<p class="imgdesc">(Таблица 3, стр. 27)</p>
<p>При оформлении таблиц я немного пошалил, убрав некоторые очевидные заголовки таблиц. В этом проявилась моя борьба против избыточной информации.</p>
<p>Когда верстка дошла до приложения, возникла проблема. Дело в том, что несмотря на то, что приложение напечатано в книге, оно представляет собой проект документа с собственным содержанием и нумерацией страниц. Вдоволь повоевав с Индизайном, я все-таки пронумеровал страницы вручную в верхнем колонтитуле приложения (нумерация страниц по всей книге идет в правых внешних углах разворота), указав, к чему относится этот номер страницы:</p>
<div class="gridover"></div>
<div style="left: 674px; position: absolute; display: inline-block; width: 176px;"><span style="font-size: 11px;"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/grapher.png" alt="grapher" width="128" height="128" /><br />
Если нет специальных математических программ, то функции поможет набрать  в Mac OS X программа  Grapher (Applications › Utilities). Формулу прямо из нее можно скопировать в формате PDF хоть в буфер обмена. Важно при работе с этой программой следить за пробелами между математическими терминами и знаками</span></div>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/06/addition.png" alt="" width="652" height="475" /></p>
<p class="imgdesc">Рекомендации по расчету содержания йода в хлебобулочных изделиях на страницах 8—9 Приложения 1 (56—57 страницы книги) обзавелись отдельно специально набранными формулами. По правилам набора необходимо выключать формулы, идущие отдельным абзацем по центру полосы набора. Но в этом тексте «многоэтажные» формулы шли бы в той же строке, и будь колонки пошире, я бы выключил формулы по левому краю. Ложка дегтя: из-за того, что формулы готовились в другом редакторе, в итоге «слетели» отступы в 2 пункта между математическими знаками и математическими терминами. Только сейчас заметил и очень расстроился ;(</p>
<p>Когда я уже видеть не мог то, что наверстал, потому что оно меня достало, я взялся за содержание. Поскольку все стили оформления были заданы изначально, собрать содержание книги оказалось возможным буквально несколькими кликами мышкой. Но мне хотелось и содержание сделать интересным, задействовав весь разворот.</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/06/contentstry.png" alt="Contents Try" width="848" height="306" /></p>
<p>Перебрав несколько вариантов визуализации содержания, я все же решился сделать его более-менее классическим, чтобы не отпугнуть читателя с первых страниц.</p>
<div class="gridover"></div>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/06/contents.png" alt="Contents" width="652" height="475" /><br />
Тот же стиль оформления был применен и для содержания приложения, вот только набирать его пришлось почти вручную, потому что мои хитрые схемы нумерации страниц неподвластны Индизайну.</p>
<h2>«Датская» книга</h2>
<p>Эту книгу тоже <a href="http://genn.org/junk/unicef/saltbooklet.pdf">можно скачать</a> в формате PDF (706 килобайтов) или полюбоваться ею в миниатюре:</p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2011/06/saltbookletpages1.png" alt="saltbookletpages" width="760" height="190" /></p>
<p>Основной проблемой работы с этой книгой было ограниченное количество страниц, поэтому текст пришлось верстать в одну колонку на ширину двухколоночной сетки. Таблицы стали выглядывать из текста не так экспрессивно, но все равно интересно и интригующе. Позже оказалось, что добавилось еще четыре страницы, так что удалось сделать читаемый текст, а не нагромождение блоков из букв. К текстам в этой переводной книге Лена тоже приложила руку, сделав текст удобоваримым и, в частности, заменив µг и ppm, оставшиеся после нерадивого переводчика, на мкг и чнм (частички на миллион).</p>
<p>С таблицами, которые отличались в лучшую сторону от своих собратьев в предыдущей книге, все равно пришлось поработать.</p>
<div class="showhide ">
<div class="visible"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/table3da.png" alt="" width="636" height="530" /></div>
<div class="hidden"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/table3d.png" alt="" width="636" height="530" /></div>
</div>
<p class="imgdesc">(Таблица 3, стр. 10)</p>
<p>В этой таблице я объединил цветом возрастные группы, сделал более читаемой левую колонку и, что самое главное, уничтожил жуткое «Вміст йоду [середній (мінімальний-максимальний)] (µг/100 г)» заменив его нормальным форматированием в соответствующих ячейках и заголовком со сноской.</p>
<p>К сожалению, исходных данных для графика не было, его предстояло выдрать из PDF&#8217;а и как-то уменьшить по высоте, чтобы он поместился в верстке.</p>
<div class="showhide">
<div class="visible"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/graphda.png" alt="" width="495" height="309" /></div>
<div class="hidden"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/graphd.png" alt="" width="495" height="309" /></div>
</div>
<p class="imgdesc">(Диаграмма 1, стр. 11)</p>
<p>Я перерисовал «выдранный» график, выровняв ширину столбиков, уменьшил его по высоте и вынес на левую шкалу значения, чтобы можно было оценить их концентрацию (полоски слились из-за выравнивания по пиксельной сетке, при печати они ведут себя лучше). Как ни смешно, но после моих манипуляций, несмотря на уменьшение высоты в графике, открылись новые значения, которые не были видны в предыдущем варианте из-за белой обводки.</p>
<div class="showhide">
<div class="visible"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/table4da.png" alt="" width="636" height="400" /></div>
<div class="hidden"><img src="http://mega.genn.org/=^_^=/uploads/2011/06/table4d.png" alt="" width="636" height="400" /></div>
</div>
<p class="imgdesc">(Таблица 4, стр. 11)</p>
<p>Еще одну длинную таблицу я просто разделил почти пополам и сверстал в две колонки. В результате этой манипуляции оказалось, что в ней затерялся подзаголовок. Он был выведен на передний план и выделен.</p>
<h2>***</h2>
<p>После всего этого  я сохранил файлы, отправил в типографию и всем участникам процесса для вычитки, а сам не смотрел на них несколько дней. Вот теперь, когда меня перестало бросать в дрожь от воспоминаний о содеянном, в половине четвертого утра я взялся за завершение рассказа о создании хорошей, красивой, удобной и приятной книги из неподготовленных и зачастую не очень понятных читателю исходников.</p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2011/infographics-and-book-layout-on-iodine-howto/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Гостевая колонка для «Yeti News»</title>
		<link>http://mega.genn.org/2011/yeti-news/</link>
		<comments>http://mega.genn.org/2011/yeti-news/#comments</comments>
		<pubDate>Fri, 15 Apr 2011 13:54:13 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[advice]]></category>
		<category><![CDATA[baka-baka]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[friends]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[information]]></category>
		<category><![CDATA[punk]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2490</guid>
		<description><![CDATA[Надпись на двери кабинета, в котором мы сидим вместе с Бо В преддверии наступающего дня, я потратил 12 минут своего и пару минут чужого времени для написания внезапной гостевой колонки «О ситуативном продвижении брендов с использованием игровых технологий» со все объясняющим подзаголовком «Внимание! Колонка содержит намек на латынь». Колонка написана для самого плохого новостного сайта [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2011/04/maddogs.png" alt="Mad Dogs" width="636" height="351" /></p>
<p class="imgdesc">Надпись на двери кабинета, в котором мы сидим вместе с <a href="http://www.facebook.com/olena.bo">Бо</a></p>
<p>В преддверии наступающего дня, я потратил 12 минут своего и пару минут чужого времени для написания внезапной гостевой колонки «<a href="http://yetinews.com/articles/politics/?t=98">О ситуативном продвижении брендов с использованием игровых технологий</a>» со все объясняющим подзаголовком «Внимание! Колонка содержит намек на латынь». Колонка написана для самого плохого новостного сайта в мире <i>Yeti News</i>. Не смотря на кажущуюся абсурдность текста, в нем высказано полторы умные мысли. Предлагаю <a href="http://yetinews.com/articles/politics/?t=98">прочесть</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2011/yeti-news/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Я выиграл Мэрилин</title>
		<link>http://mega.genn.org/2011/marylin-i-won/</link>
		<comments>http://mega.genn.org/2011/marylin-i-won/#comments</comments>
		<pubDate>Wed, 13 Apr 2011 07:28:55 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[advice]]></category>
		<category><![CDATA[baka-baka]]></category>
		<category><![CDATA[branding]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[emo]]></category>
		<category><![CDATA[friends]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[information]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2482</guid>
		<description><![CDATA[Я в футболке (снято на кофейную чашку, отсюда и качество) Я случайно выиграл футболку у витаминов. На футболке изображена Мэрилин Монро, состоящая из нарезанных фруктов. Мне очень нравится. Футболка (удивлен) великолепная — снаружи 100 процентов полиэстера, а внтури — хлопок на все те же проценты. Печать тоже отличная. В ответ на футболку хорошего качества и [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2011/04/marylin636.jpg" alt="marylin vitrum" width="636" height="480" /></p>
<p class="imgdesc">Я в футболке (снято на кофейную чашку, отсюда и качество)</p>
<p>Я случайно выиграл футболку у <a href="http://vitrum.ua/">витаминов</a>. На футболке изображена Мэрилин Монро, состоящая из нарезанных фруктов. Мне очень нравится. Футболка (удивлен) великолепная — снаружи 100 процентов полиэстера, а внтури — хлопок на все те же проценты. Печать тоже отличная.</p>
<p>В ответ на футболку хорошего качества и с хорошей печатью, дам витаминкам хороший совет<span id="more-2482"></span> Если вы хотите, чтобы футболку носили не дома, а, скажем, надели на день рождения <a href="http://mega.genn.org/ru/2008/toshoshop/">Тошошопа</a> или пошли в ней в ночной клуб, а то и вовсе полетели бы в ней <a href="http://mega.genn.org/ru/2009/portugal-pro/">отдыхать в Лиссабоне</a>, то не стоит размещать свой логотип крупно прямо под принтом. Особенно, если они не сочитаются друг с другом и логотип не заинтегрирован в рисунок. Нежно на рукаве; ласково сзади под воротником; уютно внизу спереди, но ближе к шву — мест, в которых логотип будет смотреться хорошо очень много. Тогда я бы мог носить эту удобную и красивую футболку, отвечая на завистливо-восхищенные вопросы друзей: «Откуда взял? Да у витаминок Витрум выиграл!»</p>
<h2>***</h2>
<p>Кстати, на странице <a href="http://www.facebook.com/pages/%D0%92%D0%B8%D1%82%D1%80%D1%83%D0%BC/139252306141880">витаминок в фейсбуке</a>, футболка без логотипа.<br />
<img src="http://mega.genn.org/=^_^=/uploads/2011/04/190543_141903342543443_139252306141880_249899_7903642_n.jpeg" alt=""  width="528" height="720" /></p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2011/marylin-i-won/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Twenty Ate</title>
		<link>http://mega.genn.org/2011/waka-waka-waka-waka/</link>
		<comments>http://mega.genn.org/2011/waka-waka-waka-waka/#comments</comments>
		<pubDate>Wed, 06 Apr 2011 05:40:08 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[baka-baka]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[emo]]></category>
		<category><![CDATA[fan]]></category>
		<category><![CDATA[friends]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[punk]]></category>
		<category><![CDATA[retro]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2473</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2011/04/28.jpg" alt="waka waka waka waka" width="636" height="636"  /></p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2011/waka-waka-waka-waka/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Lingua Nuovo</title>
		<link>http://mega.genn.org/2011/lingua-nuovo/</link>
		<comments>http://mega.genn.org/2011/lingua-nuovo/#comments</comments>
		<pubDate>Wed, 30 Mar 2011 08:20:33 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[baka-baka]]></category>
		<category><![CDATA[friends]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[information]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2434</guid>
		<description><![CDATA[Привет! Я вспомнил, что у меня есть не только фейсбук (ссылка справа), твиттер (ссылка справа), walkyrie (ссылка справа) и другие какие-то фликры (ссылки справа), но и мега! В очередной раз постараюсь об этом не забывать ;) Пока мои друзья возмущены тем, что в Оксфордский словарь добавили кусочки интернет-сленга OMG LOL OK &#60;3, я загрязняю активную [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2011/03/presspresso.jpg" alt="presspresso" width="636" height="327"  /></p>
<p>Привет! Я вспомнил, что у меня есть не только <i>фейсбук</i> (ссылка справа), <i>твиттер</i> (ссылка справа), <i>walkyrie</i> (ссылка справа) и другие какие-то <i>фликры</i> (ссылки справа), но и <i>мега</i>! В очередной раз постараюсь об этом не забывать ;)</p>
<p>Пока мои друзья возмущены тем, что в Оксфордский словарь <a href="http://www.oed.com/public/latest/latest-update/#new">добавили</a> кусочки интернет-сленга OMG LOL OK &lt;3, я загрязняю активную речь всех говорящих на английском. Делаю я это не сам, а при помощи <a href="http://twitter.com/lee_offline">Ани Ли</a>. Она взяла и добавила брошенное мной спросонья слово <i>presspresso</i> прямиком <a href="http://presspresso.urbanup.com/">в Urban Dictionary</a>. Вот как надо язык портить, а не законодательно объявлять, что кофе — оно!</p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2011/lingua-nuovo/feed/</wfw:commentRss>
		<slash:comments>7</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/waking-up/</link>
		<comments>http://mega.genn.org/2010/waking-up/#comments</comments>
		<pubDate>Fri, 23 Jul 2010 06:18:11 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[baka-baka]]></category>
		<category><![CDATA[Blogroll]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[emo]]></category>
		<category><![CDATA[fan]]></category>
		<category><![CDATA[friends]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[information]]></category>
		<category><![CDATA[sick]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2345</guid>
		<description><![CDATA[Выловив из десятка заготовок постов тот, который соответствует моему настроению, я довел его до ума и публикую. Публикую сегодня, потому что твиттер просто завален всякими просьбами поспать подольше и жалобами на то, что необходимо просыпаться. У меня с пробуждением с улыбкой проблем нет (я даже будильниками не пользуюсь). Впрочем, раннее пробуждение с улыбкой на лице [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2010/07/wake-up.jpg" alt="wake-up" width="636" height="209" /></p>
<p>Выловив из десятка заготовок постов тот, который соответствует моему настроению, я довел его до ума и публикую. Публикую сегодня, потому что твиттер просто завален <a href="http://twitter.com/kovenkin/status/19311822126">всякими просьбами</a> поспать подольше и жалобами на то, что необходимо просыпаться. У меня с пробуждением с улыбкой <a href="http://mega.genn.org/ru/2008/5am/">проблем нет</a> (я даже будильниками <a href="http://mega.genn.org/ru/2008/gimme-lo-five/">не пользуюсь</a>). Впрочем, раннее пробуждение с улыбкой на лице приводит к <a href="http://mega.genn.org/ru/2009/its-wrong-to-get-up-early/">другим проблемам</a>. Вернемся к интригующей картинке в заголовке поста. Это фрагмент завершенного комикса, который я в текстовом виде одним утром <a href="http://deinde.livejournal.com/182137.html">отправил bo</a>.<span id="more-2345"></span></p>
<p><img src="http://mega.genn.org/=^_^=/uploads/2010/07/wake-up-strip.png" alt="wake-up-strip" width="636" height="1528" /></p>
<p>Еще это можно считать пятничным трибьютом <a href="http://omaketheater.com/comics/">Friday 4Koma</a>, который мне очень нравится. </p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2010/waking-up/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Walkyrie: мифология прогулок</title>
		<link>http://mega.genn.org/2010/walkyrie-walking-mythology/</link>
		<comments>http://mega.genn.org/2010/walkyrie-walking-mythology/#comments</comments>
		<pubDate>Mon, 21 Jun 2010 19:28:38 +0000</pubDate>
		<dc:creator>Genn</dc:creator>
				<category><![CDATA[stuff]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[emo]]></category>
		<category><![CDATA[friends]]></category>
		<category><![CDATA[fun]]></category>
		<category><![CDATA[information]]></category>
		<category><![CDATA[reading]]></category>

		<guid isPermaLink="false">http://mega.genn.org/?p=2333</guid>
		<description><![CDATA[Да, это скриншот сайта о котором я расскажу чуть ниже Как приготовить идеальный клубничный крем-суп? Взять свежую клубнику, немного миксера, три улыбки, сливки, что-то еще из рецепта, ваниль и как-то это все заставить взаимодействовать. У нас нет клубники, тонна улыбок и фотографии сделанные на ходу, да еще и обработанные так, чтобы выглядеть чуть винтажными. Вспоминая [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://mega.genn.org/=^_^=/uploads/2010/06/walkyrie.jpg" alt="walkyrie.org" width="636" height="617" /></p>
<p class="imgdesc">Да, это скриншот <a href="http://walkyrie.org/">сайта</a> о котором я расскажу чуть ниже</p>
<p>Как приготовить идеальный клубничный крем-суп? Взять свежую клубнику, немного миксера, три улыбки, сливки, что-то еще из рецепта, ваниль и как-то это все заставить взаимодействовать. У нас нет клубники, тонна улыбок и фотографии сделанные на ходу, да еще и обработанные так, чтобы выглядеть чуть винтажными. Вспоминая <a href="http://www.danklife.com/blog/wp-content/uploads/2010/06/pfnqn.jpg">популярную шутку</a>, надо всего лишь добавить к ним дурацкие (или глубокомысленные) тексты написанные Гельветикой и подать к столу. Вооружайтесь мысленными ложками, интеллектуальные гурманы, потому что мы подаем к столу вашего воображения <nobr>проект <a href="http://walkyrie.org/">Walkyrie = photo × helvetica</a></nobr>.</p>
]]></content:encoded>
			<wfw:commentRss>http://mega.genn.org/2010/walkyrie-walking-mythology/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>

