Долго сказка сказывается, да быстро дело делается. Во всяком случае у нас с Юрой такое происходит регулярно. То читалку за 33 часа сделаем, то в конкурсе каком-нибудь поучаствуем. Так было и в этот раз. Около 10 утра вчерашнего дня, Юра сбросил мне ссылку на CSS1K — конкурс для маньяков, которым предлагается оформить страничку только средствами CSS, да еще и так, чтобы само описание стилей занимало меньше килобайта. Вдвоем мы взялись за дело. Я, рисуя в прямом эфире в Скайпе, где мы общались, предложил концепцию дизайна, которая, по-моему, должна была влезть в 1024 байта, а Юра взялся за реализацию. Перед чтением рассказа о создании килобайтной красоты можно взять и полюбоваться, что же получилось в результате: Bbubles. Для того, чтобы оценить изящество такого решения, можно сравнить размер файла картинки с этим дизайном, который будет минимум в 20 раз больше, и это безо всяких анимаций и ссылок.

«Информация должна быть невидима и появляться лишь при наведении мышки. Шарики должны расти, чтобы вместить весь текст. Хорошо бы на фоне была отдельная масса, которая как бы обводит все три круга, но так, наверное, не получится из-за ограничений в размере кода. Пиу-пиу-пиу!», — примерно так я описывал изображение на экране

После всяких обсуждений типа «логотип можно сделать из любого шрифта без засечек, только дай ему контур потолще, ведь в вашем этом сиэсэс можно такое сделать вебкитом всяким?», Юра взялся за первичную реализацию, а я за раскрашивание в нормальные цвета. В целях оптимизации, я подбирал такие цвета, которые можно записать тремя символами. Например, если цвет белый, то CSS позволяет записывать его не как #ffffff, а как #fff. Немного поэксперементировав, я отправил в верстку такие коды:

#ccdd22 → #cd2 (зеленый)
#eeeedd → #eed (фон)
#ddddcc → #ddc (темные круги)
#444444 → #444 (текст)
#ffffff → #fff (фон под ссылками)

В итоге получилась вот такая красивая цветовая схема:

В ходе реализации оказалось, что круги так красиво разместить не получится, так что Юра расположил их треугольником, а я подправил оформление.

Но в результате получилось немного иначе. Когда все было готово, я тоже немного покопался в CSS и дополнительно сэкономил больше десятка байтов. Например, заменив стандартное sans-serif на Arial в описании шрифта. Это не совсем красиво с точки зрения CSS, зато работает везде и экономит байты. Или, например, предложил заменить там же 1.3em на 18px, сэкономив таким образом еще один байт, а в итоге значение вообще превратилось в 130% ;) Какие-то секреты верстки, наверное, раскрывает в своем посте Юра. В общем, повеселились от души и получили хороший результат: Bbubles.

Йодсодержащие морепродукты веселятся вместе не соблюдая масштаб

Сейчас, в половине четвертого утра, когда я пишу этот пост, скорее всего печатается книга о пользе йодированной йодатом соли в производстве хлебобулочных изделий. Инфографика и таблицы, о которых я писал пару недель назад (пост «Создание инфографики: Йодид! Йодат!»), зажили полноценной жизнью на страницах печатного издания. Некоторые из них немного изменились, а некоторые совсем преобразились после уточнений и обсуждений того, что должен показывать и подчеркивать тот или иной график. Мало того, книг оказалось две. Вторая потоньше — перевод статьи об использовании йодированной соли в Дании. Сначала я расскажу об изменениях и дополнениях в графике, а потом и о самой верстке книг.

Графики

Одни графики, очутившись на страницах книги, захотели стоять в определенных местах текста, чтобы их было удобнее воспринимать. Другие же просто были возмущены тем, что они могут предоставить больше информации или представить ее более наглядно. А третьи просто захотели быть еще красивее.

Влияние кулинарной обработки на содержание йода в морепродуктах (Рис. 1, стр. 8)

Первый же график был переделан в соответствии с острым желанием иметь возможность сравнить показатели с полной нормой адекватного уровня потребления йода. Говоря проще, на графике надо отметить 100%, чтобы было видно, что в сырой морской рыбе йода больше, чем требуется, а в устрицах — половина адекватного уровня потребления йода.

Использование йодсодержащих добавок для обогащения хлебобулочных изделий йодом (Рис. 2, стр. 23)

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

Влияние йодированных солей на расплываемость теста (Рис. 3, стр. 30)

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

Влияние йодсодержащих добавок на газообразующую способность муки (Рис. 4, стр. 31)

Поскольку показатели отличаются сотыми частями, показать разницу между ними в текущем размере графика было бы сложно. Поэтому она показана не в реальном соотношении, а будто бы под микроскопом. Для того, чтобы у читателя не возникало ощущения, что его обманывают, полосы прерываются. Из графика длинная однообразная часть — три параллельные прямые.

Рост диаметра со временем (Рис. 6, стр. 33; Рис. 7, стр. 34; Рис. 9, стр. 36)

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

Верстка

Готовую книгу можно скачать в PDF (1,5 мегабайта), а можно быстро просмотреть в миниатюре:

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

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

Вещь же, которая мне помогла, — «Справочник издателя и автора» Мильчина и Чельцовой (третье издание, исправленное и дополненное). Без него некоторые тонкости в отступах и отбивках были бы упущены. Кроме того, всегда приятно получить подтверждение своих древних знаний о выравнивании чисел в таблицах так, чтобы их было приятно читать.

Но обо всем по порядку. Сначала была сетка в индизайне, которая потом использовалась и во второй книге.

Модульная сетка книги, которая два раза изменялась в процессе изучения исходной информации, стала более гибкой и читаемой (на следующих иллюстрациях модульная сетка появляется, если навести на разворот курсор)

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

Повествование о картофельной болезни хлеба на страницах 34—35 больше не выглядит скучным. Теперь его хочется перечитывать, всякий раз восхищаясь уменьшению на 30% площади поражения хлеба бактериями благодаря применению йодированной йодатом соли

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

Для того, чтобы было удобно читать таблицы и сравнивать приведенные в них данные, большинство из первых пришлось повернуть на 90°. Кроме того, все числовые и нечисловые значения были выравнены так, чтобы было очевидно, что же надо сравнить: числа с дробной частью — по запятой, интервалы — по тире и т.п.

(Таблица 3, стр. 27)

При оформлении таблиц я немного пошалил, убрав некоторые очевидные заголовки таблиц. В этом проявилась моя борьба против избыточной информации.

Когда верстка дошла до приложения, возникла проблема. Дело в том, что несмотря на то, что приложение напечатано в книге, оно представляет собой проект документа с собственным содержанием и нумерацией страниц. Вдоволь повоевав с Индизайном, я все-таки пронумеровал страницы вручную в верхнем колонтитуле приложения (нумерация страниц по всей книге идет в правых внешних углах разворота), указав, к чему относится этот номер страницы:

Если нет специальных математических программ, то функции поможет набрать в Mac OS X программа Grapher (Applications › Utilities). Формулу прямо из нее можно скопировать в формате PDF хоть в буфер обмена. Важно при работе с этой программой следить за пробелами между математическими терминами и знаками

Рекомендации по расчету содержания йода в хлебобулочных изделиях на страницах 8—9 Приложения 1 (56—57 страницы книги) обзавелись отдельно специально набранными формулами. По правилам набора необходимо выключать формулы, идущие отдельным абзацем по центру полосы набора. Но в этом тексте «многоэтажные» формулы шли бы в той же строке, и будь колонки пошире, я бы выключил формулы по левому краю. Ложка дегтя: из-за того, что формулы готовились в другом редакторе, в итоге «слетели» отступы в 2 пункта между математическими знаками и математическими терминами. Только сейчас заметил и очень расстроился ;(

Когда я уже видеть не мог то, что наверстал, потому что оно меня достало, я взялся за содержание. Поскольку все стили оформления были заданы изначально, собрать содержание книги оказалось возможным буквально несколькими кликами мышкой. Но мне хотелось и содержание сделать интересным, задействовав весь разворот.

Перебрав несколько вариантов визуализации содержания, я все же решился сделать его более-менее классическим, чтобы не отпугнуть читателя с первых страниц.

Тот же стиль оформления был применен и для содержания приложения, вот только набирать его пришлось почти вручную, потому что мои хитрые схемы нумерации страниц неподвластны Индизайну.

«Датская» книга

Эту книгу тоже можно скачать в формате PDF (706 килобайтов) или полюбоваться ею в миниатюре:

Основной проблемой работы с этой книгой было ограниченное количество страниц, поэтому текст пришлось верстать в одну колонку на ширину двухколоночной сетки. Таблицы стали выглядывать из текста не так экспрессивно, но все равно интересно и интригующе. Позже оказалось, что добавилось еще четыре страницы, так что удалось сделать читаемый текст, а не нагромождение блоков из букв. К текстам в этой переводной книге Лена тоже приложила руку, сделав текст удобоваримым и, в частности, заменив µг и ppm, оставшиеся после нерадивого переводчика, на мкг и чнм (частички на миллион).

С таблицами, которые отличались в лучшую сторону от своих собратьев в предыдущей книге, все равно пришлось поработать.

(Таблица 3, стр. 10)

В этой таблице я объединил цветом возрастные группы, сделал более читаемой левую колонку и, что самое главное, уничтожил жуткое «Вміст йоду [середній (мінімальний-максимальний)] (µг/100 г)» заменив его нормальным форматированием в соответствующих ячейках и заголовком со сноской.

К сожалению, исходных данных для графика не было, его предстояло выдрать из PDF’а и как-то уменьшить по высоте, чтобы он поместился в верстке.

(Диаграмма 1, стр. 11)

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

(Таблица 4, стр. 11)

Еще одну длинную таблицу я просто разделил почти пополам и сверстал в две колонки. В результате этой манипуляции оказалось, что в ней затерялся подзаголовок. Он был выведен на передний план и выделен.

***

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

Принт футболки «Йод делает меня умнее» (dribbbbbbbble edition)

Когда мне было 9 лет, я практически попался в сети курсов развития абстрактного и образного мышления. На этих курсах сначала надо было попасть цилиндром в квадратную дырку, а потом составлять из не связанных друг с другом слов истории. Эти занятия мне не нравились, скорее всего потому, что мне плохо объяснили, что же надо делать. Не нравится мне составление бесполезных историй и сегодня (это заметно по тому, как часто я пишу в блог ;) Тем не менее, последняя неделя моей жизни была историей составленной из, как кажется на первый взгляд, не связанных друг с другом слов:

хлеб • йодид • развитие • дети • KIO₃ • клейковина

Если вдруг кто-то проследил между этими словами связь, то он или знаком с программой Юнисефа по борьбе с йододефицитом, или просто показалось. Если что-то третье, то это настораживает.

Часть прошедшей недели я посвятил тому, что разбирался и готовил к верстке книгу. Я не буду в тысячный раз писать о том, какая беда йододефицит, а также о том, почему есть рыбу или водросли — не решение проблемы. Просто скажу, что если использовать йодированную, а не обычную соль при приготовлении хлеба, то это не только невероятно поможет в борьбе с йододефицитом, но и хорошо скажется на свойствах самого хлеба. Плесень не появляется дольше, грибки бродят быстрее и так далее. В Киеве скоро произойдет большая конференция хлебопекарей, для которых и готовится книга о пользе соли йодированной KIO3 (это самый крутой йодат, который только можно использовать для йодирования соли).

Книга уже написана, это научный труд, поэтому выглядит она как, ну, научный труд. Просто сверстать ее было скучно, поэтому я для начала перерисовал все графики, сделав их интересными, понятными и более компактными, а потом еще и переверстал таблицы. Таким образом я сделал так, что скучная работа стала интересной и увлекательной. Благодаря тому, что графики и таблицы стали компактнее, у меня появилось место для того, чтобы развернуться с оформлением. К сожалению в книге не нашлось применения спарклайнам, а так бы я потратил еще больше времени ;)

(Инфо)графики

Для того, чтобы превратить обычные графики в информационные, мне потребовалось запросить исходные данные, что косвенно показывает насколько неинформативны и неудобны графики, которые подверглись переделке. Поскольку исходные изображения взяты из рабочего файла, куда они попали из сгенерированного Вордом pdf’а, они не выглядят так, будто над ними трое суток трудилось пять технических дизайнеров. Для того, чтобы увидеть как было, достаточно кликнуть на график или навести мышку на маркеры справа (на тач-устройствах надо пальцем ткнуть в график).

Влияние кулинарной обработки на содержание йода в морепродуктах

Update (нет предела совершеству)
Все выходные меня мучал первый график. Как показывают комментарии, не меня одного. Дело в том, что это скорее таблица, чем график. Даже в табличной форме разница между значениями очень хорошо видна. По кругам тоже можно судить о разнице, но только благодаря использованию линейных размеров (в отличией от площадей кругов ниже). Итак, получаются просто круги над таблицей. Кроме легких семантических загадок, этот вариант еще и выпадает из верстки книги, разваливаясь на две составляющие, обе из которых сложно назвать полноценными: круги с подписями и таблица с указанием процентов. Совмещение обеих частей не приведет ни к чему хорошему, превратив данные в кашу. В поисках других способов визуализации я перебрал разные варианты и даже пробовал вернуться к исходному, который был в книге, но он громоздок и не так хорош, как может показаться на первый взгляд. Проблема еще осложнялась тем, что у нас показаны два значения, которые не составляют целое, что делало невозможным использование составных полос (stacked bars).

Для статьи в ZN.UA мне понадобилось проиллюстрировать количество отводимой воды по городам и сравнить суммарные показатели. Составные полосы оказались как нельзя более кстати. На полноразмерной версии лучше видна полоса сверху, на которой отмечены значения сумм отведенных горячих и холодных кубометров, что позволяет судить о средних показателях — они находятся в месте максимального скопления вертикальных черточек.

Например, цена товара состоит из себестомости, налогов, наценок и т.п. — значит все цены можно показать одной полосой, разделив на составляющие для большей наглядности. Фактически, каждая такая полоска представляет собой круговую диаграмму, только распрямленную и не всегда составляющую сто процентов. Тем не менее, есть, что позаимствовать и у такого подхода. Для того, чтобы обозначить большее значение и показать сколько от него остается, я решил использовать метафору капли, которая используется в последней инфографике. Для того, чтобы показать остаток, на капле выделяется соответствующая часть.

Улучшенная иллюстрация влияния кулинарной обработки на содержание йода в морепродуктах

Использование йодсодержащих добавок для обогащения хлебобулочных изделий йодом

Круги приятнее, чем полосы показывают разницу между эффективностью использования различных добавок, особенно учитывая количество одинаковых показателей (5%). Фактически, смысл графика сводится к демонстрации того, что все добавки, кроме трех, одинаковы. Две из трех лучше, но примерно одинаковы, а третья разительно больше. Кроме того, круги позволили сделать график более читаемым и сэкономить место.

Влияние йодированных солей на расплываемость теста

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

Сначала полосы графика распространялись в обе стороны, что создавало впечатление расплываемости (показатель, который полосы иллюстрируют). Из-за этого возникла проблема потери наглядности: не было очевидно, что расплываемость одной пробы гораздо больше другой. Добавление линий на фоне сделало график больше похожим на этажерку, но не увеличило читаемость. Поэтому полосы были выровнены по левому краю, а в качестве основы для линий выбрано основное референтное значение. Смысл графика в том, чтобы сравнить показатели KIO₃ и остальные. Благодаря тому, что каждая линия отмечает конец каждого ряда, появилась возможность подписать ряды. В результате перебора пяти вариантов (здесь показаны три) были определены цвета, которые легче воспринимать. Полосы стали выпуклыми посередине, чтобы подкреплять «расплываемость», также это увеличило читаемость графика, как ни странно ;) Приятная деталь: длина полос графика равна показателям, которые они символизируют. Например, длина первой полосы в книге будет равна 46 мм.

Влияние йодсодержащих добавок на газообразующую способность муки

Ширина полос в этом графике равна ширине концов полос в предыдущем. Поскольку оба графика идут рядом, они будут удачно дополнять друг друга. Вся сложная «легенда» графика не только уместилась в левой колонке, но и стала понятнее.

Влияние йодированных солей на свойства клейковины

Деформация клейковины показана деформацией краев круга. Количество вершин «звездочек» кореллирует с разницей в данных.

Гидратация — это присоединение молекул воды к другим молекулам и ионам, так что к полосам, отображающим гидратационную способность, липнут капельки воды ;)

Влияние соли йодированной KIO₃ на рост дрожжевых клеток

Рост дрожжевых клеток в течение интервала показан при помощи экстраполяции данных, что создает впечатление процесса. Можно предположить, каким был показатель в определенный момент. Для тех моментов времени, в которые известны значения, эти значения обозначены.

Влияние йодированной соли на рост Bacillius subtilis в хлебе

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

Сохранность йода в хлебе с йодсодержащими добавками

Некоторые термины и названия пришлось переписать так, чтобы они выглядели понятно и по-человечески, а не как в реферате студента третьего курса, скачавшего их из интернета. Надеюсь, что после вычитки их не поменяют ;)

Таблицы

Для таблиц я сразу создал правила оформления в Индизайне, так что, казалось, оставалось только вставить данные. Как бы не так. Большинство таблиц были сделаны так, что данные в них было не только неудобно читать, но и сложно сравнивать. В большинстве случаев это решалось поворотом таблицы на 90°.

Сравниваемые данные стали в столбики, так что их легко сравнивать. Кроме того, исчезла многоуровневая нечитаемая шапка, превратившись в приятную левую колонку.

Некоторые таблицы оказались вовсе не таблицами, а простыми списками в две колонки.

Сложные таблицы со сносками и съехавшими полями стали удобными и понятными. Тут пришлось не только перечитывать все, что с ними связано, но и разбираться, какие поля куда съехали.

Верстаю книгу

Следующие шаги: правильно расставить тире, дефисы, символы интервалов, многоточия, кавычки, сноски, нумерацию источников и многое другое. Также необходимо изменить пошлый астериск в качестве обозначения сноки на что-нибудь менее «вордовское». Для текста, таблиц и примечаний на графиках, если такие понадобятся, буду использовать символ «^×». Пришлось отказаться от цифровых верхних индексов, чтобы их не спутали в какой-нибудь очередной формуле всего с обозначением степени или массового числа у химических элементов. Сносок, впрочем, не больше одной на страницу, так что цифровые индексы были бы избыточны — повсюду маячили бы единички.

В результате проведенных превращений графиков в информативные читаемые графики, а неудачных таблиц просто в хорошие таблицы, преобразилось и ощущение, которое оставляет текст. Его стало интересно читать. Те же, кому читать не захочется, смогут порассматривать графики и таблицы. Уже только по ним понятно, что за сила таится в йодированной соли.

Попутно хочу удивиться тому, как нигилистически относятся к своим трудам те, кто их создают. Если уж написал научный и нужный текст, то неужели не хочется, чтобы он красиво выглядел и был удобоварим? Ладно, читаемые графики в научном мире строить не умеют, но съехавшие поля таблицы как не поправить? Как подсказали в комментариях, еще и обозначение йодида и йодата в графиках и таблицах неверное. Пришлось исправить.

***

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

Спасибо Юре и Антону за то, что привели в порядок CSS и JavaScript вакханалию, создав и исправив функционал переключения исходного и обновленного графиков на тот, который был мне необходим ;)

И все? Нет, конечно!

Я доверстал книгу! И написал об этом пост! Встречайте:
«Йодид? Йодат! — 2 • Инфографика в действии и верстка книг»

Недавно мы с дружественным минским фотографом гламура, путешествий и антиквариата запустили проект под названием Walkyrie. Шло время, и количество гельветизированных фотографий достигло сотни. Это не просто достижение или причина открыть шампанское, но и что-то вроде дня рождения.

Поскольку мы планируем опубликовать печатный каталог «валькирий» в ближайшем будущем, но не сегодня, мы решили сделать что-то особенное, чтобы отметить эту сотню. Тут-то и появилось то, чего раньше нам встречать не приходилось, — электронная книга, набитая художественным материалом, как любой печатный каталог искусства или дизайна. В качестве формата электронной книги был выбран ePub. Его можно читать как на мобильных устройствах, так и на компьютерах. Получилось две версии художественного альбома (примерно по 15 мегабайтов каждая): Walkyrie × 100, которая должна работать с любой программой для чтениия электроных книг, и специальная версия для iBooks Walkyrie × 100 Interactive. Ссылки на обе из них также есть на walkyrie.org.

Зачем интерактивность

Идея создания интерактивного ePub, который можно было бы просматривать стандартными программами на ай-устройствах, посетила меня давно, но я не уделил ей должного внимания. Однажды ameagari поинтересовался в своем твитере, не встречал ли кто такого чуда. Я не встречал и, мало того, не нашел во всем интернете настоящей интерактивности. В который раз пришлось все делать самому ;)

Это было непросто

У моего друга есть привезенная из Нью-Йорка футболка, на которой написано «fuck rude people, fuck subways, fuck rain, fuck high prices…» и т. д. После создания интерактивной электронной книги я могу сделать такую же футболку, но вместе со словом fuck там будут еще webkit, z-index, font-family, jquery, iBooks. Ниже я расскажу почему.

Необычное для книг взаимодействие пользователя с каталогом «валькирий» осуществляется двумя путями. Во-первых, можно нажать на кружок (в формате SVG, чтобы красиво смотреться на любой странице) в начале книги и попасть на произвольную страницу с картинкой. Наша версия fortune cookie ;)

Кроме этого, если читатель не сможет разобрать текст на картинке, к его услугам ссылка Transcript, прикосновение к которой покажет текст крупнее.

Ничего супер-удивительного, но большего нам и не требовалось. Во всяком случае, до следующей версии.

Интерактивность не поддерживается большинством программ для чтения электронных книг, как мобильных, так и компьютерных, кроме iBooks, но и там все не очень хорошо. У создателя книги нет почти никакого контроля над начертанием и размером шрифтов, над выравниванием текста. Невозможно задать наложение элементов с использованием z-index’а и позиционирования без каких-то прыжков через голову. Невозможно задать расположение элементов на странице (мне пришлось пользоваться таблицами как в 2002-м). Невозможно удостовериться, что объекты будут на одной странице и не расползутся непонятно куда. Например, мы заметили, что если листать страницы вперед, потом назад, а потом опять вперед, то может появиться пустая страница. Тут не мешало бы вспомнить футболку, о которой я рассказывал чуть выше:

Уловки и советы

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

Любой файл ePub представляет собой засунутую в архив мешанину из всяких служебных файлов, а также, что важно для нас, содержания книги, представленного .xhtml’ами с CSS и JavaScript’ом, а также всем тем, что необходимо для книги (например, картинками). Я создавал ePub’ы при помощи Sigil. Эта программа была выбрана неслучайно. Во-первых, у нее правильное концептуально и магически название. Во-вторых, она, в отличие от многих других, работает и существует под Mac OS X. Ну и еще она opensource, если кому-то это важно. Сокращенная версия структуры книги в неудобном как для просмотра, так и для редактирования (привет, opensource) древовидном состоянии представлена ниже.

Для того, чтобы работать с объектами на странице, я пользовался jQuery. На прикосновения он реагирует так:

1. $('#transcript').bind('touchstart', function(e){
2. …
3. });

Для того, чтобы, не смотря ни на что, выводить подсказки поверх фотографий, я воспользовался следующим кодом:

1. var tra=$('.help').height()+30;
2. $('.help').css('-webkit-transform','translateY(-'+tra+'px)');

Как встраивать SVG, думаю, все знают, так что там ничего особенного, только куча этих Midxmidymaxymidy ;)

Читать нельзя потрогать

Все программы для чтения на тач-устройствах не очень-то жалуют интерактивность в книгах. Проблема заключается в том, что в первую очередь у программ есть свои интерфейсы, которые тоже управляются прикосновениями. Таким образом, если на какой-то из страниц есть интерактивная область, читатель может нажать на нее как для того, чтобы воспользоваться дополнительным функционалом, так и для того, чтобы воспользоваться интерфейсом приложения. Например, в нашей интерактивном электронном каталоге «валькирий» я был вынужден убрать подсказку по прикосновению к фотографии и создать для этого отдельную ссылку. Дело в том, что при нажатии на правую или левую часть экрана читатель ожидает перелистывания, а не подсказки. Картинка же занимает всю страницу, как и положено в арт-объектах ;)

Помимо конфликта интерфейсов книги и программы, невозможно почти ничего контролировать в расположении и взаимодействии элементов, так что создание удобного интерфейса книги превращается в подвиг. В iBooks также не существует навигации вперед/назад по последним посещенным страницам. Это приводит к тому, что, нажав на сноску, читатель не может вернуться к последней прочитанной странице без хитрых манипуляций.

Так или иначе

Скачивайте наши «валькирии» на свое мобильное устройство в удобном виде и таскайте с собой всюду. При помощи одной электронной книги вы сможете удивить друзей и коллег, а также иметь уникальный объект для занимания глаз во время поедания пиццы!

Как и положено арт-объекту, каталог «валькирий» выделяется на любой книжной полке. Даже виртуальной!

***

Это уже второй проект, связанный с электронными книгами за последние полторы недели. Занял он у меня не намного больше времени, чем предыдущий. Мне кажется, грядет что-то интересное ;)

За последнюю вечность я так и не написал ни одного поста. Теперь же я вернулся и надеюсь, что мои черновики не заплесневели — буду писать и постить! Писать и постись! Как лучше всего заставить свой мозг очнуться и начать работать? Сделать что-то интересное и ресурсоемкое. Этим мы с Юрой и занялись. Мы взялись сделать проект за 24 часа. На него у нас ушло около 33-х часов. На двадцать шестом часу мы стали подозревать, что не укладываемся в сутки, а на 30-м уже были уверены, что немного опаздываем. Так или иначе, проект мы завершили, и один из нас отправился ужинать, а другой — писать пост, уснул лицом в клавиатуре и только сейчас нажимает кнопку «Опубликовать» ;)

Идея проекта

Идея проста и этим привлекательна — дать пользователям айфона читать книги без установки дополнительных приложений. Мне она понравилась тем, что я люблю простые и изящные решения. Юра же был заинтересован в ней невероятно, потому что на свой залоченный айфон он не мог установить ни одно приложение. Исходя из поставленной задачи (никаких установок из AppStore или Сидии), мы поняли, что придется делать настоящее html-приложение. Я не помню, как их называет Эппл ;)

Проектирование

Первые наработки, созданные более полугода назад, напоминали приложение iBooks, которого тогда еще не существовало. После присоединения к проекту я предложил идею «отдельная книга — отдельная иконка». Таким образом, каждая книга становилась отдельным приложением. Вся библиотека была на сервере, а у пользователя только то, чем он пользуется. Кроме этого трендового подхода к организации информации был и еще один плюс — чтение книги заключалось только в чтении и ничего лишнего. Сделать что-то еще с книгой было невозможно. К минусам данной идеи стоит отнести неудобство хранения больше двух-трех книг теми, у кого на экране айфона много иконок. Мы решили, что можем с этим смириться, а выход iOS 4 доказал, что мы приняли правильное решение: теперь книги можно дюжинами складывать в папки.

Работу приложения можно разделить на два этапа. Первый этап: выбор или создание книги и последующее добавление ее иконки на Home Screen. Второй этап: чтение добавленной книги, доступной даже если айфон не подключен к интернету.

На данный момент поддерживаются .html и .fb2, но мы добавим и другие в скором времени.

Интерфейс

Наконец-то картинки ;) Можно было сравнить макеты с готовым продуктом, но в данный момент сайт не работает. Мы работаем над тем, чтобы восстановить его как можно скорее.

Все началось с иконки приложения и различных размеров для нее. Я надеялся, что html-приложения тоже могут иметь различные иконки в зависимости от разрешающей способности экрана, на котором они показываются. Оказалось, что не могут ;(

Затем пошли страницы, экраны и длинные списки. Как только пользователь попадает на сайт приложения, он может найти книгу и посмотреть каталог книг или создать книгу из файла в интернете. Результаты поиска и каталог книг выглядят одинаково, разве что в каталоге можно отфильтровать книги по жанру.

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

Иконка книги добавляется на Home Screen, и так завершается первый этап.

В следующий раз, когда пользователь нажмет на иконку книги, он увидит экран загрузки (на четвертом айфоне книга полностью загружается за пару секунд, а на айфоне 3GS немного дольше). После того, как книга загрузится в память телефона, ее можно читать. Приложение автоматически запомнит последнее прочитанное место и в следующий раз перемотает на него.

Вот так просто и вот так здорово ;)

Для тех, кто зашел на сайт не с одного из поддерживаемых устройств, существует специальная красивая страница (сейчас немного отличается).

Интересные детали

• Весь интефейс на 100% создан в векторном редакторе
• Все иконки и логотипы в приложении в векторном формате SVG
• Все графические элементы кроме иконок, логотипов и плашки в форме стрелки, сделаны на чистом CSS. Да, именно так! Эти градиенты, тени и фоны не картинки, а строки в файле со стилями!
• Иконка сайта, которая добавляется на Home Screen для веб-приложений в iOS 4.0 выглядит размытой и некрасивой. Единственный способ победить эту проблему — обновиться до iOS 4.1
• Все использованные шрифты установлены по-умолчанию в айфонах, айподах тачах и айпадах
• Благодаря всему тому, что перечислено выше, приложение выглядит одинаково на iPhone, iPhone 3G, iPhone 3GS, iPhone 4 and iPod Touch всех версий. Результаты работы на айпаде ожидаются в ближайшее время ;)

iPhone 4 и обычный iPhone. Практически идентично ;)

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

Ого, сколько текста. Я столько не прочту

Отправляйся со своего айустройства на сайт проекта (скоро вновь заработает) для того, чтобы скачать книги прямо на рабочий стол и прочесть их позже. Никакого дополнительного программного обеспечения не требуется. Поддерживаются форматы .html и .fb2. Мы любим вас!

Какой способ организации информации кажется людям самым простым? На первом месте, конечно, выбросить все данные в мусор и забыть о них. На втором месте, я думаю, идут таблицы. Люди любят таблицы. Им они очень нравятся. Нравятся настолько, что компьютерам Эппл предрекали провал без программы для работы с электронными таблицами (что-то типа Numbers или Excel). И, если мне не изменяет память, именно для выполнения этой задачи был взят на работу очкастый мальчик Билл с его компанией Майкрософт, который жаждал добраться до Mac OS и вдохновиться ее идеями…

Так, я отвлекся, вернемся к таблицам. Я знаком с многими офисными работниками, которые даже обычные тексты набирают в Экселе — так им легче организовать нужные им куски информации в пространстве и работать с ними. Таким образом, любовь к таблицам среди народных масс необычайно высока. К сожалению, любовь не значит умение делать их удобными для восприятия. Я влюбился в ничтожно малое количество таблиц из всех встреченных мной. Да и то, к паре из них и я приложил руку, а скорее голос, потому что объяснял, что исправить. Остальные же таблицы вызывают у меня ощущение тюрьмы для информации — она может быть интересной, увлекательной, удивительной, но при этом заключенной в маленькую камеру, из которой не выбраться. А все остальные данные тоже сидят по своим камерам и на них одинаковые оранжевые комбинезоны.

К чему такое длинное вступление?

Когда мы начали работать над новым дизайном сайта Инвест-газеты, ответственный за весь проект сразу предупредил меня, что нужно ощущение журнала (все время работы я потешался над тем, что журнал назвали газетой ;). Значит, без элементов визуализации информации, в какой-то мере инфографики, было не обойтись. Если со всякими гистограммами, ненавистными круговыми диаграммами, картами и прочим было все понятно, то таблицы, даже грамотно составленные и красивые, были все теми же клетками для несчастной информации. В поисках решения мы перебрали несколько вариантов и остановились на одном, который выглядел удивительно простым и в то же время самым подходящим. Так я познакомился со спарклайнами.

Что такое спарклайны?

Словарное или очень точное определение можно прочесть в википедии, но до него я сам добрался только что (в русской версии вики спарклайны назвали искрографиками, что опять напоминает нам о странных переводах). Спарклайны — маленькие графики прямо в таблице или в тексте, раскрывающие дополнительную информацию о данных, представленных в определенной ячейке, но при этом не так точны как детальные графики. Например, если мы указываем стоимость мяса единорога, то график рядом с цифрой может показывать динамику изменения этой стоимости за последний год. Конечно, это не даст нам точных данных, но мы сможем проследить общую картину изменений. Как известно, мясо единорога подросло в цене за последний квартал, что и будет отражено на графике рядом с цифрой:

Как делать удобные спарклайны?

Для того, чтобы спарклайны помогали воспринимать информацию в таблицах, а не затрудняли ее чтение, сначала надо определиться, нужны ли они и в каких колонках. После этого надо принять важное решение: какую же из сторон информации в колонке следует иллюстрировать, а также, что за тип графика будет наиболее полезен? Если вернуться к описанному выше мясу единорога, то можно показывать динамику изменения цены, при этом указав среднюю величину, или популяцию однорогих животных (график в виде кривой и выделение другим цветом фона или полоской среднего значения). Далее будет несколько примеров, в которых весь этот текст становится удобным и понятным.

Но перед тем как перейти к картинкам-примерам (я — мастер нагнетания обстановки, правда?), хочу остановиться на некоторых графических характеристиках спарклайнов. Многие из них, если не все базовые, перечислены и проиллюстрированы Эдвардом Тафти (он и придумал название спарклайнам) еще в 2004-м году в статье Sparklines: theory and practice. Многие решения и выводы у нас с ним совпали, хотя я прочитал его статью в конце работы над спарклайнами.

Как же все-таки это выглядит?

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

В этой таблице проиллюстрированы спарклайнами колонки с последней зафиксированной температурой (Last known temperature) и приятностью запаха воздуха (How likely air smells). Во втором случае используется похожее на progress bar решение, что позволяет быстро и удобно воспринимать информацию.

В колонке с температурой показана динамика ее изменения на протяжении времени года и отмечен диапазон значений температуры, в котором человек чувствует себя комфортно. Благодаря спарклайнам нам удалось не только показать как скакал столбик термометра, но и дать общую картину того, насколько приятно и комфортно было в это время года. Превосходно! Единицы измерения температуры указаны рядом со значением — это была рекомендация по общему оформлению таблиц на портале. При небольших объемах информации так легче воспринимать данные.

Особое внимание хочу обратить на колонку продолжительности (Term). Вместо того, чтобы создавать две колонки для первого и последнего месяца времени года, достаточно указать их рядом в одной колонке. Меньше колонок — человечнее таблица ;)

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

Благодаря спарклайну в колонке невыполненных домашних работ (Homeworks spoiled) можно увидеть как часто с 1 по 10 класс та или иная игра завоевывала время и мешала сделать заданное домой.

В колонке результатов (Overall result) видно как хорошо или плохо в случае с Pong проходилась та или иная игра. Чем больше палочек вверху, тем круче!

В первой колонке производитель игры указан сразу после ее названия. Таким образом, сэкономлена еще одна колонка. Таблица не стала менее приятной для восприятия и даже напротив — более удобной.

Делая эту таблицу, я веселился больше всего, прикидывая, оценивая, спрашивая друзей и пытаясь вспомнить то, что обычно не помнишь.

Начнем с последней колонки — уровня громкости после 21 средней дозы (Music volume after 21 average doses). Данные указаны в децибеллах, что не мешает нам показать динамику изменения по ходу приема алкологя внутрь. Фактически это тот же график, что и в первом примере — динамика изменения значения — но оформлен он в стиле колонок эквалайзера, чтобы информацию было интереснее читать.

В колонке количества выпитых друзьями за 2005–2009 годы бутылок указано значение на начало периода (2005-й год) и на конец (2009-й), а также динамика изменений, скажем, по месяцам или даже по дням. Цвет цифры указывает на то, выросла ли цифра по сравнению с предыдущим отчетным периодом (начало 2005-го года). Для удобства чтения начало и конец графиков отмечены красными точками, а также добавлен легкий градиент, улучшающий их прочтение. Сравните с графиком в первом примере, где градиент был невозможен из-за указания диапазона комфортных температур.

***

Кроме украшения и превращения таблиц из тюрем в информационные курорты спарклайны помогают во многих случаях заменить различные детальные графические визуализации данных или даже представить информацию более полно и интересно, чем какая-то ничтожная круговая диаграмма (гори в аду!!!). Например, Google Analytics и Flickr активно используют спарклайны для более наглядного представления статистики посещений в сжатом виде или даже обозначения ссылки на статистику, как в случае с фликром.

Пример использования спарклайнов на фликре (вверху) и в Google Analytics

Я очень люблю готовить и очень редко пользуюсь придуманными до меня рецептами. В любом случае, я их почти всегда нарушаю. На днях я сделал очень вкусный и красивый салат, который назвал «Prawn the Queen». Его рецепт и инфографику по приготовлению я представляю вашему вниманию. Будем считать это пром-дизайном ;)

Рецепт

5 пластинок карамболя (starfruit) толщиной не больше 4 мм

5 креветок 70 калибра или чуть крупнее

5 листьев салата Айсберг

30 г майонеза

30 г оливкового масла

Листья салата порвать руками на кусочки вкусного размера, туда добавить разрезанные пополам пластинки карамболя. Если удастся найти в магазине не пятиконечный, а шестиконечный, то будет вообще замечательно — получится по две короны с одной пластинки ;) Креветки отварить, почистить и добавить к салату и карамболю. Можно купить уже вареные креветки, тогда их надо просто разморозить. Маойнез смешать с оливковым маслом до однородной массы, залить этим соусом уже смешанный салат, еще раз все перемешать и наслаждаться. Это порция на одного человека.

7 страниц, по одной на каждый день недели, кружащихся в бесконечной рефлексии увлекательной жизни. Лучший подарок офисному работнику.

Однажды знакомый, который занимается чем-то связанным с перетаскиванием цифр из одной колонки в Экселе, в другую, поинтересовался: «Вот ты занимаешься тем, чем ты занимаешься. И не скучно тебе?» Поскольку то, что я делаю, включая написание этого поста, вряд ли может соревноваться с увлекательностью мира цифр и, будем откровенны, мира Экселя, я пустился в объяснения с целью доказать обратное. Я думаю, что секрет как и работы моего знакомого, так и моей, заключается в том, что нет ничего более бессмысленного, чем заниматься чем-то из-под палки и без удовольствия. Отмывая морских котиков от нефти, подшучивая над бозоном Хиггса или делая сайты, надо делать это легко и непринужденно, пребывая в хорошем настроении, тогда и идеи появятся хорошие и приятные.

Обложки

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

Юра ответил мгновенно:

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

Это тоже не вызвало протестов. После чего Юра предложил использовать метафору газеты и журнала по всему сайту, а не только в одном блоке, как я задумывал изначально. Я дополнительно нарисовал заглушки для тех номеров, у которых по каким-то причинам нет изображений обложки или первой страницы. Их можно увидеть на странице архива печатного издания (номера 43 и 35) и вживую на сверстанном примере.

С полуночи ночи с 13 на 14 октября 2009 года в Украине начинают действовать новые и не реликтовые правила набора телефонных номеров. Поменялся код выхода на международную/междугородную линию: вместо 8 надо набирать 0. Но это не главное изменение. Важно то, что набор номера телефона приведен в соответствие с самим номером: коды украинских областей, городов и операторов теперь соответствуют номеру в международном формате без кода страны +380. Это логично, ведь если мы звоним в пределах города, то не набираем код города. Поэтому, при звонке в пределах страны нет смысла набирать код страны ;) Иллюстрации в таких случаях говорят больше, чем слова.

Так выглядит обычный украинский номер телефона в международном формате:

Звонки по Украине

Раньше в пределах Украины (будем считать, что звонят не из Киева ;) его набирали так:

Теперь его будут набирать так:

Это касается не только городских, а любых украинских номеров телефонов. Теперь после гудка надо набирать не 067, 050, 093 и т. п., а 67, 50 и 93, что соответствует реальным кодам операторов.

Тем, кто распространял свой номер телефона в международном формате (например, +380 67 555-55-55) ничего не грозит — они все так же доступны и грамотны. Тем же, кто записывал номер сотового и офисного телефона в стиле 8 067 555-55-55 (оператор тут не важен, важно то, что телефон записан в произвольном формате, соответствовавшем устаревшим правилам набора телефонного номера, но не самому номеру) я могу передать сожаления и привет. Пора писать грамотно, к чему призывал не только я. Насколько я понимаю, для тех, кому ненавистны эти +380 в начале номера телефона, появилась возможность набирать с сотовых телефонов номера начиная с нуля и не дожидаясь никаких гудков (например, 0 67 555-55-55). Но это можно будет проверить только через пару часов.

Я не знаю, как там операторы сотовой связи будут поддерживать набор телефонов через восьмерку, но им, вроде бы, рекомендовали не отключать эту возможность до декабря. Мой Life ;) меня заспамил сообщениями об изменениях в наборе телефонных номеров.

Звонки за границу

Допустим, что мы звоним другу, а лучше милой подружке, в Японию. Ее номер

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

Использование 0 вместо плюса выглядит очень логичным, ведь именно на этой кнопке располагается плюс на клавиатуре большинства телефонов, а для его ввода необходимо просто подольше подержать нажатым ноль.

***

Я не изменю ни одного номера в телефонной книге на компьютере, в айфоне и даже на листиках с телефонами — они все записаны в международном формате от плюса до последней цифры. Сочувствую тем, кому придется вручную перебивать записную книжку в какой-нибудь модели сотового телефона, которая не поддерживает синхронизацию.