Tel: +372 5596 5762
e-mail: info@digipo.eu

Работа в web-приложении Popcorn Maker похожа на работу в программе для видео монтажа. На начальном этапе работы автор работы изменил один из стандартных шаблонов под свои нужды, взяв за основу свой собственный дизайн учебного web-ресурса. Шаблон был отредактирован автором работы, используя html и css код.  После редактирования измененный шаблон был помещен в директорию шаблонов, заменив стандартный шаблон web-приложения Popcorn Maker. Причина замены шаблона заключалась в том, что стандартные шаблоны не позволяют объединить в одном месте функционал плагинов и блочное размещение объектов страницы.

Шаблоны Popcorn Maker 

 

Рисунок 1. Стандартные шаблоны и плагины к ним в web-приложении Popcorn Maker.

После установки собственного шаблона автор работы добавил видео с youtube и стал добавлять плагины субтитров, изображений, и текстовых данных на временную шкалу web-приложения Popcorn Maker:

  1. – панель плагинов в web- приложении Popcorn Maker;
  2. – перетаскивание плагинов на временную шкалу в web-приложении Popcorn Maker.

Плагины и временная шакала  

Рисунок 2. Плагины и временная шакала в web- приложении Popcorn Maker.

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

Параметры плагина субтитров  

Рисунок 3. Параметры плагина субтитров в web- приложении Popcorn Maker.

У всех плагинов есть три общих параметра:

  • In – время начала отображения плагина;
  • Out – время окончания отображения плагина;
  • Target Containet – место блока отображения плагина.

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

Компиляция готового кода

После создания готового прототипа учебного mashup материала автор работы воспользовался процессом экспорта проекта в код для публикации в сети интернет. В web-приложения Popcorn Makerсуществует встроенный компилятор, который позволяет преобразовать графическое размещение плагинов на временной шкале в HTML или JSON[1] код.

Компиляция готового кода 

Рисунок 4. Окно сохранения кода в web- приложении Popcorn Maker.

Получившийся код можно скопировать и вставить в обычный Notepad, после чего сохранить с расширением htmlи выбранным параметром кодирования utf-8[2]. Тем самым получить интернет страницу, на которой будет отображаться созданный прототип учебного mashup- приложения.

Публикация в интернете

Публикацию в интернете можно выполнить двумя способами:

  • Опубликовать файл index.html на свой сервер ссылками на Popcorn Makerдля подключения стилей и скриптов;
  • Опубликовать файл index.html на свой сервер вместе с папками со скриптами и стилями.

Автор работы придерживается второго способа публикации, так как он создавал собственный шаблон, который хранится в структуре папок Popcorn Maker. Общий вес проекта занимает 13,5мб, что позволило быстро загрузить проект на собственный сервер по адресу: http://test.digipo.eu/kalle.html



[1] JSONтекстовый формат обмена данными основанный на JavaScript

[2] UTF-8 – формат преобразования Юникода для интернет браузеров.