РАЗРАБОТКА ИНФОРМАЦИОННОЙ ПЛАТФОРМЫ ДЛЯ ОРГАНИЗАЦИИ НАУЧНО-МЕТОДИЧЕСКИХ МЕРОПРИЯТИЙ Текст научной статьи по специальности «Компьютерные и информационные науки»

УДК 004

DOI: 10.33764/2618-981X-2020-7-1-154-161

РАЗРАБОТКА ИНФОРМАЦИОННОЙ ПЛАТФОРМЫ ДЛЯ ОРГАНИЗАЦИИ НАУЧНО-МЕТОДИЧЕСКИХ МЕРОПРИЯТИЙ

Александр Сергеевич Калинин

Сибирский государственный университет геосистем и технологий, 630108, Россия, г. Новосибирск, ул. Плахотного, 10, обучающийся, тел. (962)838-20-30, e-mail: Alexander.Kalinin.g@mail.ru

Евгений Юрьевич Воронкин

Сибирский государственный университет геосистем и технологий, 630108, Россия г. Новосибирск, ул. Плахотного, 10, ст. преподаватель кафедры прикладной информатики и информационных систем, тел. (383)343-18-53, e-mail: evgeney.voron@gmail.com

Очень важно иметь функциональную информационную платформу, доступ к которой не составит особого труда у пользователей. Поэтому реализация такой платформы чаще всего происходит в web-пространстве, в виде отдельного информативного сайта с множеством страниц, помогающих пользователям ориентироваться. Разработка информационной системы в web-пространстве разделяется на frontend разработку, связанную с проектированием структуры, дизайном, версткой страниц, и backend разработкой связанной с работой БД, серверной части и т.д. Использование функциональной информационной платформы как информационной системы вуза для автоматизирования процесса НИРС кафедры значительно упростит бумажную и организационную работу кафедры. Это и прием заявок на мероприятия и оповещение участников о будущих мероприятиях и их результатах, с дальнейшей возможностью доработки информационной системы вуза и добавлением различного функционала. Для решения данной задачи рассмотрены основные аспекты web-разработки, различные инструментальные средства, средства автоматизации разработки информационной платформы.

Ключевые слова: информационная платформа; база данных; web-разработка, база данных, НИРС кафедры.

DEVELOPMENT OF AR INFORMATION PLATFORM FOR ORGANIZING SCIENTIFIC AND METHODOLOGICAL EVENTS

Alexander S. Kalinin

Sibirian State University of Geosystems and Technologies, 10, Plakhotnogo St., Novosibirsk, 630108, Russia, Student, phone: (962)838-20-30, e-mail: Alexander.Kalinin.g@mail.ru

Evgeny Y. Voronkin

Siberian State University of Geosystems and Technologies, 10, Plakhotnogo St., Novosibirsk, 630108, Russia, Senior Lecturer, Department of Applied Informatics and Information Systems, phone: (383)343-18-53, e-mail: evgeney.voron@gmail.com

It is very important to have a functional information platform, access to which will not be difficult for users. Therefore, the implementation of such a platform often in the web-space in the form of a separate informative site with many pages to help users navigate. The development of an information system in a web-space is divided into frontend development related to the design of the structure, design, page layout, and backend development related to the work of the database, server part, etc. Using a functional information platform as a university information system

to automate the department's research process will greatly simplify the paper and organizational component of the department's work. This includes accepting applications for events and notifying participants about future events and their results, with the further possibility of finalizing the university's information system and adding various functionalities. To solve this problem, the main aspects of a web development, various tools, automation tools for developing an information platform are considered.

Key words: information platform; database; web-development, database, research department.

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

Актуальность данной темы вызвана тем, что в процессе работы НИРС кафедры прикладной информатики и информационных систем встал вопрос об оптимизации сбора заявок и сопроводительных документов по конференциям, размещения информации о событиях проводимых на базе кафедры, таких как конференция по IT-технологиям в рамках ГЕО-Сибири.

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

В ходе выполнения работы, решены следующие задачи:

- проанализированы программные продукты для решения данной задачи;

- выявлены все функциональные возможности;

- разработана БД и ее система защиты;

- разработан портал с сопутствующим функционалом.

Платформа реализована в web-пространстве в виде информационного портала, в котором имеются функции современной системы управления содержимым CMS Drupal 8 и WordPress.[2]

Ключевыми особенностями платформы с точки зрения пользователя являются:

1. Возможность регистрации с любого компьютера с подключением к сети Интернет;

2. В личном кабинете отображается все поданные заявки на различные мероприятия и возможные оповещения;

3. Существует возможность в любое время отредактировать свой профиль.

Каждый пользователь информационной платформы имеет аккаунт. Пользователь может просматривать список мероприятий, на которые он подавал заявки через личный кабинет [3]. Подать заявку на текущее мероприятие, отслеживать актуальность мероприятий, дату проведения, организаторов, а также редактировать свой профиль.

Особенностями информационной web-платформы для администратора являются:

1. Добавление сторонней БД через админ-панель, для дальнейшей работы с ней и редактированию данных;

2. Отслеживание состояния заявки каждого пользователя, на разные мероприятия.

3. Выполнение новостной рассылки с оповещением о проводимом мероприятии посредством выборки из БД конкретных пользователей, а также отправление чего необходимых для заполнения документов и важной информации [4].

Работа администратора с платформой через CMS включает:

- управление правами пользователей;

- подготовку новых данных для работы с пользователями;

- обновление контентной части платформы (фото, новости, информация);

- постоянный мониторинг.

Администратор добавляет пользователей системы (обучающихся) и назначает им права доступа к базе, открывая им возможность просматривать статус о поданных заявках и предоставлять доступ к ограниченной информации, относящейся к определенным мероприятиям. В случае если права доступа пользователя необходимо изменить, администратор меняет права доступа пользователю [5].

База данных, разработанная на основе данной платформы, воплощает в себе следующие принципы:

1. Защищенность. Вход в систему и доступ ко всем возможностям осуществляется по персональному логину и паролю;

2. Мониторинг. Администратор может отслеживать изменения в БД;

3. Гибкость архитектуры. Возможность редактирования структуры данных БД;

4. Распределенный доступ. Система поддерживает архитектуру клиент-сервер и может размещаться на сервере в Интернет с распределенным доступом с различных компьютеров.

Для неавторизованного пользователя доступно минимальное количество информации [6].

При работе с БД администратор может выбрать нужную БД из селектора баз данных и открыть нужную таблицу для дальнейшей работы с ней.

Если информационная платформа размещается в web-пространстве встает вопрос о frontend и backend разработке. При frontend разработке необходимо создать сайт, при переходе на который пользователь в дальнейшем сможет зарегистрироваться и подать необходимую заявку на участие в мероприятиях. В свою очередь backend разработка подразумевает работу администратора с БД, серверной частью сайта, а также с прописыванием функциональных возможностей [7].

Рассмотрим frontend составляющую разработки.

Условно процесс создания сайта (web-проекта) можно разделить на 3 этапа:

- планирование;

- дизайн;

- разработка.

Планирование.

Данный этап можно разделить на три подэтапа:

- осуществление идей;

- разработку структуры проекта;

- проработку макета проекта.

Создание идеи.

На данном этапе нужно определиться с темой проекта (сайт, сервис). Далее, в соответствии с выбранной тематикой, необходимо собрать соответствующие материалы: текст, графика.

Разработка структуры проекта.

Когда тема проекта определена и выбран необходимый материал, следующим шагом является разработка структуры проекта. Под структурой проекта подразумеваются разделы сайта, в соответствии с которыми будет формироваться навигационное меню и строиться дизайн проекта. На этом этапе можно классифицировать материал по темам и разделам [8].

Проработка макета проекта.

После определения структуры проекта, можно составить макет проекта (схематично).

Для отрисовки наброска используется бумага и ручка или любой редактор графики, например:

- Figma [10];

- Sketch;

- Adobe Photoshop;

- Adobe Illustrator.

Важно отметить, что данный этап - это не отрисовка готового дизайн-макета, а всего лишь схематичный набросок (рис. 1), выполненный для понимания того, как на сайте будут располагаться основные информационные блоки, графика и прочие элементы дизайна.

67-я Студенческая НАУЧНАЯ

КОНФЕРЕНЦИЯ

_

Мероприятия

Л-ШЛ It'IIH А.ЛУ1 "■

67-я Студенческая 67-я Студенческая 67-я Студенческая 67-я Студенческая

Научная Научная Научная Научная

Конференция Конференция Серпом Гссдесюммиом Конференция Конференция Cltwpa-ou Г сстдаро м«ио>>

Рис. 1. Макет страницы 157

Модульная сетка.

Модульная сетка позволяет разделить страницы на отдельные столбцы по вертикали и упорядочить контент при разработке дизайна макета. Создание макета на основе сетки в будущем поможет ускорить процесс разработки (макет).

Mobile First.

В настоящее время этот подход занял нишу в разработке и дизайне сайтов. Тенденция такова, что почти 60 % пользователей Интернета используют мобильные устройства для доступа к сети, поэтому разработка не только настольной версии сайта, но и мобильной становится правилом хорошего тона. Используя этот подход, разработка макета, дизайна и верстка сайта начинается с мобильной версии, а затем уже разрабатываются макеты для других разрешений: добавляются блоки, баннеры, дополнительные элементы дизайна (рис. 2).

Рис. 2. Структура и дизайн страницы на разном разрешении девайса

Дизайн.

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

Работа над проектом.

Верстка страницы делается поэтапно: сначала пишется HTML-структура, затем добавляются стили, а после, если необходимо, пишутся скрипты, добавляются необходимые плагины и библиотеки [9].

Учитывая вышесказанное, можно условно разделить работу над проектом на следующие этапы:

- написание HTML;

- написание CSS;

- написание JS.

HTML.

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

Правила именования классов.

В проекте во всем должен быть порядок: от структуры проекта до имен классов, разметки и написания кода. Классы должны давать абстрактное понятие о блоке, к которому они относятся, чтобы код было легче читать, а затем и писать стили.

БЭМ (Блок, Элемент, Модификатор) - компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste» [10].

Пример реализации по БЭМ:

<nav class-'header_menu">

<ul class-''header_list">

<li>

<a href-''#'' class-''header_link">Главная</a>

</li>

</ul>

</nav>

CSS.

Правила именования классов подводят нас к следующему этапу. Когда написана HTML структура проекта, определены классы можно переходить к написанию CSS. стилей и нарезке макета.

Reset.css.

Цель в сбрасывании стилей браузера, которые он использует по умолчанию для отображения элементов разметки. Таким образом, при использовании reset.css не нужно переписывать стили браузера, фактически идет работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.

Normalize.css. Normalize.css наоборот, не сбрасывает все стили «в ноль», а нормализует их, приводит отображение стилей проекта к более-менее однообразию во всех современных браузерах. JS.

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

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

Emmet. Emmet - это средство работы с HTML и CSS. Плагин для работы с данным средством можно установить, например, в Sublime Text, тогда у вас появляется возможность не писать громоздкие куски кода на HTML и CSS, а записывать их в строчку, раскрывая затем в полноценную разметку.

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

Bootrstrap, Foundation, Material Design Lite. Данные фрэймворки помогают автоматизировать процесс разметки web-страницы и работы с ней.

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

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

Это что позволяет выполнять дальнейшие операции с данными, а именно:

1. Распределять зарегистрированных пользователей по базам данных.

2. Отслеживание пользователей по конкретным событиям.

3. Оповещать пользователей о приближении события.

4. Рассылать необходимые для заполнения документы и информацию.

При размещении информационной платформы в web-пространстве. Разработка начинает идти по двум сценариям frontend и backend.

В ходе разработки сайта платформы придется изучить основы:

- Графических редакторов таких как Figma, Sketch, Adobe Photoshop, Adobe Illustrator;

- HTML;

- CSS;

- JS.

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

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

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

БИБЛИОГРАФИЧЕСКИЙ СПИСОК

1. Мозгалева П. И., Гуляева К. В. Разработка информационной системы для ведения проектной деятельности // Научно-методический электронный журнал «Концепт». - 2015. -Т. 15. - С. 1-5.

2. Мозгалева П. И., Замятина О. М., Гончарук Ю. О., Савинкина У. С. Использование интернет-технологий в организации проектной деятельности студента // Концепт. - 2013. -№ 03 (март). - ART 13048.

3. Орлов С. А. Технологии разработки программного обеспечения. Учебник для вузов (3-е издание) / Изд-во «Питер2, 2004. - 528 с.

4. Интернет-ресурсы для создания сайтов [Электронный ресурс]. - Режим доступа: osuweb.blogspot.ru (дата обращения: 5.11.2013).

5. Шубина И.К. Организация специальных событий. Творческая лаборатория сценариста. - М.: Дашков и К, 2014.

6. Леонтьев Б. Веб-дизайн: хитрости и тонкости. - М.: Познавательная книга плюс: МиК, 2001. - 224 с. - (Серия «Хитрости и тонкости»).

7. Рейнбоу В. Компьютерная графика. - М.: Питер, 2003. - 766 с. - (Серия «Энциклопедия. Наиболее полное и подробное руководство»).

8. БЭМ: [Электронный ресурс]. - Режим доступа: https://ru.bem.info/methodology/quick-start/, свободный. - Быстрый старт / Методология / БЭМ.

9. Справочник по HTML: [Электронный ресурс]. - Режим доступа: http://htmlbook.ru/html, свободный. - Справочник по HTML | htmlbook.ru.

10. Что такое Figma: [Электронный ресурс]. - Режим доступа: https://skillbox.ru/media/design/chto_takoe_figma/, свободный. - Что такое Figma и как ей пользоваться | skillbox.ru.

© А. С. Калинин, Е. Ю. Воронкин, 2020