Разработка обучающей программы по игре на гитаре

Вставка Flash-анимации

При работе с данным конструктором есть возможность добавления анимации. Описание этой процедуры приведено ниже.

Добавим Flash-анимацию на страницу (для этого необходимо знать его размер в пикселях). Для этого поставим курсор, в место, куда хотим вставить анимацию и щелкнем кнопку «Flash». Откроется окно проводника, в котором необходимо указать путь к вашему Flash-файлу. Выберем Flash-файл (расширение *.swf) и нажмем на кнопку «Открыть». Откроется окно «Свойства Flash», в котором мы можем просмотреть наш Flash-файл. В полях «Ширина» и «Высота» установим размеры анимации. И щелкнем на кнопку «ОК». Анимация вставилась на страницу. В режиме редактирования Flash можно просмотреть только в таком виде, но после конвертации в HTML мы его увидим.

Позиционирование объектов с помощью таблиц

Покажем, как еще можно располагать объекты на странице.

Самый распространенный метод позиционирования объектов на странице - позиционирование с помощью таблиц. Добавим таблицу, поставим курсор в начало рабочего поля и щелкнем по кнопке «Таблица». Появится окно «Свойства таблицы». Выставим количество столбцов равным 2 и количество строк 1. Выставим высоту и ширину таблицы. Ширина и высота могут быть фиксированными и не фиксированными. Фиксированная таблица - это таблица с жестко заданными размерами. Не фиксированная таблица - это таблица, размеры которой определяет помещенный в нее объект (картинка, Flash - анимация, текст, другая таблица). Сделаем нашу таблицу не фиксированной высоты и ширины. Так же, как и в свойствах изображения если указана толщина бордюра, можно выбрать ее цвет, но сделаем толщину бордюра равной 0. Под таблицу можно подложить фоновое изображение. Для этого необходимо щелкнуть кнопку «Вставка изображения». На фоновых изображениях чаще всего плохо читаются тексты. Если снять галочку напротив надписи: «Прозрачный», станет активной кнопка «Сменить цвет» и можно будет выбрать цвет фона под таблицей. Но, оставим фоны как есть. И щелкнем на «ОК». Табличка такая маленькая, потому что она не фиксированных размеров и в нее еще не помещено никаких объектов. Перетащим наше изображение в первый столбец таблицы. Для этого щелкнем по нему и, не отпуская левую клавишу мышки, переместим, так, чтобы курсор замигал в первом столбце. Отпустим левую клавишу мышки. Картинка переместилась. Теперь поместим во второй столбец наш текст. Для этого выделим его и, не отпуская левую клавишу мышки, перетащим так, чтобы курсор замигал во втором столбце. Отпустим левую клавишу мыши. Текст вставился во второй столбец. Снимем выделение, щелкнув мышкой в любом месте рабочего поля. Для удобства работы в режиме редактирования таблица отображается на странице пунктиром, после конвертации в HTML рамка таблицы исчезнет (т. к. бордюр таблицы равен 0).

Вставка сносок

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

Конвертация проекта в HTML и просмотр результата

Чтобы посмотреть, как будет выглядеть страничка в сети Интернет, проведем конвертацию. Для этого щелкнем кнопку «Конвертировать в HTML и просмотреть». Появится окно «Выбор варианта конвертации». Это первая конвертация, конвертироваться будет весь проект, нажимаем на «ОК». Появится окно «Экспорт в HTML». Когда конвертация завершится, появится окно браузера с первой страницей вашего проекта. Отобразится флэш-анимация и исчезнут границы таблицы те, что были равны 0).

Добавление страниц типа «фотоальбом»

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

Рисунок 2.8 - раздел добавления видео и файлов в проект

Параметры фотоальбома

Введем название для нашего фотоальбома. Выставим количество фотографий, отображаемых в одной строке. Например, 3. Для страницы «Фотоальбом» существуют такие параметры, как максимальные размеры привью и основного изображения. Предпросмотр - это небольшое изображение, которое будет отображено на странице фотоальбома, по щелчку мышки на привью будет подниматься большое изображение. Размеры, указанные по умолчанию, оптимальны, поэтому оставим как есть. Выставим выравнивание фотографии. Выберем положение подписи к фотографии. Щелкнем по кнопке «Добавить». Страница под своим названием добавилась в проект. Следует обратить внимание, что она также добавилась в меню проекта.

Наполнение фотоальбома

Добавим первую фотографию, для этого щелкнем левой клавишей мышки по полю, где она будет размещена. Появится окно «Изменение блока изображения». Выберем «Добавить/Изменить изображение» (выбрано по умолчанию) и щелкнем по кнопке «ОК». Появится окно проводника, где необходимо указать путь к необходимому вам изображению. Не забывайте пользоваться функцией «Эскизы страниц». Выберем изображение и щелкнем по кнопке «Открыть». Откроется окно «Свойства изображения». Щелкнем по кнопке «ОК». Первая фотография вставилась в фотоальбом. Добавим подпись под изображением. Подпись под изображением можно редактировать как обычный текст (изменять шрифт, цвет, размер, выравнивание и т. д.). Отредактируем подпись. Аналогичным образом заполним ряд до конца.

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

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

Работа с блоками

Для изменения положения того или иного блока на странице необходимо поставить курсор в текстовое поле любого из блоков. Рамка блока выделится отличным, от других рамок, цветом. Такой блок называется активным. Щелкнем по небольшой черной стрелочке, рядом с кнопкой «Переместить блок» на панели управления. Откроется выпадающее меню с выбором, куда можно переместить блок. Выберем подходящий пункт. Например, «Переместить в начало». Если необходимо удалить ненужный блок, поставьте курсор в текстовое поле этого блока. И щелкните по кнопке «Удалить блок». Появится окно «Удаление блока». Щелкнем по кнопке «ОК».

Пакетная вставка изображений

В Конструкторе есть возможность добавлять несколько изображений за один раз. Поставим курсор в текстовое поле одного из блоков. Выберем пункт меню «Страница» - «Добавить группу изображений» и выберем, куда мы хотим добавить новые изображения. Например, «После активного блока». Появится окно проводника, в котором необходимо указать размещение ваших изображений. Не нужно забывать пользоваться отображением в виде «Эскизы страниц». Для выбора нескольких изображений, если они идут, подряд удерживайте кнопку «Shift» и щелчками левой кнопки мыши выделите первое и последнее изображение в последовательности, изображения между первым и последним выделятся автоматически. Если необходимо выбрать не следующие подряд изображения, удерживайте кнопку «Ctrl» и щелчками левой кнопки мыши выделяйте нужные изображения. Выбрав изображения, щелкните мышкой по кнопке «Открыть». Изображения добавились на страницу.

Тематическая разбивка фотоальбома

Заполним текстовое поле над первой строчкой и поставим курсор в текстовое поле последнего блока первой строки. Щелкнем по маленькой черной стрелке, рядом с кнопкой «Добавить блок». Раскроется выпадающее меню. Выберем в нем «Добавить текстовый блок после активного блока»

Вставка ссылок

Введем текст на страницу. Щелкну по кнопке «Ссылка» на панели управления. Появится окно «Создание ссылок». Выберем пункт «Ссылка на локальный файл». И щелкнем по кнопке «Выбрать файл». Появится окно проводника, в котором необходимо указать путь помещаемому на проект документу (например, тексту приказа). Выберем нужный документ и щелкнем кнопку «Открыть». Возвращаемся в окно «Создание ссылок», в котором теперь указана ссылка на размещение файла. Щелкнем по кнопке «ОК». После щелчка на кнопку «ОК» произошло копирование документа в папку проекта. Чтобы убедится в этом поставьте курсор внутрь текста «Приказ 1». В нижнем поле Конструктора будет показано реальное размещение файла. После конвертации при щелчке по ссылку будет подниматься окно текстового редактора, содержащее документ. Поскольку Конструктор копирует документ в собственную папку, при изменении этого документа необходимо обновить ссылку. Для этого необходимо щелкнуть правой кнопкой мышки по тексту, содержащему ссылку, и выбрать пункт меню «Свойства ссылки». Снова откроется окно «Создание ссылок», содержащее ссылку на файл, скопированный в папку с вашим проектом. Щелкнув по кнопке «Выбрать файл», необходимо указать в проводнике место, где расположен измененный документ, и Конструктор обновит его версию, заменив старый документ, на указанный. Закроем окно «Выбрать файл», щелкнув по кнопке «Отмена». При необходимости можно ставить ссылки на страницы внутри проекта, для этого выберите из выпадающего меню нужную вам страницу. Далее выберем, в каком окне браузера будет открыта ссылка. При выборе «В этом окне» - страница загрузится в том окне браузера, в котором был загружен сам проект. «В новом окне» - будет образовано еще одно окно браузера и в нем будет загружена ссылка. Оставим «В этом окне». Если страниц в проекте много, то выпадающее меню со списком страниц проекта использовать неудобно. Для этого в пункте «Ссылка на страницу проекта» организован поиск. В пустом текстовом поле напротив кнопки «Найти» наберем слово, которое содержится в названии страницы. Например, «Архив». Станет активной кнопка «Найти», щелкнем по ней. В выпадающем меню останутся только те страницы, названия которых содержат введенное слово (если такие страницы существуют). Для нас это страницы, содержащие слово «архив». Чтобы вернуть все страницы в список щелкнем по кнопке «Показать все». Меню со списком страниц восстановится. Выберем в нем страницу, на которую нужно сделать ссылку и щелкнем по кнопке «ОК».

Создание карты проекта

Добавим еще одну страницу (Кнопка «Добавить страницу»). Оставим тип страницы «Универсальная». Назовем страницу «Карта проекта» и щелкнем «Добавить». Добавилась новая страница, поставим курсор в рабочее поле. Выберем пункт меню «Вставка» - «Оглавление». Список ссылок на страницы проекта вставился на страницу.

Рисунок 2.9 - основные меню формирования «Карты проекта»

Оглавление с чекбоксами

Рассмотрим еще одну функцию Конструктора - оглавление с чекбоксами. Эта функция более интересна при создании электронных курсов.

Поставим курсор через одну строчку под картой проекта (с помощью кнопки Enter). Выберем пункт меню «Вставка» - «Оглавление с чекбоксами». Оглавление с чекбоксами вставилось на страницу. Проведем конвертацию в HTML (кнопка конвертировать в HTML и просмотреть). В появившемся окне браузера перейдем на страницу «Карта проекта теперь перейдем к оглавлению с чекбоксами. Щелкнем левой кнопкой мышки по рамке рядом с пунктом оглавления. Рядом с пунктом оглавления появятся значки. Щелкнем мышкой по одному из них. Например, по зеленой галочке. Значок установился напротив пункта оглавления. Таким образом, человек, работающий с электронным пособием, может помечать его темы для дальнейшего обучения.

Выставим еще несколько значков напротив пунктов оглавления. Теперь перейдем на другую страницу проекта. И вернемся с нее обратно на страницу «Карта проекта». Значки сохранились. Установки сохраняются в «Cookie» (файлах-ключиках). Пользователь может закрыть браузер и даже выключить компьютер, но все, что он выбрал во время работы, сохранится, и он сможет пользоваться пометками во время следующего сеанса.

Управление навигацией: редактор меню проекта

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

Щелкнем мышкой по кнопке «Редактор меню» на панели инструментов. Появится окно «Редактор меню». В левой части расположен список всех страниц проекта. Справа располагаются все меню с их содержимым. Пока у нас есть только левое вертикальное меню. Чтобы увидеть список входящих в него страниц, щелкнем по плюсику рядом с ним. Раскроется список. В этом списке можно изменить названия пунктов меню, изменить порядок их расположения и создать подменю.

Добавление и воспроизведение видео в проекте

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

1. Войти в аккаунт YouTube.

2. Нажать кнопку добавить видео в верхней части страницы.

3. Задать тип доступа.

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

5. Во время загрузки ввести основную информацию о ролике и настроить дополнительные параметры.

6. Чтобы добавить видео на YouTube, необходимо нажать «Опубликовать». Если выбран "Открытый доступ", ролик сразу публикуется на YouTube. В остальных случаях следует нажать либо готово, чтобы просто загрузить ролик на сайт, либо поделиться, чтобы открыть к нему доступ.

7. Пока не будет нажата кнопка «Опубликовать», видео доступно только разработчику. Автор видео сможет в любой момент поделиться добавленным роликом, изменив настройки в Менеджере видео.

Рисунок 2.10 - виджет конструктора по работе с видео

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

1. В контентном меню в левой части экрана следует нажать на Виджеты и в раскрывшемся меню на HTML-виджеты.

2. Далее нужно кликнуть два раза на картинку виджета, чтобы его редактировать (или нажать на Настройки в нижнем меню редактора).

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

4. Далее копируем код ролика ниже.

5. Вставляем код в HTML-виджет.

6. Изменяем размер HTML-виджета так, чтобы поместился весь видеоролик.

Рисунок 2.11 - основное окно конструктора по работе с видео

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

Найдите третий заголовок и прямо под ним пропишите следующий код:

<video src="video/mult.mp4" controls></video>

Если вы откроете страницу в браузере, то увидите, что Ваше видео добавилось под третьим заголовком. Вот так просто! Всего одной строчкой.

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

Параметр «controls» добавляет панель управления для видео.

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

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

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

Конвертировать файл можно с помощью сервиса online-convert.com . После конвертации сохраните полученный файл в папку «video», а код для вставки видео поменяйте на следующий:

<video controls>

<source src="video/mult.mp4" type="video/mp4">

<source src="video/mult.ogv" type="video/ogg">

</video>

Однако, есть еще одна загвоздка, касающаяся старых браузеров, которые не понимают html5-теги. К сожалению, переход к новым стандартам также требует и умения находить обходные решения.
Если для браузера незнаком какой-то тег, то он его просто игнорирует, но при этом не игнорирует содержимое внутри неизвестного ему элемента. Следовательно, мы можем добавить обходное решение прямо в наш тег для вставки видео. Код при этом может выглядеть вот так:

<video controls>

<source src="video/mult.mp4" type="video/mp4">

<source src="video/mult.ogv" type="video/ogg">

<iframe width="560" height="315" allowfullscreen></iframe>

</video>

С таким кодом новые версии браузеров успешно обработают наш элемент «video», а если вдруг пользователь откроет страницу при помощи старого браузера, то незнакомый тег «video» будет проигнорирован, но тег «iframe» будет успешно обработан и видео подгрузится с Youtube.

Заключение

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

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

В процессе работы были выполнены цели и задачи, поставленные при разработке данного проекта.

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

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

В пояснительной записке дипломного проекта было рассмотрено 2 раздела.

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

В разделе «Разработка обучающей программы», изложено обоснование выбора среды разработки обучающей программы, рассмотрены структура и содержание обучающей программы, изложено подробное руководство по разработке и применению обучающей программы.

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

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

Список использованных источников

1. Борисенко А.А. Web-дизайн. Просто как дважды два. - М.: Эксмо, 2008.- 320 с.

2. Джамса Крис. Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS,JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Пер с англ./Крис Джамса, Конрад Кинг, Энди Андерсон - М.: ООО "ДиаСофтЮП", 2005.- 672 с.

1. Инькова Н. А., Зайцева Е. А., Кузьмина Н. В., Толстых С. Г. Создание Web-сайтов: Учебно-методическое пособие. Ч. 5. Тамбов: Изд-во Тамб. гос. техн. ун-та, 2005. - 56 с.

2. Орлов Л. В. Web-сайт без секретов. / Л. В. Орлов. - 2-е изд. - М.: Бук-пресс, 2006. - 512 с.

3. Полонская Е.Л. Язык HTML. Самоучитель.: - М.: Издательский дом "Вильяме", 2005.-- 320 с.

4. Создание Web-страниц и Web-сайтов. Самоучитель : [учеб. пособие] / под ред. В. Н. Печникова. - М.: Изд-во Триумф, 2006.-- 464 с.

5. Якушев, Л. В. Начинаем работать в Интернет. Краткое руководство. - М.: Издательский дом "Вильяме", 2006. --128 с

6. Вирджиния ДеБольт; пер. с англ. И.С. Елов. - HTML и CSS совместное использование/ М.:НТ Пресс, 2006. - 504 с. :ил. - (Школа Web-мастерства).

7. Кастро, Э. HTML и CSS для создания web-страниц / Э. Кастро - M. : НТ Пресс, 2006 - 144 с.

8. Кожемякин, А.А. HTML и CSS в примерах. Создание Web-страниц / А.А.Кожемякин - Альтекс ISBN: 5-94271-017-1, 2004 г., 416 с.

9. Кэмпбел, М. Строим Web-сайты. Дизайн. HTML. CSS / Марк Кэмпбел - Триумф, 2006 г., 480 с.

10. Дмитрий Самойлов. Электронная музыка для всех. -- М.: «Союзпечать», 2014.

11. Ломов, А.Ю. HTML, CSS, скрипты: практика создания сайтов / А.Ю. Ломов - ISBN: 5-94157-698-6, 2005 г., 416 с.

12. Мартинес, А. Секреты создания недорогого Web-сайта / А. Мартинес - ISBN: 5-94074-162-2, 2002 г., 416 ст.

13. Мархвида, И. В. Создание WEB-страниц: HTML, CSS, JavaScript / И. В. Мархвида - Новое знание, 2002 г., 352 с.

14. Мальчук, Е. В. HTML и CSS. Самоучитель / Е. В. Мальчук - Вильямс, 2006 г., 416 с.

15. Мержевич, В. Вёрстка веб-страниц / Влад Мержевич - HTMLBOOKS, 2011 г., 378 с.

16. Муссиано, Ч. HTML и XHTML. Подробное руководство / Чак Муссиано, Билл Кеннеди - М.: Символ-Плюс 2011 г., 752 с.

17. Панфилов, К. По ту сторону веб-страницы / Кирилл Панфилов - ДМК Пресс, 2008 г., 440 с.

18. Пауэлл, Т. Полное руководство по HTML / Томас Пауэл - Попурри, ISBN: 985-438-536-1, 2000 г., 912 с.

19. Петюшкин, А. HTML / Алексей Петюшкин - БХВ-Петербург, 2003 г., 256 с.

20. Прохоренок, Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. А. Прохоренок - БХВ-Петербург, 2011 г., 912 с.

21. Скляр, Д. Актуальные принципы Web-дизайна / Джоел Скляр - Эксмо, 2007 г., 464 с.

22. Хеник, Б. HTML и CSS Путь к совершенству / Б. Хеник - М.: изд. Питер, 2011 г.

23. Хольцшлаг, М. Языки HTML и CSS: для создания Web-сайтов: Учебное пособие/ М. Хольцшлаг - ISBN: 5-89392-146-1, октябрь 2005 г., 304 с.

24. Якобсен, Й. Концепция разработки Web-сайтов. Как успешно разработать Web-сайт с применением мультимедиа-технологий / Й. Якобсен - НТ Пресс (Школа Web-мастерства), ISBN: 5-477-00130-5, 2006 г.,512 с.

25. Агеев Д., Большая книга гитариста, Питер, PDF + DVD, 2012.

Размещено на Allbest.ru