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

Размещено на http://www.allbest.ru/

Отделение информационных и дистанционно-образовательных технологий

Кафедра информационных технологий

ДИПЛОМНЫЙ ПРОЕКТ

РАЗРАБОТКА ОБУЧАЮЩЕЙ ПРОГРАММЫ ПО ИГРЕ НА ГИТАРЕ

Самойлов Д.И.

2017 г



Содержание

Введение

1. Теоретические основы создания программного продукта

1.1 Понятие и классификация web-технологий

1.2 Общие принципы создания web - страниц

1.3 Области применения языков программирования для разработки Web-приложений

1.4 Сравнительный анализ сред создания Web-приложений

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

2.1 Обоснование выбора среды разработки обучающей программы

2.2 Структура и содержание обучающей программы

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

Заключение

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



Введение

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

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

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

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

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

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

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

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

Для достижения поставленной цели необходимо решить ряд задач:

1) рассмотреть основные понятия web-технологий;

2) привести различные классификации web-приложений, используемых в обучающих программах;

3) выделить и усвоить основные понятия о создании обучающих программ на основе web-технологий.



1. Теоретические основы создания программного продукта

1.1 Понятие и классификация web-технологий

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

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

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

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

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

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

Информация, доступная пользователям Internet, располагается на компьютерах (Web-серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организована в виде Web-сайтов. Каждый из них имеет свое имя (адрес) в Internet. Web-сайт - это информация, представленная в определенном виде, которая располагается на Web-сервере и имеет свое имя. Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. Наиболее распространенными браузерами в настоящее время являются Internet Explorer и Netscape Navigator. Взависимости от того, какое имя сайта мы зададим в строке "Адрес", браузер будет загружать в свое окно соответствующую информацию.

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

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

В настоящее время с точки зрения назначения различают три основных типа порталов:

· Публичные, или горизонтальные, порталы (называемые иногда мегапорталами), такие как Yahoo, Lycos, Excite, Rambler. Такие порталы нередко являются результатом развития поисковых систем. Предназначены они для самой широкой аудитории, что отражается на содержании предоставляемой ими информации и услуг. Как правило, эта информация носит общий характер, равно как и предоставляемые услуги (электронная почта, новостные рассылки и так далее).

· Вертикальные порталы. Этот вид порталов предназначен для специфических видов рынка и обслуживает аудиторию, пользующуюся услугами этого рынка или работающую на нем. Примерами таких порталов могут служить, например, туристические агентства, предоставляющие услуги по бронированию мест в гостиницах, заказу и доставке билетов, доступу к картам и сведениям об автомобильных маршрутах, либо порталы типа B2B (business-to-business), позволяющие своим клиентам реализовывать совместные бизнес-операции (например, выбирать поставщиков и осуществлять закупку товаров, проводить аукционы).

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

Другие наиболее распространённые web-приложения:

· Региональные Интернет-порталы, универсальные по своему направлению, но ограниченные географией заинтересованных посетителей (e1.ru);

· Поисковые системы -- это Интернет-порталы, которые предназначены для того, чтобы предоставить их посетителю возможность найти сайты, на которых встречаются заданные слова или целые фразы (metabot.ru);

· Каталог -- это коллекция ссылок на сайты. Зачем же нужны каталоги, если есть поиск? Очень часто мы не знаем точно, что нам нужно, не можем это сформулировать парой слов (mail.ru);

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

· Форумы -- это специальные сайты или разделы на сайтах, предназначенные для того, чтобы посетители, оставляя свои сообщения, обменивались мнениями;

· Чаты - являются еще одним местом для общения в Интернет, только его назначение не обмен мнениями на какую-то тему, а просто времяпрепровождение;

· Файлы для скачивания;

· Фотогалереи;

· Элементы статистики;

· Хранение в интернете различной информации;

· Серверы почтовых рассылок, они предлагают услуги по доставке информации широкому кругу читателей (subscribe.ru);

· Интернет-магазины и аукционы (ozon.ru, molotok.ru).

1.2 Общие принципы создания web - страниц

World Wide Web (WWW) - это самая известная и самая популярная служба Интернета. Эта глобальная, распределенная по всему миру информационная гипертекстовая мультимедийная система позволяет соединить в одно целое информацию разных видов, которая сохраняется на разных компьютерах. Напомним, что информация в WWW распространяется в виде Web-страниц(Web-документов). Несколько Web-документов из одной темы, которые принадлежат одному владельцу или есть на одном компьютере, образуют Web-узел, который часто называют сайтом. Основным принципом использования Web-страниц является активизация гипертекстовых ссылок, с помощью которых можно осуществить переход в другие места Web-страницы или к другим Web-страницам. В основе WWW лежат два понятия: гипертекстовые ссылки и формат документов HTML. Благодаря гипертексту Web-страницу приобретают свойства интерактивности.

HTML (Hyper Text Markup Language) - это специальный язык форматирования текстовых электронных документов. Например, для печатного документа задаются такие параметры, как размер бумаги и полей, шрифты и их размеры и тому подобное. Поскольку электронные Web-документы предназначены для пересмотра на экране, причем заранее не известно, на каком компьютере это будет делаться, а, следовательно, неизвестны размеры окна программы - просмотрщика, шрифты, которые установлены на компьютере, и т.д., то язык HTML назначен как раз для того, чтобы оформлять электронные документы в расчете на то, что средства, которыми они будут пересматриваться, заранее неизвестны. Формирование документов языком HTML подобное программированию. Исходный текст документа состоит из последовательности команд, которые называют тэгами(tag). Во время пересмотра тэги срабатывают, и благодаря ним на экран выводятся запрограммированные элементы изображения. Например, если в начале абзаца стоит тэг, то весь абзац будет уровнен по центру окна, независимо от того, в каком окне осуществляется пересмотр документа и каким шрифтом он изображается. Тэги HTML позволяют выравнивать строки документа, руководить цветом фонона цветом текста, позволяют вставлять в текст иллюстрации, задавать заглавия разных уровней, строить таблицы, создавать гипертекстовые ссылки на другие документы.

Web-документ сохраняется и пересылается как файл с расширением html или htm (HTML-файл). Это обычные текстовые файлы-программы, написанные языком HTML. Отображаются такие файлы на экране иначе, чем они выглядят в HTML-файле. Для отображения HTML-файлов используют браузеры.

Типичный Web-документ состоит из текстовых блоков, рисунков, таблиц, линий, гиперссылок. Более сложные Web-документы содержат фреймы (вложены Web-страницы), элементы управления и вводу информации (кнопки, переключатели, поля вводу текста), динамические объекты (Java Applet, Java Script, ACTIVEX).

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

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

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

Тэги и ограничивают WWW-документ и записываются лишь ради формы. Команды и ограничивают заглавие страницы. Эти тэги также не являются обязательными, они помогают лучше структурировать страницу. Наконец, появляется в браузере в строке заглавию. Еще более важным является тэг, который позволяет описать собственно Web-документ. В этом месте размещается определенное количество параметров, которые определяют внешний вид документа. Эти параметры, например, определяют, как выглядит фон и цвет текста и какое изображение должно быть на заднем плане Web-страницы.

В завершение обращу внимание, что для создания Web-страниц дизайнеры используют гипертекстовые редакторы, например, Macromedia Dreamweaver, Microsoft FrontPage и другие, хотя при достаточном владении языком HTML можно писать Web-страницы в любом текстовом редакторе, например, Блокнот (NotePad). После написания программ файл нужно сохранить на диске с определенным названием и расширением .html ли .htm. Современные текстовые процессоры, например, MS Word, Lotus WordPerfect дают возможность создать Web-страницы методом конструирования без применения команд HTML, поскольку они генерируют эти команды автоматически. Общее название таких программ, которые имеют возможность автоматизированного создания Web-страниц без явного приложения пользователем языка HTML - Web-конструкторы.

Рассмотрим кое-что детальнее возможности конструктора, которые имеет программа MS Word. Чтобы создать Web-страницу или целый Web-сайт, нужно во время создания нового документу перейти на закладку Web-страницы и воспользоваться Мастером Web-страницы или создать новую страницу. Во втором случае алгоритм действий дизайнеров таков:

· Командой меню Формат->Фон задают цвет фона определенной текстурой.

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

· Создают списки, как в обычном текстовом редакторе.

· Вставляют горизонтальные линии командой меню Вставка>Горизонтальная линия, и выбирают тип линии.

· С помощью команды Таблица создают и форматируют таблицы.

· Используют команду Вставка для вставления картинок, фотографий, звука, гиперссылок и тому подобное.

· Записывают созданный файл как Документ HTML, и просматривают его браузером.

1.3 Области применения языков программирования для разработки Web-приложений

HTML

Язык разметки гипертекста (Hypertext Markup Language), или, как его чаще называют, HTML, -- это компьютерный язык, лежащий в основе World Wide Web (Всемирной Паутины). Благодаря языку HTML любой текст можно разметить, преобразовав его в гипертекст с последующей публикацией в Web.

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

PHP

В первую очередь PHP используется для создания скриптов, работающих на стороне сервера, для этого его, собственно, и придумали. PHP способен решать те же задачи, что и любые другие CGI-скрипты, в том числе обрабатывать данные html-форм, динамически генерировать html страницы и тому подобное. Но есть и другие области, где может использоваться PHP.

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

И последняя область - это создание GUI-приложений (графических интерфейсов), выполняющихся на стороне клиента.

Ajax

Ajax расшифровывается как Asynchronous Javascript And XML (Асинхронные Javascript и XML) и технологией в строгом смысле слова не является. Если в стандартном web-приложении обработкой всей информации занимается сервер, тогда как браузер отвечает только за взаимодействие с пользователем, передачу запросов и вывод поступившего HTML, то в Ajax-приложении между пользователем и сервером появляется еще один посредник - движок Ajax. Он определяет, какие запросы можно обработать "на месте", а за какими необходимо обращаться на сервер.

Поведение сервера тоже изменилось. Если раньше на каждый запрос сервер выдавал новую страницу, то теперь он отсылает лишь те данные, которые нужны клиенту, а HTML из них прямо в браузере формирует движок Ajax.

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

Где стоит использовать Ajax:

· Формы. Они очень медленны. Если асинхронно передавать данные, страница не перезагружается.

· Навигация в виде "дерева". Вообще, такая навигация - ужас. Простая топология намного удобнее, но если уж до этого дошло, лучше использовать Ajax.

· Голосования. Пользователю будет приятней оставить свой голос за несколько секунд, чем за 30-40.

· Фильтры. Часто на сайтах делают сортировку по дате, по имени. Ajax это будет значительно удобнее.

JavaScript

Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющихся как на стороне клиента, так и на стороне сервера. Синтаксис языка очень похож на синтаксис Java - поэтому его называют - Java-подобным.

Основные области применения JavaScript делятся на следующие категории:

· динамическое создание документа с помощью сценария;

· оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер;

· создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа;

· взаимодействие с пользователем при решении "локальных" задач, решаемых приложением JavaScript, встроенном в HTML-страницу.

VBScript

Язык создания сценариев VBScript разработан фирмой Microsoft, является подмножеством достаточно распространенного в среде программистов языка Visual Basic разработки прикладных программ Windows-приложений. Как и его родитель, язык VBScript достаточно прост и лёгок в изучении.

Преимуществом его применения для создания сценариев является возможность использования, с небольшими корректировками, ранее написанных процедур на языках Visual Basic и Visual Basic for Application.

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

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

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

Perl

Наиболее широко Perl используется для разработки инструментов системного администрирования, однако в последнее время он получил огромную популярность в области разработки Интернет-приложений: CGI-сценариев, систем автоматической обработки электронной почты и поддержки узлов Web.

Вот некоторые примеры задач, которые можно решать с помощью Perl:

· проверка пользователей Windows NT на несоответствие их статуса и возможностей;

· управление NT-сервисами из командной строки и дистанционно с локальной машины получение статистических данных на отдельной машине;

· может работать и с протоколом FTP;

· системная поддержка UNIX и Windows.



1.4 Сравнительный анализ сред создания Web-приложений

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

Macromedia Dreamweaver

Компания Macromedia продолжает делать Dreamweaver интуитивно понятной и простой в использовании программой. Мощные средства с одной стороны и простота в использовании - с другой, делают продукты Macromedia идеальными программным пакетом, как для профессиональных web-дизайнеров, так и для новичков. Продукты, входящие в пакет Macromedia, такие как: Flash, Firework, Dreamweaver - сделают работу более продуктивной, и при этом могут заменять друг друга (так, например, в любой из них можно создать кнопки). Такие продукты как: Sitespring, FreeHand - добавит эффективности при работе с клиентом.

У Dreamweaver множество плюсов:

Программа Dreamweaver поддерживает "чистый" HTML код, а также последние расширения DHTML и CSS.

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

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

Применяется "Динамическая проверка для различных браузеров".

Поддерживает расширения, как сторонних разработчиков, так и самой Macromedia (более 500).

С Dreamweaver поставляется библиотека элементов, которые можно применять на WEB-страницах, например, панель навигации, дескриптор авторского права и др.

Применяется для добавления мультимедийных средств на web-страницы и различных типов файлов от Flash и Java до RealAudio, интерактивных элементов, таких как поисковые системы, форумы, системы электронной коммерции.

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

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

Macromedia Fireworks

Fireworks это редактор графики с возможностью её дальнейшей оптимизации и размещения в сети. Используя большое разнообразие инструментальных средств, мы можем создавать и редактировать как векторную, так и растровую графику в пределах одного файла вместо того, чтобы переходить из одной программы в другую. Fireworks генерирует HTML - код и JavaScript и может легко создавать динамические меню и навигационные панели для наших интернет страниц. Эффективная оптимизация графических файлов позволяет максимально уменьшить их размер без потери качества.

Кроме этого имеется возможность редактировать макеты WEB-страниц. Например, в Fireworks 8 можно открыть графический файл на всю ширину будущего сайта, нарисовать необходимое графическое оформление, а затем разрезать его инструментом Slice Tool так, как должна выглядеть будущая таблица HTML-документа. После этого можно начинать доработку отдельных графических элементов и, в том числе, создавать активную графику, реагирующую на курсор, совсем не зная языка программирования (JavaScript).

Macromedia FreeHand

Один из трех профессиональных графических редакторов, ведущих с переменным успехом борьбу за первенство в работе с векторной графикой. FreeHand гораздо быстрее и проще своих конкурентов - CorelDraw и Adobe Illustrator. FreeHand прекрасно подходит для создания логотипов, рекламы, Web-графики и анимации.

Изготовители программы приложили немало усилий, чтобы максимально облегчить жизнь пользователям: интерфейс программы прост и нагляден, имеется множество "примочек", позволяющих быстро и легко выполнять сложные преобразования объектов или достичь самых разных художественных эффектов. FreeHand умеет экспортировать и импортировать файлы практически во всех широко распространенных форматах. Более того, в его состав входят настройки "горячих клавиш", эмулирующие другие распространенные программы (Adobe Illustrator, CorelDraw). Так что не надо переучиваться, переходя на FreeHand.

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

Документы FreeHand легко превращаются в web-страницы. Конечно, FreeHand - не HTML-редактор, но поддерживает базовые элементы HTML. С помощью FreeHand WEB-страницы легко снабдить Flash-анимацией. В анимационный клип вставляются текстовые блоки, группы объектов, а также объекты с контурами. Небольшой клип из объектов FreeHand создается буквально одной командой - остается лишь проследить за некоторыми настройками. Каждый кадр клипа помещается на отдельный слой; анимационный эффект достигается последовательным воспроизведением содержимого отдельных слоев. Но средства FreeHand не заменят редактор Macromedia Flash.

Macromedia FLASH

Создаёт привлекательные интерактивные мультимедийные презентации, для WEB-сайтов. Для Flash характерна векторная графика и анимация, хотя эта программа может быть также использована для манипулирования или отображения растровой графики, монтажа видеоматериала и даже для манипулирования звуковыми файлами.

Flаsh-содержимое публикуется в компактных файлах формата SWF для последующего показа на самых разных платформах с помощью Flаsh-проигрывателя. Во время воспроизведения файла формата SWF в оперативном режиме в него можно динамически загружать такое содержимое, как звуковые файлы формата МР3, Flash-видео и изображения формата JPEG. Flash-проигрыватель позволяет подключаться к источникам данных, чтобы объединить их с базой данных, XML или web-службами. Благодаря всем этим возможностям привлекательные фрагменты анимации и эффекты могут быть введены в приложения, управляемые данными. Flash имеет поддержку антиалайсинг (сглаживание контуров с помощью смешения соседних цветов). Так как этот формат файла основан на векторной графике, объект сохраняет качество изображения при любом разрешении и идеален для создания кадров анимации.

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

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

Macromedia HomeSite

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

Гибкость интерфейса - это одна из сильнейших сторон продукта. Любой пользователь с легкостью сможет настроить интерфейс HomeSite в соответствии со своими предпочтениями и потребностями.

В процессе работы пользователь может видеть рабочую область с двумя вкладками - Browse и Edit. То есть программирование происходит во вкладке Edit, а результат можно увидеть, если выбрать вкладку Browse. При создании новой страницы на поле редактирования автоматически появляются некоторые теги вроде HTML и BODY. Это шаблон, загружаемый при создании новой страницы. Его содержание можно менять.

В HomeSite очень легко строить архитектуру сайта. Этому способствует панель Quick Bar с системой вкладок с готовыми тегами. Теги в этих вкладках самые разные - от простого вроде параграфа до java-скриптов. Можно вообще оставить одну вкладку, добавив в нее все необходимые теги через меню Customize. Также можно самому создавать теги или их комбинации. При нажатии на кнопку с определенным тегом появляется окно, где можно настроить опции тега и указать его атрибуты. Поддерживает режим WYSIWYG со всеми его плюсами и минусами.

Для скорости работы здесь имеется множество средств редактирования тегов. Это, например, такие функции, как Tag Completion, Tag Editors и Tag Insight. Они существенно облегчают редактирование тегов и их атрибутов. Так же есть заготовки кода (Code Snippets).

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

Microsoft FrontPage

Является наиболее популярным HTML-редактором на рынке, главным образом за счёт популярности пакета Microsoft Office. В программе предлагаются мощные функции и привлекательный пакет программ, включая Image Composer, который предназначен для создания изображений (Приложение В). Во FrontPage также содержатся WEB-компоненты, необходимые для добавления интерактивных свойств web-узлу. Microsoft FrontPage является классическим WYSIWYG-редактором, в котором, однако, присутствует возможность ручной правки кода.

В программе имеется три режима работы с документом: Normal, HTML и Preview.

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

В режиме HTML осуществляется подсветка синтаксиса, однако довольно посредственную - дескрипторы выделены, синим цветом, все остальное - черного цвета.

В режиме Preview можно посмотреть, как будет выглядеть ваша страница в окне браузера.

FrontPage имеет конструктор таблиц, существенно облегчающий их создание. Одним из основных преимуществ программы является большое количество имеющихся шаблонов, позволяющих пользователю не ломать голову над дизайном своего проекта. Выбрав необходимый шаблон, можем приступать непосредственно к наполнению страницы контентом. Вот тут-то и ощущается вся прелесть FrontPage: процесс создания HTML-страницы ничем не отличается от создания обычного текстового документа в Microsoft Word. Нам доступны те же средства для редактирования текста, смены его форматирования, создания и редактирования таблиц, вставки различных объектов и изображений и всё это без знания HTML. FrontPage делит рабочую область на несколько блоков, содержащих определенные элементы страницы - рисунки, текст, заголовки и проч. Для каждого блока можно назначить свои параметры форматирования и расположения его относительно страницы.

Минусы: небольшой набор инструментов разработки, невозможность отдельного приобретения программы. Microsoft FrontPage неплохо подойдет в качестве HTML-редактора на первое время, однако с ростом потребностей его возможностей может не хватить. Есть и обратная сторона медали - сложность и громоздкость полученного кода, что естественно, сказывается на конечном размере документа. Также в дальнейшем будет весьма сложно вносить изменения в подобный документ. Но это скорее недостаток не конкретного продукта, а практически всех WYSIWYG-редакторов (What You See Is What You Get - "что видите, то и получите").

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

Microsoft Word

Несмотря на то, что Microsoft Word является текстовым редактором и по существу не считается HTML-редактором. Он имеет возможность сохранять файлы в формате HTML. В результате мы можем столкнуться со страницами, которые тем или иным способом были созданы в Microsoft Word. Проблемы в HTML-коде, полученном из редактора аналогичны проблемам FrontPage: обе эти программы создают избыточный код, который не во всём соответствует HTML-стандарта. Огромное количество людей, использующих Word в своей повседневной работе, становятся потенциальными разработчиками HTML-документов.

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

Adobe Illustrator

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

Web-страницы могут содержать много элементов - текст HTML, растровые изображения, векторную графику. В Illustrator можно использовать фрагменты для определения границ различных web-элементов в объекте. Web-страница делится на ячейки которые представляются в трёх типах: изображения, без изображения, HTML-текст.

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

Карты ссылок позволяют связать одну или несколько областей изображения (так называемых активных областей) с URL-адресом. Когда щелкаем по активной области, web-браузер загружает связанный с ней файл.

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

Adobe Photoshop

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

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

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

CorelDraw

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

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

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

CorelDraw демонстрирует качества мощного визуального редактора web-страниц: пользователь получает возможность генерировать развитые HTML-документы, которые могут включать сценарии JavaScript и таблицы стилей CSS.

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

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

Программа-конструктор

HTML конструктор - это общедоступный и бесплатный инструмент для редактирования и создания вашего собственного проекта. Он даёт пользователям возможность быстрее и легко создать свой интернет проект на основе готового шаблона, путём добавления готовых блоков на вашу страницу (например, фотогалерея, новости и прочее), так же при помощи него можно настроить собственный дизайн или изменить внешний вид вашего проекта. Чтобы пользоваться конструктором, не нужно обладать какими-то специальными знаниями и техническими навыками. Не нужно также устанавливать никакого специального программного обеспечения и дополнительного оборудования. Всё что вам необходимо - это ваш браузер. Главный принцип работы конструктора - программа создаётся моментально, а позже редактируется и наполняется благодаря размещению и настройки готовых блоков. Любой из этих блоков, может быть размещён на конкретные страницы проекта. Или дублироваться на всех. Их можно настраивать, перемещать, редактировать.

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

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

Ещё один важный момент -- это эстетическая сторона. Каждый день при помощи конструктора проектов создаются сотни бесплатных проектов, и каждому из них система предлагает одни и те же шаблоны. В итоге получается огромное количество проектов клонов, похожих друг на друга как две капли воды. Это означает, что дизайн вашего проекта не будет уникальным. Но это не составит особых проблем людям знакомыми с HTML и CSS. Ведь зная эти языки, можно переделать любой шаблон на 99,9 процентов.



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

2.1 Обоснование выбора среды разработки обучающей программы

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

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

Кроме того, HTML никогда не стоит на месте в плане развития, без конца появляются новые версии, которую позволяют оптимизировать и облегчить работу, улучшая при этом общую картину конечного результата. Последняя версия HTML - это HTML 5.

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

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

Для написания страниц на языке гипертекстовой разметки HTML вам достаточно лишь открыть «Блокнот» (имеющийся в рабочем арсенале Windows). Но для большего удобства рекомендуется NotePad++ или же более профессиональный редактор Dreamweaver.

Они удобны тем, что адаптированы для работы с HTML и удобным образом производят выделение тегов и атрибутов.

2.2 Структура и содержание обучающей программы

Обучающая программа «Самоучитель игры на гитаре» предназначена для самостоятельного обучения пользователями как в сети Интернет, так и используя локальную версию программы.

Обучающая программа состоит из шести основных разделов. В разделах имеются подразделы.

Ниже перечислены наименования разделов и их описание.

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

Раздел «Самоучитель». Данный раздел содержит обучающие материалы и сведены в девять уроков (рис. 2.2):

· Урок №1. Правильная посадка

· Урок №2. Постановка рук, обозначения

· Урок №3. Метроном

· Урок №4. Звукоизвлечение

· Урок №5. Табулатуры

· Урок №6. Аккорды

· Урок №7. Гитарный бой

· Урок №8. Нотная грамота

· Урок №9. Игра медиатором

Следующий раздел проекта называется «Статьи» (рис. 2.3). В этом разделе представлены следующие материалы:

· Как выбрать медиатор

· Как настроить гитару

· Как хранить гитару

· Струны для гитары. Установка и замена струн на гитаре

· Как выбрать акустическую гитару

Раздел «Видео». В разделе «Видео» содержатся некоторые видеоматериалы, где представлены уже конечные результаты в виде игр на гитаре после обучения игре на гитаре (рис. 2.4).

Раздел «Об авторе» содержит сведения о разработчике проекта (рис. 2.5).

Раздел «Карта проекта». Данный раздел отражает древовидную структуру всего проекта.

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

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

Для создания проекта в HTML конструкторе необходимо выполнить следующие действия:

- Щелкнуть по кнопке «Новый проект» в левом верхнем углу экрана.

- В окне «Шаг 1: Выбор шаблона» нужно выбрать подходящий дизайн. Дизайн проекта можно изменить в любой момент.

- Щелкнуть по кнопке «Вперед». Появится окно «Шаг 2: Выбор расположения объекта». Здесь можно выбрать или создать папку для сохранения проекта.

- Создать отдельную папку для вашего проекта (есть возможность вести несколько проектов, и каждый из них должен располагаться в отдельной папке). Для этого необходимо щелкнуть кнопку «Создать папку» и ввести ее имя.

- Щелкнуть по кнопке «ОК», результат - папка создана.

- Еще раз щелкнуть по кнопке «ОК». Окно с проектом будет загружено.

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

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

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

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

Каждая страница имеет заголовок, отображаемый только на этой странице. Это выделенное пунктиром поле, расположенное под заголовком проекта. Заголовок - это название страницы, отображающее ее содержание. Кроме текста в заголовок могут быть помещены небольшие изображения и Flash-анимации. Мы находимся на первой странице проекта. В заголовке такой странице можно написать «Главная», «Добро пожаловать!», «О колледже» и. т.п.

Добавление и форматирование текста

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

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

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

Добавление иллюстраций

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

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

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

...