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

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

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

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

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

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 отображается граф, вершины которого соответствуют темам, а ребра – логическим связям между темами) и позволяет выполнить поиск пути к выбранной вершине графа, после чего, используя выделенный подграф, можно легко приступить к изучению прежде не знакомой области знаний.

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