Весной я читал в Киеве лекцию о понимании задачи:

Все дизайнеры научились говорить «я решаю задачи». Но мало кто понимает, что это значит.

Я рассказываю, о том, как формулируются задачи на языке дизайна, а как — на языке бизнеса. В чём разница, и почему за задачи, сформулированные на языке дизайна, браться нельзя. Как обсуждать возможное решение и когда можно говорить на языке дизайна. Говорю, что когда понимание задачи достигнуто, его нужно написать и согласовать с клиентом. Рассказываю о принятом в бюро документе «Понимание задачи» и о том, как я пишу такие документы. Привожу примеры годных формулировок задач из практики бюро.

Это прям лекция, там больше двух часов с вопросами. Дизайнерам смотреть обязательно. Последние десять минут без видео — что-то сбойнуло в записи.

Ах да, ещё раз спасибо Андрею и Алексею за приглашение и организацию, а Ксении — за съёмку.

На следующий день: Сергей Король законспектировал.

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

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

Но это никак не отменяет того, что все эпловские провода — полное говно.

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

На клавиатуре есть кнопка «Капслок». Если её случайно нажать, то компьютер печатает большими буквами. Такое нормальному человеку не нужно никогда, поэтому во избежание ошибок эту кнопку нужно отключить:

Это в настройке клавиатуры, за кнопкой «Modifier Keys...»

Я так делал на всех компьютерах всю жизнь, и ещё ни разу не оказывался в ситуации, когда это создало бы хоть какие-то неудобства.

Ранее в серии:

• Ускорить клавиатуру на Маке (хит)
• Папки перед файлами в Файндере

В заметке о выпуске четвёртой версии схемы метро я рассказал об истории моей работы над схемами московского метро. Если ещё не читали, прочитайте сначала.

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

Оказалось, что да. Пятая версия схемы метро:

При одинаковом размере плаката текст получается почти на 35% крупнее, чем на официальной схеме:

Названия станций на окружной меняются каждые пару недель, так что, вероятно, какие-то детали придётся ещё подкрутить после её запуска.

Посмотрите страницу схемы у меня в портфолио.

Продолжаю разгребать заставки «Муз-ТВ».

«Парочки»:

Музыку списали у Джоша Винка (Josh Wink: Higher State of Consciousness).

Анонс в рекламном блоке:

«Соковыжималка»:

Куча других заставок — по тегу «Муз-ТВ».

Есть такой шрифт — Мирьяд-про. Он знаменит тем, что Фотошоп его включает, когда начинаешь писать по-русски шрифтом, в котором нет кириллицы.

В принципе он нормальный:

Но по иронии судьбы как раз кириллица в нём совершенно отвратительна:

Достаточно один раз увидеть его кириллические „ж“ и „к“, чтобы больше никогда его не использовать.

Как можно поставить слово «Март» почти по центру макета, но не совсем?

Как можно почти попасть вертикалью, но не совсем?

Как можно почти попасть правым столбиком фоток по высоте в левый, но не совсем?

Последние два примера у меня почти одинаковой ширины, но не совсем — специально не стал исправлять.

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

Синие кнопки стоят почти напротив друг друга:

Почти, но не совсем. Нужно или выровнять идеально, или, наоборот, развязать ещё сильнее, чтобы было ясно, что так и имелось в виду.

Надписи почти выровнялись левыми краями:

Почти, но не совсем. Нужно или выровнять, или, наоборот, поставить белую надпись по центру иллюстрации.

У стрелок вправо угол почти равен 90°:

Почти, но не совсем. Нужно или сделать ровно 90°, или разогнуть ещё сильнее.

Заголовки «Адрес», «Режим работы», «Телефон» почти такого же кегля, как и текст под ними:

Почти, но не совсем. Нужно или сделать заголовки такого же кегля как текст (и выделить жирным, например), или, наоборот, увеличить ещё сильнее, чтобы не оставалось сомнений.

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

Почти, но не совсем. Нужно или увеличить, или сравнять, иначе кажется что интерлиньяж съехал случайно.

Надпись «Ручная работа» вписана почти в круг:

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

Высота поля ввода почти совпала с высотой кнопок:

Почти, но не совсем. Нужно или сравнять, или увеличить разницу.

На этом макете используются два почти одинаковых цвета:

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

Правило: или совсем, или совсем не, но без почти.

Когда-то я начал выкладывать заставки Муз-ТВ времён начала 2000-х:

• «Наше»;
• «Шейкер», «Зажигай» и обратный отсчёт в конце рекламной паузы;
• «Жизнь прекрасна» и «Русские пряники»;
• «Муз-ТВ:2К»;
• «Муз-ТВ | 2010» (анонс и вся серия).

Но потом что-то перестал. Надо бы подлить ещё. Кто, если не я.

«Сиеста» — дневной эфир с живыми ведущими:

Охренеть же, как клёво глючили листики.

Анонс программы в рекламном блоке:

«Вечерний звон» — вечерний эфир с ведущими и звонками зрителей. Заставки были разные в разное время года. Зима:

Осень:

Лето:

Анонс:

В новогоднюю ночь ещё был «Новогодний звон», такой:

Мне нужно было скопировать структуру папок и файлов с одного диска на другой. Чтобы всё лежало так же по папкам, под теми же именами, но каждый файл весил 0 байт.

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

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

Пришлось попотеть, чтобы понять, как это сделать. У меня получилось так:

cd папка_которую_клонируем
find . -type d -print0 | xargs -0 -I {} mkdir -p папка_куда_клонируем/{}
find . -type f -print0 | xargs -0 -I {} touch папка_куда_клонируем/{}

Сложность была в том, что find возвращает список найденных файлов с пробелами в именах, и когда такие файлы передаёшь куда-то ещё, всё взрывается. Пришлось просить find в конце имени каждого найденного файла ставить символ 0 (-print0), а потом с помощью адской команды xargs это разбирать и скармливать в качестве аргументов другим командам. Учитывая, что я раньше ничего сложнее apachectl restart не писал, это была жесть.

Добавлено через полчаса: Читатели рассказали мне про -exec

Мой сайт работает на моём самописном движке на ПХП (единственное исключение — раздел «Блог», о нём в конце).

Файлы страниц сайта лежат в папках, соответствующих урлам разделов, например страница про Ангстрем лежит на сервере под именем .../www/projects/angstrom/angstrom.php. Задача этого файла — сгенерить ХТМЛ смысловой части этой страницы.

Метаданные

Рядом с файлом имя-папки.php должен лежать файл метаданных _имя-папки.php. Для Ангстрема он выглядит примерно так (выкинул часть полей для простоты):

<?php return array (

  'logo' => 'angstrom',
  'value' => '20140201',
  'title' => 'Ангстрем', 

  'x-showcase-title' => 'Ангстрем, конвертер всего',
  'x-copyright-years' => '2014...',

  'languages' => array (
    'english' => array (
      'title' => 'Ångström',
      'x-showcase-title' => 'Ångström, the converter',
    ),
  ),

) ?>

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

Там умная и гибкая система, которая позволяет делать отличия между сайтами на разных языках (ilyabirman.ru и ilyabirman.net) только там, где они нужны: домен, текст, правила типографики, твиттер-акаунт для шаринга; но всё остальное хранить в одном месте один раз.

Самое главное в файле метаданных — это поле logo. Это постоянный идентификатор страницы, который не поменяется, если я вдруг решу перенести её в другую папку. На нём завязаны многочисленные макросы. Например, на главной у меня есть этажик, где я показываю разные проекты в горизонтальной прокручиваемой полосе — «витрине».

Вот примерный код, который её рисует (подсветка синтаксиса глючит):

<?php $showcase_elements = array (
  'angstrom',
  'moscow-metro-multiplication',
  'therules-2-for-ios',
  'chelyabinsk-trams-2015',
  'emcee',
  'train-thirteen',
  'wireless-dj',
  'snooker-results-display',
  'moscow-metro-poster-vdnh',
  'forebruary',
  'moscow-metro-nanomap',
); ?>

<?php foreach ($showcase_elements as $showcase_element) { ?>
  <div class="b-showcase-element" style="width: 160px">
    <div class="b-showcase-element-image-wrapper">
      <div>
        <a href="<?= HREF ($showcase_element) ?>" class="nu">
          <img
            src="<?= FOLDER ($showcase_element) ?>i/icon-160@2x.png"
            alt="<?= strip_tags (TITLE ($showcase_element)) ?>"
            width="160" height="160"
          />
        </a>
      </div>
    </div>
    <div class="b-showcase-element-title">
      <a href="<?= HREF ($showcase_element) ?>">
        <?= EX ('showcase-title', $showcase_element)?>
      </a>
    </div>
  </div>
<?php } ?>

Макросы

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

• HREF ($logo) возвращает полный урл страницы по её идентификатору;
• FOLDER ($logo) возвращает путь к папке, в которой лежит страница;
• TITLE ($logo) возвращает название страницы;
• EX ($what, $logo) возвращает значение поля x-something из файла метаданных.

Я, как видите, использую EX и поле x-showcase-title для того, чтобы показывать особые заголовки в «витрине». Если я вдруг решу переименовать один из проектов и перенести в другую папку, и ещё сделать про него страницу на французском, чтобы она была доступна по адресу ilyabirman.net/french/обычный-путь-к-проекту — это займёт пару минут, не считая времени написания французского текста. При этому создавать папку /french/ на сервере и копировать туда все файлы не придётся — языковые элементы урла обрабатываются отдельно и на структуру папок на сервере не влияют.

Есть и другие макросы. CHILDREN вернёт массив всех дочерних для данной страниц. Например, в разделе проектов их список автоматически дополнится новым, если я создам подпапку со страницей нового проекта в ней.

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

Или вот есть ещё WITHIN, определяется так:

function WITHIN ($what, $id = false) {
  return AT ($what) or INSIDE ($what, $id);
}

Удобно использовать в меню, например, в котором плашку у текущего раздела надо поставить если мы в нём или любых его подразделах.

Есть макрос LANG, который возвращает текущий язык. Его удобно использовать, если страницы на разных языках отличаются двумя-тремя строками текста. Но чтобы не писать сто раз if (LANG == ’russian’) { ... }, можно просто положить в папке два файла — angstrom-english.php и angstrom-russian.php, тогда движок сразу возьмёт нужный из них.

Ещё есть TAIL, OFFSET, SIBLINGS, NEIGHBOURS и всякие другие, которые позволяют компактно и внятно выражаться в коде.

Я это называю макросами, а не функциями, потому что это точнее передаёт смысл, и ещё их можно вызывать без параметра $logo и без скобок (если других параметров нет), и тогда они сработают для текущей собираемой страницы:

<h1><?= TITLE ?></h1>

Шаблоны

У любой страницы в файле метаданных может быть поле apply-template — оно говорит движку, что надо пропустить страницу через определённый шаблон перед тем, как заворачивать в обёртку из меню и подвала.

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

Шаблон может не просто завернуть страницу во что-то, но и как угодно её обработать перед использованием.

Вот начало файла .../www/world/london-2011-may/london-2011-may-russian.php:

Лондон — лучший город, где мне доводилось бывать.
IMG_0333.jpg Парламент и Биг-бен в Лондоне

Достопримечательностям здесь совершенно необязательно быть в поле зрения, чтобы было понятно, где ты находишься. Каждая деталь напоминает об этом:
IMG_0238.jpg Телефонная будка, почтовая машина и автобус в Лондоне

Похоже на текст из редактора Эгеи, правда? Потому что я тут использую Нисден — форматтер Эгеи. Шаблон world-story автоматически пропускает текст через него. Поэтому тут автоматически работает всякая резиновость картинок, фоторамы и всё остальное, и в результате сам собой получается рассказ про Лондон.

Блог

Теперь про блог. Блог работает на Эгее и живёт своей жизнью, несмотря на внешнее сходство с остальным сайтом. Эгея, в отличие от остального сайта, использует базу данных для хранения заметок, комментариев и прочего. Сайту никак не мешает, что в папке /meanwhile/ у него живёт что-то «неродное». Он не находит там файла _meanwhile.php и поэтому считает, что эта папка для него не представляет ценности.

Мне надо, чтобы в блоге у меня использовался ЦСС с основного сайта, но всё же в нём есть несколько своих особенностей, поэтому напрямую я не могу залинковать тот же самый файл. Чтобы не носить общие для сайта изменения из одного файла в другой, я использую Галп, который автоматически собирает нужную версии ЦСС-файла для блога.

Ещё, как вы знаете, у меня есть русский и английский блоги. На самом деле их выдаёт одна и та же копия Эгеи, которая в зависимости от домена использует разные таблицы в базе данных.

Это недокументированная функция, но по секрету скажу что там, где у вас в Эгее лежит папка /user/, у меня лежит папка /users/ с двумя подпапками. Да, Эгея умеет быть многопользовательской уже много лет! Только никому не говорите. Если серьёзно, это работает на костылях. Заранее говорю, что не буду отвечать на письма с вопросом «как мне сделать так же».