Файл: История создания и версии языков гипертекстовой разметки.pdf

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

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

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

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

– использование гипертекстовых ссылок, позволяющих мгновенно отыскать нужное понятие, в считанные доли секунды «перелистать» многие страницы изучаемого текста;

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

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

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

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

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

– контрольная часть содержит набор тестов, контрольных вопросов по теоретической части;

– справочная часть, которая может включать в себя: необходимую информацию в графической, табличной или любой другой форме [15].

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

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

Назначение электронного учебного пособия – самостоятельного овладения знаниями и умениями работы с языком HTML5, электронное учебное пособие рассчитано на 12 академических часов.

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

Электронное учебное пособие позиционируется как пособие для начинающих изучение сайтостроения, но имеющих представление о написании сайтов на HTML4.

Кроме того, электронное учебное пособие позволит развить такие качества как: самообучение, самоконтроль, внимание, творческое мышление и саморазвитие.

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

Программное обеспечение:

– ОС Microsoft Windows XP/Vista/7/8/10;

– Visual Studio Code;

– Internet Explorer 11 и выше или Google Chrome 45 и выше.

2.2. Интерфейс электронного учебного пособия

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

Электронное учебное пособие выполняется в оттенках синего цвета.

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

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

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

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

В центре располагается основной блок, в котором расположен контент электронного учебного пособия, занимающий основную часть экрана. Рабочая область электронного учебного пособия составляет 98% экрана.

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

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

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

Она представляет собой страницу приветствия. На главной странице размещено краткое описание электронного учебного пособия и языка HTML5, которому оно посвящено.

Также рекомендуется посетить раздел «Инструкции», прежде чем приступить к работе с пособием.

После перехода в раздел «Инструкции» открывается страница, которая содержит указания, инструкции и рекомендации по работе с электронным учебным пособием.

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

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

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

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

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

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

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

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

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

– теоретический блок, состоящий из 6 тем;

– практический блок, состоящий из 6 лабораторных работ;

– блок контроля, контрольного теста;

– справочник HTML5;

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

Раздел «Инструкции» содержит 3 подраздела: «Общие сведения», «Для преподавателей» и «Для обучаемого». В подразделе «Общие сведения» содержатся педагогический адрес, перечень всех тем теоретического блока и перечень всех лабораторных работ. В разделе «Для преподавателя» содержатся рекомендации для подготовки к работе и описание технологии обучения.

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

В состав теоретического блока входят следующие элементы:

– номер темы;

– название темы.

Номер темы и её название находятся на странице темы.

Тема 1. «HTML5. Основная структура».

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

Данная тема разбита на следующие разделы:

– «HTML5. Определения, краткая история»;

– «Категории моделей сайта»;

– «Новая идеология HTML5»;

– «Что включено в HTML5»;

– «Основная структура страницы на HTML5».

Тема 2. «Текст. Формы».

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

Также в тему включен материал о том, какие теги были удалены из HTML5. Данная тема разбита на следующие разделы:

– «Текст»;

– «Работа со структурами HTML5»;

– «Различие между Article и Section»;

– «Aria-структура документа и роли»;

– «Элементы Aside, Details, Figure, Mark, Address, Di, Hr, Ol, Small, Strong, B, U»;

– «Новые типы ввода данных»;

– «Типы ввода данных Email, Url, Date, Time, Month, Week, Number, Range, Search, Tel, Color»;

– «Новые атрибуты List, Datalist, Autofocus, Placeholder, Required, Multiple, Pattern, Autocomplete, Min, Max, Step, Form, Progress, Meter».

Тема 3. «Видео и аудио».

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

Данная тема разбита на следующие разделы:

– «Тег аудио»;

– «Использование атрибута source»;

– «Атрибуты элемента audio: Controls, Autoplay, Loop»;

– «Тег видео»;

– «Атрибуты элемента video: Autoplay, Controls, Poster, Muted, Height, Width, Loop, Preload, Src, Source»;

– «Видеофайлы разных форматов и карманные устройства».

Тема 4. «Холст».

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

Данная тема разбита на следующие разделы:

– «Тег холст»;

– «Самое главное о Холсте»;

– «Рисование с градиентами и узорами»;

– «Рисование путей»;

– «Использование трансформеров: замаскированные пиксели»;

– «Захват изображений»;

– «Работа с отдельными пикселами»;

– «Запись в файл»;

– «Визуализация текста».

Тема 5. «Хранение данных».

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

Данная тема разбита на следующие разделы:

– «Хранение данных»;

– «Варианты хранения»;

– «Веб-хранилище – хранилище «ключ/значение» в браузере»;

– «WebSQL – реляционная база данных на веб-странице»;