Сайт образовательного учреждения: разработка по всем правилам

Сайты государственных образовательных учреждений – это всегда задания повышенной сложности по разработке. Методическое пособие по решению этих заданий содержит 110 страниц и более 300 обязательных пунктов. Если сайт учебного заведения не соответствует требованиям законодательства, организацию могут оштрафовать и даже лишить лицензии.

Поставлены задачи:

1. Современное и имиджевое представление МГАХ: дать уместное прочтение ресурса, который, сохраняет историческое наследие и богатую историю, и при этом стремится соответствовать современным реалиям;

2. Переработка структуры и функциональности сайта: из-за большого объема представленной информации, не все страницы были легкодоступны, а некоторые и недоступны посредством базовой навигации в старом интерфейсе;

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

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

5. Реализация возможности переключения сайта на версию для слабовидящих;

6. Разработка версии сайта на английском языке с уникальной структурой и меню с целью увеличения количества иностранных студентов и повышения предметного интереса со стороны зарубежных СМИ.

Главный вызов такого проекта - соблюсти баланс интересов и требований: сделать сайт Московской государственной академии хореографии по жестким методическим указаниям, объединить изящество балета, образовательные стандарты, более 500 страниц документов и уложить творческие порывы в программную логику.

Проектирование

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

Вторая особенность - жесткие законодательные требования к образовательным сайтам с 1 сентября 2024. В разработке любого образовательного сайта нет места вольности, успех кроется в единообразии. В меню должны быть от 12 до 14 пунктов, которые понятны пользователю, облегчают навигацию по ресурсу и остаются доступными на любой странице сайта.

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

Решение в дизайне – многоуровневое меню

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

Дизайн-концепция

МГАХ работает более 250 лет, у академии есть история, стиль и статус. Для ее сайта команда Morizo выбрала минималистичный дизайн со сдержанными, благородными цветами, большим количеством «воздуха» и с четкой, понятной структурой. При этом главная страница во многом напоминает балетную постановку на сцене Большого театра. Есть «вторая линия» – верхнеуровневое меню по всем требования законодательства, «первая линия» – меню для посетителей сайта с полезной информацией, далее «солисты» – видео, анимированный слайдер с фактами об академии и интерактивный блок истории в пределах первых двух скроллов. В качестве «либретто» – быстрые ссылки на самые востребованные страницы сайта, с их помощью пользователи в пару кликов находят нужные сведения.

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

Историческая значимость - часть бренда академии.

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

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

Декорации или вижуалы – эффектная, но массивная часть сайта. Для ускорения загрузки страниц разработчики использовали JPEG 2000, JPEG XR и WebP, такие форматы изображений подгружаются быстрее и потребляют вдвое меньше трафика по сравнению со стандартными PNG и JPEG. Сейчас в зависимости от расположения сервера десктопная загрузка сайта занимает от 0,257 до 1,059 сек.

Раздел «Выставки» на базе конструктора

Учитывая, что МГАХ – научно-исследовательское учреждение, на сайте нужен был раздел для демонстрации онлайн-выставок, мероприятий и статей. Большой объем информации и медиа материалов необходимо «разложить» в удобный читаемый и интерактивный формат, чтобы пользователям было интересно и легко ее воспринимать.

Решение

Создание гибкого дизайн шаблона из блоков, которые можно выстраивать в любой последовательности, каждый раз создавая уникальную страницу;

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

Но вернемся к условиям задачи -требованиям к обязательной документации

Работа с документами и данными

На сайте в открытом доступе размещаются 13 подразделов в разделе “Документы”. Еще более 20 документов могут понадобиться и на других отдельных страницах сайта, все должны быть с электронной подписью. На обновление любых данных законодательством отводится 10 дней.

Вариант реализации – цифровое хранилище

До модернизации интернет-ресурс МГАХ содержал более 500 страниц, поэтому вариант постраничного размещения мы не рассматривали.

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

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

Обязательные требования по HTML-разметке

Для успешного прохождения автоматического аккредитационного мониторинга сайт должен набрать 100% — это возможно только при безупречной HTML-разметке строго по методическим рекомендациям. Мы проставили все необходимые тэги с атрибутами (itemprop="addRef") в каждом разделе (от 2 до 18 идентификаторов на раздел), чтобы система проверки соответствия законодательству не нашла ошибок. Результат — 100% соответствие.

Доступность и инклюзивность

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

Наполнение и управление контентом

В учебных заведениях редко есть штатный техспециалист, поэтому администрирование должно быть максимально простым. Мы внедрили на базе «1С-Битрикс» новую систему с 64 модулями и 11 справочниками, позволяющую управлять контентом без знания HTML. Конструктор с блоками и шаблонами под фото/видео упрощает вёрстку длинных материалов, а размещение в нескольких разделах экономит время — в итоге администрирование ускорилось в три раза.

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

Основные задачи английской версии сайта: привлечение иностранных студентов на обучающие программы МГАХ и предоставление четкого алгоритма поступления в Академию для студентов и их родителей. Реализована структура и меню, проработано 15 уникальных дизайн-макетов. Средствами CMS добавлен новый функционал управления контентом.

После девяти месяцев напряженной работы сайт МГАХ получился информативным, легким и привлекательным. Именно таким, какой ценят в мире балета и образования. Для команды Morizo это был важный опыт, который пригодится при создании сайтов для школ, колледжей и любых других организаций, где существуют множество требований и правил, а также важны большие архивы документов.

Результат:

• 52 уникальных дизайн макетов;

• 70 инфоблоков и 12 справочников для удобного управления контентом;

• Более 200 конечных страниц сайта, собранных на изначально созданных компонентах из дизайн макетов;

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