Как «Медуза» Поменяла Систему Управления Контентом За Год

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

Редакция vc.ru публикует материал с разрешения авторов.

Как «Медуза» поменяла систему управления контентом за год

Введение

Этот канал на Medium стартовал два года назад с текст о нашей редакционной системе «Монитор» — с тех пор ни один другой пост не превзошел ее по популярности.

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

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

Во-вторых, нам пришлось.

Первый «Монитор» был сделан очень быстро для еще не существовавшего издания.

Слава богу, мы о многом догадались — ведь большая часть команды работала в «Ленте.

ру» и знала, что им нужно от редакционной системы.

Но «Медуза» — это не «Лента»; при запуске мы еще не осознавали, сколько у нас будет форматов и как именно будет выглядеть реклама.

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

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

А так как не развиваться невозможно, мы сделали костыли.

Их становилось все больше и больше.

Это не предвещало ничего хорошего.

И мы потратили год, все переделывая.

Конечно, год – это сложное число.

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

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

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

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

Не всё (хотя пост двухлетней давности сейчас читать смешно).

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

Основные изменения коснулись двух частей монитора — экрана «24 часа» и (самое главное) текстового редактора.

Это не все, что мы сделали, но это самое заметное и самое интересное, о чем можно рассказать.

24 часа

24 часа Как и прежде, это главный экран редактора.

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

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

Поиск перенесен с отдельного экрана.

Теперь он здесь, на самом верху 24 часов.

Здесь особо нечего рассказывать.

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

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

Вы нажмете CMD+K (здесь и ниже приведены сочетания клавиш в macOS) и откроете быстрый поиск.

При этом статистика по материалам минимальная.

Быстрый поиск с помощью CMD+K Важное нововведение: мы стали отделять редакционные материалы от партнерских.

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

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

Виды материалов за 24 часа Далее — Заветы.

Раньше это было просто текстовое поле, теперь есть форматирование и кнопка «Сохранить».

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

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

Материалы имеют разные показатели.

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

Цветовые показатели через 24 часа

Редактор

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

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

Виды материалов Медузы Есть еще более быстрый способ: нажмите CMD+J. Затем откроется тот же список: Быстрое создание материала с помощью CMD+J Соответственно, чтобы написать новость, вам не нужно никуда кликать: достаточно нажать CMD+J и Enter. Репортёрам важна скорость.

Как видите, видов материалов у нас довольно много.

Первый блок — это материалы, которые использует Медуза.

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

Третий блок – технические виды материалов.

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

Ротация – размещение нескольких материалов в одном положении.

Давайте создадим некоторую функцию в качестве примера.

Кнопки «Сохранить» в редакторе больше нет — всё сохраняется само.

Обратите внимание, что даже заголовок в 24 часах (они слева) появляется в ту же секунду, когда мы заполняем соответствующее поле в редакторе материалов.

Создание живого контента Теперь, собственно, как работать с материалом.

Раньше у нас было два режима — для редактора и для фоторедактора.

Теперь есть только один режим.

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

Новый интерфейс разделен на две равные части — левую для верстки и работы с текстом, правую для работы с медиа-объектами (о них позже).

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

- жирный шрифт, курсив и ссылки остаются.

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

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

Редактор существует в двух режимах — обычном и блочном.

Обычный режим работает с текстом.

Блок — это макет. Хотите переместить фотографии? Вы находитесь в режиме блокировки.

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

Обратите внимание, что режим временного блока для перетаскивания объектов работает немного иначе: редактор выделяет поле перетаскивания, чтобы оно не было слишком маленьким.

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

Количество инструментов постепенно растет; недавно, например, появился элемент «Отказ от ответственности».

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

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

Постепенно таких полей становится больше.

Дополнительные поля для материала Мы улучшили работу с источниками – крайне важная вещь для профессионалов новостей.

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

Если угадаете неправильно, редактор пишет название, «Монитор» в следующий раз не ошибётся.

Работа с источником новостей Теперь перейдем в правую часть редактора – к медиа-объектам.

Что такое медиа-объекты? Всё, что не является текстом.

Медиа-объекты более-менее можно разделить на три типа (на данный момент их постепенно становится больше):

Изображений.
Эмбалс.
Специальные блоки.

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

Загрузка изображений в редактор Все инструменты для работы с картинками здесь.

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

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

Прокрутите, нажав до нужного медиа-объекта Вставки копируются следующим образом: возьмите URL-адрес встраивания (например, YouTube), щелкните редактор медиа-объектов и нажмите CMD+V. Так: Быстрое добавление вставки При этом и картинку, и вставку можно, конечно, загрузить обычным способом, для этого есть кнопки добавления (посмотрите те, что внизу; вверху есть фильтры, и глазок делает это можно скрыть весь медиаредактор, если это раздражает): Фильтры и кнопки для добавления медиа-объектов Блок «Читать также» устроен предельно просто: вы добавляете блок через вышеупомянутую кнопку, а затем в выпадающем поиске выбираете статьи по теме (автоматических блоков у нас нет, это вполне сознательно ; вы можете заменить «Читать также» на другие слова).

Как сделать блок «Читай также» Недавно запущенные «Сноски» работают интереснее.

Вот как они выглядят на Веб-сайт : Сноски на сайте Чтобы создать сноску в «Мониторе», зайдите в медиаредактор, нажмите «Сноска»: Новая сноска Введите текст (минимальные инструменты верстки доступны в «Сноске»): Завершенная сноска Теперь вам нужно связать сноску с фразой в тексте.

Перейдите к тексту, выделите слово, нажмите на сноску («А» в коричневом квадрате) и выберите нужную вам сноску.

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

Добавление сноски в текст После добавления сноски она становится видимой в редакторе.

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

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

Теперь «Поля» стали отдельным слоем поверх всего.

При нажатии открывается большое текстовое поле.

Если там что-то есть, появляется красное уведомление.

Поля И последнее: о push-уведомлениях.

Их можно отправлять как от 24 часов, так и из самого материала.

Нажмите на соответствующую кнопку: И откроется соответствующее всплывающее окно.

На push-уведомления в сети в настоящее время подписано 677 000 человек.

Ладно, закончим с редактором.

Пройдемся по остальным закладкам, которые есть здесь в материале:

Превью – это предварительный просмотр материала.