Модуль 6. Программирование на стороне клиента.

Анимированный баннер

 

Вступительная часть

Компания ООО «Уныние», в связи с предстоящим переименованием и сменой корпоративного стиля, решила разработать ряд анимированных баннеров для своего сайта. Для этого она объявила тендер, победитель которого получит контракт на их разработку. Для участия в тендере необходимо предоставить на конкурс пример своей работы на заданную тему.

 

Задание

Создать анимированный баннер, используя HTML5, CSS3 и JavaScript, для размещения на сайте заказчика и повышающий интерес посетителей к переходу на внутренние страницы сайта. Можно выбрать один из двух вариантов размера баннера:

- вертикальный 160х600px;

- горизонтальный 468х120px.

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

- использовать логотип фирмы;

- использовать минимум одно самостоятельно нарисованное в векторном редакторе изображение;

- реализовывать интерактивные функциональные возможности (при наведении, при нажатии и т.д.)

- иметь механизм перехода на другую страницу сайта или иной сайт (открывается в новой вкладке).

Анимация баннера должна соответствовать следующим критериям:

- длительность эффектов не менее 10 секунд;

- плавный переход от сцены к сцене длительностью не менее 2 сек;

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

- минимум три сцены в баннере;

- на каждой сцене должно быть не менее двух активных, взаимодействующих объектов;

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

При создании баннера допускается использовать только HTML5 \ CSS3 \ JS \ jQuery. Можно создавать собственные графические объекты, но нельзя использовать gif -анимацию или технологию Adobe Flash. Варианты“слайдеров”запрещены.

Вводные данные

Для работы над баннером предоставляются:

- название, логотип и краткое описание компании;

- список, описание и фото товаров или услуг, компании;

- набор случайных изображений и текста по сфере деятельности компании;

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

- библиотека JQuery.

 

Выходные данные

Набор созданных HTML5, CSS3 и JS файлов с баннером.

 

Время выполнения

3 часа

Модуль 6. «Программирование на стороне клиента.

Анимированный баннер».

 

Субкритерии и аспекты оценки

 

№	Аспект	Максимальный балл
D1	Общие требования
D1O1	Размер баннера соответствует одному из предложенных вариантов	0.5
D1O2	В баннере используется логотип	0.5
D1O3	В баннере используется самостоятельно нарисованное в векторном редакторе изображение	0.5
D1O4	На каждой сцене как минимум один элемент баннера реагирует на наведение мыши и/или на ее нажатие. Штраф -0.5 за каждую не подходящую под аспект сцену.	1.5
D1O5	Реализован механизм перехода на другие страницы сайта или на другой сайт	0.5
D1O6	При переходе с баннера страница открывается в новом окне	0.5
D1C1	Гарнитура и кегль шрифтов соответствуют логотипу и товару	0.5
D2	Алгоритм работы
D2O1	На каждой сцене минимум два взаимодействующих объекта. (штраф -0.5 за каждую не подходящую под аспект сцену)	1.5
D2O2	Переход к каждой последующей сцене осуществляется по результатам взаимодействия ее объектов или согласно действиям пользователя. Штраф -0.5 за каждую не подходящую под аспект сцену.	1.5
D2C1	Нелинейность, сложность, логичность переходов к следующей сцене
D3	Анимация
D3O1	Длительность всех сцен баннера вместе не менее 10 секунд	0.5
D3O2	Баннер состоит минимум из трех сцен	0.5
D3O2	На разных сценах используются разные объекты
D3O3	Плавный переход между сценами, длительность не менее 2 секунд. Штраф -0.5 за каждый не подходящую под аспект переход.
D3O4	На каждой сцене минимум 3 объекта Штраф -0.5 за каждый не подходящую под аспект переход.	1.5
D3C1	Оригинальность баннера
D3C2	Баннер способствует продвижению товара
D3C3	Темп анимации не замедлен и не ускорен
D3C4	Количество объектов на всех сценах достаточно, но не чрезмерно
D3C5	Плавное изменение состояния объектов, даже при интерактивных действиях пользователя
Итого максимально:

 

 

Указан максимальный балл. Аспекты.

O – объективные,

С – субъективные.