Исследование использования программ дистанционного обучения для подготовки учебно-методической документации (стр. 15 из 27)

Рисунок 2.13 - Редактор файлов сайта

2.5 Создание электронных учебных материалов для ДО

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

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

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

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

Рисунок 2.14 - Фреймовая структура электронного учебника

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

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

Выбранные из оглавления разделы появляются во фрейме, названном "Основной текст электронного издания". Этот фрейм имеет самые большие размеры, необходимые для помещения 2-3 абзацев текста или рисунка с пояснениями. Указанный фрейм представляет собой главное информационное поле, т.е. содержит тот материал, который должен быть за один прием воспринят учащимся, осознан им и сохранен в оперативной, а затем и в долговременной памяти.

В этом тексте также содержаться ссылки в виде адресов (URL) иллюстраций (если они выводятся в специальных окнах), некоторых других электронных документов, рассматриваемых как дополнительная литература, анимационных, аудио - и видеофайлов, содержащих динамическое описание процессов или явлений, авторские пояснения и иллюстрационный видеоматериал. В качестве иллюстрации этого положения, могу сослаться на большое впечатление, которое произвела на автора динамическая схема (модель) производства сахара на автоматизированном производстве, оформленная в виде анимационного изображения в GIF-формате на соответствующем сайте. Для удобства студента в отдельный фрейм выделен глоссарий или список определений, переход к которым организован с помощью указателей гиперссылок от терминов, встречающихся в основном тексте и требующих пояснения. Этот фрейм не является обязательным. Для увеличения площади экрана, занятой основным фреймом, можно список определений формировать в дополнительном всплывающем окне.

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

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

Рисунки, которые должны присутствовать в тексте во многих случаях следует показывать в отдельных окнах, изолировано от фрагментов текста. Следовательно, в таком случае во фрейме "Основной текст издания" выводятся действительно только абзацы текста учебника. Если в одном из них присутствует гиперссылка на рисунок, то при воздействии на нее всплывает окно с графикой. Размер окна с рисунком не должен быть чрезмерно большим, чтобы иметь возможность перемещать это окно в пределах экрана для того, чтобы попытаться оптимально разместить на экране рисунок относительно поясняющего его текста. Например, рисунок может перекрывать фреймы "Оглавление" и "Глоссарий", так как во время изучения и запоминания изображения обычно не требуется перемещаться по тексту издания. После детального изучения рисунка вместе с поясняющим его текстом окно с рисунком, как правило, можно закрыть.

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

2.6 Разработка web-приложения

Одним из значимых элементов любого приложения является пользовательский интерфейс. Удобство и простота его реализации во многом определяют успех любого проекта. Неудачная подборка цветовой гаммы, в том числе несочетающихся цветов, бывает причиной нежелания пользователей посещать даже насыщенный полезной информацией web-ресурс. Для облегчения вывода текста созданы каскадные таблицы стилей. А в качестве языка программирования используется PHP, эффективно взаимодействующий с базами данных и позволяющий реализовывать серьезные проекты.

2.6.1 Разработка пользовательского интерфейса

В качестве цветовой гаммы выбраны синие и оранжевые цвета. Подобраны оттенки, достаточно хорошо гармонирующие друг с другом. Текст отображен шрифтом семейства Verdana, Arial, Sans-serif черным или темно-серым цветом.

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

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

Рисунок 2.15 - Заголовочная часть пользовательского интерфейса

В нижней части расположено пользовательское меню с ниспадающими подменю. Элементы меню выполнены в светло-синем стиле, подсветка активного пункта осуществляется оранжевым цветом. Меню написано на языке java-скрипт и взято с сайта бесплатных шрифтов [11]. Оно реализовано в файле popup_me. js, к которому прикрепляются файлы содержимого меню (menu. php- для основного меню, menu_adm. php- для меню администрирования) и содержимого подменю (menu_rli. js - для подменю основного меню, menu_rli_adm. js - для подменю меню администрирования). Внешний вид меню представлен на рисунке 2.16.

Рисунок 2.16 - Пользовательское меню

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

Рисунок 2.17 - Информативная панель

В нижней части страницы отображается строка статуса, на которой представлена информация о web-дизайнере (рисунок 2.18).

Рисунок 2.18 - Строка статуса

Цвет рабочей области страницы - белый, для лучшего восприятия пользователем темного текста. Элементы рабочей области, содержащие информацию, обрамлены в оранжевые фреймы с заголовочным текстом белого цвета, выведенном на оранжевом фоне. Текст фрейма темно-серого цвета, а ссылки на другие страницы - синего. Внешний вид рабочей области страницы показан на рисунке 2. 19.