Как делается «Медуза». На самом деле

Meduza
Meduza
Jan 19, 2015 · 7 min read

English translation is now available! Thanks to Unbabel.com

Необходимое вступление

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

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

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

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

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

  1. Ни в коем случае не отдавайте проектирование админки на откуп разработке. Единственный человек, который знает, что нужно, это редактор. Главное задавать правильные вопросы. Если к созданию админки не подключать редакцию, вы сделаете мертвую вещь: в ней будет много ненужного и мало нужного.
  2. Хорошую админку нельзя сделать без дизайнера и проектировщика интерфейсов. Повторяем: админка — это очень специфический и сложный механизм, сделанный под конкретные нужды. Он должен быть максимально интуитивным. Интерфейсы такого уровня нельзя делать без специалиста. От дизайнера же лучше получить гайдлайны с прорисованными типовыми элементами. Полностью прорисовывать админку тоже не очень хорошо: тогда любое изменение потребует вмешательство дизайнера. Это долго и дорого.
  3. Не забывайте об админке после запуска. Внутренний редактор требует постоянного развития — если не будет развиваться админка, вы будете тормозить развитие редакции. Редакция же — основная ценность любого издания.
  4. Делайте только то, что действительно нужно. Лучше сделать 5 необходимых функций, чем потратить массу времени на инновационное, но неочевидное решение, которым потом никто не будет пользоваться.

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

Вот она.

24 часа

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

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

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

Календарь

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

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

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

Выпуск

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

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

Image for post
Image for post

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

Image for post
Image for post

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

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

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

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

Наружка

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

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

Статистика

Image for post
Image for post

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

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

Источники

Image for post
Image for post

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

Image for post
Image for post

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

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

Image for post
Image for post

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

Image for post
Image for post

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

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

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

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

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

Image for post
Image for post

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

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

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

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Публикация материала

Image for post
Image for post

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

Image for post
Image for post

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

А также

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

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

Image for post
Image for post

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

Image for post
Image for post

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

Это всё?

Для начала да. Подпишитесь на наш Medium, мы будем рассказывать тут обо всем, что придумываем. Со своей стороны, будем рады любым идеям.

meduza: how it works

Как работает meduza.io

Meduza

Written by

Meduza

Только самые важные новости и тексты http://vk.com/meduzaproject http://facebook.com/themeduza

meduza: how it works

Как работает meduza.io

Meduza

Written by

Meduza

Только самые важные новости и тексты http://vk.com/meduzaproject http://facebook.com/themeduza

meduza: how it works

Как работает meduza.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store