ПРИМЕНЕНИЕ ФРЕЙМВОРКА RUBY ON RAILS ДЛЯ АНИМИРОВАННОГО ВИЗУАЛЬНОГО ПРЕДСТАВЛЕНИЯ ГРАФИЧЕСКОЙ ИНФОРМАЦИИ И ДЛЯ ОРГАНИЗАЦИИ ВЕБ-САЙТА ЭЛЕКТРОННОГО ЖУРНАЛА

Е.А. Роганов

Национальный исследовательский ядерный университет «МИФИ», Россия

EARoganov@mephi.ru

 

Содержание

1. Введение

2. Анимация статистических данных

3. Визуализации позиции в рейтинге

3.1. Рейтинговая система оценок

3.2. Индуктивное вычисление рейтинга

3.3. Визуализация графиков однопараметрического семейства функций

4. Веб-сайт электронного журнала

4.1. Веб-ориентированные формы представления научных материалов

4.2. Markdown и Pandoc

4.3. Ruby on Rails как средство создания электронного журнала

5. Заключение

Список литературы

 

Аннотация

Рассматриваются возможности использования фреймворка Ruby on Rails для визуализации графической и текстовой информации. Описываются способы применения SVG-анимации и AJAX-технологии для изображения графиков однопараметрического семейства функций. Для визуализации изменение во времени позиции в рейтинге кафедр с помощью анимации «с нуля» создаётся простое Rails-приложение.
Затем в реально используемое в учебном процессе веб-приложение добавляется возможность визуализации изменения позиции студента в рейтинге. Предлагается метод эффективного вычисления этой позиции.

Даются предложения по разработке веб-сайта электронного журнала на основе использования таких свободных современных программных продуктов и информационных технологий, как язык разметки Markdown, библиотека MathJax, конвертер документов Pandoc, фреймворк Ruby on Rails. Markdown был первоначально создан как удобный язык для непосредственного чтения и редактирования, из которого легко получить HTML. Сейчас этот язык широко используется для подготовки научных публикаций и учебных материалов. Появление конвертера документов Pandoc сделало Markdown своебразным «универсальным» языком.

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

 

Ключевые слова: Ruby on Rails, Free Software, SVG, AJAX, визуализация позиции в рейтинге, индуктивные функции, Markdown, Pandoc.

 

1. Введение

 

«Ruby on Rails (RoR) — фреймворк, написанный на языке программирования Ruby, реализует архитектурный шаблон Model-View-Controller для веб-приложений, а также обеспечивает их интеграцию с веб-сервером и сервером баз данных. Является открытым программным обеспечением и распространяется под лицензией MIT.» — так описывает Ruby on Rails [1] Википедия. Среди наиболее известных приложений, которые построены на основе Ruby on Rails, можно назвать GitHub и Shopify. Общее количество приложений, созданных на основе этого фреймворка с момента его появления в 2004 году, измеряется сотнями тысяч. Многие информационные системы МИФИ также разработаны на основе Ruby on Rails.

Ruby on Rails — динамично развивающийся фреймворк, последняя версия которого (5.0.0) вышла 30 июня 2016 года. Несмотря на его активное использование в самых различных областях [2-4], он достаточно редко применяется для решения задач, связанных с обработкой больших объёмов данных и визуализацией различных типов данных.

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

 

 

Описанные в первых двух разделах задачи являются модельными и иллюстрируют возможности фреймворка Ruby on Rails и простоту его использования для построения графиков функций и их анимированного представления. Опыт показывает, что студенты второго курса, владеющие основами объектно-ориентированного программирования, в состоянии освоить основы Ruby on Rails в течение месяца.

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

Важно отметить, что все используемые при описываемом подходе технологии и программные продукты являются свободными (Free Software). Кроме того, веб-приложения, созданные с использованием Ruby on Rails, используют интерпретируемые языки (Ruby, Haml, SASS, JavaScript, CoffeeScript, SASS, Markdown и ряд других), поэтому они всегда содержат полные исходные коды, которые легко читаемы и модифицируемы. Последнее обеспечивает простоту модификации кода и бо́льшую независимость от конкретного программиста.

 

2. Анимация статистических данных

 

В качестве первого примера использования фреймворка Ruby on Rails для визуализации графической информации рассмотрим задачу обработки чуть менее 400000 оценок студентов МИФИ, полученных ими за последние четыре года во время зачётно-экзаменационных сессий. Мы будем учитывать только положительные оценки, которыми в системе оценивания ECTS являются , , ,  и . При вычислении среднего балла будем использовать следующую шкалу перевода: , , , , .

Для всех кафедр университета и для каждой из преподаваемых на конкретной кафедре учебных дисциплин легко находятся следующие величины:

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

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

В создаваемом приложении нам не потребуется реализовывать аутентификацию пользователей, не надо даже развёртывать его на сервере в production-режиме — вполне достаточно работы приложения в development-режиме. Новое «пустое» приложение, которое мы назовём marks, создаётся командой rails new marks -d postgresql. После этого всего несколькими командами можно создать основные модели (кафедры, учебные дисциплины и оценки) и средства для работы с ними (controllers and views), связать модели с базой данных, инициализировать таблицы базы данных и выполнить ещё целый ряд действий, «оживляющих» приложение.

Мы не будем обсуждать скрипты наполнения базы данных оценками и вычисления описанных выше характеристик кафедр и учебных дисциплин, так как эти действия вполне стандартны. Не представляет большого интереса и обсуждение интерфейсов, визуализирующих в виде таблиц упорядоченные по среднему баллу кафедры университета или дисциплины кафедры. Отметим только, что количество кода, который требуется написать для решения этих задач, крайне невелико, а использование языка разметки Haml позволяет получить легко создаваемый и читаемый код. Вот как задаются строки одной из таблиц:

 

- @chairs.each_with_index do |c, i|

  %tr

    %td

      %span

        = (i + 1).to_s + '.'

      %span{title: 'К детальной информации'}

        = link_to "#{c.name}\ (#{c.num})", chair_path(c)

    %td.text-center.text-bold

      = sprintf("%.2f", c.av_value)

    %td.text-center

      = c.g_marks['total']['total']

    - %w(A B C D E).each do |m|

      %td.text-center

        = c.p_marks['total'][m]

    %td.text-center

      = link_to(fa_icon('bar-chart'), animate_chair_path(c))

 

Перейдём к обсуждению основной при решении данной задачи проблемы — созданию анимации, позволяющей визуализировать изменение во времени различных характеристик кафедр и учебных дисциплин. Прежде всего следует определиться с выбором используемой для реализации анимации технологии. Современный стандарт HTML5 предлагает выбирать между SVG и CANVAS. При этом существует достаточно много причин, по которым для подобной визуализации (в отличии, например, от игр) целесообразнее использовать SVG [5,6]. Такой же вывод сделан и автором публикации [7].

Существует целый ряд библиотек, облегчающих создание SVG-анимации, причём многие из них являются свободными [8,9].

В Ruby on Rails традиционно используется jQuery [10], однако создание SVG-анимации лишь с её помощью затруднительно. Другой крайностью можно считать применение одного из наиболее мощных инструментов для визуализации — библиотеки D3.js [11]. Как верно отмечает Jerome Cukier, «Вы можете не нуждаться в d3» [12]. Определённым компромиссом в нашем случае является выбор небольшой, ориентированной именно на создание анимации, библиотеки Velocity.js [13], использование которой требует весьма незначительного времени на её изучение.

Процесс создания SVG-анимации в Ruby on Rails весьма прост. Сначала в задающий SVG-изображение код с помощью data-атрибутов добавляется информация о значениях всех изменяемых параметров изображения. В случае столбчатой диаграммы, например, может быть задан массив последовательных высот столбцов диаграммы или массив последовательных разностей этих высот. Вот как может выглядеть подобный html-код, генерируемый веб-приложением:

 

<rect id="rect-A" y="144.88px" x="52" width="76" height="105.12px"

  style="fill:rgb(100,100,200);" data-arr="[8.5,-23.4,1,-25.9,14.8,-0.5]">

 

Затем в javascript-файле задаются обработчики событий и функции, считывающие из элементов DOM размещённую там информацию о необходимых изменениях и вызывающие методы анимации библиотеки Velocity.js. Код этих функций также является достаточно простым и хорошо понимаемым. Вот фрагмент:

 

var arr2 = JSON.parse($("#text-" + marks[index]).attr('data-arr'));

$("#rect-" + marks[index])

  .delay(2000)

  .velocity({height: "+=" + arr2[0] +"\"", y: "-=" + arr2[0] +"\""},

    {duration: 1500/speed, easing: "ease-in"});

 

В этом фрагменте вызывается метод, который после двухсекундной задержки (delay(2000)) в течение промежутка времени, зависящего от параметра (duration: 1500/speed), изменяет высоту (height) и y-координату одного из прямоугольников столбчатой диаграммы.

Так как непосредственное включение svg-анимации в текст статьи представляется затруднительным, то полученная описанным выше образом анимация с помощью программы Simple Screen Recorder преобразована в видеофайл, представленный на рис. 1.

 

Рис. 1. Анимация, визуализирующая изменение во времени некоторых характеристик кафедры.

 

3. Визуализации позиции в рейтинге

 

3.1. Рейтинговая система оценок

 

Балльно-рейтинговые (или кредитно-рейтинговые) системы оценки знаний, умений и навыков студентов хорошо известны и активно используются во многих странах. Зачастую их применение строго формализовано (см., например, [14]). Обсуждение достоинств и недостатков различных систем оценивания знаний не является целью данной работы, но хочется отметить, что любая подобная система является только способом преобразования какими-то методами полученных первичных оценок в итоговый балл или рейтинг студента. Поэтому лишь наличие достаточно большого количества объективных первичных оценок может являться основой для применения любой из подобных систем.

Многолетний опыт использования рейтинговой системы при наличии указанного выше необходимого условия убедил автора в её превосходстве над балльно-рейтинговой схемой оценки знаний. Принципиальным отличием первой из них от последней является значимость не абсолютного значения рейтинга (количества баллов или кредитов в балльно-рейтинговой системе), а лишь относительной позиции конкретного студента в рейтинге. Этот подход не нов — он широко использовался в прошлом. Фразы типа «училище закончил первым из 148 человек» или «академию закончил первым (из семнадцати)» гораздо более информативны, нежели современное «закончил с отличием».

Итак, если по какой-либо дисциплине (или, ещё лучше, по нескольким из профилирующих учебных дисциплин) преподаватели систематически проводят различные контрольные мероприятия — самостоятельные, контрольные и лабораторные работы, тестирования, обязательные индивидуальные домашние задания, коллоквиумы, минизачёты и др., то появляется возможность оценивать текущие успехи студентов с помощью рейтинговой системы. Несколько упрощённая по сравнению с реально используемой на практике схема подсчёта рейтинга определяется следующим образом: , где  — рейтинг,  — вклад текущих аттестаций и  — вклад оценок, полученных по итогам сдачи рубежных контрольных мероприятий.

Вклад  текущих аттестаций определяется как взвешенное среднее значение нормированных аттестационных оценок. Аттестационная оценка — это систематически получаемая каждым студентом оценка его текущих достижений в обучении. В большинстве ситуаций вполне достаточно использовать оценки от  до , получаемые один раз в две недели. Нормирование оценки заключается просто в вычитании константы , что позволяет придать практический смысл выражению «отрицательная оценка». Таким образом, в результате  прошедших аттестаций величина  оказывается равной следующему значению:

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

Результатом проведения рубежных контрольных мероприятий (кроме уже описанных аттестационных оценок) являются оценки по следующей трёхбалльной шкале: «не сдано», «сдано» и «сдано отлично». Вклад  в рейтинг рубежных контрольных мероприятий является просто суммой вкладов каждого из них:

где  — вклад -го контрольного мероприятия.

При этом

Так как для итоговой оценки успехов студента важно не числовое значение его рейтинга, а позиция в рейтинге, то весьма полезной информацией является график изменения этой позиции для конкретного студента в течение семестра. На рис. 2 показана одна из страниц реализованного на основе Ruby on Rails используемого в учебном процессе портала edu-online.mephi.ru, содержащая график этой функции (с учётом требований закона о защите персональных данных).

 

Рис. 2. График изменения позиции конкретного студента в рейтинге

Рис. 2. График изменения позиции конкретного студента в рейтинге

 

Отметим, что вычисление текущего рейтинга студентов группы и даже целого потока, состоящего из 6-8 групп, является вполне тривиальной задачей вне зависимости от того, какие конкретно формулы используются для вычисления рейтинга. Задача немного усложняется, если речь идёт о нахождении изменяющейся в течение семестра позиции в рейтинге конкретного студента. Сложность вычисления этой функции для конкретной дисциплины связана с необходимостью определения рейтинга всех студентов группы (или потока) на каждый из уже прошедших дней семестра, что обусловлено вкладом в рейтинг несданных в срок рубежных контрольных мероприятий. При этом для среднего по нескольким учебным дисциплинам рейтинга сложность возрастает пропорционально количеству дисциплин.

Считается общепринятым (см., например, [15]), что время отклика «хорошего» веб-приложения на любой запрос пользователя не должно превышать нескольких десятков миллисекунд и никак не может быть более 200-300 миллисекунд. В данном случае ситуация усугубляется ещё и тем, что вычисления в Rails-приложении выполняются относительно медленным интерпретатором языка Ruby.

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

С помощью библиотеки для генерации фиктивных данных [17] легко создать поток из 6 учебных групп по 25 студентов и 6 учебных дисциплин, по которым каждый из студентов будет иметь по 15 случайных аттестационных оценок. Для простоты оценки за контрольные мероприятия создавать не будем, а все веса  в формуле

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

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

 

3.2. Индуктивное вычисление рейтинга

 

Для эффективного вычисления массива значений рейтинга (на все последовательные дни семестра) разумно применить теорию индуктивных функций, предложенную А.Г. Кушниренко [16] около 30 лет назад.

Согласно этой теории функция  на пространстве последовательностей  называется индуктивной, если  можно вычислить, зная  и , то есть, если  такое, что . Здесь  — пространство последовательностей элементов из множества ,  — некоторая цепочка (последовательность) элементов,  — цепочка, получающаяся из  путём добавления к ней элемента .

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

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

Для рассмотренной выше неиндуктивной функции «среднее арифметическое элементов последовательности» индуктивным расширением является функция , определённая на непустых (длина которых не менее единицы) цепочках целых чисел, значением которой является пара чисел: сумма элементов и их количество. Каждая из этих компонент допускает индуктивное перевычисление, а отображение  в данном случае сводится к делению первого из чисел на второе.

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

Простое индуктивное расширение строится также и для случая равных весовых коэффициентов, когда функция  оказывается средним арифметическим аттестационных оценок.

Оба этих случая, однако, не слишком хорошо описывают желаемое поведение рейтинга: в первом варианте «старые» аттестационные оценки слишком незначимы, а во втором все оценки равнозначны. Некоторым промежуточным вариантом является убывание аттестационных оценок по закону  для некоторого . Скорость их убывания при этом значительно ниже, чем для геометрической прогрессии .

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

В этом случае для перевычисления функции  при появлении новой аттестационной оценки  достаточно дополнительно помнить лишь две последних оценки последовательности .

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

где  — длина цепочки , а  и  — последний и предпоследний её элементы соответственно. Для удобства будем обозначать последовательные компоненты функции  через , ,  и .

Вычислим значения функции  на цепочках  и .

где через  обозначена сумма первых  элементов цепочки .

Сравнивая значения функции  на цепочках  и , получаем

где

Полученная нами формула даёт возможность эффективно перевычислять значение функции  при удлинении цепочки. Программная реализация отображения  выглядит так:

 

x = val.to_f - 3.0

rating_a =

  case n

  when 0

    x

  when 1

    (b*y1+(b+1.0)*x)/(2.0*b+1.0)

  else

    (rating_a*(@A*(n-2)+@D)+(@A-@B)*y2+(@B-@C)*y1+@C*x)/(@A*(n-1)+@D)

  end

y2 = y1

y1 = x

n += 1

 

Переменная rating_a здесь соответствует значению функции , переменные @A, @B, @C и @D — это, соответственно, , ,  и , а имена всех остальных программных переменных совпадают с их именами в приведённых выше математических выкладках. Применение указанного алгоритма позволяет существенно сократить время вычисления рейтинга. Оценка полученного выигрыша вместе с указанием характеристик сервера, на котором развёрнуто веб-приложение, приведена ниже после решение основной задачи — визуализации изменение графика позиции в рейтинге в зависимости от параметра .

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

 

3.3. Визуализация графиков однопараметрического семейства функций

 

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

В этой ситуации применять анимацию для визуализации графиков семейства функций нецелесообразно, ибо при таком подходе сначала потребуется заметное время для вычисления необходимых для изображения графиков данных, а затем большой объём данных нужно будет передавать клиенту. В анимации, впрочем, нет никакой необходимости, так как изобразить последовательность графиков функций в Ruby on Rails можно вполне стандартными для этого фреймворка средствами.

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

Вот как выглядит код этого метода:

 

anim_eval = (curr, from, step, to, elem, course_group_set_id,

    student_id, timeout) ->

  if (step > 0 and curr < to + 1.0e-9) or (step < 0 and curr > to - 1.0e-9)

    num = Math.floor((curr-from)/(to-from)*255)

    $.ajax

      url: "/students/#{student_id}/animate"

      method: 'PUT'

      data: {anim_val: curr, anim_color: num,

          course_group_set_id: course_group_set_id}

      success: (data) ->

        $('polyline').attr("style", data['style'])

        $('polyline').attr("points", data['points'])

        $('.anim-show').val(data['value'])

        setTimeout ( ->

          anim_eval(curr + step, from, step, to, elem,

              course_group_set_id, student_id, timeout)

        ), timeout

 

Полученный результат представлен в форме видеофайла на рис. 3.

 

Рис. 3. Визуализация изменение графика позиции в рейтинге в зависимости от параметра

 

Описанное веб-приложение развёрнуто на виртуальной машине (контейнере) со 128 GB оперативной памяти, где ему доступны 8 вычислительных потоков (из 32 имеющихся на основном сервере Cisco C300M, 2x Intel Xeon E5-2680). На сервере установлена операционная система Debian 8.3 (Jessie), а на контейнере — Scientific Linux 7.1 (Nitrogen).

Время, необходимое на все действия по изображению одного графика, составило около 250 миллисекунд. Исследование с помощью rack-mini-profiler [18] позволяет получить более детальную информацию: около 12% уходит на получение аттестационных оценок и другой необходимой информации из базы данных, чуть менее 2% требуется на генерацию html-кода, а остальное время занимает вычисление рейтинга студентов. Это означает, что использование теории индуктивных функций позволило сократить время вычисления рейтинга почти в десять раз.

 

4. Веб-сайт электронного журнала

 

4.1. Веб-ориентированные формы представления научных материалов

 

Широкое распространение мобильных устройств делает желаемым наличие таких форм представления научных материалов, работа с которыми на этих устройствах является удобной и комфортной. Так как просмотр на таких устройствах pdf-документов, как и файлов в форматах Word или Excel затруднён, то фактически это эквивалентно требованию подготовки материалов в html-формате [19].

Важной проблемой, которая долгое время сдерживала активное распространение гипертекстовых научных материалов, являлись трудности с визуализацией математических формул в браузерах. Все решения, предлагавшиеся до появления JavaScript-библиотеки MathJax [20], имели определённые недостатки. MathJax позволяет включать в html-документ исходный код математических формул, набранных с использованием LaTeX, MathML или ASCIIMathML. Этот код интерпретируется при просмотре странице в браузере, и пользователь видит красивые формулы.

Особенно полезной является возможность включения формул в TeX-нотации [21] — одним из лучших способов представления математики. Многие физики, химики, математики и программисты знакомы с системой компьютерной вёрстки LaTeX, широко используемой в научном мире для подготовки публикаций. Научиться использовать TeX-нотацию для ввода формул очень легко, так как она чрезвычайно удобна и естественна. Целый ряд известных веб-сайтов (примером является Википедия) уже давно для размещения на своих страницах математики использует графические изображения, полученные с помощью этой технологии. MathJax позволяет избавиться от фазы предварительного получения графических изображений и включать TeX-представление формулы непосредственно в веб-страницу.

 

4.2. Markdown и Pandoc

 

Гипертекстовый документ можно получить многими различными способами, используя в качестве входных документов файлы разнообразных форматов, включая Microsoft Word. В последнее время всё большую популярность приобретает подход, при котором исходный текст создаётся на языке Markdown [22], а затем с помощью конвертера Pandoc [23] преобразуется в html-формат. Основным достоинством такого подходя является возможность получения из того же исходного текста без дополнительной его переработки документов многих иных форматов, включая pdf, docx и epub. Pandoc обеспечивает и обратное преобразование из различных форматов в Markdown. На рис. 4 показаны некоторые из наиболее полезных с точки зрения автора возможности этого конвертера.

 

Рис. 4. Наиболее полезные возможности конвертера Pandoc

Рис. 4. Наиболее полезные возможности конвертера Pandoc

 

Язык разметки Markdown изначально был создан лишь как удобный для чтения и непосредственного редактирования язык, из которого легко получить html. В целом ряде статей (см., например, [24,25]) можно найти конкретные предложения по использованию этого языка для подготовки научных публикаций и учебных материалов. Научиться использовать Markdown можно за 5-10 минут — настолько он прост. В качестве небольшого примера приведём следующий фрагмент исходного кода данной статьи на языке Markdown:

 

- реализовать на CoffeeScript рекурсивный метод, считывающий заданные

  параметры и затем

    - изменяющий значение $b$ на величину шага;

    - делающий AJAX-запрос к серверу, возвращающий необходимые данные для

      изображения очередного графика;

    - вызывающий себя с помощью функции `setTimeout`.

 

На рис. 5 и 6 показаны получаемый из него с помощью конвертера Pandoc гипертекстовый и pdf-варианты фрагментов выходного документа.

 

Рис. 5. HTML-вариант фрагмента выходного документа

Рис. 5. HTML-вариант фрагмента выходного документа

 

Рис. 6. PDF-вариант фрагмента выходного документа

Рис. 6. PDF-вариант фрагмента выходного документа

 

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

Использование связки Markdown-Pandoc с целью получения множества выходных документов различных форматов из единого исходного представления можно считать уже достаточно стандартным подходом, хотя он и не получил ещё широкого распространения. Описание всех ключевых идей этого подхода имеется, например, в заметке [26].

 

4.3. Ruby on Rails как средство создания электронного журнала

 

Широкому распространению описанных выше технологий подготовки научных материалов мешает прежде всего необходимость использования специализированного программного обеспечения. Хотя всё необходимое ПО является свободным, далеко не все способны установить его на свой компьютер. Меньшей проблемой является требование знания языка Markdown и правил набора математики в LaTeX, но весьма желательна организация «переходного периода», когда автор публикации может сочетать использование новых технологий с привычным ему стилем работы.

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

Преподаватели смогут создавать материал непосредственно на портале, используя браузер, в котором запускается веб-редактор Ace, или загружать предварительно подготовленный файл с материалом со своего компьютера. Они смогут также загружать ранее подготовленные материалы в форматах docx, odt, epub, docbook, html, latex и некоторых иных. Эти материалы с помощью утилиты Pandoc будут автоматически конвертированы в файлы на языке Markdown. На портал также могут быть загружены графические изображения, исходные коды программ, стилевые файлы (используемые при получении гипертекстовых документов) и другие дополнительные файлы, нужные для получения итогового документа.

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

Одной из причин, требующих выполнения дополнительных действий, является тот факт, что создаваемые конвертером Pandoc html-документы с математическими формулами оказываются некорректными в следующем смысле: использование в исходном тексте неразрывных пробелов перед математической формулой или после неё не даёт желаемого эффекта. Аналогичная проблема имеет место со знаками препинания, следующими непосредственно за математической формулой.

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

 

hash = {

  'а́' => "\\\\'{а}", 'е́' => "\\\\'{е}", 'и́' => "\\\\'{и}",

  'о́' => "\\\\'{о}", 'у́' => "\\\\'{у}", 'ы́' => "\\\\'{ы}",

  'э́' => "\\\\'{э}", 'ю́' => "\\\\'{ю}", 'я́' => "\\\\'{я}"

}

puts buf.gsub(/а́|е́|и́|о́|у́|ы́|э́|ю́|я́/, hash)

 

Наличие исходных текстов материалов на языке Markdown, математические формулы в которых набраны с использованием TeX-нотации, позволяет легко реализовать поиск материала по фрагменту текста или формулы. Для этого могут быть использованы возможности, предоставляемые непосредственно СУБД PostgreSQL [27]. В последнем случае целесообразно также применение gem-пакета PgSearch [28].

 

5. Заключение

 

Приведённые в работе модельные примеры показывают эффективность использования фреймворка Ruby on Rails для визуализации графической и текстовой информации. Этот подход позволяет ограничиться только свободными программными средствами и в простейших случаях не требует от разработчиков высокой квалификации.

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

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

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

Создание веб-сайта электронного журнала позволит:

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

 

Список литературы

 

  1. Ruby on Rails: Web Development That Doesn’t Hurt. URL: http://rubyonrails.org (Дата обращения: 25.08.2016)
  2. Wan J.H., Zhang Y.W. Design and implementation of the freight forwarding management information system based on ROR. Control Engineering and Information Systems: Proceedings of the International Conference on Control Engineering and Information System, ICCEIS, 2014. P. 919-922.
  3. Irribarra D.T., Freund R., Fisher W., Wilson M. Metrological traceability in education: A practical online system for measuring and managing middle school mathematics instruction. Journal of Physics: Conference Series, 2015. V. 588. № 1. Article № 012042.
  4. Chunling C. Construction of the Individualized College English Learning Management System Using Ruby on Rails. Proceedings of International Conference on Service Science, ICSS, 2016. P. 160-163.
  5. Buckler C. 7 Reasons to Consider SVGs Instead of Canvas. URL: https://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas (Дата обращения: 25.08.2016)
  6. Perna M.A. Canvas vs. SVG: Choosing the Right Tool for the Job. URL: https://www.sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job (Дата обращения: 25.08.2016)
  7. Гордеев Д.С. Визуализация внутреннего представления программ на языке CLOUD SISAL. Научная визуализация, 2016. Т.8. № 2. С. 98-106.
  8. Arora S. The 10 Best JavaScript Libraries for SVG Animation. URL: http://noeticforce.com/Javascript-libraries-for-svg-animation (Дата обращения: 25.08.2016)
  9. Ivanovs A. Top 30 Free jQuery Animation Libraries & Plugins. URL: https://colorlib.com/wp/free-jquery-animations-libraries-plugins (Дата обращения: 25.08.2016)
  10. JavaScript library. URL: https://jquery.com (Дата обращения: 25.08.2016)
  11. JavaScript library for manipulating documents based on data. URL: https://d3js.org (Дата обращения: 25.08.2016)
  12. Cukier J. You may not need d3. URL: http://www.jeromecukier.net/blog/2015/05/19/you-may-not-need-d3 (Дата обращения: 25.08.2016)
  13. Accelerated JavaScript animation. URL: http://velocityjs.org (Дата обращения: 25.08.2016)
  14. Положение о рейтинговой системе оценки знаний, умений и навыков студентов в УО БГЭУ. URL: http://www.bseu.by/russian/student/reyting.htm (Дата обращения: 25.08.2016)
  15. Website Response Times. URL: https://www.nngroup.com/articles/website-response-times (Дата обращения: 25.08.2016)
  16. Кушниренко А.Г, Лебедев Г.В. Программирование для математиков: Учеб. пособие для вузов. Наука, 1988. 384 С.
  17. Библиотека для генерации фиктивных данных. URL: https://github.com/stympy/faker (Дата обращения: 25.08.2016)
  18. Profiler for development and production Ruby rack apps. URL: https://github.com/MiniProfiler/rack-mini-profiler (Дата обращения: 25.08.2016)
  19. Sefton P. Towards Scholarly HTML. Serials Review, 2009. V. 35, № 3, P. 154-158.
  20. A JavaScript display engine for mathematics. URL: http://www.mathjax.org (Дата обращения: 25.08.2016)
  21. Typesetting system TeX. URL: https://en.wikipedia.org/wiki/TeX (Дата обращения: 25.08.2016)
  22. Gruber J. Markdown: A text-to-HTML conversion tool for Web writers. http://daringfireball.net/projects/markdown (Дата обращения: 25.08.2016)
  23. Pandoc Document Converter. URL: http://pandoc.org (Дата обращения: 25.08.2016)
  24. Voegler J, Bornschein J, Weber G. Markdown — A simple syntax for transcription of accessible study materials (Conference Paper). Lecture Notes in Computer Science (including subseries Lecture Notes in Artificial Intelligence and Lecture Notes in Bioinformatics), 2014. V. 8547. P. 545-548.
  25. Ovadia S. Markdown for Librarians and Academics. Behavioral & Social Sciences Librarian, 2014. V. 33, № 2. P. 120-124.
  26. Kielhorn A. Multi-target publishing. TUGboat, 2011. V. 32. № 3. P. 272-277. URL: https://www.tug.org/TUGboat/tb32-3/tb102kielhorn.pdf (Дата обращения: 25.08.2016)
  27. Object-relational database management system PostgreSQL. URL: http://www.postgresql.org (Дата обращения: 25.08.2016)
  28. PgSearch — Ruby gem to take advantage of PostgreSQL’s full text search. URL: https://github.com/Casecommons/pg_search (Дата обращения: 25.08.2016)


RUBY ON RAILS USAGE FOR ANIMATED VISUAL REPRESENTATION OF GRAPHICAL INFORMATION AND DEVELOPMENT OF AN ELECTRONIC JOURNAL

E.A. Roganov

National Research Nuclear University MEPhI (Moscow Engineering Physics Institute), Russian Federation

EARoganov@mephi.ru

 

Abstract

The article deals with the possibilities of using Ruby on Rails framework for visualization of graphics and text information. First, it describes methods of SVG-animation and AJAX-technology to draw graphs of one-parameter family of functions. In order to visualize the change of a position in the ranking of departments, we create from scratch a simple Rails application. Then, in the real web-application we add the ability to visualize the student’s position in the rating. We also propose a method to calculate effectively this position.

The article proposes suggestions for the development of an electronic journal web site (portal) based on free software and information technology: markup language Markdown, MathJax library, document converter Pandoc, framework Ruby on Rails. Markdown was originally designed as a convenient language for reading and directly editing, from which is easy to get html. Now this language is widely used for preparation of scientific publications and training materials. The appearance of the document converter Pandoc confirmed the role of Markdown as a “universal” language.

The Ruby on Rails framework is an ideal instrument for the creation of the electronic journal web site. The usage of this portal requires neither any deep knowledge of latest information technology, nor the installation of special software. The portal is compatible with mobile devices and any qualified author can easily master a bit of additional knowledge and skills necessary to work with this environment. We describe the advantages obtained when implementing the journal web site by this method.

 

Keywords: Ruby on Rails, Free Software, SVG, AJAX, visualization of position in rating, inductive functions, Markdown, Pandoc.

 

References

 

  1. Ruby on Rails: Web Development That Doesn’t Hurt. URL: http://rubyonrails.org (Accessed 25.08.2016)
  2. Wan J.H., Zhang Y.W. Design and implementation of the freight forwarding management information system based on ROR. Control Engineering and Information Systems: Proceedings of the International Conference on Control Engineering and Information System, ICCEIS, 2014. pp. 919-922.
  3. Irribarra D.T., Freund R., Fisher W., Wilson M. Metrological traceability in education: A practical online system for measuring and managing middle school mathematics instruction. Journal of Physics: Conference Series, 2015. vol. 588. no. 1. Article no. 012042.
  4. Chunling C. Construction of the Individualized College English Learning Management System Using Ruby on Rails. Proceedings of International Conference on Service Science, ICSS, 2016. pp. 160-163.
  5. Buckler C. 7 Reasons to Consider SVGs Instead of Canvas. URL: https://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas (Accessed 25.08.2016)
  6. Perna M.A. Canvas vs. SVG: Choosing the Right Tool for the Job. URL: https://www.sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job (Accessed 25.08.2016)
  7. Gordeev D.S. Visualization of internal representation of CLOUD SISAL programs. Scientific Visualization, 2016. vol. 8. no. 2. pp. 98-106.
  8. Arora S. The 10 Best JavaScript Libraries for SVG Animation. URL: http://noeticforce.com/Javascript-libraries-for-svg-animation (Accessed 25.08.2016)
  9. Ivanovs A. Top 30 Free jQuery Animation Libraries & Plugins. URL: https://colorlib.com/wp/free-jquery-animations-libraries-plugins (Accessed 25.08.2016)
  10. JavaScript library. URL: https://jquery.com (Accessed 25.08.2016)
  11. JavaScript library for manipulating documents based on data. URL: https://d3js.org (Accessed 25.08.2016)
  12. Cukier J. You may not need d3. URL: http://www.jeromecukier.net/blog/2015/05/19/you-may-not-need-d3 (Accessed 25.08.2016)
  13. Accelerated JavaScript animation. URL: http://velocityjs.org (Accessed 25.08.2016)
  14. The regulation of the rating system of knowledge assessment, skills and abilities of students in the BSEU. URL: http://www.bseu.by/russian/student/reyting.htm (Accessed 25.08.2016)
  15. Website Response Times. URL: https://www.nngroup.com/articles/website-response-times (Accessed 25.08.2016)
  16. Kushnirenko A.G, Lebedev G.V. Programmirovanie dlya matematikov: Ucheb. posobie dlya vuzov [Programming for mathematicians: manual for schools]. Nauka, 1988. 384 p. [In Russian]
  17. A library for generating fake data. URL: https://github.com/stympy/faker (Accessed 25.08.2016)
  18. Profiler for development and production Ruby rack apps. URL: https://github.com/MiniProfiler/rack-mini-profiler (Accessed 25.08.2016)
  19. Sefton P. Towards Scholarly HTML. Serials Review, 2009. vol. 35, no. 3, pp. 154-158.
  20. A JavaScript display engine for mathematics. URL: http://www.mathjax.org (Accessed 25.08.2016)
  21. Typesetting system TeX. URL: https://en.wikipedia.org/wiki/TeX (Accessed 25.08.2016)
  22. Gruber J. Markdown: A text-to-HTML conversion tool for Web writers. http://daringfireball.net/projects/markdown (Accessed 25.08.2016)
  23. Pandoc Document Converter. URL: http://pandoc.org (Accessed 25.08.2016)
  24. Voegler J, Bornschein J, Weber G. Markdown — A simple syntax for transcription of accessible study materials (Conference Paper). Lecture Notes in Computer Science (including subseries Lecture Notes in Artificial Intelligence and Lecture Notes in Bioinformatics), 2014. vol. 8547. pp. 545-548.
  25. Ovadia S. Markdown for Librarians and Academics. Behavioral & Social Sciences Librarian, 2014. vol. 33, no. 2. pp. 120-124.
  26. Kielhorn A. Multi-target publishing. TUGboat, 2011. vol. 32. no. 3. URL: https://www.tug.org/TUGboat/tb32-3/tb102kielhorn.pdf (Accessed 25.08.2016)
  27. Object-relational database management system PostgreSQL. URL: http://www.postgresql.org (Accessed 25.08.2016)
  28. PgSearch — Ruby gem to take advantage of PostgreSQL’s full text search. URL: https://github.com/Casecommons/pg_search (Accessed 25.08.2016)