Обзор технологий создания визуализаторов алгоритмов

Обзор технологий создания визуализаторов алгоритмов

Overview of technologies for creating algorithms visualizers

 

Афанасий Виктория Ивановна

Afanasii Viktoriya Ivanovna

учитель информатики МБОУ ООШ № 68, г. Иркутска

vilevineger2008@mail.ru

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

Annotation. One of the most important didactic principles, which underlies the organization and effectiveness of learning and perception, is visualization. The principle of clarity is the main one in the teaching of computer science. Practice shows that using visualizers to explain and analyze algorithms helps them understand and memorize. The main technologies of visualization algorithms creation are considered in the article.

Ключевые слова: алгоритм, визуализатор, Adobe Flash, Java-апплеты, JavaScript, HTML5.

Keywords: algorithm, visualizer, Adobe Flash, Java-applets, JavaScript, HTML5.

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

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

Преимущества программ-визуализаторов алгоритмов:

  1. Нет необходимости писать длинные иллюстрационные примеры на доске, что позволяет сэкономить учебное время, привлечь внимание учеников.
  2. Ученик, разбираясь в алгоритме, может не ограничиваться теми иллюстрационными примерами, которые продемонстрировал учитель, а может сам выбирать набор данных, на которых будет отслеживать работу алгоритма, делать это неограниченное количество раз и в более удобном виде. Это позволяет разобраться в алгоритме всем, даже тем, кто не очень внимателен на уроках.
  3. Работать с визуализатором ученику намного приятнее, чем с учебником или конспектом, особенно если визуализатор хорошо оформлен.

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

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

  1. Мультимедийная платформа Adobe Flash

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

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

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

Преимущества использования Adobe Flash:

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

Однако использование Flash-технологии при создании визуализаторов имеет ряд своих недостатков:

  • необходимость покупки разработчиком дорогостоящего программного обеспечения;
  • для просмотра программы-визуализатора необходима установка flash-плеера;
  • значительное потребление оперативной памяти компьютера.
  1. Java-апплеты

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

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

Преимущества java-апплетов:

  • java-апплеты поддерживаются большинством браузеров;
  • java-апплеты предоставляют большое количество интерактивных возможностей при разработке программ-визуализаторов.

К недостаткам можно отнести:

  • необходимость установки пользователем Java-расширения (plug-in), которое не во всех браузерах доступно по умолчанию;
  • создание и дизайн хорошего пользовательского интерфейса с использованием java-апплетов является довольно сложной задачей;
  • java-апплет не может запуститься до тех пор, пока не запустится виртуальная Java-машина, и это может занять значительное время при первом запуске.
  1. JavaScript

В настоящее время в Интернете встречается множество визуализаторов алгоритмов. Большинство этих визуализаторов реализованы с помощью скриптового языка JavaScript.

Преимущества использования JavaScript:

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

Недостатки JavaScript:

  • увеличивается время загрузки страницы;
  • любой пользователь может просмотреть код визуализатора и увидеть структуру скрипта или просто скопировать его;
  • объектная модель javascript зависит от браузера и его версии. [1]
  1. Offline-программы

Под offline-программами подразумеваются прикладные программы, написанные на одном из языков программирования C, C++, Java, Pascal и т.д.

Преимущества использования offline-программ:

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

Недостатки:

  • нет возможности встраивать визуализаторы, разработанные как offline программы на web-сайты, что ограничивает возможности дистанционного обучения;
  • для увеличения количества интерактивных возможностей при разработке визуализаторов необходимо покупка дорогостоящего программного обеспечения;
  • offline-программы являются платформозависимыми.
  1. HTML5

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

В HTML5 введен новый элемент canvas. Canvas в переводе с английского означает холст и это название как нельзя лучше подходит к новому элементу.

При разработке визуализатора элемент canvas можно использовать для создания области, в которой, например, нужно нарисовать какой-то объект, вывести или трансформировать изображение, изменить его свойства, создать анимацию. Canvas является контейнером для графики. Для того чтобы производить различные действия, необходимо включать javascript-сценарии. [2]

Преимущества HTML5:

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

Недостатки:

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

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

Библиографический список:

  1. AlgoRythmics [Электронный ресурс]: MOZILLA DEVELOPER NETWORK — Электронные текстовые дан. — URL: https://developer.mozilla.org/en/JavaScript (дата обращения: 23.05.2017)
  2. HTML5 [Электронный ресурс]: W3C — Электронные текстовые дан. — URL: http://www.w3.org/TR/2011/WD-html5-20110525/ (дата об-ращения: 23.05.2017)