В статье рассматривается разработка онлайн-системы для лиц с ограниченными возможностями.
Ключевые слова: онлайн-система, помощь, лица с ограниченными возможностями.
Структура онлайн-системы
При проектировании онлайн-системы необходимо разработать концепцию сайта, структуру и дизайн.
Цель онлайн системы — создать условия для того, чтобы лица с ограниченными возможностями нашли себе помощников, а волонтеры — тех, кому нужна помощь.
Целевая аудитория — жители г. Якутска Республики Саха (Якутия), разделенные на 2 категории:
– Лица с ограниченными возможностями.
– Лица, желающие оказать помощь; волонтерские организации; социально-ориентированный бизнес.
Функционал сайта — возможность получения информации о лицах с ограниченными возможностями, об их проблемах, возможность добавлять подобную информацию. Основной контент ресурса — объявления. Структура web-сайта — это перечень разделов, страниц, подразделов и других функциональных блоков, которые могут использоваться в качестве отдельных элементов, а также их взаимосвязей. [1]
Структура онлайн-системы является гибридной, состоящей из иерархической и паутинообразной структур, состоит из 2 крупных функциональных блоков:
– #Нужна помощь
– #Могу помочь
Рис. 1. Структура онлайн-системы
На главной странице сразу видно разделение на 2 блока: «#НУЖНА ПОМОЩЬ», «#МОГУ ПОМОЧЬ», а также есть информация в виде модального окна, доступного при нажатии кнопки, о проекте, его цели и назначении. При переходе на любой блок, доступна регистрация новых пользователей и авторизация для входа в онлайн систему чтобы добавить объявление. Каждый блок представляет собой доску объявлений по разным категориям.
Категории блока «#НУЖНА ПОМОЩЬ»:
– необходимы продукты
– помощь на дому
– социальное такси
– иное
Категории блока «#МОГУ ПОМОЧЬ»:
– могу помочь продуктами
– помощь на дому
– помощь в проезде волонтера к нуждающемуся
– социальное такси
– помощь в регистрации на данной онлайн системе
– иное
В каждом блоке есть возможность добавления нового объявления после авторизации в онлайн системе. Также после авторизации возможен доступ к Профилю, который состоит также из 2 частей: «мои объявления» и «мои настройки».
Дизайн онлайн-системы простой, используется несколько основных цвета: белый и разные оттенки синего цвета. Данный дизайн продиктован тем, что в одной из целевых групп могут быть лица с ослабленным зрением, в связи с этим использован контрастный и минималистичный дизайн. [2]
Разработка онлайн-системы
Для написания кода была использована программа Adobe Dreamweaver CS6. Программное обеспечениеAdobe Dreamweaver CS6 — мощное программное обеспечение для web-дизайна и создания визуальных проектов. Встроенные подсказки в Adobe Dreamweaver позволяют более точно создавать код в HTML, JavaScript, Ajax, Spry, jQuery и Prototype.
Рис 2. Физическая структура онлайн-системы
Физическая структура сайта позволяет менять дизайн и его функции при помощи языка программирования PHP. Сайт включает в себя следующие основные файлы и каталоги:
- Каталог «css». содержит таблицы стилей для настройки расположения элементов сайта.
- Каталог «fonts». Библиотека шрифтов Glyphicon из состава фрейворка Bootstrap 3.
- Каталог «include». PHP скрипты
- Каталог «js». jQuery плагины
- Корневой каталог. PHP-скрипты онлайн-системы.
MySQL обладает высокой устойчивостью, высокой скоростью работы, простотой в настройке и использовании, исходники сервера компилируются на множестве платформ, поэтому СУБД MySQL является достойным решением для небольших программ. [3]
База данных онлайн-системы состоит из двух таблиц:
– Topic
– Users
В таблице topic хранится информация об объявлениях, таблица users хранит информацию о пользователях.
Таблица 1
Объявления
|
Имя поля |
Назначение поля |
Тип данных |
|
id |
первичный ключ |
счетчик |
|
user_id |
идентификатор пользователя |
числовой |
|
text |
текст объявления |
текстовой |
|
cat |
категория объявления |
числовой |
|
type |
тип объявления (блок) |
числовой |
|
edate |
дата и время добавления |
дата/время |
Таблица 2
Пользователи
|
Имя поля |
Назначение поля |
Тип данных |
|
id |
первичный ключ |
счетчик |
|
login |
логин |
текстовой |
|
password |
hash пароля |
текстовой |
|
passw |
пароль |
текстовой |
|
name |
ФИО |
текстовой |
|
tel |
телефон |
текстовой |
|
type |
регистрация по типу (блок) |
числовой |
|
edate |
дата и время добавления |
дата/время |
На главной странице есть возможность выбора 2 функциональных блоков: #НУЖНА ПОМОЩЬ и #МОГУ ПОМОЧЬ, а также есть кнопка «О проекте», который показывает информацию об онлайн-системе в модальном окне.
Рис.3. Главная страница
Рис.4. Блок «#НУЖНА ПОМОЩЬ»
Функциональный блок «#НУЖНА ПОМОЩЬ» представляет собой доску объявлений. Кроме объявлений на ней отображается 2 уведомления с предупреждением о режиме повышенной готовности на территории Республики Саха (Якутия), мерах по противодействия распространения новой коронавирусной инфекции (COVID-19) и алгоритмом действий для нового пользователя. Есть возможность регистрации и авторизации.
Функциональный блок «#МОГУ ПОМОЧЬ» также представляет собой доску объявлений. Кроме объявлений на ней отображается уведомление с предупреждением о режиме повышенной готовности на территории Республики Саха (Якутия), мерах по противодействия распространения новой коронавирусной инфекции (COVID-19). Есть возможность регистрации и авторизации.
Рис.6. Добавление нового объявления
В каждом из функциональных блоков, при условии авторизации, есть возможность добавления нового объявления, а также доступ к профилю пользователя.
Таким образом, была разработана онлайн-система, создающая условия для того, чтобы лица с ограниченными возможностями нашли себе помощников, а волонтеры — тех, кому нужна помощь.
Литература:
- Проектирование структуры web-сайта https://www.a5.ru/blog/proektirovanie-struktury-web-sayta/ (дата обращения: 24.12.2019). — Текст: электронный.
- Введение в веб-доступность URL: https://www.w3.org/WAI/fundamentals/accessibility-intro/ru (дата обращения: 01.06.2020). — Текст: электронный.
- Федорчук Д. А. Разработка WEB приложений на PHP и MySQL — СПб.: Корона-принт, 2013. — 340 c.
