Оглавление (стр. 2 )

Описание возможных сопутствующих каталогов в составе папки skin:

Каталог Buttons – графические элементы с изображениями для стандартизированных кнопок (следующий, предыдущий и т. д.). Каталог PlayControl – графические элементы с изображениями для стандартизированных кнопок управления видео/аудио (воспроизведение, пауза, стоп). Каталог RollOverMenu – графические элементы и настроечный файл для меню, появляющегося при наведении курсора на объект. Каталог ScrollMenu – графические элементы и настроечный файл для скроллинга. Каталог StepList – настройки и графические элементы списка сцен (шагов). Подробнее – см. «Список сцен (шагов)».

3  Конфигурирование и стилевое оформление общих элементов пользовательского интерфейса ЭУМ.

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

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

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

Внимание! Объекты (медиа-объекты), входящие в состав установочных и конфигурационных файлов, могут иметь (в качестве атрибута) идентификатор id, позволяющий устанавливать логические связи с именованными объектами. При написании имени идентификатора недопустимы точки!

3.1  Общие требования к разметке и редактированию стандартного XML документа

XML (англ. eXtensible Markup Language — расширяемый язык разметки; произносится [экс-эм-эл]).

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

Рекомендуемый информационный ресурс: http://ru. wikipedia. org/wiki/XML

Внимание! Типичные ошибки, при составлении XML документов – использование специальных зарезервированных символов в текстовых (контекстных) строках, которые должны быть использованы исключительно как элементы синтаксиса; при употреблении этих символов в тексте нужно заменять их специальными последовательностями других символов, называемых сущностями. Следует заметить, что сущности чувствительны к регистру.

В таблице приведены зарезервированные символы и соответствующие им сущности.

Зарезервированный символ	Замена (сущность)
<	&lt;
>	&gt;
&	&amp;
"	&quot;
'	&apos;

Пример: Необходимо, что бы слово «занавеска» было заключено в кавычки.

<!--список иллюстраций -->

<!--Вариант 1 -->

<puzzleimage src="\DATA\components\Images\L08_01_1.jpg" title="Передник - &quot;занавеска&quot;. Прямой, без рукавов."

...

<!--Вариант 2 вместо [""] используем [«»] -->

<puzzleimage src="\DATA\components\Images\L08_01_1.jpg" title="Передник – «занавеска». Прямой, без рукавов."

...

3.2  Значимые технологические отличия при разработке учебных модулей в операционных системах Windows и Linux

Внимание! Имена файлов и директорий в Linux-системах регистрозависимые! Т. е. это означает, что DATA, Data и data - это три разных директории. Следует также избегать употребления символа «\» (обратный слэш).

Проверять работоспособность учебного модуля в процессе сборки и отладки можно без предварительной упаковки файлов в (zip, oms) контейнер. В Windows для этого можно щелкнуть правой кнопкой мыши по папке, содержащей файлы учебного модуля, и в контекстном меню выбрать пункт «Воспроизвести плеером ОМС»; в Linux, воспользовавшись методом «drag and drop», перенести (мышкой) папку с файлами проекта в область окна плеера.

Внимание! Одноименные шрифты (имеющие одинаковые настроечные параметры) в различных операционных системах и на различных компьютерах могут иметь визуальные отличия.

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

Отображение текстового меню в Windows	Отображение текстового меню в Linux

Внимание! В целях удобства сопровождения файлов сценария в разных операционных системах и разнообразных текстовых редакторах, настойчиво рекомендуем использовать кодировку UTF – 8.

3.3  Задание путей к объектам

Пути к объектам задаются по следующим правилам:

Если в начале строки стоит символ "/" то путь считается абсолютным, т. е. от корневого каталога модуля Если в начале строки отсутствует символ "/" или стоит символ "." то путь считается относительным, – начиная с текущей папки. Если в начале строки стоит символ ".." то путь считается относительным, и начинается с папки предшествующего, относительно текущей папки, уровня (в древовидной структуре каталогов).

Пример: абсолютные пути

/DATA/components/background. jpg

/DATA/skin/buttons/next_step_button. png

Пример: относительные пути

background. jpg

.background. jpg

../components/background. png

3.4  Корневой установочный файл /config. xml

Содержит описание состава установочных файлов (согласно корпоративному стандарту).

Названия элементов (element="defaults" и др.) и путь к директории размещения файлов (href="/DATA/skin/)предопределены (согласно данной логике организации структуры проекта). Конечные имена установочных файлов допускают произвольное наименование.

Пример файла config. xml

<?xml version="1.0" encoding="UTF-8"?>

<settings>

<!-- Настройка общих стилей -->

<setting element="defaults">

<location href="/DATA/skin/defaultsStyles. xml"/>

</setting>

<!-- Таблица стилей -->

<setting element="textStyles">

<location href="/DATA/skin/textStylesDef. xml"/>

</setting>

<!-- Элементы управления -->

<setting element="controls">

<location href="/DATA/skin/controlStylesDef. xml"/>

</setting>

<!-- Настройка всплывающих подсказок -->

<setting element="hints">

<location href="/DATA/skin/hintStylesDef. xml"/>

</setting>

<!-- Настройка меню, возникающего при наведении на объект -->

<setting element="rolloverMenu">

<location href="/DATA/skin/rolloverStylesDef. xml"/>

</setting>

<!-- Настройка вида меню содержания (списка сцен (шагов)) ЭУМ -->

<setting element="stepList">

<location href="/DATA/skin/stepList. xml"/>

</setting>

<!-- Описание свойств таблицы представления результатов выполнения учеником ЭУМ -->

<setting element="resultExport">

<location href="/DATA/skin/resultExport. xml"/>

</setting>

<setting element="resultPanel">

<location href="/DATA/skin/resultPanel. xml"/>

</setting>

<setting element="stepIndicator">

<location href="/DATA/skin/localStepIndicator. xml"/>

</setting>

<setting element=" element="languages">

<location href="/DATA/skin/languagesDef. xml"/>

</setting>

</settings>

3.5  Настройка общих стилей (<setting element="defaults">)

Содержит описание заданных по умолчанию свойств основных медиа объектов модуля. В приведенном ранее примере – ссылка на файл /DATA/skin/defaultsStyles. xml (в реальном модуле имя файла может отличаться от данного).

Контейнер <default> может содержать описание свойств как простых (Объект «Изображение», Объект «Текст», Объект «Flash-ролик», Объект «Аудио», …), так и составных объектов модуля (Шаблон «SlideShow», Объект «Группа»).

Общая структура файла defaultsStyles. xml

<default>

<{Объект}>

<!-- Заданные, согласно правилам описания данного объекта, свойства -->

</{Объект}>

...

</default>

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

Пример файла defaultsStyles. xml

<default>

<!-- Определение свойств по умолчанию для объекта «Текст» -->

<text>

<scroller xOffset="10" yOffset="25" height="-25" indent="true"/>

<param style="Verdana_14"/>

</text>

<!-- Определение свойств по умолчанию для объекта «Аудио» -->

<audio>

<param loop="false" playing="false"/>

</audio>

<!-- Определение свойств по умолчанию для объекта «Видео» -->

<video>

<param loop="false" playing="false"/>

</video>

<slideshow>

<param loop="false" playing="false"/>

</slideshow>

</default>

3.6  Таблица стилей (<setting element="textStyles">)

Содержит описание свойств всех текстовых стилей, используемых в ЭУМ.

В приведенном ранее примере – ссылка на файл /DATA/skin/ textStylesDef. xml (в реальном модуле имя файла может отличаться от данного).

Для каждого, отображаемого на экране текстового поля, можно задать стиль шрифта (подробнее – см. объект Текст). Под стилем подразумевается набор следующих параметров:

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

Чтобы использовать некоторый стиль шрифта в текстовом объекте, его надо предварительно задать в специальном файле textStylesDef. xml, расположенном в каталоге DATA/skin/. Он имеет следующую структуру (пример):

Общая структура файла textStylesDef. xml

<?xml version="1.0" encoding="windows-1251"?>

<styles>

<style name="{строка}"

fontFamily="{строка}"/>

fontSize="{число}[px|pt]"

color="#000000"

fontWeight="normal|bold"

fontStyle="normal|italic"

textAlign="left|right|center|justify"

lineHeight="normal|{число}pt|{число}px|{число}%"

</style>

...

</styles>

Элемент <style>

Задаёт отдельный стиль

Атрибуты

name	Обязательный атрибут. Задаёт уникальное имя стиля шрифта. Именно это имя необходимо указывать в атрибуте style для текстовых полей. Внимание! При написании имени стиля следует придерживаться следующих ограничений: ·  использовать только латинские символы; ·  имя может начинаться только с буквы или символа подчеркивания «_».
fontFamily	Обязательный атрибут. Задаёт системное название шрифта.
fontSize	Обязательный атрибут. Задаёт размер шрифта. Размер должен быть указан в одном из двух форматов: {число}px – определяет размер шрифта в пикселях; {число}pt – определяет размер шрифта в пунктах.
color	Необязательный атрибут. Цвет шрифта. Значение по умолчанию: #FFFFFF (чёрный). Возможные значения: #000000-#FFFFFF или # - #FFFFFFFF Примечание: Значение цвета может задаваться в одном из двух видов: #RRGGBB – в шестнадцатеричной системе в формате RGB, прозрачность при этом не учитывается #AARRGGBB– в шестнадцатеричном формате RGBA, при этом существует возможность указать полупрозрачный цвет фона
fontWeight	Необязательный атрибут. Насыщенность шрифта. Значение по умолчанию: normal (обычное) Возможные значения: normal – обычное начертание; bold – полужирное начертание.
lineHeight	Необязательный атрибут. Значение междустрочного интервала. Значение по умолчанию: normal (обычное) Возможные значения: normal – стандартный междустрочный интервал; {число}px – определяет междустрочный интервал в пикселях; {число}pt – определяет междустрочный интервал в пунктах; {число}% – определяет междустрочный интервал в процентах.
fontStyle	Необязательный атрибут. Начертание шрифта. Значение по умолчанию: normal (обычное) Возможные значения: normal – обычное начертание; italic – наклонное начертание.

В случае, если размер шрифта указан с суффиксом "px", он не будет зависеть от настроек экрана (разрешения, опций увеличения и т. п.) пользователя. Если задать размер шрифта в пунктах, размер шрифта будет зависеть от индивидуальных настроек оформления Windows конечного пользователя (Рабочий стол > Свойства > Оформление).

3.7  Настройка всплывающих подсказок (<setting element="hints">)

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

В приведенном ранее примере, установочный файл расположен по адресу /DATA/skin/ hintStyleDef. xml (в реальном модуле имя файла может отличаться от данного).

Возможности:

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

Общая структура файла

<hint>

<param timeout="{число}" width="{число}"/>

<border xOffet="{число}" yOffet="{число}" size="{число}" color="#000000"/>

<text style="{строка}"/>

<background color="#FFFFFF"/>

</hint>

Пример файла hintStyleDef. xml

<hint>

<param timeout="2000" width="300"/>

<border xOffet="3" yOffet="0" size="1" color="#C85C36"/>

<text style="hintStyle"/>

<background color="#FCF0C5"/>

</hint>

Элемент <param>

Общая структура

<param

timeout="2000"

width="300"

/>

Атрибуты

timeout	Обязательный атрибут. Пауза перед отображением всплывающей подсказки. Значение по умолчанию: 0.
width	Обязательный атрибут. Максимально допустимая ширина отображаемого объекта. Значение по умолчанию: 0.

Элемент <shadow>

Задает параметры тени.

Общая структура

<shadow

style="SHADOW_NORMAL"

xOffset="3"

yOffset="3"

color="#7b000000"

/>

Атрибуты

style	Обязательный атрибут. Стиль тени. Значение по умолчанию: 0.
xOffset	Обязательный атрибут. Координата (смещение) по вертикальной оси в пикселях относительно показываемого объекта. Значение по умолчанию: 0.
yOffset	Обязательный атрибут. Координата (смещение) по вертикальной оси в пикселях относительно показываемого объекта. Значение по умолчанию: 0.
color	Обязательный атрибут. Цвет тени. Значение по умолчанию: 0.

Элемент <border>

Общая структура

<border

size="1"

color="#000000""

/>

Атрибуты

size	Обязательный атрибут. Толщина рамки. Значение по умолчанию: 1.
color	Обязательный атрибут. Цвет рамки. Значение по умолчанию: #FF0000.

Элемент <text>

Общая структура

<param

style="{наименование текстового стиля}"

/>

Атрибуты

style

Обязательный атрибут. Стиль текста всплывающей подсказки. Значение по умолчанию: 0.

Элемент < background >

Общая структура

<background

color="#EAA2B4"

/>

Атрибуты

color

Обязательный атрибут. Цвет фона всплывающей подсказки. Значение по умолчанию: #00FFFFFF.

3.8  Настройка элементов управления (<setting element="controls">)

В итерационном процессе развития системной организации структуры элементов управления медиаобъектами был проведен ряд унификаций, позволивший значительно упростить процесс настройки стилевых композиций и групп элементов управления в файле описания сцены (шага) ЭУМ. Контейнер <controls> служит хранилищем контейнеров, используемых для описания свойств как одиночных, так и групповых визуальных объектов. В качестве визуальных объектов, как правило, могут быть представлены иллюстрации (<image>), кнопки (<button>), текстовые поля (<text>) и другие, описанные в данном руководстве, простые объекты, специальный элемент (<playcontrol>) и элемент – контейнер, объединяющий перечисленные визуальные объекты (<group>). Каждый контейнер, представленный в составе контейнера <controls>, имеет уникальное имя, служащее ссылкой на представленный визуальный объект. Данная структура позволяет избежать многократного описания типовых визуальных объектов в процессе сборки учебной сцены. Для включения в состав учебной сцены визуальных объектов, представленных в составе контейнера <controls>, достаточно использовать предопределенный контейнер <element>. Контейнер <element> имеет параметр (style="Имя"), значение которого есть ссылка на контейнер в составе контейнера <controls>. Следует отметить, что контейнер <element> может аналогичным образом использоваться в составе самого контейнера <controls>.

Предположим, что имя файла с описанием настроек - /DATA/skin/controlStylesDef. xml (в реальном модуле имя файла может отличаться от данного), тогда суть процесса заключается в следующем:

свойства и стили группы элементов управления описываются в именованном контейнере файла controlStylesDef. xml, а в файле описания сцены (шага) ЭУМ посредством элемента <element> объявляется ссылка на данный именованный контейнер.

Общая структура файла controlStylesDef. xml

<controls>

<{Визуальный объект} name="{строка}" visible="[true|false]">

<param {перечень атрибутов видимого объекта}/>

<!—... другие, присущие данному объекту, элементы -->

</{Визуальный объект}>

<group name="{строка}">

<{Визуальный объект} id="{строка}">

<param {перечень атрибутов видимого объекта}/>

<hint type="{строка}">{строка}</hint>

<!—... другие возможные элементы -->

</{Визуальный объект}>

...

</group>

<playcontrol name="{строка}">

<{Визуальный объект} id="{строка}">

<param {перечень атрибутов видимого объекта}/>

<!—... другие возможные элементы -->

</{Визуальный объект}>

<slider>

<!—... присущие <slider> элементы -->

</slider>

<timer>

<!—... присущие <timer> элементы -->

</timer>

</playcontrol>

</controls>

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

Элемент <element>

Элемент – ссылка на входящий в состав контейнера <controls> именованный контейнер, описывающий некоторый визуальный объект.

Общая структура

<element style="{Строка}" id="pause">

<param x="0" y="1"/>

</element>

Атрибуты

id	Необязательный атрибут. Имя данного контейнера. Значение по умолчанию: нет.
style	Обязательный атрибут. Ссылка на именованный контейнер. Значение по умолчанию: нет.

Элемент < playcontrol >

Входящий в состав контейнера <controls> именованный контейнер, описывающий группу объектов, предназначенных для контроля и управления состоянием протяженных во времени визуальных объектов (флэш, видео, аудио).

Общая структура

<playcontrol name="{строка}">

<[image|button|text|element|group] id="{строка}">

<param {перечень атрибутов видимого объекта}/>

<!—... другие возможные элементы -->

</[image|button|text|element|group]>

<slider>

<!—... присущие <slider> элементы -->

</slider>

<timer>

<!—... присущие <timer> элементы -->

</timer>

</playcontrol>

Атрибуты

name	Обязательный атрибут. Имя данного контейнера. Значение по умолчанию: нет.

Элемент <slider>

Входящий в состав контейнера <playcontrol> именованный контейнер, предназначенный для установки свойств визуальной шкалы - интерактивного указателя.