Туристический портал Костромской области

Клиент — ГАУ «Агентство инвестиций и развития предпринимательства Костромской области», государственное учреждение.

На момент старта проекта у заказчика был туристический портал Костромской области — справочно-навигационная система для путешественников. На сайте собрана информация о музеях, маршрутах, экскурсиях, гидах, событиях, отелях и ресторанах региона. Старая версия работала на CMS Impresio на базе фреймворка YII2 и морально устарела.

Заказчик поставил задачу: мигрировать на 1С-Битрикс, обновить дизайн, структуру и архитектуру, расширить функционал. При этом нужно было сохранить весь существующий контент, а перед запуском актуализировать его, так как старый сайт продолжал наполняться во время разработки нового.

Помимо собственно миграции с CMS Impresio на 1С-Битрикс требования ТЗ включали:

— сохранение поисковых позиций через настройку редиректов, в том числе для QR-кодов, размещенных на информационных табличках у объектов культурного наследия Костромы — их около сотни;

— реализацию разных наборов полей для разных типов объектов в админке (архитектурные памятники, музеи, цирки, отели и др.);

— создание интерактивной карты региона с подсветкой районов при наведении и переходом на страницы районов при клике;

— отображение автомобильных и пешеходных маршрутов с привязкой к точкам из путеводителя и возможностью построения маршрута через Яндекс.Карты;

— кастомный поиск с выдачей результатов в виде карточек, а не текстовых сниппетов;

календарь событий с автоматическим архивом прошедших мероприятий;

— множественную привязку объектов к нескольким городам и районам одновременно;

— версию для слабовидящих;

— возможность для администраторов самостоятельно добавлять новые категории контента без привлечения программистов;

— проведение испытаний с оформлением программы и методики испытаний, а затем формирование протоколов по каждому пункту ТЗ;

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

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

Разработка

Основная задача в разработке — переезд с CMS Impresio на базе фреймворка YII2 на 1С-Битрикс и реализация функций, прописанных в ТЗ: разные наборы полей для разных типов объектов, связь маршрутов с точками из путеводителя, множественная привязка объектов к городам, нестандартные поиск и фильтрация. 

Для некоторых из этих задач штатных возможностей Битрикса было недостаточно — пришлось расширять стандартный функционал. Все реализовано поверх штатных механизмов платформы, чтобы при обновлениях ничего не ломалось. Кроме того, обеспечили администраторам возможность самим добавлять категории контента без привлечения программистов.

Перенос контента

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

Редиректы и сохранение QR-кодов

При переезде на новую CMS и модернизации частично изменилась структура сайта. Мы старались максимально ее сохранить, но полностью сделать это было невозможно. Для страниц, где URL изменился, настроили редиректы со старых адресов на новые. Это сохранило позиции в поисковой выдаче и позволило пользователям с закладками и внешними ссылками попадать на актуальные страницы.

Отдельное внимание уделили QR-кодам, размещенным на информационных табличках у объектов культурного наследия Костромы. Жители и туристы сканируют их и переходят на страницы портала. Для этих URL, их около сотни, редиректы проверены и настроены в первую очередь.

Путеводитель и фильтрация

Объекты путеводителя распределены по категориям (оздоровление, полезный досуг, размещение), которые администратор может дополнять. Один объект может одновременно принадлежать к нескольким категориям и быть привязан к нескольким городам или районам. Например, фестиваль может проходить на двух площадках в разных районах области. В админке это реализовано через множественную привязку. 

Незаполненные поля на странице объекта не отображаются.

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

Админка с динамическими шаблонами

У разных объектов на сайте разные наборы данных. У архитектурного памятника нет номера телефона, зато есть статус объекта культурного наследия и век постройки. У цирка или музея, наоборот, есть телефон кассы, ссылка на сайт, время работы. В стандартной карточке «Битрикса» для всех типов объектов выводится один и тот же набор полей. Администратору приходится пролистывать множество пустых разделов, чтобы найти те, которые нужны для текущего типа объекта. Из‑за этого легко пропустить какое‑нибудь обязательное поле.

Мы написали отдельный модуль для шаблонов информационных блоков. Логика: если у элемента инфоблока выбраны определенные свойства, то по сочетанию этих свойств подбирается нужный шаблон. Например, в разделе «Путеводитель» для категории «Архитектура» в админке появляются поля «Объект культурного наследия», «Век постройки», «Стиль». Для категории «Музеи» — поля «Филиал», «Экспозиции», «Мастер-классы», «Интерактивные программы». Шаблоны показывают только те поля, которые нужны для конкретного типа объекта, и скрывают лишние.

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

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

Маршруты

На портале есть такой инструмент, как маршруты. Это наборы локаций, скомпонованных по тематике или по логистике. Маршруты бывают двух типов: автомобильные и пешеходные.

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

На всех устройствах на странице маршрута есть кнопка «Построить маршрут». Построение маршрута через API Яндекса — платная опция. Мы реализовали иначе: передаем координаты всех точек в «Яндекс.Карты» и открываем карту в новой вкладке, где сразу строится маршрут. 

Кстати, про сами Яндекс.Карты. Раньше для госучреждений были бесплатные лицензии, потом их отменили. Сейчас есть бесплатный тариф с лимитом 10 000 запросов в сутки. 

Поиск

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

На карточках, в зависимости от типа объекта, могут также выводиться дополнительные данные. У маршрута — способ передвижения и продолжительность, у экскурсии — тоже продолжительность, организатор и размер группы.

Календарь событий

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

События можно фильтровать по городам и месяцам проведения.

Верстка

Верстку и скриптование сайта мы делали по макетам и прототипам в Figma, разработанным нашими дизайнерами и утвержденным заказчиком. 

Интерактивная карта

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

У карты две версии — для десктопа и для мобильных устройств. На телефонах она поддерживает жесты: приближение двумя пальцами и перетаскивание.

На карте размещены стилизованные иконки. Они уже добавлены, но администратор может заменить их или добавить новые через админку: загрузить SVG размером 100 × 100 пикселей, выбрать регион и прописать координаты в пикселях — отступ сверху и слева. Координаты можно снять прямо в Figma с макета карты.

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

Заданные стили текста в редакторе

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

Доступность и производительность

Позаботились о том, чтобы порталом было удобно пользоваться разным категориям посетителей, и уделили внимание технической оптимизации. Часть решений выходила за рамки техзадания, но соответствовала современным стандартам веб-разработки.

Версия для слабовидящих

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

ARIA-атрибуты

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

Нативный JavaScript без jQuery

Все скрипты написаны на чистом JavaScript. jQuery не использовали — раньше он был нужен, чтобы унифицировать поведение разных браузеров, но сейчас браузеры стандартизировались, и необходимость в этой библиотеке отпала. Она только добавляет лишние 150 килобайт.

Картинки в WebP

Все изображения на сайте конвертированы в формат WebP. Это уменьшило их вес на 50–80 процентов по сравнению с JPEG при том же разрешении. Главная страница стала весить 10–12 мегабайт вместо 50. На медленном 4G она загружается за 4 секунды, на хорошем Wi-Fi — за 1,8 секунды.

Управление с клавиатуры

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

Испытания и сдача

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

Написали инструкцию к админке

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

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

Выполнили нагрузочное тестирование

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

Сделали протокол испытаний по ТЗ с помощью ИИ

По условиям тендера требовалось предоставить программу и методику испытаний — документ с описанием всех проверок, которые будут проводиться. Вручную писать 40–50 протоколов — несколько дней работы. Мы загрузили техзадание в нейросеть и попросили подготовить шаблоны. Нейросеть прошлась по всему документу, выделила проверяемые пункты и для каждого сформулировала ожидаемый результат. Оставалось только вычитать, провести проверку фактической работы сайта согласно пунктам протокола и заполнить графу «наблюдаемый результат». На это ушло два дня.

По результатам всех испытаний подписали протоколы, где зафиксировано соответствие каждого пункта ТЗ. На основании подписанных протоколов заказчик подписал акт сдачи-приемки услуг.

Портал глобально модернизирован и переведен на 1С-Битрикс: новый дизайн, переработанная структура, нестандартные для платформы функции: модуль для шаблонов инфоблоков, поиск с единообразными карточками, интерактивная SVG-карта, множественная привязка объектов к городам.

Администраторы сами управляют контентом: добавляют маршруты, гидов, события, категории путеводителя без вызова разработчиков. Верстка адаптивная, есть версия для слабовидящих. Сверх требований ТЗ реализовали то, что является, по нашему мнению, современным стандартом: нативный JS, картинки в WebP для ускорения загрузки без потери качества, управление с клавиатуры, закрытие модальных окон по Escape и свайпу, ARIA-атрибуты на интерактивных элементах.

Общие трудозатраты — 605 часов: верстка и скрипты — 205 часов, программирование — 340 часов. Остальные часы ушли на загрузку контента и, конечно, дизайн. Он полностью разработан нашей студией и был выбран заказчиком из трех предложенных нами концепций.