Международный
научный журнал

Разработка WEB-проекта систематизации знаний


Design of a web-project for the knowledge systematization

Цитировать:
Косинцев Р.Э., Жаркова О.М. Разработка WEB-проекта систематизации знаний // Universum: Технические науки : электрон. научн. журн. 2018. № 6(51). URL: http://7universum.com/ru/tech/archive/item/6072 (дата обращения: 18.07.2019).
 
Прочитать статью:


АННОТАЦИЯ

В работе предложен web-проект систематизации знаний. Созданный проект имеет структуру направленного графа, отображающего взаимосвязи между темами различных дисциплин. Вершины графа соответствуют темам, а ребра – логическим связям между темами. В качестве технологий для создания web-проекта были использованы: HTML5, XML, CSS3, JavaScript, PHP, SQL, их расширения и библиотеки: SIGMA JS, JQuery, AJAX, PDO, JSON. В статье дается подробное описание проекта на уровне Front-end иBack-end. В настоящее время сайт находится в стадии заполнения и выложен по адресу http://prosiz.ru.

ABSTRACT

A web-project for the systematization of knowledge is proposed. The created project has the structure of a directed graph that shows the interrelations between the subjects of different disciplines. The points of the graph correspond to the subjects. The edges of the graph correspond to logical connections between the subjects. As technologies for creating a web-project were used: HTML5, XML, CSS3, JavaScript, PHP, SQL, their extensions and libraries (SIGMA JS, JQuery, AJAX, PDO, JSON). The article gives a detailed description of the project at the Front-end and Back-end levels. Currently the site is being filled. The website address is http://prosiz.ru.

 

Ключевые слова: систематизация знаний, направленный граф.

Keywords: systematization of knowledge, directed graph.

 

Одной из важнейших особенностей современной науки является возникновение сложной иерархии специализированных дисциплин. При этом углубление специализации имеет место не только для естественных наук, но и в других областях: техника, медицина, искусство. В настоящее время возникает много наук «на стыке» традиционных дисциплин, например, биофизика, физическая химия, геохимия, астрофизика и т.д. Это связано с тем, что часто решение серьёзных научных задач возможно при использовании знаний и методов многих традиционных дисциплин. В связи с этим современному учащемуся сложно разобраться в выборе дисциплин для изучения области будущей деятельности, а специалисту часто требуется помощь в выборе дисциплин для повышения своей квалификации.

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

Знания можно разбить на отдельные темы, так, например, в учебниках курс по предмету разбит на отдельные темы. Для того чтобы структурировать знания, разбитые на темы, автор применил направленный граф. Вершинами графа обозначены темы предметов, а рёбрами – связи между темами. Направление ребер указывает зависимость одной темы от другой.

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

  1. Выбор регистратора доменов.
  2. Выбор названия домена и его регистрация.
  3. Выбор хостинга и подключение домена.
  4. Выбор средств для создания сайта.

В качестве регистратора доменов был выбран «REG.RU», название домена – «prosiz.ru», хостинг также выбран от «REG.RU».

На «Front-end» было решено использовать библиотеку «SIGMA JS» и тэг «canvas» из стандарта HTML5 для отображения графа на странице.

На «Back-end» используются PHP скрипты и база данных MySQL.

Front-end

На начальном этапе требовалось создать общее представление, стиль проекта. Так как граф напоминает созвездия и звёздное небо, было решено создавать проект в тёмном стиле, главным цветом был выбран тёмно-синий. Был создан логотип проекта (рис. 1), опираясь на главную функцию проекта – выделение из суперграфа, подграфа, выделяя в него все зависимые вершины.

 

Рисунок 1. Логотип проекта

 

Логотип был выполнен в формате векторной графики, и в проекте используется в формате SVG, для уменьшения объёма и увеличения качества.

Далее были спроектированы основные элементы интерфейса:

  • Сверху страницы шапка во всю ширину, с двумя кнопками по бокам и логотипом по центру.
  • Кнопки в шапке сайта открывают меню с инструментами для работы с графом.
  • Подвал сайта не требуется.
  • Вертикальный скролл должен отсутствовать.
  • Максимум пространства для отображения графа.
  • В правом нижнем углу кнопка для справки.

Все элементы реализованы с использованием HTML5, CSS3, JavaScript.

Далее требовалось создать инструменты для работы с системой. Отдельно инструменты для пользователя:

  1. Форма для регистрации и авторизации пользователя.
  2. Поиск вершины графа по названию.
  3. Информация о выбранной вершине.
  4. Кнопка для пометки вершины как пройденной.
  5. Кнопка для выделения подграфа, до выделенной вершины.

Первые два элемента помещены в правое меню, остальные – в левое. Таким образом, справа помещено меню с информацией о пользователе, а слева меню с информацией о выделенной вершине.

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

В левое меню (рис. 2) добавляются кнопки для редактирования. После клика по вершине графа левое меню заполняется информацией об этой вершине – название, список рёбер, следующих из этой вершины и список рёбер, следующих в эту вершину. К каждому элементу списка относятся 4 кнопки:

  • Для применения каких-либо изменений.
  • Для разделения связи и вставки новой вершины.
  • Для стягивания вершин по связи, при этом все рёбра стягиваемых вершин объединяются.
  • Для удаления связи.

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

 

Рисунок 2. Левое меню

 

Сам граф отображается на «холсте» (тег “canvas” в HTML5) с помощью библиотеки SIGMA JS. Вся информация о графе загружается с сервера. Если пользователь авторизован, загружается информация и о пройденных вершинах. Информация передаётся в формате JSON, удобном для парсинга в JavaScript. На JavaScript написаны все обработчики любых действий пользователя. В основном это обработка нажатий и либо изменение информации на странице, например, обновление информации о выделенной вершине графа, либо отсылка информации на сервер, например, при отметке вершины пройденной или редактировании графа администратором.

С сервера также загружается информация о цвете вершин разных типов – пройденных, выделенной, доступных для изучения, и их hover эффектов. Библиотека SIGMA JS позволяет изменять функции для отображения вершин графа, в которых было настроено использование переданных настроек о цветах, для отображения.

Back-end

Для хранения информации на сервере используется БД MySQL, в которой созданы 4 таблицы:

  1.  Для хранения информации о зарегистрированных пользователях, их полномочиях.
  2.  Для хранения информации о каждой вершине.
  3.  Для хранения информации о рёбрах графа, в ней всего 3 столбца: ID ребра, ID первой вершины и ID второй вершины.
  4.  Для хранения информации о пройденных вершинах всех пользователей, сохраняется только ID пользователя и ID пройденной вершины.

На стороне сервера все запросы обрабатываются PHP скриптами. Так скрипт, предназначенный для живого поиска, принимает массив строк, ищет любые совпадения и возвращает список найденных вершин. Два скрипта предназначены для установки и удаления отметки о прохождении вершины. Имеются скрипты для изменения и получения информации о вершинах. Все скрипты взаимодействуют с БД и очень важно если есть информация от пользователя исключить возможность SQL-инъекций. В этом проекте все запросы к БД подготавливаются специальной функцией класса для работы с БД PDO::prepare(), что полностью исключает возможность SQL-инъекций.

WEB-проект систематизации знаний

Всего проект включает 6 файлов PHP скриптов на сервере, которые выполняют функции авторизации, изменения графа, получения информации из БД, живого поиска. Проект содержит также 4 таблицы, содержащие информацию о пользователях, отметках пользователей о пройденных вершинах, вершинах и ребрах графа. Есть файлы скриптов, библиотеки SIGMA JS, и HTML содержимого.

В настоящее время сайт находится в стадии заполнения и выложен по адресу http://prosiz.ru. Скриншот заглавной страницы сайта представлен на рис. 3. В центре находится сам граф с подписанными вершинами. Пользователь имеет возможность увеличения масштаба. Для работы с сайтом пользователю необходимо выбрать вершину и нажать кнопку «найти зависимость», после этого на экране появляется результат работы сайта. При первом посещении сайта пользователю выдается сообщение с приветствием и краткой информацией о системе. После получения полномочий администратора в меню появляется инструментарий для редактирования графа.

 

Рисунок 3. Скриншот сайта

 

В ходе работы был создан web-проект систематизации знаний. В качестве технологий для создания web-проекта были использованы: HTML5, XML, CSS3, JavaScript, PHP, SQL их расширения и библиотеки: SIGMA JS, JQuery, AJAX, PDO, JSON.

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

Проект сейчас находится на стадии разработки и заполнении графа информацией.

 

Список литературы:
1. Дж. Клир. Системология. Автоматизация решения системных задач. М. Радио и связь – 1990, 538 с.
2. Кононюк А.Е. Системология. Общая теория систем. В 4-х кн. Киев: 2014. - 564 с.
3. Ресурсы SIGMA JS на github. – URL: https://github.com/jacomyal/ sigma.js
4. Справочник HTML. URL: https://webref.ru/html
5. Справочник HTML5. – URL: http://htmlbook.ru/html5
6. Справочник CSS. – URL: https://webref.ru/css
7. Справочник CSS3. – URL: http://htmlbook.ru/css3
8. Современный учебник Javascript – URL: https://learn.javascript.ru
9. Справочник PHP. – URL: http://php.net
10. Сайт библиотеки SIGMA JS. – URL: http://sigmajs.org
11. Ф.Харари Теория графов М.: Мир, 1973, 300 стр.
12. The CanIUse Embed. – URL: https://caniuse.com

 

Информация об авторах:

Косинцев Ричард Эдуардович Richard Kosintsev

студент, Кубанский государственный университет, 350040 РФ, г. Краснодар, ул. Ставропольская, 149

student, Kuban State University, Stavropolskaya Street, 149 Krasnodar 350040, Russia


Жаркова Оксана Михайловна Oksana Zharkova

канд. физ.-мат. наук, доцент, Кубанский государственный университет, 3, 50040 РФ, г. Краснодар, ул. Ставропольская, 149

Candidate of Physical and Mathematical sciences, Kuban State University, Stavropolskaya Street, 149 Krasnodar 350040, Russia


Читателям

Информация о журнале

Выходит с 2013 года

ISSN: 2311-5122

Св-во о регистрации СМИ: 

ЭЛ №ФС77-54434 от 17.06.2013

ПИ №ФС77-66236 от 01.07.2016

Скачать информационное письмо

Включен в перечень ВАК Республики Узбекистан

Размещается в: 

doi:

The agreement with the Russian SCI:

cyberleninka

google scholar

Ulrich's Periodicals Directory

socionet

Base

 

OpenAirediscovery

CiteFactor

Поделиться

Лицензия Creative CommonsЯндекс.Метрика© Научные журналы Universum, 2013-2019
Это произведение доступно по лицензии Creative Commons «Attribution» («Атрибуция») 4.0 Непортированная.