Типология сетевых СМИ. Лабораторное занятие №1. Баннеры GIF и HTML5

Для выполнения задания вам потребуется минимум три изображения – одинакового размера для создания GIF-баннера и одно целое и два разрезанных пополам для создания HTML-5 баннера. Предпочтительно выбирать небольшие изображения (от 240 до 300 пикселей). Уменьшить картинки до нужного размере можно через любой графический редактор - XnView, PaintNet и так далее. Напишите, если не знаете как это делается.

1 GIF-баннер – самый простой вариант размещения рекламы в сетевых СМИ. Обычно размещается со ссылкой. Создается через различные веб-сервисы. В данном случае необходимо воспользоваться сервисом: http://gifovina.ru/

- Проверьте, что на вашем компьютере работает Flash и вы видите все кнопки на странице. Затем выбираете размер баннера (справа, блок размер)

- Затем загружаете графические файлы (например,  jpeg) кнопкой «Добавить кадры» слева вверху)

- Выбираете длительность кадров в секунду

- Выбираете тип анимации или без анимации и нажимаете на зеленую кнопку «готово» внизу

- В открывшемся окне нажимаете на кнопку «скачать»

- Далее загружаете баннер на любой хостинг - например, "Яндекс. Фотки", и берете ссылку на GIF - анимацию (загрузить-поделиться-код для блога). Из конечного кода вам потребуется только часть тега изображения, начинающаяся с <img src и заканчивающаяся кавычками после gif". Вы закрываете тег (чтобы было gif"> и ставите дальше ссылку - не важно куда, главное чтобы она работала совместно с баннером. Выглядеть это должно так:
 

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

https://yadi.sk/i/EIWStRP73Sa6Mu

Комментарий со ссылкой на выполненное задание нужно оставить под этим постом до 15:00 3 марта. Если у вас не получается сделать баннер со ссылкой - можете опубликовать его без ссылки, загрузив в пост через опцию добавления картинки.

2 HTML-5 баннер - современная технология создания баннеров, пришедшая на смену Adobe Flash (настолько современная, что загрузить ее в блог без специальных навыков работы с кодом не получится - хотя для данного задания и не надо). 

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

Для создания таких баннеров используется платформа

Google Web Designer - https://www.google.com/webdesigner/
Для работы с ней вам потребуется установить этот небольшой дистрибутив на свой компьютер. Сразу после установки у вас откроется окно в котором вам нужно выбрать создание нового пустого файла, выбрать его название, в параметре "контекст" выбрать - внешнее объявление, в параметре размеры - выбрать пользовательский размер, режим анимации - "расширенный", затем нажать на "ок". Далее вы увидите вот такой интерфейс (только без моих картинок):

Справа в сайдбаре вам нужно выбрать объекты - те самые фото. Что сделал я - взял две картинки 290х290 пикселей и чтобы создать динамический баннер, разрезал одну пополам по горизонтали. То есть получилось из 290х290 две по 290х145. Можете сделать также. Картинки добавляются нажатием на крестик внизу сайдбара. Затем перетаскиваются из сайдбара на рабочий стол. Сначала я перетащил подложку - 290х290. Внизу на временной шкале я переименовал ее двойным щелчком мыши в banner - чтобы не запутаться. Вверху в меню выбрал опцию "выровнять по контейнеру" и подогнал картинку под размер поля кнопками "выровнять по левому" и "выровнять по верхнему краю". Таким же образом перетаскиваются картинки 2 и 3. Одна подгоняется по верху, вторая по низу. Одну на временной шкале я назвал Upper, вторую - bottom. Эти картинки перекрыли подложку. Теперь нужно сделать так, чтобы они двигались вверх и вниз и открывали скрытое фото.

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

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

Если у вас получилось, вы можете выложить либо скриншот с браузера (в момент движения) - обновить запуск баннера можно кнопкой F5:

либо снять момент движения баннера на видео прямо в программе. Например так:

Видео можно выложить в blogger через опции публикации - вставить видеоролик. Выполненное задание также принимается ссылкой в комментарии под этим постом до 15:00 3 марта.

Вне зависимости от того получилась ли у вас эта часть задания или нет, ответьте на два вопроса: если не получилось - в чем главная причина, на каком этапе все пошло не так? Если получилось - насколько было сложно и почему?