1 Электронные учебные пособия Составитель: Темербекова А. А. , д-р пед. наук, профессор кафедры АГи. МПМ ГАГУ
2 Варианты использования компьютера • Помощь при чтении лекций (презентации) • Работа в виртуальной лаборатории • Изготовление электронных и виртуальных изданий • Разработка и применение тренажеров • Осуществление контроля знаний обучаемых (тесты, контрольные задания и др. ) • Дистанционное обучение (сайты)
3 Изготовление электронных и виртуальных изданий • • Учебник Лекционные курсы Учебное пособие Задачник Практикум Практическое пособие Хрестоматия Программа курсов
4 Виды электронных изданий • Учебник - издание, в котором в систематическом виде излагается какойлибо предмет в учебных целях и который официально утвержден соответствующим УМО Минобразования РФ или иным правомочным органом в качестве такового и рекомендован для изучения данного предмета определенной группой обучающихся. • Учебное пособие отличается от учебника своим дополняющим или заменяющим характером. Учебное пособие не требует утверждения в УМО. Учебные пособия часто издаются для тех дисциплин, по которым имеется дефицит учебников или для специальных курсов, преподаваемых в ограниченном количестве учебных заведений. • Лекционные курсы отличаются от учебников и учебных пособий делением учебного материала в соответствии с его разбиением на лекции (с учетом ее длительности). Лекции являются ключевым звеном всего учебного курса. Ценность создания таких web-публикаций позволяют привязать к учебному процессу все виды методических материалов.
5 Типовая экранная форма электронного учебника
6 Виды электронных изданий • Задачником называется сборник упражнений, как правило, по естественно-научным дисциплинам с возможными примерами их решения, комментариями, пояснениями и указаниями методического характера. Задачник, как и учебник, должен иметь официальное утверждение для его применения в изучении определенного предмета конкретными группами обучаемых. • Практикум близок к задачнику, однако не обязательно должен пройти официальное утверждение, но должен содержать расширенный методический аппарат для обучаемых и преподавателей. • Практическое пособие содержит научные, методические и практические рекомендации по применению теоретических знаний определенной дисциплины (дисциплин) применительно к каким-либо сферам практической деятельности или профессиям. Ценность практического пособия состоит в том, что его материал может выходить за рамки учебного процесса и представлять практический интерес для специалистов.
7 Виды электронных изданий • Учебно-методические пособия являются не требующими официального утверждения внутриведомственными изданиями, содержащими теоретический, практический и наглядный материал, как правило, разъяснительного характера по разделам дисциплин (в пределах темы или лекции). Это раздаточный материал, который должен постоянно восстанавливаться. Благодаря большей оперативности, доступности и тиражируемости их web-публикация снижает необходимость выпуска данных изданий в бумажной форме. • Методические указания близки по типу и назначению к учебнометодическим пособиям и содержат рекомендации по применению теоретических и практических знаний при выполнении учебных заданий. Методические указания обычно используются при выполнении практических заданий, лабораторных, полевых, курсовых и квалификационных работ. Методические указания также могут издаваться для преподавателей.
8 Виды электронных изданий • Наглядные пособия и альбомы наглядных пособий являются учебным материалом, применяемым, как правило, для демонстрационных целей. В ряде случаев требуют официального утверждения. • Хрестоматия является сборником текстов, собранных из источников, используемых при изучении, как правило, какой-либо дисциплины гуманитарного направления. Хрестоматия может содержать как полные тексты источников, так и выдержки из них. • Программа курса определяет подробный перечень изучаемых теоретических и практических тем с указанием количества учебного времени, отводимого на их усвоение, список рекомендуемой литературы. Существование электронного изданного программы курса уничтожает необходимость ее полиграфического аналога. • Энциклопедии, словари, справочники и др.
9 Виртуальный лабораторный практикум
10 Осуществление контроля знаний обучаемых • Инструменты тестирования знаний обучаемых (тесты) • Инструменты контроля знаний учащихся
11 Пять общих требований к тестам Выделяют пять общих требований к тестам: 1. валидность; 2. определенность (общепонятность); 3. простота; 4. однозначность; 5. надежность.
Этапы разработки ЭУП 12 I этап – подготовка предметного материала: -подбор основного учебного материала в соответствии с требованиями ГОС ВПО и рабочей программы дисциплины; -структуризация учебного материала: выделение глав, тем, пунктов и т. п. , -определение последовательности изучения материала; -выделение внутренних и внешних взаимосвязей между элементами учебного материала; -подбор иллюстративного материала, видео- и аудиофрагментов, либо разработка собственных сценариев графики и анимации; -разработка методических материалов (вопросов, тестов, упражнений); -составление словаря терминов и списка литературы; -разработка методических рекомендаций по изучению курса для студентов, обучающихся по дистанционной форме.
Этапы разработки ЭУП 13 II этап – подготовка программного обеспечения ЭУП: -разработка дизайна ЭУП; -оформление основного текста в формате HTML; -оформление иллюстративного материала (сканирование уже готового или разработка авторских рисунков); -оформление словаря терминов, внутренних и внешних гиперссылок; -оформление тестовых заданий; -разработка мультимедийных объектов; -отладка ЭУП. III этап – апробация ЭУП.
14 I. Подготовка предметного материала Структура электронного учебного пособия включает в себя: -блок учебного материала; -блок внутреннего контроля или самоконтроля (вопросы, упражнения, тесты); -блок самообразования (дополнительные вопросы для самостоятельного изучения, ссылки на источники); -блок внешнего контроля (упражнения, лабораторные работы, тесты).
Взаимосвязь блоков в электронном гиперссылочном учебном пособии Раздел 1. 1 … Раздел 1. 2 Вопросы Упражнения Тесты Модуль 1 … Меню Блок учебного материала Вопросы Упражнения 15 Раздел N. 1 … Раздел N. 2 Вопросы Упражнения Тесты Блок самоконтроля Тесты Блок самообразования Модуль N Словарь Литература Дополнительная информация Итоговый тест РГЗ / КР Зачет, экзамен Блок итогового контроля
16 • Автор –И. Г. Руцкова Программист – П. В. Веденеев
17 II Технологии и инструментальные средства, используемые при разработке электронных учебных пособий
18 Использование элементов анимации • Автор –Е. В. Дырдина Программист – Д. В. Попов
19 Использование аудио и видео материалов • Авторы – Л. И. Сотникова • Программист – П. В. Губарев
20 Комплекс требований к ЭУП Требования к ЭУП Общие дидактические Специфические дидактические Психологические Методические Эргономические Техникотехнологические
21 Общие дидактические требования к разработке ЭУП 1. Требование научности обучения с использованием ЭУП означает достаточную глубину, корректность и научную достоверность изложения содержания учебного материала, предоставляемого ЭУП с учетом последних научных достижений. 2. Требование доступности обучения, осуществляемого посредством ЭУП, означает необходимость определения степени теоретической сложности и глубины изучения учебного материала сообразно возрастным и индивидуальным особенностям обучащихся. 3. Требование обеспечения проблемности обучения обусловлено самой сущностью и характером учебно-познавательной деятельности.
22 Общие дидактические требования к разработке ЭУП 4. Требование обеспечения наглядности обучения означает необходимость учета чувственного восприятия изучаемых объектов, их макетов или моделей и их личное наблюдение обучащимся. 5. Требование обеспечения сознательности обучения, самостоятельности и активизации деятельности обучаемого предполагает обеспечение средствами ЭУП самостоятельных действий обучащихся по извлечению учебной информации при четком понимании конечных целей и задач учебной деятельности.
23 Общие дидактические требования к разработке ЭУП -предъявлять учебный материал в систематизированном и структурированном виде; -учитывать как ретроспективы, так и перспективы формируемых знаний, умений и навыков при организации каждой порции учебной информации; -учитывать материала; межпредметные связи изучаемого -тщательно продумывать последовательность подачи учебного материала и обучающих воздействий, ; -строить процесс последовательности, обучения; получения знаний в определяемой логикой -обеспечивать связь информации с практикой путем увязывания содержания и методики обучения с личным опытом обучающегося.
24 Общие дидактические требования к разработке ЭУП 7. Требование прочности усвоения знаний при использовании ЭУП: для прочного усвоения учебного материала наибольшее значение имеют глубокое осмысление этого материала, его рассредоточенное запоминание. 8. Требование единства образовательных, развивающих и воспитательных функций обучения в ЭУП.
25 Специфические дидактические требования к разработке ЭУП 1. Требование адаптивности подразумевает приспособляемость ЭУП к индивидуальным возможностям обучаемого, означает приспособление, адаптацию процесса обучения к психологическим особенностям обучающегося. 2. Требование интерактивности обучения означает, что в процессе обучения должно иметь место взаимодействие обучающегося с ЭУП. 3. Требование реализации возможностей компьютерной визуализации учебной информации. 4. Требование развития интеллектуального потенциала. 5. Требование системности и структурнофункциональной связанности представления учебного материала. 6. Требование обеспечения полноты (целостности) и непрерывности дидактического цикла обучения.
26 Методические требования к разработке ЭУП 1. Предъявление учебного материала в ЭУП должно строиться с опорой на взаимосвязь и взаимодействие понятийных, образных и действенных компонентов мышления. 2. ЭУП должно обеспечить отражение системы научных понятий учебной дисциплины в виде иерархической структуры высокого порядка, каждый уровень которой соответствует определенному внутридисциплинарному уровню абстракции, а также обеспечить учет как одноуровневых, так и межуровневых логических взаимосвязей этих понятий. 3. ЭУП должно предоставлять обучаемому возможность разнообразных контролируемых тренировочных действий с поэтапного повышения внутридисциплинарного уровня знаний учащихся на уровне усвоения, достаточном осуществления алгоритмической и эвристической деятельности.
27 Психологические требования к разработке ЭУП УП 1. Представление в учебного материала соответствовать не только вербально-логическому, но и сенсорно-перцептивному и представленческому уровням когнитивного процесса. 2. Изложение учебного материала ЭУП должно быть ориентировано на тезаурус и лингвистическую композицию конкретного возрастного контингента и специфики подготовки обучаемых. ЭУП должно быть построено с учетом системы знаний обучающегося и знания языка. 3. ЭУП должно быть направлено на развитие как образного, так и логического мышления.
28 Ссылки Гипертекстовый документ – это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому. Любая ссылка состоит из двух частей: указатель – это то, что отображается на Webстранице; адресная часть – инструкция браузеру, т. е. адрес документа, который будет загружаться при нажатии на указатель ссылки.
29 Указатели могут быть текстовые (слово, группа слов) или графические (изображение). При отображении на web-странице текстовые указатели обычно выделяются подчеркиванием и цветом. Графические указатели выделяются рамкой.
30 Адресная часть Указатель Адресная часть Указатель
31 Ссылки можно разделить на: внешние ссылки- указывающие на другие html-документы, хранящиеся на Вашем жестком диске; внутренние ссылки - указывающие на какие-то элементы внутри данного документа; ссылки на Интернет-ресурсы указывающие на документы, находящиеся в сети Интернет; ссылки на электронную почту – позволяет быстро обратиться к адресату электронной почты.
32 Внутренние ссылки Достаточно часто возникает необходимость включить ссылки на разные части текущего документа. Примером может служить оглавление со ссылками на текущие разделы. Для построения внутренней ссылки необходимо вначале создать указатель, показывающий место назначения при помощи тега, например <a name=‘#q’>Контрольные вопросы</a> После того как указатель создать ссылку на него приобрел имя, можно <a href=‘#q’>Контрольные вопросы</a>
33
34 Внешние ссылки Для создания внешней ссылки (на другой локальный html-документ) используют только одну часть – указатель, на тот документ, который должен быть открыт. Например, если необходимо из файла first. html перейти по ссылке к файлу second. html (и оба эти файла находятся о одном каталоге), достаточно включить следующую строку в html-код: <a href=‘second. html’>second. html</a>
35
36 Ссылки на Интернет-источники Для создания ссылки на Интернет-источник используется точно такой же механизм, как и при создании внешней ссылки. Отличие заключается только в том, что в адресной части указывается не путь к другому html-файлу, электронный адрес Интернетисточника. Например, если необходимо в электронный учебник включить ссылку на сайт Министерства образования и науки РФ, следует в html-код документа включить следующую строку: <a href=‘http: //www. ed. gov. ru’>Сайт МОи. Н РФ</a>
37 Ссылки на электронную почту Для создания ссылки на электронную почту используется зарезервированное слово mailto, которое используется в адресной части ссылки в следующем формате: <a href=‘mailto: ktn@cs. osu. ru’>Мой электронный адрес</a>
38 Кадры (фреймы) Кадры являются удобным способом логического разбиения HTML-документа на отдельные независимые панели, каждая из которых отображает содержимое отдельного файла. Эти элементы могут взаимодействовать между собой, создавая более удобные условия для работы с документом. Фреймы часто используются для оформления электронных гиперссылочных учебных пособий, поскольку позволяют разделить между собой содержательную часть пособия и элементы навигации.
Самый простой способ разделения - два кадра: кадр для оглавления учебника и кадр для просмотра содержания. 39
40
41
42
Взаимосвязь между файлами, объединенными посредством кадров можно представить следующим образом Основной файл Frame 1 Frame 2 … Frame n Файл, содержимое которого будет выводиться во Frame 1 Файл, содержимое которого будет выводиться во Frame 2 Файл, содержимое которого будет выводиться во Frame n 43
44 Кадровая структура определяется только один раз в основном файле, в котором посредством тега <frame> указываются ссылки на остальные файлы. Деление на кадры осуществляется использованием специального тега с <frameset> … </frameset> Этот тег используется вместо тега <body>. Т. е. можно сказать, что в основном файле тег <body> будет отсутствовать. Тег <frameset> используется при определении каждого кадра, внутри этого тега могут использоваться только теги <frame> или <frameset>.
Параметры тега <frameset> 45 Тег <frameset> имеет два основных параметра rows и cols. Общий вид тега можно представить следующим образом <frameset rows=‘value’ cols=‘value’> … </frameset> Строка value представляет собой список значений (в пикселах или процентах), разделенных запятыми. Количество рядов или столбцов кадров определяется количеством этих значений. Например, <frameset rows='25%, 50%, 25%' border=1> приведет к созданию трех кадров по 25%, 50% и 25% от высоты окна браузера.
Тег <frame> 46 После того как с помощью тега <frameset> было определено общее количество кадров в документе, для определения параметров каждого кадра в отдельности следует использовать тег <frame> Этот тег является одиночным, он всегда располагается внутри тега <frameset>. Количество тегов <frame> должно быть равно количеству кадров, указанных во <frameset>.
Параметры тега <frame> 47 Основными параметрами тега <frame> являются src - который определяет путь к файлу ( или Интернет -адрес), который должен отобразиться в данном кадре; name – имя кадра (необязательный, но удобный для дальнейшего обращения к кадру).
48 В качестве примера рассмотрим создание простейшей структуры, состоящей из двух кадров. left_frame right_frame (25%) (75%) content. html main. html
49
50
51
Связывание кадров между собой Поскольку левый кадр в нашем случае используется как элемент навигации - оглавление, необходимо, чтобы при выборе ссылки в левом кадре ее содержимое открывалось бы в правом кадре. Для того, чтобы связать кадры между собой в теге ссылки <a> указывается параметр target=‘<имя кадра>’ Например, <a href='table. html' target='right_frame'>Таблица</a> 52
53 Перевод строки Для того, чтобы перейти на новую строку в любом месте текущей строки, в HTML существует тэг разрыва строки Этот тег заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тэга абзаца, тэг не добавляет пустую строку и не имеет закрывающего тэга.
54
55 Перевод текста в верхний / нижний регистр Для перевода фрагмента текста в верхний регистр используется тег <sup> … </sup> Для перевода фрагмента текста в нижний регистр используется тег <sub> … </sub>
56
57 Вставка изображений в документ Существует достаточно много форматов графических документов: GIF, BMP, JPEG (JPG), PCX, WMF и др. Однако при оформлении HTMLдокумента лучше ограничиться двумя: GIF, JPEG, поскольку их понимает большинство современных программ просмотра (Internet Explorer, Netscape Navigator, Opera и др. ). Для вставки изображения используется тег в тело документа <img> Этот тег одинарный, он не имеет закрывающего тега. Его основной параметр: src – путь к файлу с изображением.
58
59 Обтекание текстом изображения По умолчанию после вставки изображения следующая строка оказывается после рисунка. Если есть необходимость, чтобы текст обтекал рисунок, можно воспользоваться параметром align для тега <img>.
60 Принудительное выравнивание по центру В некоторых случаях возникает необходимость выровнять объект по центру документа, но либо объект не обладает свойством align, либо значение align=‘center’ отображается некорректно. В этих случаях используют тег принудительного выравнивания по центру <center> … </center>
61
62 Таблицы Для оформления таблиц в документе используется несколько тегов: <table> … </table> - начало – конец таблицы, <tr> … </tr> - начало – конец строки таблицы, <td> … </td> - начало – конец ячейки строки таблицы. Вместе с тегом table обычно используют параметры: border – определение рамки таблицы; браузера; или %). align – выравнивание таблицы в окне width – ширина таблицы (в пикселах
63
64
65 Тег tr, может иметь параметр align (‘center’, ‘left’, ‘right’), который определяет горизонтальное выравнивание текста ячейках и действует для всей данной строки таблицы, если он не отменяется другим параметром внутри ячейки. Тег td имеет параметры: align – горизонтальное выравнивание (‘center’, ‘left’, ‘right’), ; valign – вертикальное выравнивание (middle, top, bottom); bgcolor – цвет фона в ячейке.
66
67 Сложные таблицы Объединение ячеек В случае сложной структуры таблицы возникает необходимость горизонтального или вертикального объединения двух или более ячеек. В этом случае используют следующие параметры тега <td>: rowspan – объединение ячеек, находящихся в одном столбце; colspan - объединение ячеек, находящихся в одной строке.
68 Предположим, нам необходимо создать таблицу следующей структуры: Размерность таблицы (без объединения) – 3 х 3.
69
70
71 Эргономические требования к ЭУП строятся с учетом особенностей обучаемых, обеспечивают повышение уровня мотивации к обучению, устанавливают требования к изображению информации и режимам работы ЭУП. Основным эргономическим требованием является требование обеспечения гуманного отношения к обучаемому, организации в ЭУП дружественного интерфейса, обеспечения возможности использования обучаемыми необходимых подсказок и методических указаний, свободной последовательности и работы, что позволит избежать отрицательного воздействия на его психику, создаст благожелательную атмосферу на занятиях.
72 Общее представление о языке гипертекстовой разметки HTML Основным форматом представления документов в сети Интернет является язык гипертекстовой разметки HTML. Некорректно называть HTML языком программирования, поскольку по своим возможностям HTML далек от реализации основных команд программирования. HTML – это определенная совокупность правил (тегов), по которым оформляется документ. Теги показывают Интернет-браузеру, как следует отображать текст на Web-страничке. Теги всегда используются в паре: открывающий и закрывающий. Структура тега (пары тегов) всегда такова: <название тега> … </название тега> Теги могут содержать атрибуты, характеризующие отображение информации внутри тега.
73 Текстовый файл обязательно должен иметь расширение. html
Структура HTML-документа <html> <head> Начало – конец HTML-документа <title> Начало – конец заголовка документа </title> </head> <body> Начало – конец тела документа </body> </html> Название документа 74
75 Структура документа Основным тегом языка HTML является тег (пара тэгов) <html> … </html> Они обозначают, что находящиеся между ними строки представляют единый HTML-документ. Это важно, так как сам по себе документ является обыкновенным текстовым файлом в формате ASCII. Без этих тегов ни один Интернет-браузер не в состоянии идентифицировать формат документа и правильное его интерпретировать. Примечание: обязательно указывать открывающий, но и закрывающий теги. не только
76 Следующим тегом, который относится к разметке структуры документа, является тег заголовка документа <head> … </head> Задача заголовка документа – предоставление необходимой информации для программы, интерпретирующей документ. Элементы находящиеся внутри заголовка (кроме <title>) не отображаются на экране во время просмотра документа.
77 Раздел <title> … </title> является единственным обязательным элементом заголовка и служит для того, чтобы дать документу название, которое будет отображаться в заголовке окна браузера. Название документа представляет собой обычную текстовую строку, которая характеризует содержание документа в целом. Примечание: не стоит путать между собой название документа и название файла документа, эти элементы не зависят друг от друга.
78 Тег <body> … </body> содержит тело документа, которое отображается браузером на экране. Этот тег имеет несколько параметров. Некоторые из них: bgcolor – цвет фона документа background – указывает путь к графическому файлу, который будет использован в качестве фона документа. Например, <body bgcolor=‘yellow’ background=‘fon. jpg’> Примечание: если параметры цвета фона у данного тега не указаны, то фон документа будет белым.
79 В HTML цвета можно задавать непосредственно названиями, а можно в шестнадцатеричной форме. Цветовая схема базируется на трех основных цветах RGB. Для каждого направления задается шестнадцатеричное значение от 00 до FF. Затем эти числа объединяются в одно число, перед которым ставится символ #. Например, число #800080 обозначает фиолетовый цвет. Изменяя значения шестнадцатеричного числа, можно подобрать требуемый цвет.
80 Форматирование текста Установка абзаца HTML предполагает, что автор документа ничего не знает о компьютере пользователя. Пользователь вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Для разбиения текста на абзацы используется тег <p> … </p> Для начала абзаца следует разместить тег <p> в начало строки абзаца. Данный тег имеет большое значение при стилевом оформлении документа.
81
82 Тег абзаца имеет важный параметр align Данный параметр может иметь три значения:
83
84 Шрифты Одной из важных возможностей HTML является полный контроль облика создаваемого документа, в том числе управление шрифтами. На практике тип выводимых шрифтов сильно зависит от программноаппаратного обеспечения компьютера пользователя. Однако для HTML-документов проблема значительно облегчается тем, что на всех машинах сети должен быть установлен стандартный набор шрифтов. Обычно это Verdana, Arial, Times New Roman. Для работы со шрифтами используется тег <font> … </font>
85 Тег font имеет следующие параметры size Служит для указания размера шрифта в условных единицах от 1 до 7. Принято считать, что размер «нормального» шрифта соответствует числу 3. Например, <font size=‘ 4’>Размер шрифта равен 4</font>
86 Параметр color Устанавливает цвет шрифта, который может быть указан как в формате RGB, так и стандартным именем. Например, <font color=‘yellow’>Цвет шрифта - желтый</font>
87
88 Заголовки имеют важное значение в структурировании HTML -документа и являются одними из самых употребляемых в языке разметки текста. Их назначение – показать структуру документа. HTML располагает шестью уровнями заголовков. <h 1> … </h 1> … <h 6> … </h 6> Самый верхний уровень <h 1>, нижний - <h 6>. Все эти теги также имеют параметр align.
89
90 Дополнительные теги по оформлению текста <i> … </i> - начало-конец оформления фрагмента текста курсивом; <b> … </b>- начало-конец оформления фрагмента текста более жирным начертанием; <u> … </u>- начало-конец оформления фрагмента текста подчеркиванием.
91
92 Перевод строки Для того, чтобы перейти на новую строку в любом месте текущей строки, в HTML существует тэг разрыва строки Этот тег заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тэга абзаца, тэг не добавляет пустую строку и не имеет закрывающего тэга.
93
94 Разделительные линии Еще одним методом разделения документа является использование разделительных линий. Для проведения такой линии в теле документа используется тег <hr> Тег обладает следующими параметрами: align – выравнивание линии; width – в %); длина линии (может устанавливаться size – ширина линии (в пикселах); color - цвет линии.
95
96 Вставка изображений в документ Существует достаточно много форматов графических документов: GIF, BMP, JPEG (JPG), PCX, WMF и др. Однако при оформлении HTMLдокумента лучше ограничиться двумя: GIF, JPEG, поскольку их понимает большинство современных программ просмотра (Internet Explorer, Netscape Navigator, Opera и др. ). Для вставки изображения используется тег в тело документа <img> Этот тег одинарный, он не имеет закрывающего тега. Его основной параметр: src – путь к файлу с изображением.
97 Обтекание текстом изображения По умолчанию после вставки изображения следующая строка оказывается после рисунка. Если есть необходимость, чтобы текст обтекал рисунок, можно воспользоваться параметром align для тега <img>.
98
Скачать презентацию 1 Электронные учебные пособия Составитель Темербекова А А
Электронные учебники (98).ppt