Программно-информационная система просмотра расписания вуза с механизмом адаптации страницы к условиям отображения

The article considers the problem of adapting the presentation of a web page to various display conditions. The approach to development was selected on the basis of the Saati analysis. The description of the developed system of viewing of the schedule with the module of adaptation of a page layout for various devices is given. Keywords: responsive design, Saati method, RESS, page layout.

Развитие современных технологий привело к появлению огромного количества различных устройств, используемых для выхода в Интернет. От особенностей этих устройств(размер экрана, устройство ввода, вычислительная мощность) и браузеров зависит вид получаемой пользователем страницы. Соответственно возникла проблема обеспечения корректного отображения страницы для разных типов устройств. Поэтому при разработке системы удаленного доступа к расписанию ВУЗа была поставлена задача реализовать адаптивный дизайн.

Были выделены подходы к разработке адаптивного дизайна: Graceful Degradation, Progressive Enhancement, Mobile First, RESS, так же было рассмотрено создание мобильной версии сайта. Для данных подходов был проведен сравнительный анализ методом Саати.

Для анализа был выбран следующий набор критериев:

• 1.    A 1 – Сохранение функционала на разных устройствах

• 2.    A₂ – Скорость загрузки страницы

• 3.    A₃ –Экономия трафика

• 4.    A 4 – Удобство поддержки и обновления

• 5.    A 5 – Сложность разработки

• 6.    A₆ – Использование особенностей и возможностей устройств

Методом парных сравнений были определены весовые коэффициенты ля каждого критерия.

Диаграмма весовых коэффициентов

■ А1 - Сохранение функциональности

■ А2 - Скорость загрузки страницы

□ АЗ-Экономия трафика

■ А4 - Удобство сопровождения и внесения изменений

□ А5 - Сложность разработки

□ Аб - Использование возможностей устройства

0,03

Рисунок 1. Диаграмма весовых коэффициентов критериев

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

Была дана экспертная оценка по каждому критерию подхода(значение бралось по категориальной шкале от 0 до 9). Результаты оценки представлены на лепестковой диаграмме.

Рисунок 2 – Лепестковая диаграмма значений характеристик качества

Был рассчитан интегральный показатель качества для каждого подхода(рисунок 3).

Интегральный показатель качества Q

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

Опираясь на результаты анализа было принято о разработке адаптивного дизайна с использованием RESS подхода с элементами PE.

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

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

Общий вид структуры системы:

Рисунок 4. Общая структура системы.

Процессы определения устройства и генерации страницы отображены на рисунках 5 и 6.

Рисунок 5. Общая структура системы.

Рисунок 6. Процесс генерации страницы.

Требования к функциям системы:

• •   Определение типа подключенного устройства

• •    Выбор шаблона на основе определения и генерация страницы

• •   Возможность просмотра расписания в разрезе

групп/аудиторий/преподавателей на выбранную дату(период)

Рисунок 7. Диаграмма вариантов использования.

Интерфейс разработанной системы

ВПИ Расписание на 2 семестр 16-17 года

Вера м дм

- По группе По аудитории По преподавателю

Отправить

2017-02-21

13:00 Компьютерная графика В-209 ВПП-308 Абрамова лаб.

14:40 Компьютерная графика В-209 ВПП-308 Абрамова лаб.

2017-02-22

09:40 Сети и телекомму«вкапни

А-12 ВИП-308 Саньков лек.

11:20 Сеги и телекоммуникации

А-29 ВПП-308 Саньков        лаб.

13:00 Сети и телекоммуникации

А-29 ВИП-308 Саньков лаб

Рисунок 9. Представление страницы на мобильном устройстве.

Рисунок 8. Представление страницы на настольном компьютере.

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

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

• •    появилась возможность просмотра расписания в разрезе групп/аудиторий/преподавателей

• •    был сокращен объем трафика между пользователем и сервером