Я в интернете


Телеграм

Твиттер

Ютюб

Тикток

Фейсбук

Вконтакте

РСС    Джейсон-фид

Есть автоматические трансляции в Тумблер и Же-же. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

Подписаться на блог

Блог

Позднее Ctrl + ↑

Карты забегов серии Московского марафона

Мы в бюро сделали карты для Московского марафона и остальных забегов серии. Всего получилось 50 карт — 25 на русском и 25 на английском. Это маршруты двух из четырёх дистанций Московского полумарафона, прошедшего в мае:

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

А это маршрут июньского Красочного забега, версия на английском:

Дизайнеры — Камиль Миндубаев и Сергей Чикин.

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

Сходите почитайте рассказ о проекте на сайте бюро. Там даже опубликовано наше руководство (Гугль-док).

Отдельное внимание прошу обратить на ведро — простыню промежуточных вариантов. Это одно из самых длинных и подробных вёдер в бюрошном портфолио, и при этом у меня ощущение, что мы там лишь коротенечко пробежались по основным штукам.

Книга «Пользовательский интерфейс»: часть четвёртого раздела

Недавно мы открыли часть четвёртого раздела электронного учебника «Пользовательский интерфейс». Четвёртый раздел называется «Экраны», а новые главы — «Окна» и «Формы».

Разработчики нередко злоупотребляют окнами, но управление ими не относится к задаче пользователя. Пользователи вынуждены раздвигать их туда‑сюда, чтобы добраться до нужного или увидеть то, что они ищут. Значительная часть главы «Окна» посвящена тому, как не плодить их.

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

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

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

Что почитать на выходных — 160

Вот:

  1. Ваши интерфейсы меня нервируют. Игорь Адаменко.
  2. С кофеваркой надо разговаривать. Интервью Дениса Филиппова, главного по речевым технологиям в Яндексе. «Грубо говоря, наш синтез речи умеет говорить. И надо выяснить, какие числа в нем нужно крутить, чтобы он начал говорить как, не знаю, таджик. Или как грузин. Или армянин. Или русский из какого-нибудь региона с характерным говором».
  3. Change: Damned if you do, damned more if you don’t. «The right choice is almost always „change“».
  4. Fuck Facebook. Джон Грубер

Табы в редакторах кода

Во всех редакторах кода, которые я видел, табы используют для файлов. Вот ВС Код, например:

Это полная тупня: список файлов у меня и так слева есть, зачем мне он же ещё раз в табах?

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

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

Или, может, я просто не умею настроить?

Аудио по четвергам: «В грув»

Очередное название, с переводом которого я испытываю сложности. Прогрессив-пситранс:

Atmos: Into The Groove

Совсем хорошо становится с 3:55, но надо слушать по порядку, это же прогрессив.

Ещё прогрессив-пситранс: Суппенкаспа.

Как встроить Эгею 2.7 в свой сайт

В анонсе беты 2.7 я обещал рассказать, как встраивать её в существующие сайты. Понадобится платная версия движка.

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

Вам нужно сделать свою тему оформления на базе «Встраиваемой». Зайдите в папку themes и сделайте копию папки embeddable. Назовите как-нибудь нормально.

  1. Откройте файл theme-info.php и раскомментируйте в нём все строчки. Пролучится примерно так (это мой):
<?php return array (

  'display_name' => 'Минвайл',
  'max_image_width' => '1200',
  'meta_viewport' => 'width=device-width, initial-scale=1',
  'global_styles' => '../css/main.css',

); ?>

Самая важная тут с точки зрения нашей задачи — строчка global_styles. Тут нужно указать путь к стилям вашего сайта относительно папки Эгеи (а не этого файла).

  1. Зайдите в настройку Эгеи и выберите свою тему.
  1. В templates/layout.tmpl.php добавьте вёрстку шапки и подвала вашего сайта, то есть заверните содержимое блога в ту же обёртку, что на основном сайте.

Готово!

Всё будет выглядеть как настоящее, потому что к этой странице подцепляются те же стили, что и к другим страницам сайта. А внутренности Эгеи не разваливаются, потому что она также подцепляет ещё и собственные стили. Но делает это избирательно: она не подцепляет стили стандартных ХТМЛ-элементов и поля вокруг страницы. Поэтому эти части выглядят родными.

Если вам нужно перекрыть какие-то стили, используйте файл styles/overrides.css. Изначально он пустой.

Если вы используете систему сборки, то имеет смысл «запечь» стили «Встраиваемой» и ваши перекрытия в основной ЦСС-файл. Перенесите из папки вашей темы styles/main.css и styles/overrides.css куда-то в папку исходников стилей. Это нужно, чтобы Эгея перестала их подцеплять из папки темы. И заимпортируйте в общие стили сайта, например, с помощью СЦССа:

@import 'aegea-embeddable-styles/main';
@import 'aegea-embeddable-styles/override';

Так вы будете подключать один ЦСС-файл, а не три.

Опытный дизайнер в Деметер

Мне написал Андрей Ильинский и попросил рассказать о такой вакансии.

Реклама. Текст предоставлен клиентом

Ищу опытного дизайнера, который интерфейс соберёт и банером не побрезгует; единомышленника, которому интересно развивать марку и развиваться самому.

Дизайнер-единомышленник, на мой взгляд:

  • знает, чем отличается сделать от делать;
  • умеет излагать мысли без воды;
  • слушать и слышать, что говорит команда;
  • знает русский язык и пишет без ошибок;
  • не теряет качество на скорости;
  • щепетильно относится к деталям;
  • сначала договаривается, а потом делает (не наоборот);
  • собирает макеты в Скетче (иногда — Фотошопе).

Работа удалённая, но можно и в офисе на Серафимовича, 2.

Желающим предлагаю выполнить тестовое задание. На странице поисковой выдачи есть панель с фильтрами:

Какие, по-вашему, недостатки у этой панели и как бы вы её переделали?

Результат в формате джипега шириной 1000 пк присылайте на почту andreymbeat@gmail.com до 17 сентября. Ссылки на портфолио присылайте туда же :−)

Если остались вопросы — не стесняйтесь задавать.

Три уровня агрессии глагола

Хороший редактор избегает повелительного наклонения в интерфейсе и навигации. С чего бы программе или магазину командовать человеком?

Но повелительное наклонение само по себе нейтрально. В интерфейсе электронного киоска:

Вставьте купюры

В обращении на «мы» уже чувствуется пассивная агрессия и совковое хамство. На турникетах московского метро:

Проходим слева

А в обращении в прошедшем времени слышится угроза физической расправой при непослушании. В тёмном дворе:

Мобилу сейчас же отдал!

Если даёте инструкцию, используйте повелительное наклонение. Оно вполне уместно, а если инструкция прошеная — то и вовсе дружелюбно.

Железная дорога в Берлине

 6 мин

Поезд из аэропорта в город — красный, как обычные пригородные электрички в Германии:

Внутри:

Непонятно, WC значит, что туалет занят или свободен?

Куда едет:

Станция Хакешер-маркт. Городские электрички — жёлто-красные:

Внутри:

Схемы метро висят на соединении вагонов. На экране — название следующей станции и с какой стороны откроются двери.

Метро и городские железные дороги в Берлине объединены в одну систему и изображаются на общей схеме. Хотя визуально и поезда, и станции очень разные. Кольцевая линия здесь не метро, а электрички (S — schnellbahn).

Станция Остбанхоф:

Табличка:

По какому принципу на некоторых станциях написано слово «Берлин» в начале, а на некоторых нет — загадка. В Лондоне такая же петрушка: London Victoria, но просто Liverpool Street. Вроде обе станции в равной степени вокзалы.

Офигенное немецкое расписание:

На жёлтом фоне отправления, на белом — прибытия:

Зум:

Станция Потсдамер-плац:

Против часовой стрелки идёт линия S42, по — S41. Платформы обозначаются соответствующими иконками направлений. Снимают кино:

Станция Александерплац:

Пассажиры изучают расписание:

Обычная станция за пределами самого центра:

Станция «Варшауэрштрассе». Отсюда 10 минут пешком до «Бергхайна» — главного техноклуба мира. Хорошее место:

Главный вокзал Берлина. Расписание занимает два плаката:

Сейчас сюда приедет поезд во Франкфурт-на-Майне:

Смотрите, слева обозначение поезда с буквами A...G. Эта штука показывает, как именно поезд остановится на платформе. Под экраном на фото видно знак D. Это значит, вагон-ресторан остановится там, вагоны первого класса — в зонах A...C, а второго — в зонах E...G.

А вот схема остановки всех поездов на этой платформе:

Красная «струна» между двумя кружками — это где мы сейчас.

Пассажир знает свой номер вагона, поэтому сразу ждёт поезд там, где этот вагон остановится:

Красивый поезд:

Фотографии из поездок в марте и мае 2016.

Ещё Берлин:

Фотография DSCF6813 добавлена 9 ноября 2021 года, когда заметка «Берлин в марте 2016» переносилась из раздела «Мир» в блог и сокращалась

Ранее Ctrl + ↓