Монитор 2.0: зачем мы опять все переделали

Вступление

Этот канал в «Медиуме» начался два года назад с текста про нашу редакционную систему «Монитор» — с тех пор ни один другой пост не обошел его по популярности. Но за это время «Монитор» сильно изменился: из двух отчетных лет мы целый год потратили на полную переделку системы.

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

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

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

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

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

Что изменилось?

Далеко не все (хотя пост двухгодовой давности сейчас читать смешно). За два года «Монитор» оброс большим количеством сервисов, многие из которых в изменениях не нуждались, а многие можно было не трогать, хотя и хотелось. Основные изменения коснулись двух частей монитора — экрана «24 часа» и (самое главное) редактора текстов. Это не все, что мы сделали, но это самое заметное и про это интереснее всего говорить.

24 часа

24 часа

Как и раньше, это главный экран для редакции. Здесь — все материалы, которые прямо сейчас делает или уже выпустила редакция за последние 24 часа. Изменения на этом экране относительно прошлого «Монитора» незначительны, но все же за два года многое случилось, поэтому все же опишем, как это работает. Двигаемся сверху вниз.

Поиск переехал из отдельного экрана. Теперь он здесь, на самом верху 24-х часов. Тут рассказывать особо нечего. Для статистики любой результат запроса можно выкачать и сохранить табличкой.

Поиск

Но если вам нужно быстро найти какой-то материал, вы вряд ли пойдете в этот поиск. Вы нажмете cmd+k (здесь и далее указаны сочетания клавиш в MacOS) — и откроете быстрый поиск. Тут заодно имеется минимальная статистика по материалам.

Быстрый поиск по cmd+K

Важное нововведение: мы стали разделять редакционные материалы и партнерские. А каждый партнер (не только рекламодатели, но и по программе «Друзья Медузы») теперь заведен в «Мониторе» отдельно — теперь нам не приходится каждый раз загружать их логотипы, да и статистику легче считать. А редакция не видит в 24-х часах партнерские материалы.

Типы материалов в 24 часах

Дальше — «Заветы». Раньше это было просто текстовое поле, теперь появилось форматирование и кнопка «Сохранить». Кнопка «Сохранить» всех бесит, поэтому мы скоро слегка изменим этот блок.

Заветы

Затем идут три подобных блока: запланированные материалы (выходят не сегодня, а позже, в конкретный день), в работе и опубликованные.

У материалов есть разные индикаторы.

Цветовое кодирование слева обозначает тип материала. 
Красная плашка справа значит, что у материала нет картинки.
— Зеленая плашка обозначает, что материал стоит на главной странице. На ней отображаются просмотры, а также другие экраны, куда этот материал затянули.
—Бежевый цвет в клетках соцсетей обозначает, что материал повесили в соцсеть «Медузы». Цифра обозначает количество лайков и шеров.

Цветовые индикаторы в 24 часах

Редактор

Самое главное (и самое сложное), что потребовалось сделать— переделать редактор. Чтобы попасть в него, нужно просто нажать на зеленую кнопку — и сразу выбрать тип материала.

Типы материалов «Медузы»

Есть способ еще быстрее: нажать cmd+j. Тогда откроется тот же список:

Быстрое создание материала по cmd+j

Соответственно, чтобы написать новость, не надо никуда кликать: надо нажать cmd+j и Enter. Новостникам важна скорость.

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

Давайте для примера создадим какой-нибудь фичер.

В редакторе больше нет кнопки «Сохранить» — все сохраняется само. Обратите внимание, даже заголовок в 24-х часах (они слева) появляется в ту же секунду, когда мы заполняем соответствующее поле в редакторе материала.

Создание материала в прямом эфире

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

Редактор фичеров

Мы избавились от кучи раздражающих вещей: например, если раньше копирование текста лишало его всех стилей (что разумно в принципе, потому что можно случайно сломать всю верстку), то теперь стили убиваются, но не все — болд, италик и ссылки остаются. Это дает возможность копировать текст из Google Docs (там, правда, есть еще глюки, боремся), а также менять местами куски внутри текста без двойной работы по проставлению ссылок.

Отдельной сложной задачей было сделать удобное удаление кусков текста; так, чтобы с помощью Backspace можно было удалить картинку, а также выделить весь текст, несмотря на наличие медиаобъектов.

Редактор существует в двух режимах — обычном и блочном. Обычный режим — это работа с текстом. Блочный — это верстка. Хотите подвигать картинки? Вам в блочный режим.

Ручной блочный режим — для верстки

Блочный режим можно включить самому (и тогда вы его сами будете выключать), но он может включиться (и выключиться) самостоятельно — если вы хотите затащить медиаобъект из правой колонки. Обратите внимание, временный блочный режим для перетаскивания объектов работает немного по-другому: редактор подсвечивает поле для перетягивания, чтобы оно было не слишком маленьким.

Автоматический блочный режим — для перетягивания медиаобъектов

Инструменты для работы с текстом открываются при выделении слова, тут все понятно. Количество инструментов постепенно растет, недавно, например, появился элемент «Дисклеймер».

Инструменты для работы с текстом

Под редактором находятся другие поля, связанные с текстом — ссылка на источник, цитата, текст под материалом (авторы и важные дополнения), тексты для социальных сетей (они отправляются в твиттер и в канал #socmedias в слеке в помощь человеку, который сидит на соцсетях), текст для шер-картинки (если хочется поменять стандартный заголовок). Этих полей постепенно становится больше.

Дополнительные поля у материала

Мы улучшили работу с источниками — крайне важная вещь для новостников. Если раньше у нас был каталог источников (дико сложный), то теперь «Монитор» поумнел и сам сохраняет источники: редактор залил урл, «Монитор» угадал источник. Если не угадал, редактор пишет название, «Монитор» в следующий раз не ошибется.

Работа с источником новости

Теперь переходим в правую часть редактора — в медиаобъекты. Что такое медиаобъекты? Все, что не текст. Медиаобъекты более-менее можно разделить на три типа (это по состоянию на сейчас, их постепенно становится больше):

  1. Картинки
  2. Эмбеды
  3. Специальные блоки

Картинки заливаются дрег-эн-дропом.

Заливка картинок в редактор

Все инструменты работы с картинками вот тут. Сейчас количество настроек для картинок ограниченное, но мы в ближайшие месяцы добавим много новых инструментов.

Настройки картинки

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

Отскролл по клику к нужному медиаобъекту

Эмбеды копируются так: берешь урл эмбеда (например, ютьюб), кликаешь в редактор медиаобъектов и нажимаешь cmd+v. Вот так:

Быстрое добавление эмбеда

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

Фильтры и кнопки добавления медиаобъектов

Блок Читайте также устроен крайне просто: добавляешь блок через вышеупомянутую кнопку, а дальше в выпадающем поиске подбираешь статьи по теме (никаких автоматических блоков у нас нет, это вполне осознанно; можно и «Читайте также» поменять на другие слова).

Как сделать блок «Читайте также»

Интереснее работают только что запущенные Сноски. Вот как они выглядят на сайте:

Сноски на сайте

Чтобы завести сноску в «Мониторе», идете в медиаредактор, нажимаете на «Сноску»:

В медиаредакторе появляется новый объект:

Новая сноска

Заводите текст (в сноске доступны минимальные инструменты верстки):

Заполненная сноска

Теперь надо привязать сноску к фразе в тексте. Идете в текст, выделяете слово, нажимаете на сноску («А» в коричневном квадрате) и выбираете ту сноску, которая вам нужна. Одну сноску можно добавлять в текст сколько угодно раз — удобно, если, например, у вас очень много героев и каждый раз нужно напоминать, кто это.

Добавление сноски в текст

После добавления сноски она становится видна в редакторе. При нажатии на нее (серый текст в скобках), медиаредактор проскроллит экран к нужной сноске.

Добавленная сноска в редакторе

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

Поля

Ну и последнее: про пуши. Их можно отправить как из 24 часов, так и из самого материала. Нажимаете на соответствующую кнопку:

И открывается соответствующий попап. На пуши в вебе сейчас подписаны 677 000 человек.

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

Превью: это предпросмотр материала. В предыдущем «Мониторе» превью не соответствовало реальному виду материала на сайте и в приложениях. В этом соответствует. Ну и шер-картинка, наше все.

Мобильный предпросмотр
Десктоп-предпросмотр

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

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

Десктопный предпросмотр анонса
Мобильный предпросмотр анонса

Следующий экран — про рекламу. Пока он довольно примитивный, но на него большие планы.

Редактор рекламы

Ну и последняя вкладка — Настройки. Слева, кажется, все понятно. А справа — режим Pro. Замена стандартных шеров на кастомные картинки, подключение сложных модулей. То, что требуется для сложных материалов с участием разработки.

Расширенные настройки

Это все? Нет. Во-первых, мы показали только редактор фичера. А еще есть десяток других типов материалов. Например, карточки, где весь материал разбит, как нетрудно догадаться, на карточки:

Редактор карточки

Есть тесты — с вопросами, ответами, комментариями к ответам, фоном материала в медиаредакторе…

Редактор теста

…и результатами в конце.

Редактор результатов теста

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

Редактор игр

А есть в одной картинке, вообще без текстового поля.

Редактор одной картинки

Или вот, например, «Вечерняя Медуза» — ежедневная рассылка в Телеграм и почту создается теперь как обычный вид материала.

Редактор «Вечерней Медузы»

Это, разумеется, не весь «Монитор». Есть еще куча всего. И в самом «Мониторе» (мы, например, отдельно расскажем, про нашу систему аналитики для рекламодателей «Инсайт»), и в слеке, и много где еще. Есть выпуск — место, где собираются экраны сайта (пока материал не затянут в выпуск, его никто не увидит).

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

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