Материал: Разработка раздела электронного учебника
СОДЕРЖАНИЕ
Глава 1. Теоретические основы создания электронных учебных изданий
.1 Основные требования к электронным учебникам
1.3 Инструменты и средства создания ЭУИ
Глава 2 Технология разработки ЭУИ по дисциплине «Автоматизация измерений, контроля и испытаний»
2.2 Перевод электронной информации в интерактивные учебные кадры
2.3 Педагогический и технологический сценарий курса
2.4 Пользовательский интерфейс учебника
2.6 Компоновка материалов курса и Web-программирование
2.7 Подготовка вопросов и тестов
Рисунок 8 - Изображение обложки ЭУИ
Изменения цветовой гаммы Шаблона коснулись гиперссылок на рисунки, они обозначены мной синим цветом, на термины глоссария, слои и источники литературы, обозначенные красным цветом. Это сделано с целью визуального разделения данных гиперссылок (отделить рисунки от терминов и пояснений) и усиления контраста цветов выделенных слов и фона для концентрации на них внимания пользователя. Для наличия того же контраста в изображении я не изменила цветовые настройки встроенных рисунков: рисунок располагается на белом фоне, между тем как фон кадра - бежевый.
Мной изменено визуальное представление слоёв, в частности, Layer 3, наоборот, с целью уменьшения цветового контраста между фоном слоя и фоном кадра несмотря на то, что цвета этих фонов являются разными, но приближенными по цветовому спектру (жёлтый - фон слоя, бежевый - кадра).
Мной не изменено расположение заголовков, основного кадра, содержания и
стрелок навигации, поскольку, считаю, что оно наиболее оптимально для ЭУИ и
применяется во многих изданиях, которые я видела. То есть эта форма
представления знакома большинству пользователей, что немаловажно с
психологической точки зрения. Структура пользовательского интерфейса
представлена на рисунке 9.
Рисунок 9 - Структура кадра
Перемещение по кадрам осуществляется как посредством кнопок навигации,
тогда организуется последовательное передвижение от кадра к кадру в прямом и
обратном направлении согласно технологическому сценарию (рисунки 4 и 5), так и
посредством активизации нужных пунктов содержания (рисунок 10), в этом случае
предусмотрено любое передвижение от кадра к кадру: последовательное или с
возможностью пропуска определённого их количества в прямом и обратном
направлении.
Рисунок 10 - Фрагмент содержания ЭУИ
2.5 Подготовка текстов
По умолчанию определение кодировки текста (кодовой страницы) основано на следующем алгоритме. Во-первых, если файл имеет тэги для указания кодировки (обязательно для XML, опционально для HTML), то она используется безусловно. Во-вторых, если файл не содержит служебной информации о кодировке текста, то подбирается наиболее подходящая кодировка.
Выбор кодировки для Web-страниц ЭУИ в редакторе FrontPage производился по схеме: Меню Формат/Свойства/закладка Язык/Сохранить документ, используя... Кириллица (рисунок 11).
Рисунок 11 - Выбор кодировки
Рисунок 12 - Определение кодировки в браузере
Согласно различным исследованиям, порядка 95-98% всех сайтов в Рунете написаны с использованием кодировки Windows-1251. Поэтому целесообразно использовать данную кодировку в ЭУИ.
В своём ЭУИ для основного текста я выбрала шрифт Arial размером 13 пт. Это обосновано тем, что в связи с ограниченностью поля представления основного кадра текст размером 12 пт мелковат для нормального восприятия материала, а также из-за особенностей начертания немного неудобен для восприятия шрифт TimesNewRoman. Arial имеет более чёткую и строгую конструкцию и лучше прочитывается. Размер шрифта выбран из условия представления кадра без полос прокрутки, но с более-менее оптимальным при этом ограничении размером.
Шрифт TimesNewRoman выбран в качестве шрифта для текста списков для их большего выделения в основном тексте.
При этом некоторые слова текста ЭУИ, на которые необходимо обратить внимание, имеют специальное отображение: курсив, обозначенный тегами <i>, </i> или полужирный, обозначенный тегами <b>, </b>.
Отдельно мной изменены цвет и размер шрифта контрольных вопросов и
вопросов для тестирования.
2.6 Компоновка материалов курса и Web-программирование
-документ - это один большой контейнер, который начинается с тега <html> и заканчивается тегом </html>.
Контейнер HTML состоит из двух других вложенных контейнеров: заголовка документа (head) и тела документа (body) (таблица 3).
Современная практика HTML-разметки такова, что почти в каждом
документе есть HTML-заголовок. Важную роль заголовок HTML-документа
играет в JavaScript. Существует принципиальная разница между заголовком
и телом документа при использовании элемента разметки script. Она заключается в определении зоны
видимости функций и переменных. Переменные и функции, определённые в заголовке
документа, относятся ко всему окну браузера. Это значит, что к ним можно
обратиться из любого места документа и изменить их значения.
Таблица 3 - Структура кадра
|
1 |
<html> |
|
2 |
<head> |
|
3 |
<title>Название</title> |
|
4 |
<link rel=stylesheet type="text/css" href="../Common/base.css" title="base css"> |
|
5 |
<script language="JavaScript" src="../Common/functcom.js"></script> |
|
6 |
<script language="JavaScript"> |
|
7 |
var prevFile = "../Lections/1/1_1.htm"; |
|
8 |
var nextFile = "../ Lections/1/1_2.htm"; |
|
9 |
</script> |
|
10 |
</head> |
|
11 |
<body onLoad="init()"> |
|
12 |
<h2>Название</h2> |
|
13 |
<p>………………..</p> |
|
14 |
</body> |
|
15 |
</html> |
Элемент разметки link позволил загружать внешние описатели стилей. В данном случае речь идёт о загрузке стилей из файла bass.css, находящегося в папке common. При этом стили задаются в нотации W3C, а не JavaScript, что определяется атрибутом type.
Элемент разметки script служит для размещения кода JavaScript. Вообще говоря, script можно использовать не только в заголовке документа, но и в его теле. В отличие от контейнера style, ему не требуется дополнительный контейнер link для загрузки внешних файлов кодов.
Тело документа состоит из:
· иерархических контейнеров и заставок;
· заголовков (от h1 до h6, в ЭУИ до h4);
· блоков (параграфы, списки, формы, таблицы, картинки и т.п.);
· горизонтальных отчёркиваний и адресов;
· текста, разбитого на области действия стилей (подчёркивание, выделение, курсив);
· математических описаний, графиков и гипертекстовых ссылок.
Мной изменены некоторые стили HTML-документа по алгоритму: в FrontPage меню Формат/Связи с таблицами стилей - выбор файла base.css/Изменить. В открытом файле base.css изменение стиля производилось по пути: меню Формат/Стиль/ Изменить/Формат/Шрифт. При этом изменены стили заголовков h1, h2, h3, h4 (цвет, размер, положение). Стиль ссылки на слой: в списке «а» (цвет). Стиль гиперссылки на рисунки (цвет, подчёркивание): изменение файла highstide.css, в списке изменён стиль - highstide. Стиль основного текста и списков (шрифт, размер).
В ЭУИ рисунки, ссылки на термины, источники литературы, а также слои, вставлены с помощью следующих конструкций (приведены конкретные примеры):
Рисунки: <a href="../../images/рисунок%201.2.3.PNG">
Ссылки на термины: <a onclick="return hs.htmlExpand(this, { objectType: 'ajax'} )" href="../../glossary/glossary.htm#Термин 23">сигналов измерительной информации</a>;
Ссылки на источники литературы: <a onclick="return hs.htmlExpand (this, { objectType: 'ajax'} )" href="../../literature/literature.htm#Источник 4">4</a>]</p>;
Слои: <a href="javascript:showLayer('layer3')">Интерфейс</a>;
<div style="position: absolute; width: 305px; height: 95px; z-index: 1; left: 165px; top: 200px; visibility: hidden" id="layer3">
<p><a href="javascript:hideLayer('layer3')"></p>
<img border="0" src="../../common/x.gif" width="22" height="22" align="right"></a><p style="text-align: center">
<p align="center" style="text-align: center"> текст слоя
</div>. Мной выбран тип слоя, открывающийся без анимации по щелчку.
Вставка таблиц осуществлялась посредством конструкции:
<table border="0" width="100%" height="60%">
<tr>
<td><h1 align="center"><тело таблицы></h1></td>
</tr>
</table>.
Списки в ЭУИ организованы посредством тегов <ol>, </ol> для нумерованного и <ul>, </ul> ненумерованного списка, которые представляют собой, например, следующую совместную конструкцию (п. 1.3.1):
<ol>
<li>Автономные ЦСИ -...</li>
<li>СИ, управляемые компьютером -...</li>
<li>СИ со встроенным компьютером -...</li>
<li>СИ на основе компьютера -... </li>
</ol>
<ul><li><b>Виртуальные ЦСИ.</b></li></ul>
<ol>
<li>Адаптивные СИ - ...</li>
<li>Индивидуальные СИ - ...</li>
<li>Сетевые СИ -...</li>
<li>Локальные СИ -... </li>
</ol>
2.7 Подготовка вопросов и тестов
Контрольные вопросы по первой и второй главам организованы соответственно размещённому в тексте ЭУИ теоретическому материалу, без задания уровня сложности, без подключения внешних файлов, в простой формулировке по теории учебника.
Тестовые здания также касаются теоретического материала ЭУИ. Вопросы в них (по 4 на главу), размещённые в файлах test_1, test_2 - для 1 главы (../lections/1/test_1.htm, ../lections/1/test_2.htm) и test_3, test_4 - для 2 главы (../lections/2/test_3.htm, ../lections/2/test_4.htm), не совпадают с контрольными вопросами по главам.
При этом использовано 2 объекта Web-форм: checkbox и radio. Например:
<P><STRONG>На какие классы подразделяются цифровые средства измерения?</STRONG>
<FONT COLOR="#117700">
<BLOCKQUOTE>
<INPUT TYPE="checkbox" VALUE="a01" NAME="q01_a01">реальные<BR>
<INPUT TYPE="checkbox" VALUE="a02" NAME="q01_a02">модельные<BR>
<INPUT TYPE="checkbox" VALUE="a03" NAME="q01_a03">виртуальные<BR>
<INPUT TYPE="checkbox" VALUE="a04" NAME="q01_a04">действительные<BR>
</BLOCKQUOTE></FONT>
<P><STRONG>Что такое "приборный интерфейс"?</STRONG>
<FONT COLOR="#117700">
<BLOCKQUOTE>
<INPUT TYPE="radio" name= "q02" value= "a01">система обмена данными между ЦСИ и компьютером<BR>
<INPUT TYPE="radio" name= "q02" value= "a02">схема подключения ЦСИ к системной шине компьютера<BR>
<INPUT TYPE="radio" name= "q02" value= "a03">кабель, соединяющий ЦСИ и компьютер<BR>
<INPUT TYPE="radio" name= "q02" value= "a04">программа, посредством которой компьютер управляет ЦСИ<BR>
</BLOCKQUOTE></FONT>
Проверка результатов производится при помощи функции проверки:
function showResult(f) {countAll = 2;countTrue = 0;(f.q01_a01.checked)&(f.q01_a03.checked)&!(f.q01_a02.checked)&!(f.q01_a04.checked)) {countTrue = countTrue + 1;}(f.q02[0].checked) {countTrue = countTrue + 1;}
alert("Правильных ответов: " + countTrue + " из " + countAll + "\n" + "Ваш процент верных ответов: " + 100*countTrue/countAll);
Таким образом, разработана часть ЭУИ по дисциплине «Автоматизация измерений контроля и испытаний», включающая две первые главы с контрольными вопросами и тестами для самоконтроля, встроенными и подгружаемыми посредством гиперссылок объектами: рисунками, ссылками на источники литературы и термины, слоями, содержащими пояснения к тексту ЭУИ. В составе ЭУИ 42 кадра, 16 - на первую главу, 22 - на вторую, по одному на введение, инструкцию к ЭУИ, список литературы и глоссарий. При разработке ЭУИ использованы многие возможности редактора FrontPage и HTML-технологии.
Глава 3. Итоговый интерфейс электронного учебника
Представление итогового интерфейса ЭУИ представлено рисунками 13-21.
3.1 Скриншоты общих для ЭУИ кадров
Общими для всего электронного издания являются следующие разработанные
кадры: обложка учебника (рисунок 13), кадр «Введения», кадр «Как работать с
учебником», кадр «Глоссарий» (рисунок 14) и кадр «Список литературы» (рисунок
15).
Рисунок 13 - Кадр обложки ЭУИ
Рисунок 14 - Фрагмент кадра глоссария
Рисунок 15 - Кадр со списком литературы
3.2 Скриншоты кадров глав ЭУИ
Рисунок 16 - Кадр со ссылками на рисунки и термин