Разработка нового сайта для научно-популярного журнала «Биомолекула»

April 27 2023

Мы разработали новый сайт для Биомолекулы — самого популярного в России журнала по молекулярной биологии и современным биотехнологиям.

Как все работало раньше
Проектирование нового продукта
Основные задачи работы
Процесс разработки
Технологический стек и рабочее окружение
Фичи
Интеграция WYSIWYG-редактора
Стили статьи
Конкурс «био/мол/текст»
Перенос данных на новый софт
Функциональность сайта
Интерфейс админ-панели
Дизайн
Команда проекта и сроки реализации
Планы на будущее

Проект был запущен в 2007 году моим сокурсником Антоном Чугуновым. За это время вокруг журнала сформировалась лояльная аудитория, появились партнерские связи с крупными компаниями (например, «Инвитро», «Ди-а-Эм»), настроен регулярный поток качественного научного контента.

«Биомолекула» — это устоявшееся сообщество людей, которые интересуются естественными науками или занимаются ими профессионально. В РФ нет специалистов в области естественных наук, которые бы не читали этот журнал.

Как все работало раньше

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

При всем этом технологическая составляющая сайта уже в 2015 году устарела и мешала развитию:

  • у сайта был низкий uptime и скорость отдачи страниц;
  • недоступность страниц на устройствах из-за некорректной семантики разметки;
  • не выполнены базовые требования доступности для поисковых роботов и оперативной индексации материалов;
  • дизайн сайта не отвечал современным запросам.
Так сайт выглядел в 2016 году.

Проектирование нового продукта

Прежде всего, важно было понять, что заказчик хочет поменять в продукте и зачем. Я провел интервью с заказчиком и изучил текущую ситуацию проекта. Подготовил бриф и прототип. Бриф объяснял, что и почему я предлагаю, а прототип объяснял, как я предлагаю. Во многом опирался на данные гугл-аналитики проекта. На это ушел месяц.

Основные задачи работы

1. Разработать новую информационную структуру, которая предусмотрит навигацию по двум тысячам материалов на сайте, оставив в том или ином виде все существующие на сайте рубрики.

2. Разработать формулу ранжирования статей в «Популярном» по рейтингу. На рейтинг влияло несколько факторов:

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

3. Разработать современный дизайн, который повысит удобство чтения материалов на разных устройствах.

4. Разработать надежную техническую платформу: высокий uptime, доступность для устройств и поисковых роботов. Сайт должен стабильно работать при нагрузке 60 тысяч просмотров страниц в сутки. При этом скорость отдачи страниц должна быть в пределах 300-500 мс.

5. Созданная платформа не должна иметь ограничений, которые затруднят ее развитие в будущем.

Процесс разработки

Мы начали работать с действующим бизнесом, и, что именно надо сделать, владельцу было понятно. Это идеальный случай, когда бизнес-модель обкатана и не надо ничего придумывать — надо просто задать побольше вопросов, собрать побольше ограничений и сделать ТЗ.

Конечно, лучше работать с бизнесом, которому 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 годами до запуска нового софта, можно увидеть двукратный прирост пользователей и сессий.

Сравнение основных показателей сайта после редизайна.

Основная заслуга в этом Антона и его команды, которая сумела выстроить редакторские процессы так, что контента стало еще больше. Но я горжусь, что моя команды стала частью этого проекта.

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

Узнайте, сколько стоила разработка сайта для научно-популярного журнала в WB—Tech.

Автор статьи
Кирилл Гришанин
Последние 10 лет руковожу командой аналитиков, дизайнеров и разработчиков

Подпишитесь на блог WB—Tech

Никакого спама, только анонсы новых статей

    Последние статьи

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

    Рассказали, как осуществили перенос пользовательских данных из Jira (Internal Directory) в директорию Microsoft Active Directory.

    Как эффективно хранить и актуализировать корпоративные данные средствами low/no-code

    Рассказали, как организовали поток HR-данных, чтобы оргструктура и бонусно-бухгалтерские расчеты всегда были актуальны.

    Мало кода, больше результативности: платформы low-code и no-code

    О low-code и no-code платформах, примерах использования и разбор нужно ли быть программистом.

    ИП Гришанин Кирилл Олегович
    ИНН 774313842609

    Коворкинг Starthub

    Б. Новодмитровская ул., 36, стр. 12, вход 6,
    Москва, Россия, 127015

    Коворкинг Wework

    Ahad Ha'am 54,Tel Aviv-Yafo,Израиль

    © 2023 WB—Tech. Мы разрабатываем уникальные решения для компаний из России, США и Европы.