Вступление
Этот канал в «Медиуме» начался два года назад с текста про нашу редакционную систему «Монитор» — с тех пор ни один другой пост не обошел его по популярности. Но за это время «Монитор» сильно изменился: из двух отчетных лет мы целый год потратили на полную переделку системы.
Можно подумать, что у нас шило в заднице: зачем тратить год на переделку хорошей системы, которая была запущена незадолго до этого? Ответа тут два: во-первых, у нас правда шило в заднице. Во-вторых, нам пришлось.
Первый «Монитор» был сделан очень быстро для издания, которого еще не существовало. Слава богу, многие вещи мы угадали — все-таки большая часть команды работала в «Ленте.ру» и знала, чего ей нужно от редакционной системы. Но «Медуза» — не «Лента», на запуске мы еще не осознавали, сколько у нас будет форматов и как именно будет выглядеть реклама. Мы не были в курсе про игры, тесты, нативные материалы, «Вечернюю Медузу» и еще примерно миллиард вещей, которые появились за прошедшие два года.
В результате мы столкнулись с классической проблемой масштабирования — существующая система была хороша для текущих задач, но не подразумевала развития. А поскольку не развиваться нельзя, мы делали костыли. Их становилось все больше. Ничего хорошего это не предвещало.
И мы потратили год на то, чтобы все переделать. Конечно, год — лукавая цифра. Ни один разработчик «Медузы» не занимался новым «Монитором» целый год — в действительности речь шла о нескольких месяцах. Но поскольку задача оказалась сложная и была запараллелена с десятью другими проектами, процесс растянулся на невероятный срок, превратился в страшную головную боль и крики отчаяния (а также в ставшую мемом фразу «Это будет в новом Мониторе», которую приходилось произносить почти на каждую просьбу что-то улучшить в текущей системе).
О проблемах планирования и быстрой разработки мы напишем как-нибудь в другой раз, давайте лучше покажем, что мы сделали с «Монитором».
Что изменилось?
Далеко не все (хотя пост двухгодовой давности сейчас читать смешно). За два года «Монитор» оброс большим количеством сервисов, многие из которых в изменениях не нуждались, а многие можно было не трогать, хотя и хотелось. Основные изменения коснулись двух частей монитора — экрана «24 часа» и (самое главное) редактора текстов. Это не все, что мы сделали, но это самое заметное и про это интереснее всего говорить.
24 часа
Как и раньше, это главный экран для редакции. Здесь — все материалы, которые прямо сейчас делает или уже выпустила редакция за последние 24 часа. Изменения на этом экране относительно прошлого «Монитора» незначительны, но все же за два года многое случилось, поэтому все же опишем, как это работает. Двигаемся сверху вниз.
Поиск переехал из отдельного экрана. Теперь он здесь, на самом верху 24-х часов. Тут рассказывать особо нечего. Для статистики любой результат запроса можно выкачать и сохранить табличкой.
Но если вам нужно быстро найти какой-то материал, вы вряд ли пойдете в этот поиск. Вы нажмете cmd+k (здесь и далее указаны сочетания клавиш в MacOS) — и откроете быстрый поиск. Тут заодно имеется минимальная статистика по материалам.
Важное нововведение: мы стали разделять редакционные материалы и партнерские. А каждый партнер (не только рекламодатели, но и по программе «Друзья Медузы») теперь заведен в «Мониторе» отдельно — теперь нам не приходится каждый раз загружать их логотипы, да и статистику легче считать. А редакция не видит в 24-х часах партнерские материалы.
Дальше — «Заветы». Раньше это было просто текстовое поле, теперь появилось форматирование и кнопка «Сохранить». Кнопка «Сохранить» всех бесит, поэтому мы скоро слегка изменим этот блок.
Затем идут три подобных блока: запланированные материалы (выходят не сегодня, а позже, в конкретный день), в работе и опубликованные.
У материалов есть разные индикаторы.
— Цветовое кодирование слева обозначает тип материала.
— Красная плашка справа значит, что у материала нет картинки.
— Зеленая плашка обозначает, что материал стоит на главной странице. На ней отображаются просмотры, а также другие экраны, куда этот материал затянули.
—Бежевый цвет в клетках соцсетей обозначает, что материал повесили в соцсеть «Медузы». Цифра обозначает количество лайков и шеров.
Редактор
Самое главное (и самое сложное), что потребовалось сделать— переделать редактор. Чтобы попасть в него, нужно просто нажать на зеленую кнопку — и сразу выбрать тип материала.
Есть способ еще быстрее: нажать cmd+j. Тогда откроется тот же список:
Соответственно, чтобы написать новость, не надо никуда кликать: надо нажать cmd+j и Enter. Новостникам важна скорость.
Как видите, типов материалов у нас стало довольно много. Первый блок — материалы, которые использует «Медуза». Второй блок нужен для путеводителей «Атлас» (у них, кстати, 24 часа устроены слегка по-другому, но про это мы отдельно напишем в другой раз). Третий блок — технические типы материалов. Промо дает возможность сделать материал, который фактически является ссылкой на любую страницу. Ротация — поставить на одну позицию несколько материалов.
Давайте для примера создадим какой-нибудь фичер.
В редакторе больше нет кнопки «Сохранить» — все сохраняется само. Обратите внимание, даже заголовок в 24-х часах (они слева) появляется в ту же секунду, когда мы заполняем соответствующее поле в редакторе материала.
Теперь, собственно, как происходит работа с материалом. Раньше у нас было два режима — для редактора и для фоторедактора. Теперь режим один. Это сделано по многим причинам, одна из главных заключается в том, что почти все редакторы имеют дело и с фотографиями, и с видео, и с эмбедами всех типов; прыгать между режимами неудобно. Новый интерфейс разделен на две равные части — левый для верстки и работы с текстом, правый — для работы с медиаобъектами (о них потом).
Мы избавились от кучи раздражающих вещей: например, если раньше копирование текста лишало его всех стилей (что разумно в принципе, потому что можно случайно сломать всю верстку), то теперь стили убиваются, но не все — болд, италик и ссылки остаются. Это дает возможность копировать текст из Google Docs (там, правда, есть еще глюки, боремся), а также менять местами куски внутри текста без двойной работы по проставлению ссылок.
Отдельной сложной задачей было сделать удобное удаление кусков текста; так, чтобы с помощью Backspace можно было удалить картинку, а также выделить весь текст, несмотря на наличие медиаобъектов.
Редактор существует в двух режимах — обычном и блочном. Обычный режим — это работа с текстом. Блочный — это верстка. Хотите подвигать картинки? Вам в блочный режим.
Блочный режим можно включить самому (и тогда вы его сами будете выключать), но он может включиться (и выключиться) самостоятельно — если вы хотите затащить медиаобъект из правой колонки. Обратите внимание, временный блочный режим для перетаскивания объектов работает немного по-другому: редактор подсвечивает поле для перетягивания, чтобы оно было не слишком маленьким.
Инструменты для работы с текстом открываются при выделении слова, тут все понятно. Количество инструментов постепенно растет, недавно, например, появился элемент «Дисклеймер».
Под редактором находятся другие поля, связанные с текстом — ссылка на источник, цитата, текст под материалом (авторы и важные дополнения), тексты для социальных сетей (они отправляются в твиттер и в канал #socmedias в слеке в помощь человеку, который сидит на соцсетях), текст для шер-картинки (если хочется поменять стандартный заголовок). Этих полей постепенно становится больше.
Мы улучшили работу с источниками — крайне важная вещь для новостников. Если раньше у нас был каталог источников (дико сложный), то теперь «Монитор» поумнел и сам сохраняет источники: редактор залил урл, «Монитор» угадал источник. Если не угадал, редактор пишет название, «Монитор» в следующий раз не ошибется.
Теперь переходим в правую часть редактора — в медиаобъекты. Что такое медиаобъекты? Все, что не текст. Медиаобъекты более-менее можно разделить на три типа (это по состоянию на сейчас, их постепенно становится больше):
- Картинки
- Эмбеды
- Специальные блоки
Картинки заливаются дрег-эн-дропом.
Все инструменты работы с картинками вот тут. Сейчас количество настроек для картинок ограниченное, но мы в ближайшие месяцы добавим много новых инструментов.
Как уже было сказано, в текстовом редакторе никакие медиаобъекты редактировать нельзя, но туда выводится информация обо всех включенных настройках, а если вы хотите отредактировать медиаобъект, то можете кликнуть в текстовом редакторе — и правая колонка отскроллит к нужному объекту и подсветит его.
Эмбеды копируются так: берешь урл эмбеда (например, ютьюб), кликаешь в редактор медиаобъектов и нажимаешь cmd+v. Вот так:
При этом и картинку, и эмбед можно, разумеется, залить и обычным способом, для этого есть кнопки добавления (смотрите на те, которые снизу; сверху фильтры, а глазик дает возможность скрыть весь медиаредактор, если он вам мозолит глаза):
Блок Читайте также устроен крайне просто: добавляешь блок через вышеупомянутую кнопку, а дальше в выпадающем поиске подбираешь статьи по теме (никаких автоматических блоков у нас нет, это вполне осознанно; можно и «Читайте также» поменять на другие слова).
Интереснее работают только что запущенные Сноски. Вот как они выглядят на сайте:
Чтобы завести сноску в «Мониторе», идете в медиаредактор, нажимаете на «Сноску»:
В медиаредакторе появляется новый объект:
Заводите текст (в сноске доступны минимальные инструменты верстки):
Теперь надо привязать сноску к фразе в тексте. Идете в текст, выделяете слово, нажимаете на сноску («А» в коричневном квадрате) и выбираете ту сноску, которая вам нужна. Одну сноску можно добавлять в текст сколько угодно раз — удобно, если, например, у вас очень много героев и каждый раз нужно напоминать, кто это.
После добавления сноски она становится видна в редакторе. При нажатии на нее (серый текст в скобках), медиаредактор проскроллит экран к нужной сноске.
Предпоследнее про редактор: у нас и раньше была штука под названием Поля (здесь можно хранить какие-то полезные тексты и комментарии, которые могут понадобиться при работе с материалом), но раньше она находилась в правой колонке и занимала много места. Сейчас Поля стали отдельным слоем поверх всего. При нажатии открывается большое текстовое поле. Если там что-то есть, появляется красное уведомление.
Ну и последнее: про пуши. Их можно отправить как из 24 часов, так и из самого материала. Нажимаете на соответствующую кнопку:
И открывается соответствующий попап. На пуши в вебе сейчас подписаны 677 000 человек.
Ладно, закончим с редактором. Давайте пройдемся по другим закладкам, которые здесь в материале:
Превью: это предпросмотр материала. В предыдущем «Мониторе» превью не соответствовало реальному виду материала на сайте и в приложениях. В этом соответствует. Ну и шер-картинка, наше все.
Можно скопировать прямую ссылку — например, чтобы показать рекламодателям неопубликованный материал, но при этом не публиковать его. Эта ссылка временная, в какой-то момент она перестает работать.
Следующая закладка — Выпуск. Тут нам показывают, как будет выглядеть анонс материала во всех существующих у нас форматах:
Следующий экран — про рекламу. Пока он довольно примитивный, но на него большие планы.
Ну и последняя вкладка — Настройки. Слева, кажется, все понятно. А справа — режим Pro. Замена стандартных шеров на кастомные картинки, подключение сложных модулей. То, что требуется для сложных материалов с участием разработки.
Это все? Нет. Во-первых, мы показали только редактор фичера. А еще есть десяток других типов материалов. Например, карточки, где весь материал разбит, как нетрудно догадаться, на карточки:
Есть тесты — с вопросами, ответами, комментариями к ответам, фоном материала в медиаредакторе…
…и результатами в конце.
Есть игры — фактически, материал, к которому подключается внутренний медузовский эмбед. Этот интерфейс дает нам возможность подключать также десяток разных админок с тестами разных механик — для скорости мы их делаем аутсорсными командами и не заводим в «Монитор» (хотя скоро начнем). Про тесты напишем отдельный текст где-то через месяц-другой.
А есть в одной картинке, вообще без текстового поля.
Или вот, например, «Вечерняя Медуза» — ежедневная рассылка в Телеграм и почту создается теперь как обычный вид материала.
Это, разумеется, не весь «Монитор». Есть еще куча всего. И в самом «Мониторе» (мы, например, отдельно расскажем, про нашу систему аналитики для рекламодателей «Инсайт»), и в слеке, и много где еще. Есть выпуск — место, где собираются экраны сайта (пока материал не затянут в выпуск, его никто не увидит).
В общем, многое еще имеется, но этот текст уже неприлично длинный, а нам нужно заниматься другими делами — так что на сегодня хватит. Ждем ваших реакций, спасибо за внимание.
