Сайт Национального исследовательского Томского политехнического университета

Результат Процесс

Концепция 

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

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


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

Использование шаблонов дает возможность администратору сайта без знания HTML быстро создавать страницы с уникальной структурой и наполнением. К тому же задача упрощается тем, что редактирование производится на «лицевой» стороне сайта.

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

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

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

Дизайн

Работа над дизайном условно разделилась на два этапа:

  1. разработка всех уникальных страниц;
  2. дизайн шаблонов для редактора контента.

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

Нарисовали около 30 адаптивных шаблонов для редактора контента.

Фронтенд

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

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

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

  • Webpack для сборки компонентов в монолитные css и js файлы.

  • Gulp для написания и запуска задач по сборке, копированию файлов, оптимизации графики и т. п.

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

  • PostCSS отвечает за автоматическое проставления браузерных префиксов и для реализации инлайновых svg иконок.

  • Для удобства верстки страниц мы использовали шаблонизатор Twig.

Бэкенд

На проекте использовали и разработали универсальные независимые внутренние модули, имплементирующие работу с данными и бизнес-процессами ТПУ. Весь код проходил ревью сотрудниками технического отдела заказчика.

Особенности разработки:

  • Выделение прав доступа на страницу/раздел сотруднику ТПУ. Данные сотрудника берутся из базы данных отдела кадров, поэтому всегда находятся в актуальном состоянии, что избавляет от необходимости следить за отдельными учетными записями.

  • Сохранение истории изменений страницы с возможностью просмотра и восстановления на самом сайте.

  • Интеграция с внутренними сервисами университета, такими как — новости, события, данные отделов, и внешними сервисами — социальные сети.

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

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

  • фреймворк — Yii2;
  • база Данных — Oracle Database;
  • система контроля версий — Git с сервером Gitlab.

Менеджмент

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

Некоторые факты

Создано и выполнено 779 задач. Потрачено 1836 рабочих часов. С нашей стороны в проекте участвовали 13 сотрудников. Длительность проекта — 9 месяцев.

Посмотрите результат.

Результат Процесс
Плюсануть
Поделиться

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