Разработка нового сайта для научно-популярного журнала Биомолекула
ЗаказчикАнтон Чугунов, сооснователь и главный редактор, старший научный сотрудник в Лаборатории моделирования биомолекулярных систем Института биоорганической химии РАНЗадачаОбновить сайт: сделать дизайн, разработать новую информационную структуру, увеличить скорость отдачи страниц
Проект был запущен в 2007 году моим сокурсником Антоном Чугуновым. За это время вокруг журнала сформировалась лояльная аудитория, появились партнёрские связи с крупными компаниями (например, «Инвитро», «Ди-а-Эм»), настроен регулярный поток качественного научного контента.
«Биомолекула» — это устоявшееся сообщество людей, которые интересуются естественными науками или занимаются ими профессионально. В РФ нет специалистов в области естественных наук, которые бы не читали этот журнал.
Как всё работало раньше
В начале 2015 Антон обратился ко мне за помощью — нужно было обновить сайт, так как он уже не справлялся со своими задачами.
При всем этом технологическая составляющая сайта уже в 2015 году устарела и мешала развитию:
- у сайта был низкий uptime и скорость отдачи страниц;
- недоступность страниц на устройствах из-за некорректной семантики разметки;
- не выполнены базовые требования доступности для поисковых роботов и оперативной индексации материалов;
- дизайн сайта не отвечал современным запросам.
Так сайт выглядел в 2016 году.
Проектирование нового продукта
Прежде всего, важно было понять, что заказчик хочет поменять в продукте и зачем. Я провёл интервью с заказчиком и изучил текущую ситуацию проекта. Подготовил бриф и прототип. Бриф объяснял, что и почему я предлагаю, а прототип объяснял, как я предлагаю. Во многом опирался на данные гугл-аналитики проекта. На это ушел месяц.
Основные задачи работы
- Разработать новую информационную структуру, которая предусмотрит навигацию по двум тысячам материалов на сайте, оставив в том или ином виде все существующие на сайте рубрики.
- Разработать современный дизайн, который повысит удобство чтения материалов на разных устройствах.
- Разработать надежную техническую платформу: высокий uptime, доступность для устройств и поисковых роботов. Сайт должен стабильно работать при нагрузке 60 тысяч просмотров страниц в сутки. При этом скорость отдачи страниц должна быть в пределах 300–500 мс.
- Созданная платформа не должна иметь ограничений, которые затруднят её развитие в будущем.
- Разработать формулу ранжирования статей в «Популярном» по рейтингу. На рейтинг влияло несколько факторов:
- количество добавлений в избранное у обычных пользователей;
- у редакторов;
- количество упоминаний в списке литературы статей;
- количество упоминаний в содержании статей;
- свежесть последнего комментария.
Процесс разработки
Мы начали работать с действующим бизнесом, и, что именно надо сделать, владельцу было понятно. Это идеальный случай, когда бизнес-модель обкатана и не надо ничего придумывать — надо просто задать побольше вопросов, собрать побольше ограничений и сделать ТЗ.
Конечно, лучше работать с бизнесом, которому 10 лет, чем со стартапом, где основатель не знает, как и почему всё это будет работать, зачем ему это надо. Бизнесу это нужно, он будет ехать вас по срокам, стартапер забьет и мотивация платить пропадёт — будете бегать за ним просить принять работу — такое бывает.
Технологический стек и рабочее окружение
Тестовая версия проекта была развёрнута на сервере DigitalOcean. Было настроено Continuous Integration и Continuous Deployment. При каждом изменении в проекте автоматически происходила сборка проекта, выполнялись автоматические тесты и статический анализ кода. Настроена отправка статусов сборки проекта в GitHub так, чтобы изменение кода можно было принять только в случае успешной сборки. Для CI/CD использовался сервис TeamCity.
Сценарии автоматического развёртывания проекта были написаны с использованием fabric. Для развёртывания проекта в окружении разработчика использовался Vagrant, и Packer для сборки базовых образов системы. Production сервер был настроен при помощи автоматических сценариев, написанных на fabric.
Настроили автоматическое развёртывание новых версий с помощью TeamCity. По проекту написаны функциональные тесты для автоматической проверки работы в реальных сценариях использования. Для написания функциональных тестов использовался Selenium и Python 3.
Фичи
Интеграция WYSIWYG-редактора
Для создания и редактирования статей был реализован WYSIWYG-редактор со следующими возможностями:
- задание авторов, редакторов и технических редакторов статьи;
- различные блоки статьи: сноска, врезка, цитата, список определений, галерея изображений и так далее;
- задание списка литературы с получением информации через DOI и PubMed ID.
Так подгружается список литературы из базы данных PubMed
Для каждой статьи собирается статистика количества полных прочтений статьи. Используя количество прочтений, добавлений в избранное и цитирование статьи вычисляется рейтинг статьи.
Стили статьи
Самым трудным было создать макет страницы статьи. Антон хотел много разных стилей, которые я не встречал на других медиа. Было трудно сделать всю эту систему. В итоге сейчас в статью можно добавить такие элементы:
- Вставка
- Сноска
- Врезка
- Цитата
- Галерея
- Картинка / Видео
И разные комбинации этих элементов — пример статьи с элементами разных стилей.
Конкурс «био/мол/текст»
«Биомолекула» ежегодно проводит собственный конкурс на лучшую научно-популярную публикацию в области современной биологии. Это важный и популярный конкурс среди студентов и научных работников в сфере естественных наук.
Мы создали отдельную страницу для конкурса, которой можно управлять в админ-панели редактора. Специальный раздел, в котором можно управлять всей информацией о жюри конкурса, спонсорах, авторах, темах и условиях участия. Запуск конкурса, приём работ и завершение конкурса также определяются разными статусами в админ-панели.
Админка страницы конкурса
Перенос данных на новый софт
Кроме этого, большой работой был перенос данных в новый софт. Если с пользователями все было просто, то со статьями, которых было пару тысяч, всё было иначе. Мы писали конвертеры для обновления html-разметки, переносили и проверяли результат. Эту процедуру повторили 5 раз, пока большинство статей не «встало» как надо.
Многие материалы заказчику пришлось частично исправлять вручную, так как не все поддавалось автоматизации. Антон и его команда выполнили огромную ручную работу, без которой проект не смотрелся бы так классно, как сейчас. Аккуратности и трудолюбия этой команде не занимать.
Функциональность сайта
Мы детально прорабатывали информационную архитектуру сайта. Так как это журнал — у него своя специфика. Важно продумать все разделы, рубрики и подрубрики так, чтобы пользователям было удобно ходить по сайту.
В итоге сейчас на сайте есть следующие форматы:
Статья, обзор, дайджест, новости, объявления и спецпроекты. Помимо форматов материалов, у всех материалов есть темы. Каждый материал ранжируется по популярности и рейтингу, как было изначально заявлено в требованиях ТЗ.
Поиск по этому огромному количеству контента был реализован с использованием возможностей СУБД PostgreSQL.
Сделали пуш-уведомления о новых статьях. Для комментариев к статьям используется сервис Disqus для которого была сделана интеграция с пользователями сайта.
Блок похожих по теме статей создается с использованием вероятностного метода Монте-Карло.
percentile = 0.1
normalized_rating = (rating * (1 — percentile * 2))/max_rating + percentile
Берется случайное число от 0 до 1. Если рейтинг статьи больше или равен этому числу, статья попадает в рекомендованные. Параметр percentile можно увеличить, чтобы уменьшить влияние рейтинга на попадание в рекомендованные. percentile = 0 — самая рейтинговая статья всегда попадает в рекомендованные; percentile = 0.5 — рейтинг не влияет на вероятность попадания в рекомендованные.
Для вспомогательного финансирования сделана интеграция с Яндекс.Деньгами — пользователи могут отправлять донаты.
Интерфейс админ-панели
Административный интерфейс системы был настроен с использованием фреймворка Django и кастомизирован под требования заказчика. Для реализации бизнес-потребностей проекта мы сделали задание очереди рекламных баннеров в разных форматах и на разных страницах сайта.
Добавление рекламы
Кроме этого, заказчик попросил сделать в админке управление страницами ошибок 404 и 500 — это деталь, о которой многие владельцы сайтов не думают.
Как и во всех разработанных нами админках, всеми сущностями меню можно гибко управлять (CRED).
Дизайн
Мы сделали новый дизайн и брендинг проекта. Этот этап занял полгода. Дизайнер делал макеты в sketch. Скриншоты макетов мы выгрузили в веб, чтобы команда могла понимать, как происходит навигация по сайту (Marvel тогда еще не слишком использовали).
Макет главной страницы после редизайна
Утвержденный вариант нового логотипа проекта
Команда проекта и сроки реализации
Над проектом работали 6 разработчиков, 1 QA специалист и менеджер проекта.В общей сложности проект занял около 2,5 лет.
Планы на будущее
Важным для меня итогом стало то, что Биомолекула сильно поднялась в рейтинге SimilarWeb. Если сравнить последние 3 года с 3 годами до запуска нового софта, можно увидеть двукратный прирост пользователей и сессий.
Сравнение основных показателей сайта после редизайна
Основная заслуга в этом Антона и его команды, которая сумела выстроить редакторские процессы так, что контента стало ещё больше. Но я горжусь, что моя команды стала частью этого проекта.
Мы продолжаем разработку, на очереди — новые доработки по функционалу сайта, в том числе возможность «пожертвований». Пользователи смогут голосовать за определённую статью или интересную им тему, платить за неё, и она будет выходить. Таким образом пользователи сами выбирают для себя полезный и интересный им контент.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
