Электронный учебник

1.3 Работа с изображениями

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

Программы для работы с изображениями:

1) Adobe Photoshop - графический редактор, разработанный и распространяемый фирмой Adobe Systems. Этот продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Часто эту программу называют просто Photoshop (Фотошоп). В настоящее время Photoshop доступен на платформах Mac OS X/Mac OS и Microsoft Windows. Ранние версии редактора были портированы под SGI IRIX, но официальная поддержка была прекращена, начиная с третьей версии продукта. Для версии CS 2 возможен запуск под Linux с помощью альтернативы Windows API -- Wine 0.9.54 и выше.

Несмотря на то, что изначально программа была разработана как редактор изображений для полиграфии, в данное время она широко используется и в веб-дизайне. В более ранней версии была включена специальная программа для этих целей -- Adobe ImageReady, которая была исключена из версии CS3 за счёт интеграции её функций в сам Photoshop, а также включения в линейку программных продуктов Adobe Fireworks, перешедшего в собственность Adobe после приобретения компании Macromedia.

2) Picasa -- программа для работы с цифровыми фотографиями. 13 июня 2004 года Picasa была приобретена компанией Google. Picasa интегрирована с Blogger, Gmail, YouTube и Google Earth.

1.4 Среды для создания электронного учебника

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

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

Электронные учебники в формате Word, PowerPoint

Microsoft Office Word -- текстовый процессор. Доступен под Windows и Apple Mac OS X. Позволяет подготавливать документы различной сложности. Поддерживает OLE, подключаемые модули сторонних разработчиков, шаблоны и многое другое. Основным форматом в последней версии является позиционируемый как открытый Microsoft Office Open XML, который представляет собой ZIP-архив, содержащий текст в виде XML, а также всю необходимую графику. Наиболее распространенным остается двоичный формат файлов Microsoft Word 97--2000 с расширением.doc. Продукт занимает ведущее положение на рынке текстовых процессоров, и его форматы используются как стандарт де-факто в документообороте большинства предприятий. Word также доступен в некоторых редакциях Microsoft Works. Главные конкуренты -- OpenOffice.org Writer, StarOffice Writer, Corel WordPerfect и Apple Pages (только на платформе Mac OS), а также, с некоторыми оговорками AbiWord (в тех случаях, когда его возможностей достаточно, а малый объём и скорость работы при невысоких требованиях к ресурсам более важны).

Microsoft Office PowerPoint -- приложение для подготовки презентаций под Microsoft Windows и Apple Mac OS X.

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

Электронные учебники в формате Acrobat

Имеется прекрасно зарекомендовавший себя формат.PDF электронных документов от компании с мировым именем Adobe Systems. Для чтения электронных учебников в этом формате применяется свободно распространяемая программа Acrobat Reader. Для создания же электронных учебников используется программа Acrobat с широкими возможностями, вполне доступная образовательным организациям. Многие миллионы электронных документов в мире выполнены именно в формате.PDF.

Электронные учебники в программе Flash MX

Применение технологии Flash позволяет быстро и эффективно создавать мультимедиа-приложения, оформленные анимацией, аудио- и видеофрагментами и способные реагировать на действия пользователя. Одной из главных особенностей этого пакета является возможность создания выразительных мультимедийных объектов, оптимизированных для размещения в Internet. Программа Flash MX 2004 обладает более удобным интерфейсом, средствами быстрого создания анимационных эффектов, а также расширенными возможностями для создания и управления Flash-роликами. Также имеется мощный и гибкий инструментарий, который позволяет осуществлять управление большими проектами, состоящими из множества взаимосвязанных документов.

Электронный учебник в программе 3D Studio MAX

3ds Max (3D Studio MAX) -- полнофункциональная профессиональная программная система для создания и редактирования трёхмерной графики и анимации, разработанная компанией Autodesk. Содержит самые современные средства для художников и специалистов в области мультимедиа. Работает в операционных системах Microsoft Windows и Windows NT (как в 32 - битных, так и в 64 - битных). Весной 2010 года выпущена тринадцатая версия этого продукта под названием «3ds Max 2011».

Широко распространенных программ моделирования довольно много, однако одна из лучших программ трехмерного моделирования и искусства анимации для создания визуальных эффектов программа - 3D Studio MAX. 3DMAX позволяет смоделировать многое путем использования разнообразных базовых объектов. После построения геометрических объектов и должного их размещения к ним можно применять “материалы”, накладывать на геометрию текстуры. Программа 3DMAX привлекает тем, что в ней можно по настоящему почувствовать себя создателем целого фильма, выступать и в роли режиссера, оператора, композитора, всех тех, кто создает фильм. Конечно, этот процесс занимает много времени, но если нравиться, то оно пролетает незаметно.

Объединение программ 3dmax и Flash MX позволяет создать в обучающие программы, позволяющие обеспечить внедрение новых технологий, соответствующих мировым стандартам в области информатизации. Благодаря использованию трехмерного моделирования 3dmax и удобному интерфейсу Flash новые компьютерные программы стали наглядны, красочны и интересны студентам.

Можно сделать учебник, используя готовые движки для сайтостроения, такие как WordPress, DLE и подобные. Это позволит сократить время на добавление и редактирование записей и страниц учебника.

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

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

2. Специальная часть

2.1 Аналитическая часть

2.2.1 Структура электронного ученика

У электронного учебника по дисциплине «Инструментальные средства разработки аппаратно-программных систем» будет 2 меню - верхнее и боковое.

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

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

Таким образом, на любую страницу учебника можно попасть в 2 клика.

Рисунок 1 - Структура электронного учебника

2.2 Практическая часть

2.2.1 Создание дизайна и интерфейса электронного ученика

Среды для создания дизайна и интерфейса

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

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

2) красота исполнения.

Для создания дизайна воспользуемся следующими программами:

1) Artisteer 2 - программа для создания дизайна для движка WordPress.

2) Adobe Photoshop CS

3) Macromedia Dreamweaver 8

4) Блокнот

Ход создания дизайна и интерфейса электронного учебника

Необходимо открыть программу Artisteer 2, используя меню пуск или через ярлык на рабочем столе.

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

Далее необходимо сменить макет страницы. Для этого необходимо нажать на «макет», после чего выбрать макет самой страницы и расположение колонок.

После этих действий необходимо поменять фон. Необходимо учитывать, что фон не должен быть слишком яраким, так как такой фон не приятен глазу, и слишком тусклым, так как тусклый фон угнетает. Чтобы поменять фон нужно перейти во вкладку «фон», в ней можно добавить картинку на задний план, блики и т.д.

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

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

Далее надо сохранить полученный дизайн, с помощью файл - экспорт - тема WordPress.

Использование программы Artisteer 2 закончено, закрываем ее.

У нас есть тема для CMS WordPress, устанавливаем виртуальный сервер Denwer.

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

После установки виртуального сервера надо установить CMS WordPress, для этого надо скинуть все файлы движка и установить CMS.

После установки надо скинуть все файлы темы, которые мы получили от программы Artisteer 2 в …/корневая папка движка/wp-content/themes, далее заходим в администраторскую панель WordPress и меняем тему на созданную нами.

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

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

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

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

С помощью инструмента размывание надо сделать так, чтобы эти 2 картинки как бы сливались между собой.

Теперь надо изменить оставшуюся желтую область. Для этого надо выбрать инструмент градент и настроить его.

После этого надо выделить оставшуюся желтую область инструментом прямоугольное выделение и провести инструментом градент линию с левого верхнего угла до правого нижнего.

Потом делается надпись «электронный учебник» с помощью инструмента текст.

Выбирается размер и шрифт надписи.

Чтобы градент не смешивался с картинкой с роботами надо воспользоваться инструментом линия и провести черную линию толщиной в 2-3 пикселя на соединении градента и картинки.

Получилась готовая шапка.

Сохраняем файл с помощью файл - сохранить как, устанавливаем расширение jpg и вводим имя файла top.jpg, файл сохраняется.

Шапка для сайта готова, таким же образом необходимо преобразовать все оставшиеся файлы изображений.

Когда все файлы готовы, нужно поставить на php, для этого можно воспользоваться готовым скриптом из интернета.

Нужно изменить кодировку файла index.html из рипа. Для этого надо воспользоваться простым блокнотом AkelPad.

Надо открыть файл с помощью этого блокнота, и изменить в строчке «<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">» надпись «charset=UTF-8» на «charset=windows-1251», после чего надо сохранить в кодировке windows-1251, для этого надо выбрать кодировки, после чего сохранить в windows-1251.

После чего надо переименовать файл index.html в template.php, т.е. изменить его разширение, тем самым подставив его под файл уже имеющегося «движка».

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

$site_name = "site_name";

$root = "/"; // Корневой каталог. В начале и в конце должны быть слеши. Примеры "/", "/forum/", "/about/forum/"

$content_dir = "content";

$last_count = 8;

$last_symbol_count = 200;

$category_type = 1; // Тип меню. 1 - один уровень, 2 - два уровня

$url_menu = "menu "; // Название страницы меню

$url_contact = "contact "; // Название страницы контактов

$url_print = "print_cond"; // Версия для печати

На:

$site_name = "Учебник по ИСРАПС";

$root = "/"; // Корневой каталог. В начале и в конце должны быть слеши. Примеры "/", "/forum/", "/about/forum/"

$content_dir = "content";

$last_count = 8;

$last_symbol_count = 200;

$category_type = 1; // Тип меню. 1 - один уровень, 2 - два уровня

$url_print = "print"; // Версия для печати

Строчки «$url_menu = "menu "; // Название страницы меню» и «$url_contact = "contact "; // Название страницы контактов» убираем вообще, так как они нам не нужны.

Работа с файлом index.php завершена, нужно закрыть его.

Перед тем как приступить к редактированию файла template.php и index.css лучше всего будет поставить весь сайт на локальный сервер, для этого нужно открыть диск, на который при установке denwer был назначен локальный сервер, зайти в папку home, и создать там папку под названием israps, а в ней папку uchoba. Полный путь в таком случае будет такой:

Название диска, назначенного на сервер:\home\israps\uchoba

И скорпировать туда сначала файлы php движка (папка content, папка pages, папка pic, index.css, template.php, print.php, index.php и.htaccess), а потом скопировать уже имеющиеся у нас файлы template.php и index.css, скопировать нужно с заменой.

А все картинки, имеющиеся в рипе - скопировать в папку pic.

Теперь нужно запустить локальный сервер, для этого надо выбрать на рабочем столе ярлык Start Denwer, после чего на несколько секунд появится черная табличка, после ее изчезновения сервер запустится.

Теперь необходимо приступить к редактированию файлов template.php и index.css. Для этого открываем сначало файл template.php с помощью AkelPad, и прописываем в строчке «<link rel="stylesheet" type="text/css" href="style.css" media="all">» путь к таблице стилей index.css. Для этого необходимо поменять «href="style.css"» на «href="/index.css"».

После чего меняем строчку «<title>Учебник по ИСРАПС</title>» на «<title><?=$title?></title>», так как в файле index.php уже прописано, что переменная «$site_name = "Учебник по ИСРАПС";», а переменная «$title = $site_name;», поэтому надо просто подставить переменную <?=$title?> между тегами <title> и </title>.

Теперь нужно указать путь к изображениям. Для этого воспользуемся функцией AkelPad, которая называется «заменить». Чтобы ей воспользоватся надо зайти в найти, там заменить.

В строчку «Что:» пишем «src="», а в строчку «Чем:» нужно написать «src="/pic/».

После чего надо нажать на «Заменить все», после чего выскачит сообщение, что заменено N-ое, количество объектов.

Таким же образом надо заменить пути к рисункам, которые находятся в файле index.css, только в строке «Что:» нужно указать «url('», а в строке «Чем:» - «url('/pic/».

Надо проверить все ли нормально, для этого открываем любой браузер, и вводим в адресной строке «http://uchoba.israps/» и на экране появится учебник.

Надо приступить к редактированию файла template.php.

Открываем его программой Macromedia Dreamweawer, для удобства надо поставить режим Split, при котором видно и код и визуальный редактор.

Для начала надо отредактировать верхнее меню, для этого нужно найти строчки:

<li><a href="http://localhost/wp/">?????</a></li>

<li class="page_item page-item-8"><a href="http://localhost/wp/?page_id=8" title="Звездный Гороскоп">Звездный Гороскоп</a></li>

<li class="page_item page-item-2"><a href="http://localhost/wp/?page_id=2" title="Обо мне">Обо мне</a></li>

И заменить их на:

<li><a href="/">Главная</a></li>

<li class="page_item page-item-8"><a href="/lab/">Лабораторные работы</a></li>

<li class="page_item page-item-2"><a href="/lec">Лекции</a></li>

<li class="page_item page-item-2"><a href="/test">Тест</a></li>

На самом учебнике это будет выглядеть так:

Поменялось верхнее меню, теперь оттуда доступны разделы учебника «Лабораторные работы», «Лекции» и «Тест».

Нужно приступить к редактированию основного поля, куда будет выводится весь текст учебника, для этого нужно заменить строки:

<h1 class="title"><a href="http://localhost/wp/?p=10">фывфы</a></h1>

Январь 15, 2011

<p>фывфывф</p>

<div class="postinfo">

<div class="alignleft">Автор 123</div>

<div class="alignright"><a href="http://localhost/wp/?p=10#comments">Комментарии (0</a>)</div>

</div>

</div>

<div class="post">

<h1 class="title"><a href="http://localhost/wp/?p=1">Привет, мир!</a></h1>

Январь 10, 2011

<p>Добро пожаловать в WordPress. Это ваша первая запись. Отредактируйте или удалите её, затем пишите!</p>

<div class="postinfo">

<div class="alignleft">Автор 123</div>

<div class="alignright"><a href="http://localhost/wp/?p=1#comments">Комментарии (1</a>)</div>

</div>

На:

<p align="center"><img src="/pic/hi.gif"></p>

<p>Добро пожаловать в учебник по дисциплине "Инструментальные средства разработки аппаратно-программных систем".</p>

Где «img src="/pic/hi.gif"» - вывод приведственной картинки.

Далее нужно поставить строчки:

<p align="center"><img src="/pic/hi.gif"></p>

<p>Добро пожаловать в учебник по дисциплине "Инструментальные средства разработки аппаратно-программных систем".</p>

Между переменными <? if (!$params[1]) { ?> и <? } ?>, где переменная (!$params[1]) значит, что вывод текста будет только на главной странице учебника.

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

<? if ($params[1]) { ?><?=$content?>

<p><a href="<?=$root?><?=$url_print?>/<? if ($params[1]) echo ($params[1]."/"); ?><? if ($params[2]) echo ($params[2]); ?>">Версия для печати &raquo;</a></p><? } ?>

Где: <? if ($params[1]) { ?> - переменная, отвечающая за вывод внутренних страниц учебника.

<?=$content?> - вывод текста из файлов, которые будут храниться в папке pages.

><a href="<?=$root?><?=$url_print?>/<? if ($params[1]) echo ($params[1]."/"); ?><? if ($params[2]) echo ($params[2]); ?>">Версия для печати &raquo;</a> - Вывод версии для печати.

Теперь нужно создать анимированный файл hi.gif, для этого заходим в программу Adobe ImageReady, которая предоставляется в комплекте с Adobe Photoshop.

Нужно создать изображение, размером 500px в ширину и 100px в высоту, залить его градентом, который уже использовали при создании шапки и остальных элементов учебника и добавить две записи - «Добро пожаловать» и «Инструментальные средства разработки аппаратно-программных систем», после чего разместить их на одном уровне.

После этого нужно сделать слой с надписью «Добро пожаловать» прозрачным с помощью инструмента Opacity, установив значение 0%, это позволит сделать анимацию появления записи.

Первый кадр готов, теперь нужно создать 2 кадр и установить значение Opacity для слоя с надписью «Инструментальные средства разработки аппаратно-программных систем» равным 90%.

Далее нужно создать 3 кадр, установить Opacity на 80% и т.д., пока значение Opacity не будет равным 0%, т.е. слой с надписью «Инструментальные средства разработки аппаратно-программных систем» не исчезнет.

После этого необходимо создать еще 1 такой же кадр, чтобы смена надписей не проходила слишком быстро.

После проделанного, нужно поставить значение Opacity 10% для слоя с надписью «Добро пожаловать», после чего она расплывчатая появится на изображении.

Далее нужно устанавливать значение Opacity по наростающей, т.е. 20%, 30% и т.д., пока значение не дойдет 100%, продублировать кадр и снова пустить значение Opacity на убыль, т.е. 90%, 80% и т.д.

Когда Opacity дошло до 0% нужно продублировать кадр и снова сделать Opacity от 10% до 100% для слоя с надписью «Инструментальные средства разработки аппаратно-программных систем».

После этого нужно сохранить изображение.

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

После чего нужно выбрать меню «File», и в нем «Save optimized as…».

В открывшемся меню сохранения нужно ввести в строке «Имя файла» название изображения hi.gif, в строке «Тип файла» - «Images only (*.gif)», и нажать кнопку «Сохранить».

Анимированное изображение готово, теперь нужно скопировать его в папку pic, которая находится в папке uchoba на локальном сервере.

Смотрим, что получилось с учебником:

Теперь нужно поменять правое меню, для этого опять воспользуемся программой Macromedia Dreamweawer.

Находим в коде строчки, которые отвечают за вывод правого меню:

<h2>Страницы</h2>

<ul>

<li class="page_item page-item-8"><a href="http://localhost/wp/?page_id=8" title="Звездный Гороскоп">Звездный Гороскоп</a></li>

<li class="page_item page-item-2"><a href="http://localhost/wp/?page_id=2" title="Обо мне">Обо мне</a></li>

</ul>

</li>

<li class="categories"><h2>Категории</h2><ul>

<li class="cat-item cat-item-3"><a href="http://localhost/wp/?cat=3" title="Просмотреть все записи в рубрике «Кисель»">Кисель</a>

</li>

…

<ul>

<li><a href="http://localhost/wp/wp-login.php">Войти</a></li>

<li><a href="http://wordpresse.ru/">Wordpress</a></li>

</ul>

</li>

</ul>

И меняем их на код, который будет отображать все темы по предмету:

<li>

<h2>Темы (I семестр)</h2>

<ul>

<li class="page_item page-item-8"><a href="/tema1/">Тема 1: Основные классы задач в области конструирования и производства аппаратно-программных систем, решаемых с использованием пакетов прикладных программ.</a></li><br>

…

<li class="page_item page-item-2"><a href="/tema5/">Тема 5: Принципы работы пакетов прикладных программ для разработки аппаратно-программных систем. Информационное моделирование. Работа с пакетами Erwin, Design/IDEF.</a></li><br>

</ul></li></ul><ul><li>

<h2>Темы (II семестр)</h2>

<ul>

<li class="page_item page-item-8">

<li class="page_item page-item-2"><a href="/tema6/">Тема 6: Принципы работы пакетов прикладных программ для разработки аппаратно-программных систем. Объектно-ориентированное моделирование. Работа с пакетом Rational Rose.</a></li><br>

…

<li class="page_item page-item-2"><a href="/tema9/">Тема 9: Типовой состав и принципы работы пакетов прикладных программ для разработки аппаратно-программных систем. Технология хранилищ данных. Проведение OLAP-анализа данных. Работа с пакетом КонтурСтандарт.</a></li>

</ul>

</li>

</ul>

<ul>

</ul>

Необходимо сохранить страницу, нажав на File - Save, или использовав сочетание клавишь ctrl+S.

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

Полученный учебник имеет вид:

Теперь нужно изменить футер учебника, для этого в коде, используя Macromedia Dreamweawer находим строку:

<center>Все права защищены © 2011 <a href="http://localhost/"><strong>Пример</strong></a> | <font size="1">Thanx: <a href="http://lifestar.ru/">Lifestar</a></font></center>

И заменяем ее на:

<center>Все права принадлежат <a href="http://www.ugkr.ru/">Уфимскому Государственному Колледжу Радиоэлектроники</a></center>

После чего нужно сохранить полученную страницу, и в итоге футер имеет следующий вид:

Создание дизайна и интерфейса закончено.

2.2.2 Наполнение электронного учебника информацией

Для наполнения учебника информацией нужно воспользоваться программой Macromedia Dreamweawer.

Нужно зайти в папку pages и создать там новый текстовый документ, назвав его lab.htm.

После чего необходимо открыть этот документ с помощью Macromedia Dreamweawer, после чего взять уже подготовленный текст из любого текстового редактора, к примеру Microsoft Word и вставить в нижнее поле, где находится визуальный редактор, после чего нужно выделять слова «Лабораторная работа N» и с помощью строки link добавлять туда ссылки вида «/labN/» где N - номер лабораторной работы по счету. Получится следующее:

Нужно сохранить документ и посмотреть результат:

Точно так же нужно добавить страницу «Лекции» (lec.htm).

Далее нужно приступить к добавлению самих лабораторных работ.

Для этого нужно создать файл в папке pages с именем lab1.htm, а так же папку lab1 в директории pic, куда будут скидываться все изображения, находящиеся на странице http://uchoba.israps/lab1/.

Чтобы добавить 1 лабораторную работу нужно открыть файл lab1.htm с помощью Macromedia Dreamweawer, скопировать в визуальный редактор подготовленный текст из документа Microsoft Word.

Появится следующее меню:

Нужно нажать кнопку «Cancel», после чего сохранить страницу и открыть ее с помощью AkelPad.

В нем нужно выбрать «Найти», затем «Заменить». В поле «Что:» нужно написать «src="», а в поле «Чем:» - «src="/pic/lab1/» и нажать на кнопку «Заменить все».

После этого нужно скопировать изображения из лабораторной работы в папку /pic/lab1/:

После чего необходимо посмотреть, что получилось:

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

Нужно взять 1 картинку из 1 лабораторной работы

Рисунок - Картинка, которую нужно поменять

И вставить в нее немного анимации.

Для этого нужно воспользоваться програмами Adobe ImageReady и Adobe Photoshop.

Необходимо открыть картинку с помощью Photoshop и инструментом «карандаш» стереть все надписи на ней:

Теперь нужно добавить свои надписи, но по 1 слову на слой:

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

Далее по кадру побавлять по 1 слову и 1 кадру сначала слово «вход», потом «выход», далее «управление», «механизм» и «функциональный блок», при чем расставить длительность кадров нужно так: на пустом фоне - 0 секунд, на появлении слов - 0,1 секунда, и после появления последней надписи «функциональный блок» - 2 секунды, чтобы работающий с учебником мог спокойно воспринимать нарисованное.

После всего, надо сохранить рисунок в формате.gif и скопировать его в папку /pic/lab1/, а в коде заменить его название с lab1_clip_image002.jpg на 1.gif.

Страница lab1.htm готова.

Таким же способом нужно добавить все лабораторные работы и темы.

3. Экономическая часть

3.1 Расчет экономической эффективности создания мультимедийного электронного учебника

3.1.1 Исходные данные для расчетов

Исходные данные для расчета затрат на разработку мультимедийного учебника приведены в таблице 1. Исходные данные получены в УГКР во время преддипломной практики. Цены на компьютерную техника и электроэнергию указаны на 1 февраля 2011г.

Таблица 1. Исходные данные для расчета затрат на разработку мультимедийного электронного учебника

3.2 Расчет экономической эффективности

3.2.1 Расчет затрат времени на разработку мультимедийного электронного учебника

Таблица 2 Определение сроков на разработку мультимедийного электронного учебника

Таблица 3 Затраты и данные использования дополнительных программ

Расчет затрат на разработку мультимедийного электронного учебника

Зпр=Зосн*Кпр\100, (1)

где Зпр - премия (руб.);

Зосн - основная заработная плата;

Кпр - установленный процент премии %;

Зпр=Зосн*Кпр\100=5000*30\100=1500, руб

Зтер=(Зосн+Зпр)*Ктер\100, (2)

где Зтер - территориальная надбавка;

Ктер - установленный процент территориальной надбавки;

Зосн - основная заработная плата;

Зтер=(Зосн+Зпр)*Ктер\100=(5000+1500)*15\100=975, руб

Зобщ=Зосн+Зтер+Зпр, (3)

где Зобщ - общая заработная плата разработчика;

Зобщ=Зсон+Зтер+Зпр=5000+975+1500=7475, руб

ФОТ=Зобщ*Ср, (4)

где ФОТ - фонд оплаты труда разработчика програмного продукта;

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

ФОТ=Зобщ*Ср=7475*1,2=8970, руб

Н=ФОТ*Ксоц\100, (5)

где Н - начисление на заработную плату, руб;

Ксоц - единый социальный налог %

Н=ФОТ*Ксоц\100=8970*26\100=2332,20, руб

Фгод=Драб.дн/г*Др.дн*Кгот, (6)

где Фгод - годовой фонд рабочего времени машины час.;

Драб.дн/г - количество рабочик дней в году дн.;

Кгот - коэффициент готовности оборудования;

Др.дн - длительность рабочего дня час;

Фгод= Драб.дн/г*Др.дн*Кгот=244*8*0,9=1756,8, руб.

Апк=Спк*Ка\100, (7)

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

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

Апк=Спк*Ка\100=15320*20\100=3064, руб.

Арм=Срм*Ка\100, (8)

где Арм - амортизационные отчисления на рабочее место;

Арм=Срм*Ка\100=4500*20\100=900, руб.

Зэл/эн=Сэл/эн*Мпк*Фгод, (9)

где Зэл/эн - расходы на электроэнергию, руб;

Сэл/эн - стоимость одного киловатт-часа электроэнергии, руб/кВт.*ч.;

Мпк - паспортная мощность оборудования кВт.*ч.;

Зэл/эн= Сэл/эн*Мпк*Фгод=2,5*0,35*1756,8=1537,2, руб.

Зоборуд=Апк+Арм+Зэл/эн, (10)

где Зоборуд - суммарные затраты, связанные с содержаним рабочего места за год.

Зоборуд=Апк+Арм+Зэл/эн=3064+900+1537,2=5501,2, руб.

Сраб.мест=Зоборуд\Фгод, (11)

где Сраб.мест - стоимость рабочего места в час;

Сраб.мест=Зоборуд\Фгод=5501,2\1756,8=3,13, руб.

Зраб.мест=Сраб.мест*Тмаш, (12)

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

Тмаш - машинное время;

Зраб.мест=Сраб.мест*Тмаш=3,13*144=450,72, руб.

Зп.комп=Знма1+Знма2+Знма3, (13)

где Зп.комп - затраты на программный комплект руб.;

Зп.комп=Знма1+Знма2+Знма3=13765+24089+1600=39454, руб.

Сгод=Зп.комп\К-во.пк\Тар\Г*Тр, (14)

где Сгод - стоимость затрат програмного комплекта на один ПК в год, руб;

Г - количество месяцев в году, мес.;

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

Сгод=Зп.комп\К-во.пк\Тар\Г*Тр=39454\1\4\12*1,2=986,35, руб.

Зразраб=ФОТ+Н+Зпрог+Змат+Зраб.мест+Накл, (15)

где Зразраб - затраты на разработу мультимедийного ученика;

Зразраб=ФОТ+Н+Зпрог+Змат+Зраб.мест+Накл=8970+2332,20+986,35+20+450,72+210=12969,27, руб.

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

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

4. Техника безопасности при работе за компьтером

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

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

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

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

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

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

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

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

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