ЖМК-301/2. Веб-дизайн. Практическое занятие №5. Локальный Google Material-дизайн: рекламный баннер

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

Данное задание можно выполнять как коллективный проект (не более двух человек). В таком случае в комментарии указывайте всех участников и кто за что отвечал.

Подготовительный этап:

1) Установите программу Google Web Designer: https://webdesigner.withgoogle.com/

2) Выберите исходные файлы. Вам потребуются 3-4 изображения на прозрачном фоне в формате .png (товар + два/три движущихся объекта), а также изображение кнопки - также прозрачной. Обратите внимание, что файлы должны быть относительно небольшими, чтобы вмещаться в поле вашего баннера. Либо их придется задавать в нужных размерах прямо в программе.

Создание баннера:

3) При запуске Google Web Designer выберите опцию создания с чистого листа, затем укажите название (латиницей), платформа: внешнее объявление, размеры: пользовательские (задайте ваши ширину и высоту, в моем примере: 400х300 рх), размер анимации: расширенный. Нажмите Ок.

4) Теперь перед вами среда разработки Google Web Designer. Задайте фон вашего баннера. Для этого в правом сайдбаре раскройте блок "свойства" и в нем укажите цвет в параметре "заливка" (1).

5) Раскройте блок "библиотека" и добавьте ваши исходники, нажав на кнопку загрузки (2).

6) Перетащите, зажав мышью, ваши картинки на баннер, расположив их так, как они должны будут отображаться в финальном баннере (3). Их размеры можно отрегулировать во вкладке "свойства".

7) В блоке первого фото кликните один раз левой клавиши мыши на расстоянии - например, 0,5s - от начала шкалы. Теперь нажмите правую клавишу мыши и выберите "вставить ключевой кадр". На шкале появится желтая точка (4). По нажатию на эту точку в блоке "свойства" вы можете изменять размер объекта (параметр "положение и размер") и перемещать его (параметр "преобразование, вращение и масштаб").

Как делается анимация? Кликните на начало шкалы (белый треугольник) (5) и оставьте в первой строке преобразования XYZ нули (6). Теперь кликните на точку ключевого кадра и укажите в параметре первой строки у Y значение -10. Ваше фото сдвинется вверх. Создайте еще один ключевой кадр далее по шкале и также измените значение на -20. Фото сдвинется еще выше. Если указать 10 без минуса, то объект будет двигаться вниз. Также движение и размер регулируется по шкалам X и Z.

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

Вам нужно поставить 8-10 ключевых кадров чтобы сформировать движение фото. 

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

9) Теперь нужно привязать активность к кнопке. Для этого раскрываем блок компоненты (9) и перетаскиваем мышью элемент "кнопка изображения" на вашу кнопку баннера.

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

11) Для того чтобы динамика баннера была бесконечной, кликните на кнопку со стрелкой для каждой картинки и выберите опцию "бесконечно" (10).

12) Баннер готов. Его можно протестировать, нажав на кнопку запуска (11). Остановить просмотр можно этой же кнопкой.

13) Для сохранения баннера выберите путь: файл - сохранить как ZIP-файл.

Публикация баннера:

14) Извлеките файлы из архива. Перед вами папка assets с исходниками, файлы стилей, javascript-сценарии, а также один файл html. 

15) Загрузите все файлы из папки assets в репозиторий (лучше создать новый репозиторий чтобы не запутаться с файлами), туда же загрузите все остальные файлы, кроме файла html.

16) В файле html в соответствующих местах укажите пути ко всем файлам, загруженным вами в репозиторий. Это: три файла css (ссылки после атрибута href) , семь файлов js (ссылки после атрибута src) и файлы ваших исходных фото, товара и кнопки (ссылки после значения source). При необходимости встраивайте CSS и JS напрямую.

17) При необходимости выставить расположение баннера на странице используйте отступы слева и сверху в классе gwd-page-container. В моем примере указаны следующие параметры:

 .gwd-page-container {

      position: relative;

      width: 100%;

      height: 100%;

      margin-top: -250px;

      margin-left: 50px;

}

18) Опубликуйте готовый html в блоге в виде нового поста или на отдельной странице. Баннер должен быть кликабелен и выглядеть примерно так: https://konoplevdesign3.blogspot.com/p/blog-page.html

Ссылки на выполненное задание принимаются в комментариях к этому посту для ЖМК-302 до 17:00 6 марта, для ЖМК-301 до 17:00 10 марта.

РЕЗУЛЬТАТЫ (данные обновляются):

Акимкина Олеся - 5

Ананина Виктория - 5

Ахрарова Виктория - 5

Власов Максим - 5

Гайфуллина Анна - 5

Гостева Полина - 5

Григорьева Екатерина - 5

Жукова Виктория - 5

Зубко Сабина - 5

Кобякова Дарья - 5

Корнилова Полина - 5

Куликова Мария - 5

Маханек Вера - 5

Митюнин Андрей - 5

Новая Валентина - 5

Орлова Арина - 5

Слободская Елизавета - 5

Цветкова Виктория - 5

Чубаков Константин - 5

Чугунова Елизавета - 5

Шабалина Виктория - 5

Широкоумова Полина - 5

Щербакова Ангелина - 5