Разработка и документальное сопровождение цифрового дидактического материала

1)Для создания веб  - страницы на основе пустой страницы с помощью приложения MS Front Page необходимо открыть окно приложения одним из способов. После чего на экране будет отображаться окно приложения или графический интерфейс MS Front Page, представленный на рисунке (рис. 9).

Рисунок 9. - Графический интерфейс MS Front Page

2.  Необходимо выполнить  команду Файл./Создать и выбрать  в области задач Пустая страница. В окне приложения появится новая пустая страница нов_ стр. _1.htm.

3.Нужно Сохранить страницу, но перед тем, как сохранить  страницу в окне «Сохранить» создайте папку, например EN101, в которой нужно создать вложенную папку images или logo для рисунков, а затем сохранить страницу в папке EN101. Имя страницы назначить – index, что означает домашняя или главная страница. Редактор сохраняет страницу с расширением. Htm. В папке EN101, будет находиться вложенная папка images и файл index.htm.

4. В папку images необходимо  скопировать  подготовленные  рисунки для веб – страницы.

5. После необходимо  осуществить разработку страницы. Разработка страницы начинается с ее разметки. Для разметки страницы нужно использовать таблицы (Таблица / Вставить / Таблица), но можно применить Макеты страницы, которые расположены на панели задач «Макеты таблицы и ячейки» в области задач. Установить в области задач «Макетные таблицы и ячейки»

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

1	2
3	4

Рисунок 10.-Макет таблицы

7. Установить ширину  таблицы (в точках или процентах)  странички равную 900 точек (ширина  первого столбца – 213 точек,  ширина второго столбца – 687 точек). Для этого нужно подвести  указатель мыши к верхней границе  и когда от примет вид наклоненной влево стрелки щелкнуть левой кнопкой мыши, появятся раскрывающиеся списки, раскрыв которые можно изменить ширину столбца. Можно установить ширину таблицы с помощью раскрывающегося тега таблицы <table> на панели «Быстрый вызов тега». Для этого надо щелкнуть  на раскрывающийся тег таблицы <table> (на панели быстрый вызов тега) и выбрать команду «Свойства тега», затем в открывшемся окне диалога «Свойства таблицы»: задать ширину, высоту не устанавливать. Кроме того, установить: Выравнивание по центру, Границы: размер – 1, цвет границы – темно-синий (код: 000080) или любой другой цвет.

8. Установить в первую  ячейку любой рисунок ("Вставка/  Рисунок/ Из файла", выбрать рисунок из папки images). Вставить, например, логотип компании EN101, которая ведет курсы дистанционного обучения иностранных языков в Интернет.

9. Установить фон ячеек  1 и 2 аналогичный фону логотипа  или любой фон (существуют приложения для подбора цвета, например, «Цветик ver. 5.1»). Для заливки ячейки цветом необходимо щелкнуть на раскрывающийся тег ячейки <td> (на панели быстрый вызов тега) и выбрать команду «Свойства тега», затем в открывшемся окне диалога «Свойства ячейки» установить: цвет фона.

10. Во вторую ячейку  поместить заголовок сайта, например  «Обучение английскому языку». Текст вводить в режиме конструктора. Выбрать шрифт Verdana (наиболее распространенный шрифт для веб - страниц), размер 24 пт., цвет темно-синий (код цвета: 000080) или любой другой цвет, выравнивание по центру.

11. Разместить в ячейке 3 навигацию, для перехода на  другие (будущие) странички. Ввести текст НАВИГАЦИЯ шрифтом Verdana, размер шрифта 12 пт., выравнивание по центру. Далее ввести текст (шрифт - Verdana, размер шрифта - 8 пт.): Главная, О компании En101, Способы оплаты, выделить эти строки и щелкнуть на кнопке маркеры на панели инструментов форматирования. Таким образом, создам маркированный список для навигации.

12. Установить гиперссылку  для строки Главная. Выделить  строку Главная, щелкнуть правой кнопкой мыши и из контекстного меню выбрать команду Гиперссылка. Откроется окно диалога, в котором надо в папке EN101 выделить файл index и нажать ОК.

13. Создать ссылки на  партнерские сайты. Установить  курсор ниже пунктов навигации и выбрать команду "Таблица / Вставить / Таблица", в открывшемся окне диалога установить: Строк – 1, Столбцов – 1; Выравнивание – по центру; Задать ширину: 98%; Задать высоту: 30 в точках; Границы: размер – 1, цвет–темно-синий (код: 000080); Фон: цвет - темно-синий (код: 000080). Далее щелкнуть Применить и ОК. Затем в созданную таблицу ввести текст «ПАРТНЕРСКИЕ САЙТЫ», шрифтом Verdana, размер шрифта 10 пт., выравнивание по центру, цвет белый.

14. Ниже таблицы ПАРТНЕРСКИЕ  САЙТЫ ввести адреса требуемых  сайтов, например: http://lessons-tva.info/, http://tva.jino.ru/

15. Создать гиперссылки  для партнерских сайтов. Например, выделить адрес http://lessons-tva.info и вызвать контекстное меню, в котором необходимо выбрать команду Гиперссылка. В открывшемся окне диалога в строке Текст выделить http://lessons-tva.info и скопировать (Ctrl+C), затем установить курсор в строку Адрес, вставить в нее из буфера обмена (Ctrl+V) http://lessons-tva.info и щелкнуть ОК.

16. В ячейке 4 поместить  текст и рисунки. Текст можно  вводить с клавиатуры или вставлять  скопированный текст из буфера  обмена. Текст вводится, редактируется и форматируется как в любом текстовом редакторе. Рисунки можно вставлять только из папки images (logo), которую  предварительно создали при сохранении веб – страницы и наполнили ее рисунками.

17. Добавить таблицу  для записи: Copyright © Английский язык в Интернет, 2007. All Rights Reserved, которая предназначена для защиты интеллектуальной собственности на данную веб-страницу. Кроме того, в этой таблице располагаются счетчики. Для этого нужно установить курсор ниже страницы (вне поля страницы, т.е. ниже третьей и четвертой ячеек) и в области задач в разделе «Новые таблицы и ячейки» выбрать команду «Вставить макетную таблицу». Размеры этой таблицы подобрать под размеры страницы, например, установить900х57 точек, размер границы - 1, цвет - темно-синий (код: 000080), цвет фона - белый. В созданную таблицу ввести текст Copyright © Английский язык в Интернет, 2007. All Rights Reserved

18. Добавить цвет фона  вокруг страницы. Выбрать команду  Формат / Фон, в открывшемся окне диалога на вкладке форматирование установить цвет фона – темно-синий (код: 000080) или любой другой цвет фона.

19. В режиме Код добавить  на страницу отсутствующие на  ней метатеги и заполнить нижеуказанные метатеги (между тегами < head > и </ head >):

 Образец заполнения:

<title>Английский язык в Интернет</title>

<meta name="keywords" content="EN101 курсы английского языка обучение  регистрация">

<meta name="description" content="Курсы  дистанционного обучения английскому  языку в Интернет">

 <Meta NAME="Author" CONTENT="Владимир Ткаченко">

<META content="INDEX, FOLLOW" name=ROBOTS>

20. Сохранить созданную  веб - страницу, с целью использования  ее при создании веб - сайта.

 

 

4. ПРОЕКТНАЯ ОБЛАСТЬ

4.1. Проектные решения по разработке дополнительной конфигурации

 

Проектные решения по реализации программного продукта «ЦОР по дисциплине «Технология создания и обработки цифровой мультимедийной информации».

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

UML позволяет разработчикам программного обеспечения достигнуть соглашения в графических обозначениях для представления общих понятий (таких как класс, компонент, обобщение (generalization), объединение (aggregation) и поведение, и больше сконцентрироваться на проектировании и архитектуре.

Преимущества UML

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

UML позволяет описать  систему практически со всех  возможных точек зрения и разные  аспекты поведения системы; 

Диаграммы UML сравнительно просты для чтения после достаточно быстрого ознакомления с его синтаксисом;

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

UML получил широкое распространение  и динамично развивается. 

4.2. Диаграмма вариантов использования

 

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

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

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

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

 

Рисунок 4.2.1 — Диаграмма  вариантов использования

 

 

 

 

 

 

4.3. Диаграмма Деятельности

 

Диаграмма деятельности (Activity diagram) — диаграмма, на которой показано разложение некоторой деятельности на её составные части. Под деятельностью (англ. activity) понимается спецификация исполняемого поведения в виде координированного последовательного и параллельного выполнения подчинённых элементов — вложенных видов деятельности и отдельных действий (англ. action), соединённых между собой потоками, которые идут от выходов одного узла ко входам другого.

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

Аналогом диаграмм деятельности являются схемы алгоритмов по ГОСТ 19.701-90.

В данной работе диаграмма Деятельности демонстрирует специфику деятельности при работе с создаваемой программного продукта «ЦОР по дисциплине «Технология создания и обработки цифровой мультимедийной информации».

 

Рисунок 4.3.1 – Диаграмма  деятельности

 

4.4. Пример листинга

//Главная страница на языке HTML.

<html>

<head>

<meta http-equiv="Content-Language" content="ru">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<script language="JavaScript">

<!--

function FP_swapImg() {//v1.0

var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;

n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;

elm.$src=elm.src; elm.src=args[n+1]; } }}

function FP_preloadImgs() {//v1.0

var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array(); for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }}

function FP_getObjectByID(id,o) {//v1.0

var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);

else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;

if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)

for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }

f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;

for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }

return null;}

// -->

</script><style><!--

li.MsoNormal

{mso-style-parent:"";

margin-bottom:.0001pt;

font-size:12.0pt;

font-family:"Times New Roman","serif";

margin-left:0cm; margin-right:0cm; margin-top:0cm}-->

</style>

</head>

<body onload="FP_preloadImgs(/*url*/'button4.jpg', /*url*/'button5.jpg', /*url*/'button6.jpg', /*url*/'button7.jpg', /*url*/'buttonB.jpg', /*url*/'buttonC.jpg', /*url*/'buttonE.jpg', /*url*/'buttonF.jpg', /*url*/'button2.gif', /*url*/'button3.gif')">

<div align="center">

<table border="0" cellpadding="0" cellspacing="0" width="1127" height="2181">

<!-- MSTableType="layout" -->

<tr>

<td valign="top" height="2181" width="1127">

<!-- MSCellType="ContentBody" -->

<table border="1" width="100%" id="table4" height="1004" cellspacing="0" cellpadding="0" bordercolor="#83C5E0" bgcolor="#0000FF"> <tr> <td bordercolor="#0000FF" bgcolor="#0000FF">

<!--webbot bot="ImageMap" text=" (14,252) (1082, 372) {Технология создания и обработки цифровой мультимедийной информации} {Times New Roman} 36 B #000000 CT 0  " border="0" src="img01.gif" width="1123" height="373" u-originalsrc="img01.gif" u-overlaysrc="_overlay/index.htm_txt_img01.gif" startspan --><img border="0" src="_derived/index.htm_txt_img01.gif" width="1123" height="373"><!--webbot bot="ImageMap" endspan i-checksum="5573" --><table border="0" width="100%" id="table5" cellspacing="0" cellpadding="0"> <tr>

<td bordercolorlight="#00FFFF" bordercolor="#00FFFF" bgcolor="#00FFFF"> <p lign="center"><b><font size="4">&nbsp;ГЛАВНАЯ&nbsp;&nbsp;&nbsp;</font></b></td>

</tr>

</table>

<table border="0" width="100%" id="table8" height="85" cellspacing="0" cellpadding="0" bgcolor="#83C5E0"> <tr>

<td>

<a href="index.htm">

<img border="0" id="img1" src="button1.gif" height="44" width="220" alt="ГЛАВНАЯ" fp-style="fp-btn: Border Left 1; fp-transparent: 1" fp-title="ГЛАВНАЯ" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button2.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button1.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.gif')"></a><a href="ТЕОРИЯ.htm"><img border="0" id="img3" src="button8.jpg" height="44" width="220" alt="ТЕОРИЯ" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button4.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button5.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button4.jpg')" fp-style="fp-btn: Border Left 1" fp-title="ТЕОРИЯ"></a><a href="Лабораторные.htm"><img border="0" id="img5" src="button9.jpg" height="44" width="220" alt="ЛАБОРАТОРНЫЕ" fp-style="fp-btn: Border Left 1" fp-title="ЛАБОРАТОРНЫЕ" onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'button6.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'button9.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'button7.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'button6.jpg')"></a><a href="ТЕСТЫ.htm"><img border="0" id="img6" src="buttonA.jpg" height="44" width="220" alt="ТЕСТЫ" onmouseover="FP_swapImg(1,0,/*id*/'img6',/*url*/'buttonB.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img6',/*url*/'buttonA.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img6',/*url*/'buttonC.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img6',/*url*/'buttonB.jpg')" fp-style="fp-btn: Border Left 1" fp-title="ТЕСТЫ"></a><a href="МУЛЬТИМЕДИА.htm"><img border="0" id="img8" src="buttonD.jpg" height="44" width="220" alt="МУЛЬТИМЕДИА" onmouseover="FP_swapImg(1,0,/*id*/'img8',/*url*/'buttonE.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img8',/*url*/'buttonD.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img8',/*url*/'buttonF.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img8',/*url*/'buttonE.jpg')" fp-style="fp-btn: Border Left 1" fp-title="МУЛЬТИМЕДИА"></a></td> </tr> </table> <p align="center">