Совместно с методическим отделом Архангельской областной научной библиотеки имени Н. А. Добролюбова, мы разработали современную версию портала «Библиотеки Архангельской области», который объединил 457 общедоступных библиотек области в едином пространстве. Портал стал удобным инструментом для читателей и сотрудников библиотек.
![](https://f5-studio.ru/wp-content/uploads/2024/08/Group-64.webp)
О кейсе
Когда вы были последний раз в библиотеке?! Digital-команда F5 исправно посещает библиотеку имени Н. А. Добролюбова в Архангельске, а последние 2 года практически еженедельно!
Совместно с методическим отделом Архангельской областной научной библиотеки имени Н. А. Добролюбова, мы разработали современную версию портала «Библиотеки Архангельской области», который объединил 457 общедоступных библиотек области в едином пространстве. Портал стал удобным инструментом для читателей и сотрудников библиотек.
Более года мы фиксируем результаты и победы в цифрах вместе с нашим постоянным клиентом — Архангельской областной научной библиотекой имени Н. А. Добролюбова.
Россия была и остается читающей страной, хотя интернет-технологии безвозвратно изменили не только культуру чтения во всем мире, но и создали новые взаимоотношения читателей с книгой и, конечно же, с храмом знаний — библиотекой.
Современная библиотека — это не просто хранилище печатных изданий, это офлайн- и онлайн-пространство, цель которого — максимально сблизить читателя с печатной или электронной книгой, стать комфортным пространством и отвечать интересам широкой аудитории. Таким образом, современные библиотеки начали использовать интернет-решения для тесного взаимодействия с целевой аудиторией, для привлечения внимания читателей к услугам и собственным библиотечным мероприятиям, для плодотворного взаимодействия с региональными библиотеками и их сотрудниками.
Кстати, в современной России профессия библиотекаря очень актуальна и востребована. Чтобы стать хорошим библиотекарем, требуется высшее образование, большой задел знаний по работе с книгами, огромная начитанность и, конечно же, безусловная любовь к чтению.
Содержание
1. О проекте. 457 библиотек в едином digital-пространстве
2. Глобальные задачи проекта, которые успешно реализованы командой F5
3. Этапы реализации проекта
I ЭТАП. ПРОЕКТИРОВАНИЕ
II ЭТАП. ДИЗАЙН
III ЭТАП. ВЕРСТКА
IV ЭТАП. ПРОГРАММИРОВАНИЕ
Мини-сайты библиотечных систем
Новая система аналитики
Раздел «Коллегам»
Разграничение прав доступа для работы с порталом и сайтами библиотек
Версия для слабовидящих
Удобная административная панель
V ЭТАП. ВВОД В ЭКСПЛУАТАЦИЮ
Миграция данных со старого сайта
Оптимизация скорости загрузки сайта, оптимизация нагрузки сайта на БД
Трехэтапное тестирование
VI ЭТАП. РЕЛИЗ
4. Развитие проекта после релиза
5. Заключение
О проекте:
457 библиотек
в едином интернет-пространстве
Задача проекта казалась классической на начальном этапе: разработать портал библиотек Архангельской области с современным дизайном и адаптивной версткой, разработать сайты библиотечных систем, связанных с порталом напрямую, разработать личный кабинет для сотрудников библиотек. Но уже на первых этапах проектирования и создания технического задания совместно с заказчиком мы присвоили проекту статус уникального проекта, который еще никто и нигде не реализовал ранее.
- повышение доступности услуг и расширение возможностей использования ресурсов государственных областных и муниципальных общедоступных библиотек жителями Архангельской области;
- формирование системы продвижения информации о библиотеках Архангельской области;
- развитие региональной библиотечно-информационной сети Архангельской области.
Разработка нового портала «Библиотеки Архангельской области» финишировала в 2023 году, масштаб впечатляет:
Глобальные задачи проекта: основа
технического задания
на разработку нового библиотечного портала
- Красивый дизайн, адаптированный под все устройства: компьютеры, планшеты, смартфоны;
- Взамен сложной и запутанной структуры предыдущего портала разработана удобная навигация, которая направляет пользователей в целевой раздел в два клика;
- Сохранены все исторические данные со старого сайта и автоматически загружена информация из ИРБИС на новый портал;
- Разработан новый полезный функционал:
- функция «Найти библиотеку» с умным поиском и фильтрами. Например, чтобы найти в своем регионе библиотеку с парковкой, интернетом, сканером и VR-очками;
- удобная афиша библиотечных мероприятий всего региона с подпиской на анонсы;
- сводный электронный каталог для поиска книг онлайн;
- версия сайта для слабовидящих;
- библиотечная система как самостоятельный мини-сайт внутри портала:
- библиотеки, книги, события и фото мини-сайта выводятся на основной портал для поднятия посещаемости сайта конкретной библиотеки,
- разграничение прав доступа для работы с мини-сайтом: администратор; контент-менеджер;
- трансляция вебинаров и архив прошедших вебинаров с ограничением доступа на просмотр: для всех, для библиотекарей, для директоров библиотек;
- подписка на рассылку и получение еженедельного новостного дайджеста, который информирует об изменениях в законодательной базе РФ, предстоящих сетевых акциях, конкурсах и мероприятиях в библиотеках области;
- организация методической работы и обмен опытом онлайн: личный кабинет, «Методкабинет» и раздел «Современная библиотека»:
- полнотекстовый поиск по документам, по контексту, по фрагменту текста или по ключевым словам,
- разграничение прав доступа на просмотр контента: вебинары, конкурсы и коллекция документов по библиотечному делу. Например, подборка нормативно-правовых актов, оказывающих влияние на библиотечное дело, методические рекомендации и пособия, аналитические и информационные материалы, подготовленные специалистами областной библиотеки, сценарии мероприятий, библиографические и другие документы;
- удобное и интуитивно понятное размещение информации на портале;
- самостоятельное редактирование разделов и любой информации на портале и мини-сайтах доступно администраторам портала и библиотек в административной панели, а не через программный код;
- настройка умной системы аналитики по порталу и сайтам библиотечных систем: сбор статистики об использовании личного кабинета сотрудника, в том числе скачивания документов и просмотра вебинаров;
- гибкая система модерации для одобрения или отклонения запросов от администраторов мини-сайтов на публикацию событий, книг и фото на основном портале;
- главный администратор управляет системой разграничения прав доступа.
Вам тоже требуется техническое задание на разработку портала?
Этапы реализации проекта
I Этап. Проектирование.
Проектирование структуры сайта и удобной навигации
Проектирование структуры сайта и удобной навигации
Стартом работ стали пожелания и требования клиента к разработке нового портала. Для выяснения всех деталей и тонкостей работы библиотечных систем мы провели многочисленные интервью с сотрудниками разных отделов библиотеки, а также с будущими пользователями. В результате мы проработали будущую структуру портала и определили перечень полезной информации для различных категорий пользователей сайта — так выстроился трудоемкий этап проектирования.
Так, например, выяснилось, что интерфейс устаревшего сайта с трудом позволял найти необходимую информацию. К тому же с 2013 года на сайте накопилось много лишней информации, которую необходимо удалить/обновить. У заказчика появилась острая необходимость создавать новые разделы под новые задачи, и, соответственно, потребовалось переформатирование структуры сайта.
После анализа всех полученных данных было принято решение о создании двух главных страниц на сайте и собственно двух больших разделов сайта: «для читателей» и «для коллег» (сотрудников других библиотек и БС) с навигацией между ними с помощью переключателя в шапке сайта. Таким образом мы направили две основные и категорически разные целевые аудитории (читатели и коллеги) по соответствующим направлениям.
Все идеи и решения, которые появились в процессе знакомства с проектом, легли в основу детального технического задания, на основании которого был создан глобальный прототип будущего портала. Например, прототип главной страницы для читателей выглядел так.
![](https://f5-studio.ru/wp-content/uploads/2024/08/image-13-scaled.webp)
Подводя итоги этапа проектирования, хочется еще раз поставить акцент на количестве времени, которое ушло именно на этот подготовительный этап — проведение анализа, работа с гипотезами в тесном сотрудничестве с заказчиком. Именно от этого детально проработанного этапа зависел не только успешный дизайн, а вообще работа портала, включая все 457 библиотек Архангельской области.
Кстати, немного забегая вперед, интересно зафиксировать в этом кейсе тот момент, когда на этапе программирования мы вернулись обратно к проектированию, чтобы проработать нетиповое решение с другой архитектурой, необходимость которого была выявлена в ходе программирования, и это был очень интересный момент, подробности о котором мы рассказываем ниже.
В общем финале, благодаря именно подробному анализу и подготовительным работам, мы упростили навигацию на портале, например: сейчас читатель не видит «лишних» разделов, которые относятся к корпоративным. А для коллег мы создали личный кабинет с доступом к расширенной информации после авторизации. Важно, что объем доступной информации зависит от прав доступа (авторизованный пользователь, верифицированный пользователь, директор библиотеки) — такое разграничение стало очень удобным решением для внутреннего взаимодействия библиотек. Каждая группа пользователей видит разрешенную ей информацию/ документы/ вебинары и т. п. На данном этапе мы продумали удобство каждого из разделов: фильтры, карты, сортировки.
II Этап. Дизайн.
Редизайн сайта
Редизайн сайта
Этап проектирования дал свои результаты для дизайна портала. Этап дизайна включал дальнейшую прорисовку огромного количества разделов и страниц. В частности, мы отрисовали 39 пользовательских интерфейсов.
Дизайн текущего портала давно устарел и не отвечал требованиям современности. Среди пожеланий заказчика были важные критерии, которые мы учли на этапе дизайна:
- цветовая гамма: спокойные пастельные тона, такие, как на текущем сайте 2013 г., а также оттенки зеленого — оливковый, мятный, бирюзовый, голубой и синий цвет, бежевый, персиковый, оранжевый, желтый;
- визуальные образы, которые выделил заказчик для нового портала: бесконечность/безграничность, карта области с точками локации библиотек. Север, клюква, Белое море или традиционные узоры, дом, буквы, алфавиты, книги, дерево, круг, пазлы. Единство всех библиотек области. Использовать элементы дизайна старой версии портала — «бусинки».
В основу дизайна для нового портала мы взяли фирменные цвета и логотип с «бусинками», трансформировали эти элементы, чтобы визуал нового сайта стал более спокойным и сдержанным, при этом узнаваемым
III Этап. Верстка.
Адаптивная верстка для корректного отображения на смартфонах и планшетах
Адаптивная верстка для корректного отображения на смартфонах и планшетах
По статистике «Яндекс. Метрики», более 60 % посетителей сайта пользуются им со смартфона, поэтому наличие мобильной версии сайта было обязательным условием разработки.
![](https://f5-studio.ru/wp-content/uploads/2024/08/image-15.webp)
Верстка сайта стала важной ступенью в создании сайта, этот этап мы всегда выделяем, потому что именно здесь все дизайн-решения принимают формат, который в дальнейшем видят и понимают браузеры. Благодаря этому этапу все элементы на страницах портала расположились правильно, с каждым блоком на портале стало удобно взаимодействовать далее. Также хочется выделить самые важные критерии этого этапа:
- высокая скорость загрузки страниц;
- семантическая верстка, необходимая для будущего SEO-продвижения сайта;
- корректность отображения страниц во всех браузерах и на разных устройствах;
- плавность анимаций, эффектов наведения курсора на элементы.
IV Этап. Программирование.
Возврат к проектированию. Каждой библиотечной системе — свой сайт!
Возврат к проектированию. Каждой библиотечной системе — свой сайт!
Интересный момент на этапе проектирования, о котором мы упоминали выше, — это новые вводные, которые вернули всю команду обратно к этапу «Проектирование» уже на этапе программирования сверстанных макетов для сайта. В результате чего у портала библиотек появились самостоятельные сайты библиотечных систем, данные которых интегрируются с основным порталом.
Для нас особенно важно, что каждый мини-сайт библиотеки на нашем портале является полноценным ресурсом, имеющим доменное имя третьего уровня, отдельный счетчик учета посещений, а также возможность для наполнения страниц контентом
Первоначально планировалось сделать каждую библиотечную систему подразделом основного сайта по типу http://www. biblioteka29.ru/libraries/aonb/. Но появились новые вводные о необходимости установки счетчика «Про. Культура» и отдельном сборе статистики по каждой библиотечной системе. Выяснилось, что счетчик «Про. Культура» может это делать, только когда установлен на разные домены.
Так у нас появилась идея оставить библиотечные системы в текущей реализации, то есть инфоблоками основного сайта, а для вывода использовать проксирование, чтобы каждая библиотечная система выводилась на поддомене формата https://aonb. biblioteka29.ru/, а фактически это был бы лишь подраздел основного сайта biblioteka29.ru. Решение казалось идеальным: мы и сохраняем простую, легко поддерживаемую структуру, и выполняем требования «Про. Культуры». Но сайт biblioteka29.ru располагается на серверах заказчика, поэтому от варианта с проксированием пришлось отказаться.
Для проекта мы использовали docker, каждый сайт поместили в отдельный контейнер, файловое хранилище вынесли отдельно для экономии ресурсов сервера.
![](https://f5-studio.ru/wp-content/uploads/2024/08/image-16.webp)
То есть ситуация потребовала возврата к этапу проектирования. Изменение архитектуры проекта, разработки технической документации, переосмысление части функционала сайта и усложнение реализации проекта и будущей эксплуатации портала клиентом. С этим вызовом мы справились, применили много нетиповых решений, но выполнили все поставленные задачи и постарались сделать работу клиента максимально удобной и простой.
Вести сайт библиотечной системы (БС) очень удобно: для каждой БС подготовлен стандартный набор страниц, которые администраторы и контент-менеджеры мини-сайта могут редактировать и создавать по необходимости новые. И конечно, теперь библиотеки могут регистрировать посещения своих сайтов и предоставлять данные для формирования государственной статистики.
Связь портала и мини-сайтов, гибкая система модерации
Мы реализовали вывод данных на портал с сайтов библиотечных систем и систему модерации этих данных для публикации событий, фотографий и книг сайтов БС на портале. Установили необходимые фильтры в разделе модерации, добавили разграничение прав доступа к модерации.
![](https://f5-studio.ru/wp-content/uploads/2024/08/image-17.webp)
То есть, с учетом доработок, контент-менеджеры и администраторы мини-сайтов при публикации записи (Событие, Книга, Фотоальбом) на сайте БС могут отправить запрос на публикацию анонса этой записи на основном портале.
Сотрудник портала, которому выдан доступ к модерации, может опубликовать или отклонить публикацию на портале. При необходимости он может сразу удалить запись с мини-сайта, если информация на ней некорректна. В результате менеджер мини-сайта получит автоматическое e-mail-уведомление с результатом модерации заявки: принято или отклонено.
Таким образом, весь портал становится аккумуляцией информации со всех мини-сайтов. Но публикуем на портале не всё, а только то, что прошло модерацию ответственных сотрудников портала. Мини-сайты — это отдельная история каждой библиотечной системы. Там библиотеки публикуют свои материалы, запрашивают их публикацию на основном портале, создают свои собственные уникальные страницы. То есть внутри каждого мини-сайта своя жизнь, они достаточно самостоятельны и автономны.
![](https://f5-studio.ru/wp-content/uploads/2024/08/image-18.webp)
Новая система аналитики
Имеющийся сервис аналитики не позволял получить отдельную статистику по каждому сайту библиотечной системы. Кроме того, необходимо было настроить отчеты для аналитики посещаемости портала и каждого из мини-сайтов в отдельности, также подключить сервис аналитики от «Про. Культуры» с отдельным сбором статистики по каждой из библиотечных систем. Также мы создали свои отчеты в метрике и усовершенствовали разделы аналитики в административной панели CMS «1C-Битрикс», доработали недостающие отчеты и их просмотр с фильтрами по периоду, географии, добавили сортировку результатов, просмотр графиков, выгрузку в xls:
- скачивания из раздела «Современная библиотека»;
- просмотр вебинаров;
- скачивание из раздела «Официально».
![](https://f5-studio.ru/wp-content/uploads/2024/08/image-19.webp)
![](https://f5-studio.ru/wp-content/uploads/2024/08/image-20.webp)
Разработка раздела «Коллегам»
Раздел «Коллегам» собрал в себе информацию для сотрудников БС. Например, информацию о событиях, конкурсах и акциях. Но самой важной частью стал раздел «Методкабинет» — это своеобразная база знаний для сотрудников библиотек. Часть информации открыта для всех пользователей сайта, часть информации доступна только авторизованным пользователям, то есть сотрудникам. Сейчас на портале существует несколько групп пользователей: сотрудники, верифицированные сотрудники, директора библиотек.
Каждой группе видны соответствующие материалы из «Методкабинета»: документы, мероприятия, вебинары. Для всех элементов при публикации задается необходимая видимость по группам пользователей.
![](https://f5-studio.ru/wp-content/uploads/2024/08/image-21.webp)
![](https://f5-studio.ru/wp-content/uploads/2024/08/image-22.webp)
Еще в «Методкабинете» доступна онлайн-версия электронного методического издания «Современная библиотека». Нужный выпуск можно быстро найти благодаря фильтрации по типу, теме, датам публикации издания и поиску по тексту.
Отметим, что в разделах «Методкабинет» и «Современная библиотека» реализован полнотекстовый поиск по документам и фильтрация по большому набору свойств.
![](https://f5-studio.ru/wp-content/uploads/2024/08/image-23.webp)
Система разграничения прав доступа для управления порталом и сайтами БС
Мы сделали разграничение прав доступа для сотрудников, которые управляют порталом и его контентом: администраторы портала, контент-менеджеры портала, редакторы портала, авторизованные пользователи портала, верифицированные пользователи портала, директора портала, администраторы и контент-менеджеры для каждого из сайтов БС. Всего 69 групп пользователей.
Версия для слабовидящих
- изменение размера шрифта, типа шрифта, межбуквенного интервала;
- изменение цветовой схемы сайта;
- включение/отключение изображений и др.
Кстати, портал соответствует всем основным требованиям законодательства РФ, что является еще одной сильной стороной проекта!
Административная панель сайта под потребности клиента
В административную панель было вынесено управление скриптами портала и всех мини-сайтов, например, для установки метрических счетчиков на сайты библиотечных систем. Созданы отдельные разделы для редактирования включаемых областей сайта, что дает возможность безопасно добавлять в них скрипты и iframe.
Редактирование и установка баннеров мини-сайтов также централизованно выполняется в специальном разделе административной панели портала.
Все эти разделы также имеют уникальные настройки прав доступа.
V Этап. Ввод в эксплуатацию
Миграция данных со старого портала
Мы автоматизировали процесс переноса контента со старого сайта на портал, включая 30 мини-сайтов. Всего были перенесены записи из 120+ инфоблоков.
Оптимизация скорости загрузки сайта, оптимизация нагрузки сайта на БД
- увеличение серверных мощностей;
- вынос элементов и разделов инфоблоков в отдельные таблицы;
- оптимизация настроек базы данных;
- подключение кеширующего сервера.
- время загрузки страниц сократилось на 38 %;
- стабильная работа сервера при количестве пользователей x3.
Тестирование
Так как сайт большой, с многочисленными юзер-кейсами и пользовательскими путями, тестирование стало большим по важности и временным затратам этапом. Тестирование было разбито на 3 части:
1. Внутреннее. Внутренняя проверка качества F5: наши тестировщики проверили все на соответствие техническому заданию, корректность работы в разных браузерах, на разных устройствах и при разных сценариях. Для тестирования были написаны подробные тест-кейсы, по результатам в работу команде разработки передавали баг-листы, описанные согласно нашему внутреннему регламенту.
2. Клиентское. Так как объем работ по тестированию и приемке предстоял большой, в нем было задействовано несколько подразделений и большое количество сотрудников клиента, мы организовали процесс спринтами. Тестирование и приемка проходила поэтапно, каждые 2 недели мы принимали результаты тестирования и обозначали план на следующие 2 недели, затем презентовали результаты итогового дебага и сразу же брали следующий блок. Благодаря четкой работе менеджера проекта F5, этап прошел бодро и оперативно. Все было задокументировано, спланировано и презентовано клиенту.
3. Нагрузочное. Проверка устойчивости системы при эмуляции потока в 1000+ посетителей.
VI Этап. Релиз
Подготовка технической документации
Документация содержит описание архитектуры проекта, регламентов работы с проектом и внесения правок, инструкцию по созданию нового мини-сайта. Это позволит клиенту самостоятельно сопровождать проект или делать это с нашей помощью или с помощью другого подрядчика. Наличие документации важно в любом проекте, а особенно в этом, где использованы нетиповые решения и есть такой обширный функционал.
Подготовка инструкций по работе с сайтом, обучение сотрудников клиента
Мы подготовили детальные инструкции по администрированию и наполнению портала контентом. Инструкции включают в себя настройку разграничения прав доступа, работу с модерацией, публикацию контента с ограничением доступа, размещение новостей, событий, книг и фотоальбомов. Также мы подготовили отдельную инструкцию для администраторов и контент-менеджеров мини-сайтов.
Менеджер проекта провел обучение клиента по ВКС, на протяжении этапа ввода в эксплуатацию мы консультировали сотрудников по возникающим вопросам.
Развитие проекта после релиза
1. Мы провели аудит сайта. Замерили ключевые показатели сразу после релиза и после периода эксплуатации. Результаты оформили в виде отчета и дали рекомендации по развитию проекта.
2. Добавили новые разделы в административную панель сайта, расширили ее возможности. Первое временя работы с порталом и мини-сайтами мы собирали обратную связь с администраторов и контент-менеджеров и совместно определили точки для упрощения работы сотрудников. Например:
- добавили фильтрацию по различным свойствам в административной панели в разделе модерации элементов;
- добавили выгрузку отчета по просмотру вебинаров в xls;
- создали дополнительные слайдеры на страницах и редактируемых областях с текстами и iframe.
3. Разработали редактируемый шаблон рассылки с сайта.
На сайте есть несколько форм подписки для коллег. Подписчики еженедельно получают рассылку с актуальными новостями и событиями всех библиотечных сетей Архангельской области. Мы не только сделали рассылку визуально привлекательной, но и создали инструмент в административной панели для самостоятельной сборки дизайна рассылок клиентом. Теперь контент-менеджер сайта может самостоятельно изменять шапку и подвал письма, добавлять новый контент, менять цветовое решение, редактировать шрифты.
![](https://f5-studio.ru/wp-content/uploads/2024/08/image-24.webp)
4. Провели SEO-аудит. Опираясь на текущие задачи портала, мы провели аудит с целью выявления мест для улучшения, чтобы сайт выполнял новые задачи максимально эффективно. В аудит вошли:
- технический аудит (мета-теги, роботы, карты сайта, скорость загрузки, доступность страниц),
- аудит юзабилити (соответствие UX, от которых зависит время, проведенное на сайте и глубина скролла),
- аудит контента,
- аудит внешнего присутствия (обратные ссылки, присутствие на «Яндекс.Картах», наличие рекламы и т. д),
- подготовка отчета с рекомендациями.
![](https://f5-studio.ru/wp-content/uploads/2024/08/image-25.webp)
Заключение
Мы постарались собрать на нескольких страницах этого кейса большой объем проделанной работы, которой мы гордимся.
Мы выполняли этот проект с энтузиазмом, нам было интересно выполнять свою работу, а еще очень приятно и комфортно сотрудничать с сотрудниками Архангельской областной научной библиотекой имени Н. А. Добролюбова. Этот проект занимает особое место в портфолио digital-агентства F5 и в наших сердцах!
Чтобы начать переговоры по созданию портала для вашей библиотеки, пожалуйста, свяжитесь с нами любым удобным способом.