Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Реферат

Цель дипломного проекта - подготовить электронное учебное пособие для последующего включения в учебный процесс.

Поставленная нами цель предполагает решение ряда задач:

- изучить соответствующую научную литературу;

- выполнить анализ предметной области, на основании которого будет подобран материал для электронного учебного пособия;

- собрать и отредактировать материал, разбить материал на главы и темы;

- выполнить анализ инструментов и средств решения задачи, выбрать программы и языки создания пособия;

- разработать оболочку электронного пособия с системой логически связанных ссылок;

- подобрать задачи для самостоятельного решения и тесты для самоконтроля студентам;

- протестировать созданную программу.

Оглавление

• Перечень условных обозначений
• Введение
• 1. Обзор состояния вопроса
• 1.1 Анализ предметной области
• 1.1.1 Локальные учебные ресурсы
• 1.1.2 Сетевые учебные ресурсы
• 1.2 Обзор редакторов для создания электронных пособий
• 1.2.1 AutoPlay Media Studio
• 1.2.2 AdobeDreamweaver
• 1.2.3 Notepad++
• 1.3Обзор существующих аналогов
• 1.4 Модель AS-IS
• 1.5 Модель TO-BE
• 2. Постановка задачи проектирования
• 3. Моделирование программного обеспечения
• 3.1 Этапы создания электронного пособия
• 3.2 Структура электронного пособия
• 3.3 Моделирование дизайна электронного пособия
• 4. Реализация программного обеспечения
• 4.1 Выбор среды разработки, языка программирования и инструментальных средств разработки
• 4.1.1 Язык гипертекстовой разметки HTML
• 4.1.2 HTML 5
• 4.1.3 CSS/CSS3
• 4.1.4 JavaScript
• 4.1.5 jQuery
• 4.2 Обработка тестовых заданий
• 4.3 Вспомогательное меню
• 4.4 Автоматическая прокрутка страницы вверх
• 5. Тестирование программного обеспечения
• 6. Руководство пользователя
• 6.1 Руководство по установке и настройке приложения
• 6.2 Руководство по эксплуатации
• 7. Определение экономической эффективности разработки программного обеспечения
• 7.1 Определение единовременных затрат на создание программного продукта
• 7.1.1 Определение трудоемкости разработки ПП
• 7.1.2 Определение себестоимости создания ПП
• 7.1.3 Определение оптовой и отпускной цены ПП
• 7.2 Определение ожидаемого прироста прибыли в результате внедрения55
• 7.2.1 Определение годовых эксплуатационных расходов при ручном решении задачи
• 7.2.2 Определение годовых текущих затрат, связанных с эксплуатацией задачи
• 7.2.3 Определение ожидаемого прироста прибыли в результате внедрения ПП
• 7.3. Расчет показателей эффективности использования программного продукта
• 8. Охрана труда
• 8.1 Производственная санитария, техника безопасности и пожарная профилактика
• 8.1.1 Метеоусловия
• 8.1.2 Вентиляция и отопление
• 8.1.3 Освещение
• 8.1.4 Шум
• 8.1.5 Электробезопасность
• 8.1.6 Излучение
• 8.1.7 Пожарная безопасность
• 8.2 Требования к организации и оборудованию рабочих мест с ВДТ, ЭВМ и ПЭВМ
• Заключение
• Список использованной литературы

Приложение

Перечень условных обозначений

В настоящей пояснительной записке применяются следующие сокращения:

HTML - hypertextmarkuplanguage - язык разметки гипертекста.

CSS - cascadingstylesheets - каскадные таблицы стилей.

ООП - объектно-ориентированное программирование.

ПП - программный продукт.

ПО - программное обеспечение.

ЭВМ - электронно-вычислительная машина.

ВЦ - вычислительный центр.

ВДТ - видеодисплейный терминал.

ПЭВМ - персональная электронно-вычислительная машина.

КЕО - коэффициент естественной освещённости.

СанПин - санитарные правила и нормы.

ГОСТ - государственный стандарт.

ТБ - техника безопасности.

ТКП - технический кодекс установившейся практики.

СНБ - санитарные нормы безопасности.

СТБ - стандарт безопасности.

Введение

Вторая половина ХХ века стала периодом перехода к информационным обществам. Лавинообразный рост объёмов информации принял характер информационного взрыва во всех сферах человеческой деятельности.

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

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

Создание компьютерных технологий в обучении соседствует с изданием учебных пособий новой генерации, отвечающих потребностям личности обучаемого. Учебные издания новой генерации призваны обеспечить единство учебного процесса и современных, инновационных научных исследований, т.е. целесообразность использования новых информационных технологий в учебном процессе и, в частности, различного рода так называемых "электронных учебников"[1].

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

К главным таким особенностям можно причислить:

1) возможность построения простого и удобного механизма навигации в пределах электронного учебника;

2) развитый поисковый механизм в пределах электронного учебника, в частности, при использования гипертекстового формата издания;

3) возможность встроенного автоматизированного контроля уровня знаний студента;

4) возможность специального варианта структурирования материала;

5) возможность адаптации изучаемого материала учебника к уровню знаний обучаемого, следствием чего является резкий рост уровня мотивации обучаемого;

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

В связи с этим было решено разработать информационную обучающую систему «Электронное пособие по С++», которое сможет дополнительно помочь студенту в изучении языка программирования С++.

Темой данного дипломного проекта является «Информационная обучающая система «Электронное пособие по С++»». Данная тема актуальна для студентов дневной и заочной формы обучения, а также для всех желающих изучить язык программирования С++.

Объект данного дипломного проекта - технология подготовки и реализации электронного учебного пособия. Предметом является информационная обучающая система «Электронное пособие по С++», построенное в соответствии с основными принципами разработки электронных учебных пособий.

Цель работы - подготовить электронное учебное пособие для последующего включения в учебный процесс.

Поставленная нами цель предполагает решение ряда задач:

1)изучить соответствующую научную литературу;

2)выполнить анализ предметной области, на основании которого будет подобран материал для электронного учебного пособия;

3)собрать и отредактировать материал, разбить материал на главы и темы;

4)выполнить анализ инструментов и средств решения задачи, выбрать программы и языки создания пособия;

5)разработать оболочку электронного пособия с системой логически связанных ссылок;

6)подобрать задачи для самостоятельного решения и тесты для самоконтроля студентам;

7)протестировать созданную программу.

1. Обзор состояния вопроса

1.1 Анализ предметной области

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

Информационные учебные ресурсы могут быть разделены на две группы: находящиеся непосредственно у обучаемого (локальные компоненты) и размещаемые на компьютерах учебного центра (сетевые компоненты). Способ размещения информации накладывает определенные требования на технологии создания ресурсов и доступа к ним [1].

1.1.1 Локальные учебные ресурсы

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

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

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

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

Большой объем информации требует использования соответствующего носителя. Хорошо отработанная и широко распространенная технология CD-ROM вполне подходит для мультимедиа курсов. Интерактивный мультимедиа курс дает возможность интегрировать различные среды представления информации - текст, статическую и динамическую графику, видео и аудио записи в единый комплекс, позволяющий обучаемому стать активным участником учебного процесса, поскольку выдача информации происходит в ответ на соответствующие его действия. Использование мультимедиа позволяет в максимальной степени учесть индивидуальные особенности восприятия информации, что чрезвычайно важно при опосредованной компьютером передаче учебной информации от преподавателя студенту. Таким образом, третий принцип, который следует учитывать при созданнии электронного курса - принцип мультимедийного представления учебной информации.

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

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

1.1.2 Сетевые учебные ресурсы

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

Для создания учебных материалов, предоставляемых в виде интернет-ресурсов, широко используются различные HTML-редакторы. Использование скриптовых языков позволяет сделать HTML-документ интерактивным и обеспечить передачу информации на сервер. Однако следует учесть, что наиболее распространенные браузеры Internet Explorer и Netscape Communicator используют разные версии языка HTML, поэтому при подготовке материалов не следует использовать команды разметки, не входящие во множество команд, поддерживаемых как тем, так и другим браузером. Следует также учесть, что язык HTML достаточно динамично развивается, так что документы, удовлетворяющие новому стандарту языка, могут некорректно возпроизводиться старыми версиями браузеров.

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

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

Особое место занимает проблема технологической реализации учета психо-физиологических особенностей человека при разработке курса.

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

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

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

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

Несмотря на определяющую роль самостоятельной работы в обучении с применением компьютерных технологий, основными субъектами учебного процесса являются студент и преподаватель. Соучастие студента в познавательной деятельности наравне с преподавателем есть одно из условий качественного образования как в традиционной системе, так и в ДО. Поэтому основным требованием к технологиям дистанционного обучения является сохранение преимуществ очного обучения на расстоянии. Использование сформулированных выше принципов при разработке учебно-методического обеспечения позволяет в максимальной степени удовлетворить этим требованиям [1].

1.2 Обзор редакторов для создания электронных пособий

Несмотря на все плюсы использования электронных учебников, возникает проблема выбора способа или редактора создания учебников. Для этого могут быть использованы текстовые редакторы (Microsoft Office, Adobe Acrobat и др.), конвертация текстовых документов в pdf-формат, использование HTML-страниц либо специализированных редакторов, встроенных в системы управления обучением (англ., LMS - Learning Management System, в русскоязычной литературе также встречается термин СДО - системы дистанционного обучения). Редакторы для создания электронных учебников условно можно разделить на локальные, работающие на конкретном компьютере, и сетевые, работающие в глобальных сетях. В обоих случаях создание электронных учебников - это процесс, требующий определённых навыков от составителя.

1.2.1 AutoPlayMediaStudio

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

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

1.2.2 AdobeDreamweaver

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

AdobeDreamweaver позволяет не только с легкостью проектировать дизайн сайта, используя визуальные методы, но и предоставляет необходимые средства для продуктивной разработки веб-приложений. Тут присутствует полная поддержка формата CSS, с функцией проверки его совместимости с различными браузерами, функциональный редактор кода веб-страниц и возможность работать с такими технологиями, как: XML, JavaScript, PHP, AdobeColdFusion, ASP и ASP.NET. В новой версии появилась среда для разработки Ajax-приложений, которые могут выполнять самые разные функции (получение информации из RSS каналов и баз данных, создание визуальных эффектов и многое другое), добавлена возможность создания сайтов на основе тегов DIV, реализована тесная интеграция с другими программами Adobe.

1.2.3 Notepad++

Notepad++ это бесплатный редактор текстовых файлов с поддержкой синтаксиса большого количества языков программирования. Программа располагает широким набором опций и отличается минимальным потреблением ресурсов процессора.

Среди продвинутых опций Notepad++ -- опция подсветки текста и возможность сворачивания блоков, согласно синтаксису языка программирования. Пользователь может самостоятельно определить синтаксис языка программирования. Есть возможность настроить режим подсветки. Доступно выделение цветом директив и операторов языка программирования.

Notepad++ обеспечивает возможность одновременного просмотра и редактирования нескольких документов. Также Вы можете просматривать и редактировать в двух окнах отображения один и тот же документ в разных местах. Изменение документа в одном окне просмотра будет автоматически перемещено во второе окно просмотра (т. е. вы редактируете один документ, который имеет клона во втором окне просмотра).

1.3 Обзор существующих аналогов

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

Помимо этого, существуют глобальные и локальные Web-приложения. Из глобальных приложений можно выделить:

- «Электронное пособие по языку С++» по книге Стена Липпмана «С++ для начинающих» от автора Ткаченко Валерий Николаевич.

Рисунок 1.1 - Интернет-ресурс«С++ для начинающих»

Пособие содержит обстоятельное введение в международный стандарт С++. В название книги включены слова “для начинающих” потому, что последовательно здесь придерживались учебного подхода к описанию языка С++; однако название не предполагает упрощенного или облегченного изложения материала. Такие аспекты программирования, как обработка исключений, контейнерные типы, объектно-ориентированный подход и т.п., представлены в книге в контексте решения конкретных задач. Читатель может не знать язык С, хотя некоторое знакомство с каким-либо современным структурным языком программирования было бы полезно. Книга написана для того чтобы стать первым учебником по С++, а не первым учебником по программированию.

- Учебный курс «Язык программирования С++» от авторов Национального открытого университета.

Здесь в систематизированном виде излагаются основные понятия и описываются возможности языка C++. При этом основное внимание уделяется объяснению того, как теми или иными возможностями пользоваться.

Язык программирования C++ - это универсальный язык программирования, который позволяет разрабатывать программы в соответствии с разными парадигмами: процедурным программированием, объектно-ориентированным, параметрическим. В данном курсе рассматриваются все основные возможности языка C++ и их применение при разработке объектно-ориентированных программ. Дается краткое описание библиотек языка C++, необходимых для создания типичных программ.

Курс предназначен для программистов, начинающих изучать объектно-ориентированное программирование и язык C++.

Рисунок 1.2 - Учебный курс «Язык программирования С++»



Рисунок1.3 -План занятий учебного курса «Язык программирования С++»

- Учебный курс «Введение в язык программирования С++» от авторов Национального открытого университета.

Данный курс написан по материалам лекций, читавшихся автором на протяжении ряда лет студентам первых курсов факультета вычислительной математики и кибернетики Нижегородского государственного университета им. Н.И. Лобачевского.

В курсе рассматриваются все основные конструкции и элементы языков программирования C и C++.

Рисунок 1.4 - Учебный курс «Введение в язык программирования С++»



Рисунок 1.5 - План занятий учебного курс «Введение в язык программирования С++»

1.4 Модель AS-IS

Прежде чем пытаться выбрать существующую или создать собственную информационную систему, а затем внедрить ее, необходимо проанализировать, как работает система в настоящее время. Для этого строится функциональная модель AS-IS. Анализ этой функциональной модели позволяет понять, где находятся наиболее слабые места, в чем будут состоять преимущества новых бизнес-процессов. Детализация бизнес-процессов позволяет выявить недостатки. Найденные в модели AS-IS недостатки можно исправить при создании модели ТО-ВЕ - модели новой организации бизнес-процессов. Модель ТО-ВЕ нужна для оценки последствий внедрения информационной системы и анализа альтернативных путей выполнения работы и документирования того, как система будет функционировать в будущем.

Модель AS-IS - это модель «как есть», т.е. модель уже существующего процесса/функции. Обследование процессов является обязательной частью любого проекта создания или развития системы. Построение функциональной модели AS-IS позволяет четко зафиксировать какие информационные объекты используются при выполнении функций различного уровня детализации. На основе анализа текущих процессов информационной обучающей системы была создана следующая AS-IS модель, которая позволяет выделить и систематизировать процессы, протекающие в данной системе при её функционировании. Главная контекстная диаграмма данной модели приводится на рисунке 1.6.

Рисунок 1.6 - Главная контекстная диаграмма (модель AS-IS)

Для более детального понимания логики бизнес-процессов, протекающих в текущей проблемной области разработанная выше контекстная диаграмма была разбита на восемь следующих процессов:

1) выбор источников;

2) разработка оглавления и перечня понятий;

3) переработка текстов в модули по разделам;

4) реализация гипертекста в электронной форме;

5) разработка компьютерной поддержки;

6) отбор материала для тестовых заданий;

7) подготовка материала для тестов;

8) визуализация материала.

Декомпозиция контекстной диаграммы представлена на рисунке 1.7.

На диаграмме прослеживаются этапы процесса создания электронного пособия.



Рисунок 1.7 - Декомпозиция контекстной диаграммы

1.5 Модель TO-BE

Таким образом, учитывая анализ модели «КАК ЕСТЬ», была построена модель «КАК ДОЛЖНО БЫТЬ», которая представлена на рисунке 1.8.

Рисунок 1.8 - Контекстная диаграмма модели TO-BE

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

Рисунок 1.9 - Декомпозиция контекстной диаграммы процесса TO-BE

Декомпозиция контекстной диаграммы модели TO-BE представлена на рисунке 1.9. По сравнению с моделью «AS-IS» в данной модели появилась возможность добавления, изменения и удаления сведений о пользователях, а также добавления, изменения и удаления архивов.

Следует отметить, что модель «TO-BE» отображает те полезные функции, которые позволят успешно внедрить и использовать данное программное обеспечение для организации процесса дистанционного обучения пользователей.

2. Постановка задачи проектирования

Темой данного дипломного проекта является «Информационная обучающая система «Электронное пособие по С++»». Данная тема актуальна для студентов дневной и заочной формы обучения, а также для всех желающих изучить язык программирования С++.

Объект данного дипломного проекта - технология подготовки и реализации электронного учебного пособия. Предметом является информационная обучающая система «Электронное пособие по С++», построенное в соответствии с основными принципами разработки электронных учебных пособий.

Цель дипломного проекта - подготовить электронное учебное пособие для последующего включения в учебный процесс.

Поставленная нами цель предполагает решение ряда задач:

- изучить соответствующую научную литературу;

- выполнить анализ предметной области, на основании которого будет подобран материал для электронного учебного пособия;

- собрать и отредактировать материал, разбить материал на главы и темы;

- выполнить анализ инструментов и средств решения задачи, выбрать программы и языки создания пособия;

- разработать оболочку электронного пособия с системой логически связанных ссылок;

- подобрать задачи для самостоятельного решения и тесты для самоконтроля студентам;

- протестировать созданную программу.

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

Разметка должна проводиться c использованием языка разметки HTML5. Описание внешнего вида должно осуществляться при помощи языка стилей CSS3.

Требования к реализации проекта:

- язык программирования - Javascript;

- среда разработки - SublimeText 3;

- визуализация - HTML5, CSS3.

3. Моделирование программного обеспечения

3.1 Этапы создания электронного пособия

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

Весь процесс производства электронного пособия подразделется на этапы, предсатвленные в таблице 3.1

Таблица 3.1 -Этапы производства электронного пособия

Этап	Содержание этапа
Предварительная работа	Формулировка исходной идеи Оформление документации на разработку электронного учебного пособия Оценка существующих элементов Составление перечня необходимых и наличествующих специалистов
Сбор необходимой информации	Анализ потребностей Выделение главной дидактической цели Обоснование необходимости и того нового, что внесет продукт по сравнению с обычным печатным учебным пособием
Подготовка содержания	Выделение дидактических подцелей Составление плана Представление содержания в форме модулей
Дизайн	Разработка общей концепции Выбор медиа (звук, изображения, видео и т.п.) Написание сценария Детальный дизайн + подключение интерактивности
Производство	Программирование и оцифровка содержания Создание изображений, звука и т.п. Компоновка готовых материалов в модули Наладка навигации по продукту
Тестирование	Тестирование и оценка продукта
Юридический этап	Регистрация и сертификация электронного пособия
Поддержка	Техническая и методическая поддержка

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

Предварительная подготовка включает следующие основные этапы:

- разработка дидактических требований к электронному пособию;

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

- разработка технических требований к электронному пособию;

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

- разработка структуры электронного пособия;

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

- разработка методики работы с электронного пособия (для студентов).

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

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

- информационной (содержательная часть);

- программной (программная часть).

В информационную часть электронного учебного пособия входят:

- представление автора курса;

- методические рекомендации по изучению курса;

- четко структурированные учебные материалы;

- иллюстрации, представленные всем спектром мультимедиа;

- практикум для выработки умений и навыков применения теоретических знаний с примерами выполнения задания;

- система тестовые задания, задания для работы в лаборатории.

На стадии подготовки содержания в первую очередь создается сценарий. Иногда он снабжается иллюстрациями, разъясняющими инструкции.

3.2 Структура электронного пособия

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

На рисунке 3.1 представлена структура электронного пособия.

Навигационная система пособия строится по блочному принципу с иерархической перекрестной структурой ссылок внутри каждого блока:

- весь материал разбит на блоки, то есть разделы или главы;

- общее меню разделов может быть вызвано с главной страницы;

- вход в каждый конкретный раздел может быть выполнен из основного и дополнительного меню;

- главы, в свою очередь, также имеют свое собственное меню для содержащихся в них разделов;

- вызов страниц с отдельными конкретными разделами возможен только из меню главы;

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

Рисунок 3.1 - Структура электронного пособия

Содержание разработанного электронного пособия:

1. основные понятия:

- буквы и цифры;

- операции;

- идентификаторы;

- ключевые слова;

- комментарии;

- лексемы;

- константы;

- переменные;

2. управляющие структуры:

- простой механизм ветвления;

- составные операторы;

- простые механизмы циклического выполнения;

- операторы инкрементирования и декрементирования;

3. ввод-вывод:

- простейший ввод-вывод;

- основы файлового ввода-вывода;

- символьный ввод-вывод;

4. функции:

- стандартные функции;

- функции, определяемые программистом;

- процедурная абстракция;

- локальные переменные;

- перегрузка имен функций;

5. массивы:

- основные понятия;

- массивы и функции;

- многомерные массивы.

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

3.3 Моделирование дизайна электронного пособия

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

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



Рисунок 3.2 - Макет главной страницы электронного пособия

Рисунок 3.3 - Макет страницы глав учебного пособия



Рисунок 3.4 - Макет страницы, содержащей тесты

4. Реализация программного обеспечения

4.1 Выбор среды разработки, языка программирования и инструментальных средств разработки

В качестве инструментария выбрана среда текстовый редактор Sublime Text.

SublimeText -- кроссплатформенный проприетарный текстовой редактор. Поддерживает плагины на языке программирования Python. Инструментарий программы удобен для редактирования исходных текстов программ. Основные преимущества SublimeText:

- автосохранение;

- закладки в файлах;

- миникарта -- предварительный просмотр полного исходного кода;

- возможность выбора нескольких разделов кода;

- редактирование в нескольких панелях;

- встроенная поддержка 27 языков программирования;

- поиск и замена, основанная на регулярных выражениях;

- полностью настраиваемая подсветка синтаксиса;

- соответствие скобок, автозаполнение;

- поддержка макросов и плагинов на языке программирования Python;

- пользовательские горячие клавиши.

4.1.1 Язык гипертекстовой разметки HTML

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

HyperTextMarkupLanguage (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами web-браузеров. Когда документ создан с использованием HTML, web-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей [18].

Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML, можно обозначать данные элементы, обеспечивая web-браузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ - это WEB-браузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор.

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

HTML-тэги могут быть условно разделены на две категории:

-тэги, определяющие, как будет отображаться WEB-браузером тело документа в целом;

-тэги, описывающие общие свойства документа, такие как заголовок или автор документа.

Основное преимущество HTML заключается в том, что документ может быть просмотрен на web-браузерах различных типов и на различных платформах [2].

4.1.2 HTML 5

Язык HTML 5 содержит много новых свойств, что делает HTML более мощным и удобным для создания приложений Web. Некоторые из перечисленных ниже свойств не являются частью самой спецификации HTML 5, но определены в тесно связанных спецификациях, поэтому они все еще являются допустимыми частями нового движения в направлении современных Web-приложений [19].

Новые свойства HTML 5:

- новые семантические элементы. Семантика является очень важной в HTML. В HTML 4.01 имеется проблема - существует много элементов для определения специальных средств, таких как таблицы, списки, заголовки, и т.д., но существует также много общих свойств web-страницы, которые не имеют элемента для их определения. Например, верхние и нижние колонтитулы сайта, навигационные меню, и т.д. -- они до сих пор определяются с помощью <divid="xxx"></div>, которые человек может понять, но машины не могут, кроме того, различные разработчики будут использовать различные ID и классы. К счастью, HTML5 содержит новые семантические элементы, такие как <nav>, <header>, <footer> и<article>;

- новые свойства форм. HTML 4.01 уже позволяет создавать удобные, доступные web-формы, но некоторые общие свойства форм являются не слишком удобными и требуют специальных усилий для реализации. HTML5 предоставляет стандартизованный, простой способ реализации таких свойств, как выбор даты, ползунки и клиентская проверка;

- собственная поддержка видео и аудио. В течение многих лет видео и аудио в Web делались, с помощью Flash. Фактическая причина, популярности Flash, состояла в том, что открытые стандарты не смогли предоставить для различных браузеров совместимый механизм реализации таких вещей, поэтому различные браузеры реализовали различные конкурирующие способы выполнения одних и тех же вещей (например, <object> и <embed>), делая тем самым весь процесс действительно сложным. Flash предоставлял высококачественный, легкий способ реализации работы видео в различных браузерах. HTML5 содержит элементы <video> и <audio> для простой реализации собственных видео и аудио плееров с помощью только открытых стандартов, и также содержит API, позволяющий легко реализовать индивидуальные элементы управления плеером;

- API рисования на холсте. Элемент <canvas> и соответствующий API позволяют определить на странице область для рисования, и использовать команды JavaScript для рисования линий, фигур и текста, импорта и манипуляций с изображениями и видео, экспорта в различные форматы изображений, и многих других вещей;

- сокеты Web. Этот API позволяет открывать постоянное соединение между сервером и клиентом на определенном порте, и посылать данные в обоих направлениях, пока порт не будет закрыт. Это существенно улучшает эффективность web-приложений, так как данные могут непрерывно и аккуратно передаваться между клиентом и сервером без постоянной перезагрузки страницы, и без постоянного опроса сервера, чтобы проверить, нет ли доступных обновлений;

- автономные web-приложения HTML5 предоставляет ряд свойств, позволяющих web-приложения выполняться в автономном режиме. Кэши приложений позволяют сохранить копию всех ресурсов и других файлов, необходимых для локального выполнения web-приложения и базы данных Web SQL позволяют сохранить локальную копию данных web-приложения. Совместно они позволяют продолжать использовать приложение, когда отсутствует соединение с сетью, и затем синхронизируют изменения с основной версией на сервере, когда сеть снова становится доступной;

- хранилище Web. Cookies предоставляют в какой-то степени локальное хранилище данных, но их использование довольно ограничено. Web-хранилище HTML5 позволяет хранить значительно больше данных, и делать с ними значительно больше;

- webworkers. Общая проблема, встающая перед приложениями web, состоит в том, что их производительность страдает, когда требуется обработать много данных, в связи с тем, что все происходит в одной нити/процессе (только одна последовательность обработки может выполняться в текущий момент). WebWorkers смягчают эту проблему, позволяя создавать фоновые процессы для выполнения значительного объема вычислений, позволяя основному процессу продолжить выполнение других задач;

- геолокация. Спецификация геолокации (также не являющаяся частью спецификации HTML5) определяет API, который позволяет приложению web легко получить доступ к данным в любом местоположении, которое стало доступным, например, с помощью средств GPS устройства. Это позволяет добавлять в приложения различные полезные свойства, связанные с местоположением, например, выделить контент, который больше подходит для местоположения [17].

4.1.3 CSS/CSS3

Одним из весьма заметных этапов развития HTML стало появление CSS - CascadingStyleSheets или каскадных таблиц стилей.

Если в HTML прямо в документе ставится указание на то, как должен выглядеть тот или иной элемент, то при использовании CSS такие указания выносятся в отдельный блок, который может либо включаться в документ, либо читаться из внешнего файла.

При использовании CSS значительно облегчается изменение внешнего вида сайта или отдельных его элементов: достаточно изменить определение соответствующего стиля в единственном CSS-файле, и эти изменения распространятся на весь сайт. Второе преимущество -- сокращение размеров документов, которое особенно заметно на «красивых» страницах.

Следует учитывать, что каскадные таблицы стилей не полностью абстрагируют визуальное представление документа от его содержания, они только позволяет более компактно описать правила визуального представления. Таблицу стилей для целого сайта можно хранить в одном файле, однако у предыдущего способа тоже есть свой недостаток: блок STYLE необходимо скопировать в каждую страницу сайта. Описав требуемые стили в отдельном текстовом файле, затем можете написать в секции HEAD документа тег LINK.

Эта команда укажет, что таблица стилей находится во внешнем файле. Таким образом, даже для очень большого сайта может использоваться всего один файл со стилями, что очень сильно облегчает редактирование. Есть еще один необязательный параметр тега LINK: MEDIA. Он может указывать, для какого типа устройств таблица стилей предназначена, и иметь значения, например, «all» (используется по умолчанию), «handheld», «print» и некоторые другие[4].

4.1.4 JavaScript

Гипертекстовая информационная система состоит из множества информационных узлов, множества гипертекстовых связей, определенных на этих узлах, и инструмента манипулирования узлами и связями. Технология WorldWideWeb - это технология ведения гипертекстовых распределенных систем в Internet, и, следовательно, она должна соответствовать общему определению таких систем. Это означает, что все перечисленные выше компоненты гипертекстовой системы должны быть и в Web [6].

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

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

При генерации страниц в Web возникает дилемма, связанная с архитектурой "клиент-сервер". Страницы можно генерировать как на стороне клиента, так и на стороне сервера. В 1995 году специалисты компании Netscape создали механизм управления страницами на клиентской стороне, разработав язык программирования JavaScript.

Таким образом, JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило программирование на стороне клиента.

Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит [9].

4.1.5 jQuery

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

Существует множество JavaScriptфрейморков и jQuery лишь один из них, но один из самых популярных. Вот некоторые из них: jQuery, MooTools, Prototype, Archetype, midori и другие. У каждой библиотеки свои преимущества и недостатки, однако, они очень похожи между собой.

С помощью специальных конструкций, предусмотренных разработчиками, можно обращаться к элементам и манипулировать ими, например, таким образом, чтобы они постепенно появлялись или исчезали, увеличивались или уменьшались, сменяли друг друга и так далее [10].

4.2 Обработка тестовых заданий

Для обработки тестовых заданий необходимо выполнить следующий скрипт представленных на рисунке 4.1.

Рисунок 4.1 - Скрипт обработки тестов

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

4.3 Вспомогательное меню

Для работы вспомогательного меню необходимо выполнить два взаимосвязанных скрипт представленных на рисунках 4.2, 4.3.

Рисунок 4.2 - Скрипт для показа блока вспомогательного меню

Данный скрипт содержит функцию, которая при нажатии на меню скрывает/показывает блок меню поочередно изменяя свойства элемента с display = “none” на display = “block”, и наоборот.

Рисунок 4.3 - Скрипт для работы вспомогательного меню

Данный скрипт реализует возможность скрывать/показывать подразделы вспомогательного меню и делает показ анимированным.

4.4 Автоматическая прокрутка страницы вверх

Для реализации работы автоматической прокрутки страницы вверх необходимо выполнить скрипт представленных на рисунке 4.4.

Данный скрипт работает по принципу, если страница начинает прокручивать вниз, появляется иконка “стрелка вверх”, при начатии на которую страница автоматически плавно прокручивается к самому началу.

Рисунок 4.4 - Скрипт для прокрутки страницы

5. Тестирование программного обеспечения

Тестирование - это процесс, направленный на выявление ошибок.

Процесс тестирования включает:

- действия, направленные на выявление ошибок;

- диагностику и локализацию ошибок;

- внесение исправлений в программу с целью устранения ошибок.

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

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

Детерминированное тестирование - требует многократного выполнения программы на ЭВМ с использованием определенных, специальным образом подобранных тестовых наборов данных.

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

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

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

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

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

· Логические ошибки. Они связаны с несоответствием программы алгоритму решения поставленной задачи.

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