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

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

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

Центром жизни любого издания является его админка (она же CMS, она же внутренний редактор, она же бекэнд, как хотите, так и называйте, но мы для простоты будем называть ее ужасным словом админка, или Монитором). Здесь пишутся и публикуются тексты, в ней работает вся редакция. Качество админки определяет не только скорость работы, но и атмосферу в редакции: если админка медленная и неудобная, это вызывает постоянное раздражение тех, кто ею пользуется. Идеальная админка — та, которую не замечаешь. Кроме того, если админка плохая, редакция ненавидит отдел разработки. Если редакция ненавидит отдел разработки, они никогда не будут работать вместе. Если они никогда не будут работать вместе, можно забыть о новых медиа: никуда дальше публикации простого текста с картинкой вы не уйдете.

Возможно, админка — это вообще главная разработка для интернет-издания.

В общем, при разработке админки важно исходить из нескольких постулатов:

1. Ни в коем случае не отдавайте проектирование админки на откуп разработке. Единственный человек, который знает, что нужно, это редактор. Главное задавать правильные вопросы. Если к созданию админки не подключать редакцию, вы сделаете мертвую вещь: в ней будет много ненужного и мало нужного.

2. Хорошую админку нельзя сделать без дизайнера и проектировщика интерфейсов. Повторяем: админка — это очень специфический и сложный механизм, сделанный под конкретные нужды. Он должен быть максимально интуитивным. Интерфейсы такого уровня нельзя делать без специалиста. От дизайнера же лучше получить гайдлайны с прорисованными типовыми элементами. Полностью прорисовывать админку тоже не очень хорошо: тогда любое изменение потребует вмешательство дизайнера. Это долго и дорого.

3. Не забывайте об админке после запуска. Внутренний редактор требует постоянного развития — если не будет развиваться админка, вы будете тормозить развитие редакции. Редакция же — основная ценность любого издания.

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

То, что мы вам сейчас покажем — уже вторая версия Монитора. Первая была сделана с реактивной скоростью: за три месяца. Вторая запустилась несколько дней назад.

Вот она.

24 часа, главный экран Монитора

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

Экран «24 часа» скоро ждут серьезные изменения. Про это будет отдельный пост.

Календарь

Календарь, самый неиспользуемый экран монитора

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

Учитесь на наших ошибках.

Выпуск

Выпуск, самый сложный экран Монитора

Опубликованный материал не увидят пользователи сайта и он не попадет в RSS, если выпускающий редактор не поставит его в Выпуск. Процесс выпуска материала выглядит так:

Как только редактор начинает совершать активные действия в выпуске, для всех остальных экран блокируется:

Все разделы «Медузы» собираются вручную, никакой автоматики.

Все материалы

Все материалы, для сохранности

Ну, тут все просто: это архив. С поиском по типу материала, дате, редактору и названию. Не будем на этом долго задерживаться.

Наружка

Наружка, статистика для всей редакции

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

Статистика

Это внутренняя статистика по редакторам и типам материалов — тоже открыта всем (вообще, в Мониторе нет ролей пользователей, все перед Монитором равны).

Среднее время, потраченное на материал — цифра лукавая и не всегда показательная.

Источники

Сложнейший экран, давшийся нам немалой кровью. Как вы знаете, «Медуза» — агрегатор, то есть в основе издания — материал со ссылкой на какой-нибудь источник. Казалось бы, все просто. Все просто, да не совсем. Источники бывают разные. Бывает, что один сайт — это несколько источников («ВКонтакте», «Фейсбук», ЖЖ и т.д.). Бывает, что один источник — это несколько сайтов (Алексей Навальный). Поэтому у источников бывают субисточники и синонимы. Вот так, например, выглядит страница источника под названием «ВКонтакте»:

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

Создание материала

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

Приятные мелочи:

1. Правая и левая колонки независимы.

2. К любому источнику автоматически добавляется скриншот (его делает робот, редактор к этому отношения не имеет). Делается это на случай, если нас обвинят в неверном цитировании: у нас всегда хранится оригинал.

3. Источник (если он есть в Мониторе) определяется автоматически. То есть в случае, когда редактор копирует в поле источника ссылку vedomosti.ru/чтототам, то Монитор сразу же поймет, что это газета «Ведомости» и привяжет материал к источнику.

4. В материале могут одновременно работать несколько человек — мы блокируем материал по полям. Более того: один редактор видит, что делает другой:

5. У полей бывают ограничения по знакам — работает как в Twitter.

6. Все текстовые поля автоматически проходят через типограф. Типограф сторонний, он плохой, но лучше пока не найден. Видимо, придется делать самим.

7. С недавних пор работает постоянное автосохранение — то есть не надо все время жать на кнопку «Сохранить» и терять половину материала по любому поводу.

То, что мы показываем — это редактор новостей. Редакторы других типов материалов выглядят очень похоже, показывать их не очень интересно. Интересно вот что: в последней версии мы развели в разные интерфейсы редактор текста и фоторедактор. По двум причинам: во-первых, так фоторедактор может работать параллельно с редактором, во-вторых, им нужны совершенно разные вещи, которые плохо уживаются рядом.

Фоторедактор

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

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

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

Монитор сообщает, какого размера фотография загружена, предлагает ее поменять прямо в тексте без удаления, посмотреть в полном размере, а также двигать по тексту вверх и вниз.

Создание материала

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

Мы пока тестируем эту функцию, поэтому такие картинки не уходят наружу. Запустится вот-вот.

А также

Несколько дней назад мы запустили быстрый способ создания и редактирования статей. Находится он не в Мониторе. Это расширение для Chrome.

Если установить расширение и нажать на него, когда вы читаете материал на «Медузе», то вы сразу немедленно попадете в Монитор. Вот так:

Или вы нашли интересный текст, скажем, в издании «Афиша-Город»:

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