Разработка сайта, посвященного серии фильмов "Звездные войны"

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

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

Введение

Цель моей курсовой работы в создании сайта, посвященного серии фильмов «Звездные войны».

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

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

Целевая аудитория данного сайта - фанаты саги «Star Wars».

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

В рамках курсовой работы необходимо продемонстрировать:

· знание теоретических основ web-технологий;

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

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

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

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

· умения проводить поиск и анализ информации.

1. Дизайн сайта

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

1.1 Модель сайта

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

У данной вкладки есть подменю - «Галактика» и «История войн».На последней в свою очередь расположены ссылки в боковом меню на страницы с историей различных битв.

2. «Персонажи».

Данная вкладка делится на подменю «Светлая сторона» и «Темная сторона». Они посвещены персонажам серии фильмов, навигация по страницам в боковом меню.

3. «Сила».

Главная страница вкладки посвещена понятию «сила».В боковой панели навигации - ссылки на различные технологии.

4. «Новости»

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

1.2 Макет сайта и обеспечение адаптивности

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

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

Адаптивным дизайном называется способ вёрстки, когда ширина макета веб-страницы подстраивается под ширину устройства.

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

Рисунок 1. Макет сайта

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

Пример стилевых свойств для оформления макета (Таблица 1):

Таблица 1

Для левого слоя шириной 150px
Левая колонка	Правая колонка
float: left, width: 150px	margin-left:155px;

Для левой колонки требуется всего два свойства: float -- заставляет вторую колонку располагаться рядом по горизонтали с первой и width, которое устанавливает ширину колонки. Вторая колонка будет занимать всё оставшееся место, поэтому для нее указывать width не нужно.

Правая колонка характеризуется лишь одним свойством -- margin-left, оно смещает левый край колонки на ширину левого слоя, плюс задает отступ между колонками.

Контейнер, в который помещаются колонки формируется двумя свойствами:

max-width: 900px;

min-width: 451px.

Первое - задает максимальную ширину, которая не будет превышена. Свойство min-width для слоя контейнера устанавливает минимальную ширину, если окно браузера будет меньше этого значения, появится горизонтальная полоса прокрутки.

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

1.3 Применение технологии каскадных таблиц стилей

CSS расшифровывается Cascading Style Sheets (Каскадные Таблицы Стилей).

CSS было представлено вместе с HTML 4.0 и создавалось для разрешения проблем с оформлением, возникающих в предыдущих версиях HTML; CSS позволяет хранить информацию об оформлении HMTL документа в отдельном внешнем файле с расширением .css. Редактируя лишь один этот файл стало возможным изменение оформления целого веб-сайта.

На данный момент CSS является стандартом оформления HTML документов и поддерживается всеми современными браузерами.

Пример оформления изображения при помощи каскадных таблиц стилей:

image-block img{

border: 1px solid #CCCCFF;

border-radius: 4px 4px 4px 4px;

background:#9999FF;

padding:10px;

}

image-block img:hover{

border: 1px solid #6666FF;

box-shadow:0 0 5px #6666FF;

}

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

Кроссбраузерность - это одинаковый показ вашего сайта в различных браузерах, таких как Firefox, IE, Opera, MSIE, Flock и другие. Обеспечение кроссбраузерности даёт не только большую популярность, но и возможность работать с вашим ресурсом большему числу людей. Значимость кроссбраузерности, в современной насыщенной и высококонкурентной среде интернета, для сайта неоценима. Логика проста. Если мы адаптируем сайт для каждого посетителя (вне зависимости от типа устройства или браузера, которыми он пользуется), мы получаем 100% заинтересованной аудитории. При ориентировании только на 1-2 якобы «основных» браузера аудитория сокращается примерно на одну треть или даже в 2 раза. Недовольные посетители не будут рекламировать сайт друзьям -- и мы теряем ещё N-ную часть потенциальных потребителей.

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

button{

-moz-border-radius:3px;-webkit-border-radius:3px;

border-radius:3px;

-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2); /* для Mozilla 1.6 и ниже */

-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2); /* для Konqueror 3.1+, Safari 1.1 */

box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);

background:#eee;

}

Также необходимо произвести поиск ошибок в документе. Это можно сделать при помощи сайта-валидатора http://validator.w3.org/

Проверка CSS-свойств на кроссбраузерность. На сайте HtmlBook удобно визуализируется поддержка того или иного свойства разными браузерами (рисунок 2).



Рисунок 2. Отображение поддержки свойств браузерами на htmlBook.ru

1.4. Графическое оформление web-страницы

Большинство браузеров поддерживает только три формата изображений: GIF, JPEG и PNG. Каждый из них имеет свои сильные и слабые стороны и вопрос выбора оптимального формата для использования в HTML-страницах должен определяться в каждом конкретном случае индивидуально.

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

JPEG хорошо подходит для изображений с богатой цветовой гаммой, плавным переходом цветов, для фотографий и изображений с градиентными областями.

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

Формат PNG расшифровывается как Portable Network Graphics -- переносимая сетевая графика. Это относительно новый формат, призванный заменить собой формат GIF. Формат PNG существует в двух вариантах PNG-8 и PNG-24. PNG-8 практически полностью аналогичен формату GIF, за исключением улучшенного сжатия и отсутствия возможности анимации.

PNG-24 обладает рядом дополнительных преимуществ, таких как:

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

· применение улучшенного сжатия.

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

Галерея с фотографиями съемок фильмов «Звездные войны» представляет собой миниатюры фото, увеличивающиеся в размерах при наведении на них курсора. Галерея использует jQuery и небольшой скрипт (рисунок 3).

Рисунок 3 Фотогалерея

Также на главной странице буквы Star Wars - это изображение в формате png. Выбран именно этот формат, так как было необходимо обеспечить прозрачность фона.

2. Компоненты мультимедиа в web-сайте

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

В данном разделе рассматривается применение видеороликов, GIF-анимации и визуальных эффектов с использованием CSS3 как элементов оформления сайта.

веб мультимедиа интерактивный анимированный

2.1 Графическое оформление web-страниц

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

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

Рисунок 4. Графическое оформление страницы

На некоторых страницах присутствует баннер - GIF-анимация, рекламирующий выход нового фильма. Баннер был создан в программе Adobe Fireworks (рисунок 5).

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

Рисунок 5. Множество состояний баннера

2.2 Оптимизация графики для web

Оптимизация изображений в формате JPEG производится путем подбора коэффициента потери качества, который может принимать значения от 1 (максимум потерь) до 100 (сжатие без потерь).

Оптимизация файлов в форматах GIF и PNG с палитрой производится путем уменьшения количества цветов в палитре (при этом убираемые цвета заменяются наиболее похожими из оставшихся в палитре), а также изменением параметра Dithering, который отвечает за передачу полутонов путем «разбрасывания» по изображению точек другого цвета (особенно сильно использование Dithering влияет на рисунки в формате GIF).

Еще один важный способ оптимизации графики - это уменьшение ее размеров по ширине и высоте и последующее растягивание до исходных размеров средствами браузера. Этот способ применяется, в основном, для элементов оформления сайта: фоновых рисунков для таблицы, разделительных полос и т.п.. Основан он на следующих особенностях отображения HTML: если рисунок, вставленный с помощью тега <img> по ширине или высоте меньше, чем указано в свойствах height и width, то он будет растянут (или наоборот, сжат) до нужного размера, а если рисунок описан как фон таблицы, ячейки или другого объекта в свойстве background, то он будет повторяться до тех пор, пока не заполнит весь объект. В результате вместо того, чтобы сохранять в файл весь элемент целиком, достаточно вырезать его небольшой кусок, а дальше растянуть или размножить непосредственно в браузере с помощью свойств, описанных выше.

2.3 Видео на сайте

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

1. При помощи тега <video>

2. С помощью ссылки на сайт www.youtube.com.

Тег <video> добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>.

Пример:

<video width="400" height="300" controls="controls">

<source src="Top 5 Star Wars Lightsaber Battles.mp4" type='video/mp4'>

</video>

Width и height задают размеры области для воспроизведения, атрибут controls добавляет панель управления видео (рисунок 6).

Дополнительные атрибуты:

· autoplay - видео начинает воспроизводиться автоматически после загрузки страницы.

· loop - повторяет воспроизведение видео с начала после его завершения.

· poster - указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.

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

Рисунок 6. Вставка видео с помощью тега <video>

Для добавления видео с ресурса youtube необходимо нажать кнопку «Поделиться», настроить необходимые параметры и скопировать html-код на свою страницу (рисунок 7).



Рисунок 7. Добавление видео с ресурса

Пример:

<iframe width="560" height="315" src="https://www.youtube.com/embed/8rrn37AsNCE" frameborder="0" llowfullscreen></iframe>

Рисунок 8. Видео, добавленное на сайт с youtube

2.4 Анимация на сайте

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

@keyframes toggleOpacity {

50% { opacity: 1; }

50.001% { opacity: 0.4; }

52.999% { opacity: 0.4; }

53% { opacity: 1; }

}

Я использовала этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow (рисунок 9):

Рисунок 9. CSS-анимация

HTML:

<p id="star">S<span>T</span>AR</p>

<p id="wars">W<span>AR</span><span>S</span></p>

CSS:

#star:hover { text-shadow: 0 0 200px #ffffff,0 0 80px #008000,0 0 6px #0000ff;}

#wars:hover { text-shadow: 0 0 100px red,0 0 40px FireBrick,0 0 8px DarkRed;}

#star {

color: #fff;

text-shadow: 0 0 80px #ffffff,0 0 30px #008000,0 0 6px #0000ff;

}

#star span {

animation: upper 11s linear infinite;

}

#wars span:nth-of-type(2) {

animation: lower 10s linear infinite;

}

#wars span:nth-of-type(1) {

text-shadow: none;

opacity:.4;

}

@keyframes upper {

0%,19.999%,22%,62.999%,64%, 64.999%,70%,100% {

opacity:.99; text-shadow: 0 0 80px #ffffff,0 0 30px #008000,0 0 6px #0000ff;

}

20%,21.999%,63%,63.999%,65%,69.999% {

opacity:0.4; text-shadow: none;

}

}

@keyframes lower {

0%,12%,18.999%,23%,31.999%,37%,44.999%,46%,49.999%,51%,58.999%,61%,68.999%,71%,85.999%,96%,100% {

opacity:0.99; text-shadow: 0 0 80px red,0 0 30px FireBrick,0 0 6px DarkRed;

}

19%,22.99%,32%,36.999%,45%,45.999%,50%,50.99%,59%,60.999%,69%,70.999%,86%, 95.999% {

opacity:0.4; text-shadow: none;

}

}

3. Создание визуальных эффектов

JavaScript является интерпретируемым языком программирования с объектно-ориентированными возможностями, это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента.

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

На практике это выражается в том, что можно, например, изменить цвет фона страницы или интегрированную в документ картинку, открыть новое окно или выдать предупреждение[6].

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

Пример 1. Анимация главного меню: при наведении становится видимой картинка, название вкладки помещается в серый контейнер, выплывает подменю.

Для использования функций плавности используется библиотека jQuery Easing Plugin. Функция плавности (easing) определяет скорость течения анимации, делая её более реалистичной.

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

<script type="text/javascript">

$(function() {

$('#sdt_menu > li').bind('mouseenter',function(){

/*обработка события при наведении курсора*/

var $elem = $(this);

$elem.find('img') /*поиск элементов img*/

stop(true)

animate({ /*анимация элемента до заданных параметров*/

'width':'170px',

'height':'170px',

'left':'0px'

},400,'easeOutBack')/*функция плавности анимации*/

andSelf()/* возвращение дочернего элемента вместе с родителем*/

find('.sdt_wrap')

stop(true)

animate({'top':'140px'},500,'easeOutBack')

andSelf()

find('.sdt_active')

stop(true)

animate({'height':'170px'},300,function(){

var $sub_menu = $elem.find('.sdt_box');

if($sub_menu.length){

var left = '170px';

if($elem.parent().children().length == $elem.index()+1)

left = '-170px';$sub_menu.show().animate({'left':left},200);

}

});

}).bind('mouseleave',function(){

/*обработка события при отведении курсора*/

var $elem = $(this);

var $sub_menu = $elem.find('.sdt_box');

if($sub_menu.length)

$sub_menu.hide().css('left','0px');

$elem.find('.sdt_active')

stop(true)

animate({'height':'0px'},300)

andSelf().find('img')

stop(true)

animate({

'width':'0px',

'height':'0px',

'left':'85px'},400)

andSelf()

find('.sdt_wrap')

stop(true)

animate({'top':'25px'},500);

});

});

</script>

Пример 2. По нажатию кнопки раскрывается блок с контентом

$(document).ready(function(){

$('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Показать новость</a>');/* Скрывает каждый из совпавших элементов набора, если они были видимыми. Вставляет контент перед каждым элементом набора. */

$('a#toggle-example2').click(function() {/* обработка собятия при нажатии*/

$('.example2').slideToggle(1000);/* Переключает видимость всех совпавших элементов набора, используя эффект изменения высоты элементов. */

return false;

}); });

Заключение

веб мультимедиа интерактивный анимированный

Результатом моей курсовой работы стал готовый к работе сайт-энциклопедия «Звездные войны».

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

· сайт предоставляет пользователям из целевой группы наиболее нужную им информацию;

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

· реализована навигация с помощью меню по страницам сайта. Ссылки легко отличимы от основного текста, находятся в одном месте;

· графический контент облегчает читаемость текстов;

· добавлен видео-контент для ознакомления с серией фильмов;

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

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

...