РАЗРАБОТКА АДАПТИВНОЙ ВЕБ-ОРИЕНТИРОВАННОЙ ИНФОРМАЦИОННОЙ СИСТЕМЫ СПОРТИВНОЙ ЭНЦИКЛОПЕДИИ

Аннотация

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

Abstract

Vasiaeva T.A., Martynenko T.V., Riabko M.A. Development of an adaptive web-based information system for sports encyclopedia. The design and development of a web-based sports encyclopedia information system is considered, during which modern methods for creating an adaptive web interface of the system are analyzed and applied. Modern methods and technologies for creating adaptive web design are analyzed and their comparative characteristics are presented. A web-based sports encyclopedia information system was implemented and tested on various devices.

Ключевые слова

адаптивность; веб-ориентированная система; веб-дизайн; мобильный дизайн; Responsive Web Design, Mobile-first approach, Adaptive Web Design, Progressive Enhancement.

Keywords

adaptability; web-based system; Web design; mobile design; Responsive Web Design, Mobile-first approach, Adaptive Web Design, Progressive Enhancement.

Введение

В современном мире все больше и больше людей используют свои мобильные устройства для доступа к сети интернет. Это создает значительные вызовы для веб-разработчиков, которые должны обеспечить оптимальное отображение своих веб-сайтов на различных устройствах (ПК, смартфоны, планшеты) под разными операционными системами (Windows, Android, IOS).

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

Цель исследования

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

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

В начале разработки необходимо определить функции системы, их цели и задачи. Требования к функционалу системы представлены в табл. 1.

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

Таблица 1 – Функции системы

Исследование методов и моделей

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

Mobile-first approach

Mobile-first approach - модель, при которой сайт проектируется и разрабатывается в первую очередь для мобильных устройств, а затем адаптируется для более крупных экранов. Такой подход позволяет оптимизировать пользовательский интерфейс и функциональность для мобильных устройств, учитывая их ограниченные возможности и размеры экрана. После этого дизайн масштабируется для больших экранов.

Responsive Web Design

Responsive Web Design – метод дизайна, который позволяет сайту адаптироваться к разным размерам экранов. Это достигается путем использования гибких сеток и медиа-запросов в CSS.

Гибкая сетка – это метод разметки, который позволяет создавать адаптивные макеты. Размещение элементов на основе пропорций помогает легко адаптировать веб-сайт к различным экранам и устройствам. Flexbox (гибкая раскладка) и Grid (сетка) являются двумя основными инструментами для размещения элементов на веб-странице.

Инструменты и технологии гибкой сетки для мобильного дизайна:

1. CSS Flexbox. С его помощью можно легко управлять визуальным порядком и расположением элементов в ряду или в столбце, а также создавать адаптивные макеты.
2. CSS Grid. Он предоставляет более гибкие возможности для размещения элементов на веб-странице в виде сетки, состоящей из строк и столбцов [1].
3. CSS Media Queries позволяют применять разные стили CSS, основанные на физических характеристиках устройства, таких как ширина экрана или разрешение [2].
4. CSS Frameworks. Существующие различные CSS-фреймворки, такие как Bootstrap, Foundation и Bulma, предлагают предварительно созданные компоненты и сетки для разработки гибкого мобильного дизайна.
5. JavaScript библиотеки и фреймворки, такие как React, Angular или Vue.js. Они предлагают компоненты и инструменты для эффективной работы с гибкими сетками, а также позволяют создавать динамические макеты, которые могут изменяться в зависимости от размеров и ориентации экрана [3].

Adaptive Web Design

Adaptive Web Design - метод, основанный на создании нескольких версий сайта для разных категорий устройств [4]. Когда пользователь заходит на сайт, сервер определяет тип устройства и отправляет соответствующую версию сайта.

Progressive Enhancement

Progressive Enhancement - модель, которая заключается в создании базовой версии сайта, которая будет работать на всех устройствах, а затем постепенно добавлять более сложные возможности для более мощных устройств.

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

Проектирование и разработка веб-базированной информационной системы спортивной энциклопедии

Вся информация должна храниться в структурированной форме под управлением СУБД. Для работы с базой данных сайта был выбран инструмент под названием PHPMyAdmin. PHPMyAdmin – это удобный инструмент для управления базами данных MySQL [5]. При разработке базы данных использован фреймворк Yii, основанный на компонентной структуре PHP и высокоэффективный для разработки масштабных веб-приложений.

Разработка моделей данных

Исходя из имеющейся информации о поведении разрабатываемой системы, выделены сущности данных, необходимые для ее функционирования (табл. 2-3).

Таблица 2 – Описание таблиц базы данных для веб-ориентированной системы

Таблица 3 – Атрибуты сущностей модели

Разработана логическая модель данных (рис. 1) и физическая модель данных (рис. 2).

Рис. 1 – Логическая модель данных веб-ориентированной системы

Рис. 2 – Физическая модель данных

Для построения диаграммы классов была выбрана программа «Enterprise Architect». В данной программе реализован удобный интерфейс для работы с диаграммами и присутствует большой выбор инструментов. Объектная модель разрабатываемой системы представлена в виде диаграммы классов (рис. 3).

Рис. 3 – Диаграмма классов информационной системы спортивной энциклопедии

При разработке веб-базированной информационной системы спортивной энциклопедии для создания адаптивного веб-дизайна были использованы инструменты Bootstrap, HTML5 и CSS3 с использованием div-верстки. Данный способ позволяет сделать разметку страницы веб-сайта на необходимое количество колонок, в которых будет содержаться контент страницы или различные элементы. Колонки нужны для разделения области просмотра по горизонтали, при этом в одном ряду могут быть столбцы разной ширины. Их размер может изменяться в зависимости от некоторых факторов.

Тестирование веб-базированной информационной системы спортивной энциклопедии

Тестирование адаптивности было проведено с помощью встроенных инструментов для разработчиков в браузере Google Chrome. Данный инструмент содержит большое количество мобильных устройств, планшетов и десктопов, а также позволяет задавать разрешение экрана устройства. Тестирование выполнялось на:

• устройстве ASUS VivoBook. Это ноутбук с разрешением экрана 1920x1080.
• устройстве iPad Pro. Данное устройство является планшетом с разрешением экрана 1024x1366.
• мобильном телефоне Samsung Galaxy A51 с разрешением экрана 412x914.
• на планшете, который является устройством для управления технологией «умного дома» Google Nest Hub Max. Разрешение данного устройства 1280x800.

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

Заключение

Проведен анализ современных методов и технологий для создания адаптивного веб-дизайна. Для разработки адаптивной веб-базированной информационной системы выбраны и применены инструменты Bootstrap, HTML5 и CSS3. Спроектирована, разработана и протестирована веб-базированная информационная система спортивной энциклопедии. Для работы с базой данных сайта использован PHPMyAdmin, фреймворк Yii. Результаты тестирования системы подтвердили удобство работы с веб-системой на устройствах с разным разрешением.