Программа формирования мультимедийных электронных ресурсов в виде web-страницы

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ
ФЕДЕРАЦИИ
РЕКЛАМНО-ТЕХНИЧЕСКОЕ ОПИСАНИЕ
Программа формирования мультимедийных электронных
ресурсов в виде web-страницы
.02069071.00297-01 99 01
Листов 16
Разработчик:
_________________/Чурилов И.А./
29.09.2013<пусто>
Пермь 2013
2
.02069071.00297-01 99 01
Функциональное назначение программы
Программа позволяет сформировать web-страницу из предварительно
подготовленного материала — текстового, графического, фото-, видео-, —
и получить электронное пособие, годное как для использования
в самостоятельной работе студентов, так и для размещения на сайте
дистанционного обучения. Программа предоставляет удобный интерфейс
пользователю пособия, а разработчику пособия — возможность легко
компоновать мультимедийные материалы в единый тематический сборник.
Основное назначение программы — инструмент создания электронных
лекций и web-презентаций. Вместе с тем, программа может быть
применена и для решения более широкого спектра задач.
Область применения
Программа формирования мультимедийных электронных ресурсов
в виде web-страницы (далее — Программа) является родственной
разработанной ранее "Программе формирования иллюстрированных
методических
указаний,
инструкций
и
описаний
технологических
процессов в виде web-страницы" [1]. Отличие заключается в том, что [1]
предназначена для сопровождения практических и лабораторных занятий,
а Программа — для оформления электронных лекций и презентаций,
которые могут заменить презентации Microsoft PowerPoint при проведении
занятий и одновременно являются электронными ресурсами пригодными
для непосредственного размещения на web-сайте без какого-либо
дополнительного преобразования. Программа обладает более сложной
структурой и предоставляет разработчику электронного ресурса более
широкие возможности, чем [1]. Функционал [1] может быть реализован
средствами Программы в качестве частного случая путём несложной
редукции. При этом пользователь получает в свое распоряжение все
возможности [1] и дополнительно — поддержку воспроизведения видео.
3
.02069071.00297-01 99 01
Основная область применения Программы — сопровождение учебного
процесса, в том числе в рамках дистанционных образовательных
технологий, в высших и средних специальных учебных заведениях, на
курсах
повышения
квалификации.
Возможно
применение
и
вне
образовательных учреждений, для задач, не связанных с педагогикой.
Используемые технические средства
При разработке и тестировании программы использовались текстовый
редактор Блокнот операционной системы Microsoft Windows, браузеры
Internet Explorer, Mozilla Firefox, Opera и Google Chrome.
Работа программы была протестирована в среде Microsoft Windows
в браузерах Internet Explorer версий 6, 7, 8, 9 и 10, Mozilla Firefox версий
3.6.3 и 23, Opera версий 10.63 и 15, Google Chrome версий 14 и 28.
Использование программы подразумевает наличие на компьютере
разработчика электронного ресурса текстового редактора типа Блокнот, а
на компьютере пользователя — обозревателя web-страниц. Объем
необходимой для работы программы оперативной памяти определяется
объёмом текста учебного пособия, а также количеством и размером
составляющих иллюстративную часть графических и видео- файлов.
Ограничения
Программу невозможно использовать в случае отсутствия обозревателя
web-страниц на компьютере пользователя, либо отключения поддержки
JavaScript в настройках браузера.
Структура и порядок использования программы
Результатом
выполнения
программы
является
web-страница,
содержащая пять блоков: 1) блок заголовка, 2) блок текста, 3) блок
миниатюр, 4) блок иллюстраций, 5) блок подписей.
4
.02069071.00297-01 99 01
Рис. 1. Структурная схема web-страницы
Блок заголовка содержит название электронного ресурса.
Блок текста предназначен для вывода частей, разделов и глав лекции.
Блок
миниатюр
изображений,
служит
являющихся
для
построения
ссылками
на
ряда
уменьшенных
используемые
в
лекции
мультимедийные ресурсы — фотографии, рисунки и видеоклипы.
Блок иллюстраций является областью вывода мультимедийного
содержимого электронного ресурса.
Блок подписей включает пояснения к иллюстрациям.
Инструментальная
часть
программы
включает
шесть
файлов:
index.htm, functions.js, data.js, size.css, basic.css, user.css.
Входными данными для программы являются информация, введённая
разработчиком
электронного
ресурса
в
текстовый
файл
data.js,
и подготовленные для пояснения лекции мультимедийные файлы.
Разработчик электронного ресурса должен определить значения
содержащихся в файле data.js переменных и массивов.
5
.02069071.00297-01 99 01
Редактирование data.js следует производить в редакторе Блокнот
или подобном ему, чтобы не нарушить текстовый формат файла.
Переменная meth предназначена для хранения названия ресурса.
Её значение должно быть заключено в двойные кавычки.
Массив section должен содержать текст лекции. Элементы массива
section предназначены для хранения структурных элементов лекции —
частей, разделов, глав, параграфов и отдельных абзацев в соответствии
с планом разработчика. Содержимое каждого элемента массива section
должно быть заключено в двойные кавычки.
Каждый
элемент
массива
section
может
содержать
текст
и
дескрипторы HTML. Внутри элементов массива section запрещено
использовать двойные кавычки и нажимать клавишу Enter. Вместо
двойных кавычек допускается использовать одинарные. Для удобства
при вводе текста можно установить в меню Формат редактора Блокнот
условие Перенос по словам. Для контроля случайного нажатия клавиши
Enter по завершении формирования массива section надо отключить
условие Перенос по словам и убедиться, что каждый элемент массива
section занимает не более одной строки. Если это не так, то необходимо
удалить все символы разрыва строки внутри элементов section, иначе
возникнет ошибка при формировании web-страницы.
Любой фрагмент текста внутри массива section можно сделать
командой загрузки мультимедийного содержимого в блок иллюстраций.
Для этого выбранный фрагмент текста надо заключить в дескриптор
HTML <span>, как показано ниже.
<span class='gv' onClick='li(x)'>текст</span>
В дальнейшем эта конструкция будет называться псевдоссылкой
в отличие от гиперссылки, на которую она похожа по принципу действия.
Число x — номер вызываемого элемента из массива m, содержащего имена
файлов мультимедийных иллюстраций к лекции.
6
.02069071.00297-01 99 01
С массивом section связан массив hb. Элементы массива hb
определяют
высоту
соответствующих
в
пикселях
элементов
при
массива
отображении
section.
Высота
на
экране
подбирается
экспериментальным путём для каждого текстового элемента. Значения
элементов массива hb — числа, их не надо заключать в кавычки.
Массив
служит
m
для
хранения
имён
мультимедийных
—
графических и видео- файлов, включённых в электронный ресурс. Имена
файлов должны быть указаны с учётом регистра символов. Это важно при
размещении электронного ресурса на web-сервере, так как web-серверы,
как правило, различают строчные и заглавные буквы.
Элементы массива m должны быть заключены в одинарные, а не в
двойные, кавычки в отличие от элементов других массивов файла data.js.
Помимо имён файлов, элементы массива m могут содержать ссылки
на видеоролики YouTube и Vimeo.
С
массивом
m
связаны
переменные
gdir
и
vdir,
которые
предназначены для хранения имён каталогов, содержащих соответственно
графические и видео- файлы. При планировании электронного ресурса,
возможно, окажется целесообразным отделить мультимедийные объекты
от файлов программы. Имена каталогов не должны содержать пробелы.
При указании пути к файлам следует использовать прямой слеш / и нельзя
использовать обратный слеш \ . Это важно, если ресурс предполагается
разместить на web-сервере. Если значения переменных gdir и vdir пустые
или равны "./", это означает, что файлы программы и мультимедиа
расположены в одном каталоге. Значения переменных gdir и vdir должны
быть заключены в двойные кавычки.
Элементы массива ds служат для хранения подписей к иллюстрациям.
Их значения должны быть заключены в двойные кавычки. Содержимое
элемента массива ds загружается в блок подписей при выборе
иллюстрации,
которой
соответствует
данный
элемент
ds.
7
.02069071.00297-01 99 01
Нумерация элементов
массива m,
чтобы
ds
должна
обеспечить
следовать
правильное
нумерации
сочетание
элементов
иллюстрации
и подписи в процессе работы с электронным ресурсом.
Переменные picw и pich относятся только к графическим файлам.
Переменная picw предоставляет программе информацию о ширине
изображений, а переменная pich — об их высоте. Желательно обеспечить
одинаковые размеры всех используемых изображений, так как это влияет
на эстетику формируемой web-страницы.
Если соотношение picw/pich > 1, то в блоке иллюстраций будет всегда
отображаться одно, выбранное в данный момент, изображение. Если
picw/pich < 1, то изображений будет два: выбранный рисунок и следующий
за ним. Видеоклип всегда будет отображаться в блоке иллюстраций
в единственном
числе,
так
как
воспроизведение
видеофайлов
не зависит от значения параметра picw/pich.
Переменные picw и pich являются числовыми, поэтому их значения
не требуется заключать в кавычки.
Переменная kwh указывает программе соотношение сторон видео.
Желательно,
чтобы
это
соотношение
было
одинаковым
у
всех
используемых видеоклипов. Добиться этого непросто, так как разработчик
электронного ресурса, как правило, не занимается монтажом видеоклипов
самостоятельно, а использует уже готовый материал. Поэтому можно
пренебречь этим требованием и установить значение переменной kwh
равной соотношению сторон, присущем большинству используемых
в электронном ресурсе видеоклипов. Стандартными соотношениями
для видео являются 4/3 и 16/9, но возможны и другие варианты.
Переменная kwh является числовой, её значение следует указывать
в виде дроби и не заключать в кавычки.
Переменная ffhil хранит значение высоты блока иллюстраций.
Изменяя её величину, разработчик может управлять размерами web-
8
.02069071.00297-01 99 01
страницы в целом, так как ffhil является ключевым параметром, на основе
которого рассчитываются размеры всех блоков web-страницы. Значение
переменной ffhil — число, его не требуется заключать в кавычки.
Переменная j предназначена для коррекции отображения последнего
текстового блока, который в некоторых случаях может оказаться
урезанным или, наоборот, иметь под собой лишнее пустое пространство.
Значение j подбирается экспериментально. Это число вещественного типа,
разделителем целой и дробной части является точка.
Переменная pg служит для хранения адреса страницы, на которую
нужно обеспечить переход со страницы ресурса. Обычно это требуется при
размещении электронного ресурса на web-сервере, когда страницу ресурса
надо связать с родительской или главной страницей сайта. Значение
переменной pg должно быть заключено в кавычки.
Переменная sh управляет отображением гиперссылки на страницу,
адрес которой хранится в переменной pg. Если значение sh равно 1,
в левой верхней части web-страницы появится изображение стрелки.
Оно является графической гиперссылкой на страницу, указанную в pg.
Изображение стрелки хранится в файле link.gif, расположенном в одном
каталоге с файлами программы. Этот файл не следует ни удалять,
ни переименовывать, ни перемещать. Если значение pg не задано
или значение sh отлично от 1, то гиперссылка отображаться не будет.
Значение переменной sh не надо заключать в кавычки.
Приведённые выше сведения адресованы разработчику ресурса.
Теперь обратимся к информации, важной для пользователя.
Просмотр ресурса начинается с запуска файла index.htm. В левой
части web-страницы отображается текст лекции, который можно читать,
осуществляя прокрутку в блоке текста. Вывод иллюстраций выполняется
двумя способами: 1) щелчком левой клавишей мыши по псевдоссылке
в тексте лекции; 2) щелчком по изображению в блоке миниатюр.
9
.02069071.00297-01 99 01
Рис. 2. Пример web-страницы, сформированной программой
Первый способ отражает связь иллюстрации с текстом лекции
и характерен для ситуации, когда пользователь внимательно изучает
ресурс в целом. Псевдоссылки выделены в тексте лекции зелёным цветом
(это стиль дескрипторов span класса gv — разработчик ресурса может
изменить
его).
Второй
способ
характерен
для
ситуации,
когда
пользователь намерен составить представление о содержании ресурса,
просмотрев его иллюстративную часть. Пользователь может пролистать
иллюстрации, используя клавиши управления курсором → и ← .
Эти клавиши перестают работать при загрузке в блок иллюстраций
видеороликов с сайтов YouTube и Vimeo, так как проигрыватели
переключают управление этими клавишами на себя. Тогда переход
к другому объекту можно выполнить щелчком по нужному элементу блока
миниатюр. Пользователь может развернуть графическое изображение
в блоке иллюстраций до его оригинальных размеров, если сделает щелчок
по нему левой клавишей мыши, — изображение откроется в новом окне.
Для видеоклипов переход в полноэкранный режим и возвращение из него
осуществляется средствами проигрывателей.
10
.02069071.00297-01 99 01
Специальные условия применения и требования
организационного, технического и технологического характера
В
этом
разделе
приведены
сведения,
полезные
разработчику
электронного ресурса для качественного выполнения работы.
Подготовка материалов
Подготовка
материалов
для
электронного
ресурса
требует
квалификации опытного пользователя компьютера. Желательно, чтобы
разработчик ресурса владел хотя бы базовыми знаниями HTML, умел
применять дескрипторы абзацев, заголовков, логического выделения
символов. Приветствуется знание CSS, также полезны навыки работы
в каком-либо графическом редакторе. Эти умения обеспечат качественное
исполнение и привлекательный вид учебного электронного ресурса,
а следовательно и должное педагогическое воздействие.
Рекомендации
по
созданию
графических
файлов
приведены
в рекламно-техническом описании [1], которое доступно по адресу
http://ofernio.ru/rto_files_ofernio/17746.doc.
Более
сложными
представляются
подготовка
и
применение
в электронном ресурсе видеоматериалов, хотя и в этом деле достаточно
квалификации опытного пользователя.
Поддержка форматов видеофайлов
Разработчик
электронного
ресурса
может
использовать
как
видеофайлы собственного производства, так и полученные из внешних
источников, в том числе социальных сетей YouTube и Vimeo. Трудности
применения видео в web-страницах связаны с отсутствием единого
стандарта поддержки видео браузерами. Разработчику электронного
ресурса нет необходимости вникать в особенности реализации этой
поддержки в конкретных браузерах. В программе реализован алгоритм,
учитывающий относящиеся к видео положения стандарта HTML 5
11
.02069071.00297-01 99 01
и обобщающий опыт обработки видео различными браузерами. Этот
алгоритм обеспечит гарантированное воспроизведение видео во всех
широко применяемых в настоящее время браузерах при выполнении ряда
простых правил, которые будут изложены ниже.
В
таблице 1
воспроизведения
представлены
результаты
проверки
возможности
видеофайлов
различных форматов в популярных
браузерах. Звёздочка в ячейке таблицы означает способность браузера
обработать видеофайл с данным расширением.
Таблица 1
Поддержка форматов видеофайлов популярными браузерами
Современные версии браузеров (август 2013 года)
Расширения имён видеофайлов
Название браузера
MP4 OGV WebM WMV AVI MPG MPEG
Internet Explorer 10
*


*
*
*
*
Google Chrome 28
*
*
*




Firefox 23
*
*
*




Opera 15

*
*




*
*
*
*
Устаревшие версии браузеров
Internet Explorer 6–9
Google Chrome 14
*
*
Firefox 3.6.3
*
*
Opera 10.63
*
12
.02069071.00297-01 99 01
Конечно, установка дополнительных модулей (плагинов) могла бы
восполнить
ряд
пробелов
в
этой
таблице.
Однако
невозможно
гарантировать наличие нужных плагинов на компьютере пользователя,
так же как и не стоит рассчитывать на способность пользователя
самостоятельно их установить. Поэтому разработчику электронного
ресурса надо исходить из данных приведённой таблицы и при подготовке
видеоматериалов следовать правилам, перечисленным ниже.
1. Первое правило состоит в том, что любой видеоматериал должен
быть дублирован, как минимум, в двух файлах — формата MP4
и формата OGV. Это позволяет обеспечить воспроизведение видео
в современных версиях самых распространённых браузеров. Файлы
должны иметь одинаковые имена и разные расширения. В массив m
достаточно включить имя только одного из двух файлов, любого;
следовательно, не требуется размещать в тексте лекции две отдельные
ссылки – на файл MP4 и на файл OGV. Достаточно сослаться на один,
указанный в массиве m, — программа автоматически предложит браузеру
тот файл, формат которого он поддерживает. Обязательным условием
является размещение файлов в одном каталоге, указанном в переменной
vdir в файле data.js. Полностью автоматическая взаимная подстановка
обеспечена для двух важнейших форматов — MP4 и OGV. Если
видеофайлы имеют другие расширения, разработчику электронного
ресурса требуется предпринять дополнительные действия.
2.
Если в распоряжении разработчика имеется файл, например,
формата WMV или AVI, который поддерживает только браузер
Internet Explorer, то необходимо создать его копию, осуществив
кодирование в файл формата OGV. Таким образом, в каталоге видео
должны находиться два файла с одинаковыми именами и разными
расширениями — WMV (AVI) и OGV. В массиве m должны быть
указаны имена обоих файлов; элементы массива ds, в которых хранятся
13
.02069071.00297-01 99 01
подписи к ним, необходимо сделать одинаковыми. В тексте лекции
достаточно сделать ссылку на один из двух файлов, любой, — программа
автоматически выполнит подстановку нужного файла с учётом браузера.
3.
Если в распоряжении пользователя имеется файл, например,
формата MP4, то необходимо создать две дополнительных его копии,
осуществив кодирование в файл формата OGV и в файл формата
WMV или AVI. Этим достигается максимальная совместимость как
с современными, так и со старыми версиями популярных браузеров.
Имена файлов должны быть одинаковыми, а расширения — разными. Все
три файла должны быть указаны в массиве m (строго говоря, достаточно
указать два — пару MP4 и WMV/AVI или пару OGV и WMV/AVI),
относящиеся к ним значения элементов ds должны быть одинаковыми.
В лекции достаточно сделать ссылку на один файл, любой.
Не следует пренебрегать поддержкой старых версий браузера Internet
Explorer, так как вероятна ситуация, что он окажется единственным
браузером на компьютере пользователя. Internet Explorer поставляется
вместе с операционной системой Windows, тогда как остальные браузеры
надо специально устанавливать. Современная версия Internet Explorer 10
встроена только в операционную систему Windows 8. На компьютере
пользователя могут быть и предшествующие версии Windows. Ниже
приведена таблица, которая отражает соответствие версий Windows
и Internet Explorer при стандартной конфигурации операционной системы.
Таблица 2
Соответствие версий Windows и Internet Explorer
Операционная система
Браузер
Windows XP
Internet Explorer 6
Windows Vista
Internet Explorer 7
Windows 7
Internet Explorer 8
14
.02069071.00297-01 99 01
Не всегда преобразование файлов в формат WMV и AVI приводит
к успешному открытию их в старых версиях браузера Internet Explorer.
Помимо формата файла, важную роль играют кодеки — алгоритмы сжатия
аудио- и видеоинформации. Если в процедуре перевода файла MP4/OGV
в файл WMV/AVI будут использованы кодеки более новые, чем те,
которые существовали в момент выпуска браузера Internet Explorer 6/7/8/9,
то браузер не сможет воспроизвести видео, несмотря на правильное
расширение имени файла. Решение этой проблемы требует от разработчика
электронного ресурса глубоких знаний в области кодирования видео.
Существует немало программ преобразования форматов видеофайлов.
При
подготовке
демонстрационного
материала
автор
использовал
бесплатные программы Media Coder с сайта mediacoderhq.com и SUPER
Video Converter с сайта erightsoft.com. Обе программы позволяют
осуществлять кодирование видео и перевод файлов из одного формата
в другой. Разработчик электронного ресурса может использовать иные,
более удобные для себя, программы.
Поддержка формата SWF
Программа обеспечивает поддержку файлов Shockwave Flash (SWF).
Разработчик может указывать эти файлы в элементах массива m так же,
как и другие мультимедийные объекты. Условием воспроизведения
файлов SWF на компьютере пользователя является наличие программы
Adobe Flash Player, которую можно загрузить с сайта adobe.com.
Таблицы стилей
Стиль web-страницы определяется установками файлов size.css,
basic.css, user.css. Разработчик может определить собственные стили
существующих и новых элементов web-страницы в файле user.css,
установки которого имеют приоритет перед установками файлов size.css
15
.02069071.00297-01 99 01
и basic.css. Чтобы вернуться к первоначальному виду web-страницы,
достаточно удалить или очистить файл user.css. В создании стиля лекции
разработчику может помочь программа [2], позволяющая частично
автоматизировать процедуру выбора параметров шрифта и абзацев,
а также цветового оформления лекции. По состоянию на сентябрь
2013 года программа [2] размещена на сайте http://programs.psfa.ru
и находится в свободном доступе. Рекламно-техническое описание [2]
можно прочесть по адресу http://ofernio.ru/rto_files_ofernio/18347.doc.
Изменение кода программы
Код программы открыт для редактирования. Если разработчик
электронного ресурса обладает навыками программирования на языке
JavaScript и разобрался во внутренней организации программы, он может
внести свои дополнения в файл functions.js, а также в файлы data.js
и index.htm. Однако в этом случае ответственность за работоспособность
программы полностью ложится на него.
Условия передачи программы или её продажи
Программа может быть передана бесплатно. Связаться с автором
можно по электронному адресу i.churilov@bk.ru , либо обратившись
в Пермскую государственную фармацевтическую академию на кафедру
физики и математики или в Центр дистанционных образовательных
технологий по электронному адресу do.psfa@yandex.ru.
Библиографический список
1. Чурилов И.А. Компьютерная программа: <Программа формирования
иллюстрированных методических указаний, инструкций и описаний
технологических процессов в виде web-страницы> [Электронный ресурс] /
И.А. Чурилов. — Программа (10 Кбайт). — Пермь, 2011. — Системные
требования: IBM PC, Intel Pentium; 64 Мбайт ОЗУ; Windows 98 и выше; —
16
.02069071.00297-01 99 01
Свидетельство о регистрации электронного ресурса № 17746; заявление
14.11.2011.
2. Чурилов И.А.,
программа:
Неугодникова
<Программа
Т.С.,
Беляев
формирования
Ю.А.
стиля
Компьютерная
web-документа>
[Электронный ресурс] / И.А. Чурилов, Т.С.Неугодникова, Ю.А.Беляев. —
Программа (44 Кбайт). — Пермь, 2012. — Системные требования: IBM PC,
Intel Pentium; 64 Мбайт ОЗУ; Windows 98 и выше; — Свидетельство
о регистрации электронного ресурса № 18347; заявление 18.02.2012.