Создание сайта для размещения музыки

КОМПЛЕКСНЫЙ КУРСОВОЙ ПРОЕКТ на тему «Создание сайта для размещения музыки» .

• Введение
• 1. Анализ состояния разработак сайтов содержащих музыку
• 1.1 Обоснование актуальности разработки, формулирование цели и задания разработки
• 1.2 Обоснование выбора технологий и дизайнерских решений
• 2. Создание мультимедийного продукта
• 2.1 Разработка концепции
• 2.2 Проектирование содержания и среды представления приложения
• 3. Разработка сайта
• 3.1 Описание основных дизайнерских решений
• 3.2 Верстка страниц и таблиц стилей для форматирования

3.3 Функциональные элементы, реализованные на стороне клиента.

• 3.4 Создание контента
• Выводы
• Список используемых источников
• Приложения
• Введение
• Комплексный курсовой проект, который охватывает такие дисциплины как «Основы композиции и дизайна», «Основы Web-дизайна», «Технологии подготовки и производства мультимедийных изданий» направленный на систематизацию, углубление и закрепление знаний полученных при изучении ряда дисциплин.
• Цель курсового проекта получение практических навыков и углубление теоретических знаний в ходе самостоятельного создания и публикации мультимедийного продукта.
• Курсовой проект включает все этапы создания издания (разработка концепции, обработка текста, обработка изображений, редактирование, верстка), и размещение его в сети Интернет.
• Основные задания:
• · самостоятельное решение заданий проектирования с использованием полученных знаний и специальных литературных источников;
• · самостоятельный анализ особенностей издания с учетом его назначения и существующих аналогов с использованием литературных источников и сети Интернет;
• · разработка концепции, сценария и дизайна всех составляющих издания с учетом особенностей и назначения;
• · создание мультимедийного издания;
• · создание сайта соответствующего назначения;
• · тестирование публикации;
• · подготовка студентов к выполнению дипломного проекта.
• 1. Анализ состояния разработка сайтов содержащих музыку
• 1.1 Обоснование актуальности разработки, формулирование цели и задания разработки
• Много людей хотят просмотреть тот или иной текст любимой песни, но не могут найти его. Другие хотят услышать любимую музыку в исполнении другого исполнителя.
• Музыка нужна людям для того чтобы хотеть жить! С миром звуков связано почти все, что происходит в природе. Во всяком случае, в живой природе. Можно считать доказанным, что музыка влияет и на нас с вами, и на растения, и на животных.
• Музыка все чаще служит здоровью. Появилась уже особая, пусть и не очень обширная пока, область медицины — музыкотерапия.
• Под музыку люди поют, танцуют, устраивают свадьбы. Наши далекие предки создавали музыкальные инструменты, которые использовали в религиозных и культовых обрядах. В московском Историческом музее хранятся две флейты, сделанные из трубчатых костей животных. Это самые древние музыкальные инструменты, найденные в европейской части России, в частности, на берегу озера в Мещерах. Значит, еще 4.000 лет назад первобытные люди нуждались в средствах, с помощью которых можно было издавать определенные звуки, поднимавшие эмоциональный, победный тонус или завораживавшие, гипнотизировавшие ритмы. Во времена древней Спарты воины шли в бой под звуки деревянных инструментов.
• Музыка рисует картину пробуждающейся весны и как символ её — подснежник, выглядывающий из-под снега, нежный, хрупкий. Прислушайтесь, и вы почувствуете, как на душе становится теплее, спокойнее. Такие мелодии врачуют, оздоровляют.
• Создание сайта в век компьютерных технологий, когда только самый ленивый не обращался к интернету для того, чтобы найти какую-то интересующую его информацию, а именно музыку и тексты песен.
• Создание сайта с размещенной на нем музыкой дает такие преимущества:
• — возможность размещения рекламы, для получения прибыли, так как музыкальные сайты всегда пользовались популярностью среди пользователей;
• — возможность продвижения своего сайта через поисковые системы, что может принести огромное количество пользователей;
• — наличие сайта с текстами песен привлекает любителей петь песни.
• Сделать музыкальный сайт непросто, ведь у таких сайтов есть некоторые особенности. Дизайн его должен быть индивидуальным, он должен быть выполнен в интересном стиле, который привлечет внимание пользователей. Ведь первое впечатление у того, кто на этот сайт заходит, будет складываться на основе именно его дизайна. Неряшливый, пустой или просто «незаконченный» вид сайта может убить все впечатление. Поэтому, к созданию сайта нужно подходить ответственно.
• То есть цель моего проекта: создать сайт, на котором будет в лучшем и доступном виде представлены музыка и тексты песен, а также данные о исполнителях .
• 1.2 Обоснование выбора технологий и дизайнерских решений
• Проанализировав существующие музыкальные порталы (рис. 1, рис. 2, рис. 3) могу сделать вывод, что: большинство из них выполнены в стили минимализм, контентом являются изображения и текст, для оформления сайта используется не более двух основных цветов, для удобства прослушивания музыки используются проигрыватели, которые позволяют увеличить или уменьшить громкость, перемотать песню и другие функции.
• Соответственно мною также был выбран минимализм с элементами ретро. Основное его преимущество в том, что он не отвлекает внимания от прослушивания и чтения текстов песен, то есть музыка сама создает атмосферу, стиль и настроение сайта. Кроме этого он не формирует впечатление о музыканте и его работах, данный стиль выполняет исключительно связующую функцию (объединяет отдельные части сайта в единое целое). А это как раз то, что нужно — показать результаты роботы музыканта, а не результаты работы веб-дизайнера.
• Рис. 1. Музыкальный сайт ЗАЙЦЕВ. НЕТ
• Рис. 2. Музыкальный сайт MY FAVOURITE MUSIC
• Рис. 3. Музыкальный сайт МУЗЫКА.РУ
• С этой же целью для создания навигации по сайту использовались одинаковые цвета, шрифты, начертания текста и т. д.
• дизайнерский мультимедийный верстка клиент
• 2. Создание мультимедийного продукта
• Тема моего курсового проекта «Создание сайта для размещения музыки», и на данном сайте не будет смотреться на фоне изображение, по этому будет одноцветный фон.
• 2.1 Разработка концепции
• Цель моего сайта сделать удобным прослушивания и чтения текстов песен, для пользователей, для этого был вставлен удобный проигрыватель.
• Дизайн и стилевое оформление сайта: проигрыватель является одной из составляющих сайта, поэтому ее дизайна не должен отличатся от дизайна сайта; то есть стиль — минимализм.
• Задача проигрывателя — привлечь внимание пользователя к сайту. Обычно при просмотре ссылок в поисковиках открываю сразу несколько сайтов (пока один грузиться, другой в это время можно просматривать) и когда в другом музыкальный сайт, будут загружаться страницы, в моем будет проигрываться музыка, таким образом она привлекая внимание пользователя и оставляет его на нашем сайте, то есть пользователь становиться посетителем.
• 2.2 Проектирование содержания и среды представления приложения
• Фон страницы черный, точно такой же как и на всех страницах. Поэтому цвет фона проигрывателя тоже будет черным, будет создаваться иллюзия целостности.
• Плеер может:

· проигрывать треки или потоки, список которых хранится в текстовом файле-плейлисте;

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

· играть в режиме повтора текущего трека (loop), при этом перейти на следующий/предыдущий трек можно с помощью стрелок;

· играть треки в случайном порядке (shuffle);

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

· регулировать громкость и баланс звука и запоминать пользовательские настройки;

· слушаться команд на расстоянии одной страницы.

Плеер изображен на рисунке 4.

Рис. 4. Изображение плеера.

3. Разработка сайта.

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

Эскиз сайта приведен на рисунке 5.

Рис. 5. Эскиз внутренней странице сайта Для оформления сайта мною был выбран основной цвет черный — спокойный, добросовестный, придает чувство комфорта. Цвет тех, кто уверенно стал на ноги, любит друзей и предан им.

Полоса прокрутки была раскрашена в серый цвет. Так как цвета по умолчанию присущи всем сайтам Интернета, было решено так и оставить.

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

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

Схема структуры сайта приведена на рисунке 6.

Рис. 6. Схема структуры сайта Данный интерфейс интуитивно понятен, и не вызывает у пользователя затруднений. А самое главное: не отвлекает внимание.

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

Чтобы после нажатия на кнопки ссылки в списке песен проигрыватель воспроизводил музыку, был написан следующий скрипт:

var opera = Boolean (window[" opera" ]);

var ie = (navigator.appName.indexOf («Microsoft») ≠ -1) && !opera;

function mju_play_file (chars) {.

if (!chars.length) return false;

var mc = ie? window. mju: window.document.mju;

mc.SetVariable («play_file», chars);

}.

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

Таблица стилей. Благодаря тому, что сайт структурирован с помощью таблицы и фреймов css понадобились только для управления размещением вкладок (названий страниц) и задание общих свойств сайта. Так поля (padding) и отступы (margin) были заданы со небольшим значением, цвет фона (background-color), о котором рассказывалось в предыдущем пункте, задан со значением: «black».

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

В результате проведенных действий, также устранения всех мелких неисправностей страницы сайта приобрели вид показанный на рисунках 7, 8.

Рис. 7. Главная страница сайта Рис. 8. Страница «Тексты песен».

3.3 Функциональные элементы, реализованные на стороне клиента Функциональные элементы:

· логотип изображен на рис. 9;

Рис. 9. Логотип.

· название категорий — выполняют ссылку на соответствующую категорию портала — рис. 10;

Рис. 10. Название категории.

· полоса прокрутки — дополнительное средство просмотра информации;

· проигрыватель — средство для прослушивания музыки — рис. 11.

Рис. 11. Проигрыватель.

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

Рис. 12. Список песен.

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

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

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

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

На страницах с текстами песен размещены только тексты песен, которые отформатированы как стихотворение, то есть по центру (рис. 14).

Рис. 13. Биография Рис. 14. Текст песни.

Выводы Результатом моего курсового проекта стал полноценный web-сайт, который я смогу добавить в свое портфолио работ, которое мне пригодится при устройстве на работу.

Мною были приобретены навыки:

· работы в среде NetBeans;

· создания страниц;

· создание полноценного сайта;

· создания мультимедийной проигрывателя.

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

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

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

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

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

· создание мультимедийного издания;

· создание сайта соответствующего назначения;

· тестирование публикации;

· подготовка студентов к выполнению дипломного проекта.

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

Список используемых источников

.

1. Пушкарь А. И., Браткевич В. В., Молчанов В. П. Методичні рекомендації до виконання комплексного курсового проекту для студентів 4-го курсу спеціальності «Технологія електронних мультимедійних видань» усіх форм навчання Х.: Вид. ХНЕУ, 2014.

2. Молчанов В. П. Конспект лекцій «Основи проектування WEB — видань» Х.: Вид. ХНЕУ, 2008.

3. Международный стандарт ISO 14 915 и ISO 9241−10 / Ошибка! Недопустимый объект гиперссылки.

4. Международный стандарт ISO 13 407.

Приложение 1.

Динамический скрипт создания меню Текст скрипта:

var flag=true;

$(document).ready (function (){.

if (flag){.

$(«#accordion > li > div»).click (function (){.

if (false == $(this).next ().is (':visible')) {.

$('#accordion ul').slideUp (300);

}.

$(this).next ().slideToggle (300);

});

flag=false;

}.

});

Пояснение:

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

Для этого написан скрипт выполняется только в тогда, когда страница загружена. При помощи функций меню опускается или поднимается. То есть при нажатии на меню выполняется функция click (function ().

Сначала присваиваем переменную flag и присваиваем ей значение true, то есть правда. Если же flag равен true, то находим элемент accordion, в нем li, а в нем обращаемся к div, таким образом выполняется операция наследование. Затем по нажатию на раздел меню выполняется функция function (). В этой функции выполняется условие: если меню открытое, то оно закрывается (slideUp (300)), а если закрытое, то оно разъезжается (slideToggle (300)). После чего переменная flag принимает значение false.

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

Рис. 15. Действие при нажатии Рис. 16. Действие при следующему нажатию Код для проигрывателя Текст скрипта:

var opera = Boolean (window[" opera" ]);

var ie = (navigator.appName.indexOf («Microsoft») ≠ -1) && !opera;

function mju_play_file (chars) {.

if (!chars.length) return false;

var mc = ie? window. mju: window.document.mju;

mc.SetVariable («play_file», chars);

}.

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

Скрипт сначала объявляет переменную opera и переменную ie, с разными значениями. После нажатия на песню срабатывает обработчик onclick, который вызывает функцию mju_play_file. Данная функция выполняет запуск песни.

Приложение 2.

Концепция сайта.

I. Группы потенциальных посетителей.

1. Все люди, которые любят слушать музыку.

2. Друзья и знакомые.

3. Люди, которые хотят выучить или прочесть текст песни.

4. Случайные пользователи Интернет.

II. Маркетинговые задачи сайта.

1. Создание и поддержка положительного имиджа портала.

Цели продвижения в сети Интернет.

1. Представление портала на общенациональном рынке.

2. Обмен музыкой и всей информации представленной на сайте.

3. Обмен мнениями.

III. Информационное наполнение Сайт должен вызвать у посетителя:

1. Ощущение комфорта и отдыха при входе на сайт.

2. Желание воспользоваться порталом.

3. Желание регулярно следить за новой информацией на сайте.

Принципы подачи информации:

1. Приоритет: положительный имидж.

2. Краткость и четкость подачи информации.

3. Продемонстрировать наличие большого объема хорошо структурируемой информации.

Основные принципы дизайна экранного интерфейса и системы навигации:

1. Интерфейс должен быть простым и интуитивно понятным.

2. Ясная навигация.

3. Страницы должны быстро загружаться.

Обновление информации:

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

IV. Основные принципы технической реализации.

1. Должна быть организована регулярная поддержка сайта.

2. Надежный хостинг.

3. Использование баз данных для хранения легко формализуемых данных.

4. Удобная CMS (если сайт выйдет за рамки курсового).

Необходимые системы, обеспечивающие работу сайта:

1. Поисковая система (система индексирования и продвинутый поиск по разделам).

2. Почтовые формы.

3. Анкеты и опросы.

Критерии достижения целей продвижения в Интернете:

1. Прямые контакты. Количество полученных с веб-сайта анкет и других откликов.

2. Сравнительный рейтинг посещаемости.

3. Сравнительный рейтинг по присутствию в сети. Анализ отклика поисковых машин на различные тематические запросы.

4. Количество ссылок наш сайт с других сайтов.

5. Субъективные оценки (конкурсы, эксперты, партнеры и т. д.).