Обзор bannersnack. Как создать красивый HTML5 баннер. HTML5-Баннеры Создание эффекта вращения в Google Web Designer

HTML5-Баннеры

от 2 299 руб.

RUB

Заказать

В настоящее время, HTML5-баннеры – единственный актуальный формат полноценной анимированной баннерной рекламы. Этот универсальный кроссплатформенный формат пришел на смену Flash-баннерам, имевшим ряд ограничений и недостатков.

Основными причинами такого отказа называются следующие:

• к Flash-технологии накопились претензии в области компьютерной безопасности и повышенного потребления процессорной мощности мобильных устройств;
• некоторые браузеры начали по умолчанию блокировать показ Flash;
• на мобильных устройствах iOs (iPhone, iPad) показ Flash был не предусмотрен производителем;
• популярность программ-блокировщиков баннерной Flash-рекламы;
• отказ от дальнейшей поддержки и развития Flash-технологии ее владельцем, компанией Adobe.

Анимированные HTML5-баннеры могут быть показаны без ограничений в любом браузере, на экране любого устройства, включая смартфоны, планшеты и медиа-ТВ. В этом и заключается их кроссплатформенность и универсальность.

Для заказчика использование HTML5-баннеров означает, прежде всего, расширение охвата аудитории без потерь.

Что может HTML5-баннер?

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

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

Рассмотрим основные виды HTML5-баннеров.

Анимированный HTML5-баннер фиксированного размера.
Наиболее популярный формат в большинстве рекламных сетей. Ширина и высота нужных баннеров выбираются из перечня принимаемых к размещению. Мы всегда подскажем самые распространенные размеры.

Тянущийся HTML5-баннер (адаптивный, резиновый).
Это баннер, который может растягиваться, занимая всю ширину (иногда высоту) экрана. (Подробнее можно узнать в данной статье)

Fullscreen HTML5-баннер.
Баннер, открывающийся на весь экран. Как правило, содержит таймер показа и кнопку “Закрыть”. Особенно популярен для показа на мобильных устройствах.

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

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

HTML5 Видео баннер.

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

Игровые интерактивные баннеры.
Баннеры, призывающие пользователя включиться в игру, выполняя простые действия.

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

“Умные” HTML5-баннеры (калькуляторы).
Используются для вовлечения и взаимодействия с пользователем, предлагая ему немедленный расчет по нужным параметрам и заданной внутренним алгоритмом формуле (например, расчет кредита, ипотеки, расхода стройматериалов и прочие несложные операции).

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

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

3D HTML5-баннеры.
Такие баннеры привлекают внимание пользователя, создавая на странице объемные модели изображений.

HTML5 3D баннер может быть реализован в виде вращающегося объекта, грани которого содержат кадры баннера, в виде раскрывающейся книги или с использованием других 3D эффектов.

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

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

HTML5-баннер - что он из себя представляет технически?

Правильнее всего воспринимать HTML5-баннер, как мини web-сайт. Без преувеличений.

HTML5, давший название этому баннерному формату, является языком разметки web-страниц, проще говоря, верстки. И верстается по тем же законам, что и любой современный сайт. Он может содержать div-контейнеры, подключаемые шрифты, стили css и js-скрипты. Главным элементом является контейнер для анимаций canvas. Сама анимация реализуется с помощью java script, чаще с использованием специально разработанных для анимации js-библиотек.

Что там внутри? Зачем в архиве? Почему так много файлов?

Верно, ведь мы привыкли, что баннер – это один файл картинки JPG или “гифка” или “флешка”. Но вспомним, как мы писали выше, HTML5-баннер это, по сути, мини-сайт. Он содержит множество файлов и поставляется рекламной площадке в zip-архиве. Внутри архива находится главный файл HTML, файлы java-скриптов, библиотек, таблицы стилей и используемые изображения.

Примечание. В некоторых случаях рекламная площадка может потребовать предоставить весь баннер одним файлом, включив в него все используемые скрипты и изображения в формате base-64. Это не является проблемой для опытного разработчика. Однако такое требование увеличивает срок изготовления баннера и внесения в него изменений. К счастью, такое требование встречается нечасто.

Как мне посмотреть присланный HTML5-баннер на моем компьютере?

Очень просто. Распаковать zip-архив и открыть находящийся внутри HTML файл в вашем браузере.

Как проверить, что мне сделали правильный HTML5-баннер?

Если баннер создается для рекламных сервисов Google, то к вашим услугам прекрасный инструмент проверки качества работы дизайнера – on-line валидатор HTML5 от Google. Пользоваться им просто: загружаете ваш zip-архив с баннером и смотрите, прошел ли он проверку по чек-листу. Ошибки будут отмечены красными значками. Если их нет – ваш разработчик трудился не зря и баннер готов к размещению в Google adWords или Double Click.

В рекламных сетях Яндекс, Mail.ru, Рамблер, adFox, adRiver и прочих также осуществляется проверка на соответствие баннера техническим требованиям, после его загрузки на сайт системы. В случае проблем, вы можете получить комментарий модератора с описанием ошибки. Некоторые площадки предоставляют заказчику рекламы возможность предварительного просмотра баннера на тестовой странице.

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

А баннер с анимацией на Java Script - это другое?

Не дайте себя запутать. “Java Script баннер”, “Canvas баннер” – речь идет именно о том, что принято называть “HTML5-баннер”. В зависимости от инструмента разработчика могут меняться js-библиотеки или правила верстки, но общая схема сборки остается одинаковой.

Как создать HTML5-баннер?

Самый популярный среди дизайнеров редактор для создания HTML5 анимаций – программа Adobe Animate.

Компания Google предлагает собственный инструмент разработки – Google Web Designer. Среди его плюсов – наличие множества встроенных шаблонов и возможность публикации баннера непосредственно для рекламных сервисов Google: adWords и Double Click. Среди минусов – ограниченные возможности анимации.

Некоторые дизайнеры, чаще американские, используют редактор и библиотеки Green Sock Animation Platform. Однако, у нас они не получили значительного распространения.

Учитывая, все необходимые компоненты представляют собой открытый код, хороший специалист может создать HTML5-баннер даже в простейшем текстовом редакторе. Однако такой способ не является эффективным по сравнению с использованием профессиональных анимационных программ.

Технические требования к HTML5-баннерам.

Требования касаются:

• общего веса HTML5-баннера в кб.;
• структуры zip-архива, количество папок и файлов;
• перечень разрешенных форматов файлов;
• способа включения URL-ссылок по клику на баннере (прошивки баннера);
• перечень разрешенных js-библиотек на внешних хостингах;
• порядок и ограничения подключения видео и аудио-файлов;
• требования к оформлению рамки, дисклеймеров, частоте и количеству циклов анимации, нагрузке на процессор устройства.

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

Что мне делать с моими Flash-баннерами, созданными ранее?

Смотрите сами – крупнейшие рекламные сети больше не принимают Flash-баннеры к размещению, Flash-компоненты блокируются в браузерах и на iOs-устройствах, прекратил свою работу Swiffy (единственный адекватный on-line конвертер Flash-баннеров в HTML5).

Автоматическая конвертация Flash-формата в HTML5 практически невозможна – требуется, по сути, полная ручная пересборка в HTML5-редакторе. В такой ситуации правильным решением будет – заказать создание нового комплекта анимированных баннеров, в современном и универсальном формате HTML5.

А как же “гифки”?

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

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

Что это означает для рекламодателя?

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

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

Если же анимация затрагивает смену нескольких сотен кадров, то вес gif-баннера возрастает, как выражаются на английском, “dramatically”, то есть, драматично. 20-секундная гифка весом в несколько мегабайт – обычное дело. И это крайне не нравится рекламным сетям, которые справедливо обеспокоены тем, сколько трафика придется загрузить пользователю для просмотра баннера.

Итак, если вам нужен баннер со множеством анимационных эффектов, персонажной анимацией, интерактивный, адаптивный или видео-баннер – выбор совершается в пользу заказа именно HTML5-баннера.

Друзья, всем привет. Сегодня продолжим создавать баннеры в программе Google Web Designer в формате HTML5, с эффектом 3D.

И это понятно, баннеры, созданные на html5 и css3, отображаются на любых экранах как на компьютере, телевизорах, так и на мобильных устройствах. Чего не скажешь о flash-баннерах.

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

А учитывая тот факт, что мобильные устройства всё больше используются для просмотра интернет ресурсов, то — это очень важно.

Основной и размещение его на сайте я уже рассказал в прошлой статье. Так что сегодня уделю внимание созданию эффекта 3D и настройкам цикличности (повторного показа). А также рассмотрим несколько настроек для «событий».

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

Подготовка к созданию баннера с эффектом 3D.

От подготовки в конечном итоге зависит вид баннера в готовом виде. Редактор Google Web Designer позволяет создавать реалистичные 3D эффекты и всё это будет прописано в html коде, вам лишь нужно всё правильно собрать в визуальном редакторе.

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

В качестве примера я подготовил вот такие заготовки:

Эти заготовки я сделал в Photoshop, но подобных изображений много в интернете. Можно и не напрягаться, а взять готовые варианты.

Примечание: Если вам интересен процесс создания подобных заготовок, напишите об этом в комментариях.

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

Создание 3D объекта в Google Web Designer.

Итак, по аналогии с прошлой статьёй, запускаете редактор, создаёте новый проект.

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

Эти несколько изображений нужно объединить либо в группу, либо поместить в блок DIV. И так и так будет правильно. Но, мне удобней работать с боком ДИВ.

Шаг 1. Создание блока DIV.

Итак, для создания блока ДИВ, в левой панели выбираете «Инструмент работы с тегами (D)» .

Обязательно присвойте идентификатор. И подгоните размеры с помощью раздела «Свойства» в правой панели.

Теперь нужно выделить блок. Для этого в левой панели выбираете «инструмент выделение (V)» и двойным щелчком левой кнопки мышки кликнете по рамке блока ДИВ. Она при этом сменит цвет на красный.

Шаг 2. Выстраивание изображений.

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

В моём распоряжении есть следующие элементы:

— Верхняя сторона.

— Боковая сторона (состоит из трёх отдельных частей).

Для начала размещаем оборотную (заднюю) сторону изображения и выравниваем её по центру и верхнему краю баннера.

Таким же образом добавляем лицевую сторону. Выравниваем и смещаем по оси Z.

Так как ширина боковой стороны 4px (пикселя), то лицевую и оборотную стороны я сместил по оси Z на 2px и -2px. Что обеспечит зазор между изображениями.

Примечание: точные цифры смещений смотрите на скриншотах.

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

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

Следующим шагом выстраиваем верхний левый уголок.

Теперь центральная часть боковой стороны.

И нижний уголок по левой стороне.

Все элементы боковой стороны обязательно выравнивайте по оси Y на 90 0 .

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

Для этого в нижней панели выбираете изображение – нажимаете комбинацию клавиш CTRL+С (копирование) и вставляете дубликат CTRL+V.

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

Верхняя правая крышечка.

Нижнюю часть я не стал делать, так как её не видно на изображении.

Самая тяжёлая работа закончена. Теперь можно приступить к настройке анимации. В качестве наглядной демонстрации сделаем вращение изображения.

Создание эффекта вращения в Google Web Designer.

Первым делом нужно выйти из блока ДИВ, в котором находятся все элементы изображения. То есть мы работали внутри блока с конкретными изображениями, а теперь нужно будет работать со всеми изображениями одновременно, управляя блоком ДИВ.

Для начала нажимаете на кнопку DIV в нижней панели.

Итак, на шале времени нажав правую кнопку мышки, создаёте два ключевых кадра. Должно получиться так:

Расположение исходного кадра по шкале Y выставляем на -90 0 .

Первый ключевой кадр (второй по счёту) выставляем по шкале Y на 0 0 .

Второй ключевой кадр (третий по счёту) выставляем по шкале Y на 90 0 .

Всё можно проверять результат. Для этого нажимаете на кнопку Play .

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

Настройка цикличности в Google Web Designer.

В программе можно настроить несколько вариантов цикличности (повторов). Так можно настроить повтор для всех элементов баннера или на каждый элемент в отдельности.

Также цикличность можно ограничить числом повторов или сделать её бесконечной.

На нижней панели, рядом с каждым элементом есть символы «Замок», «Глаз», «Обратная стрелка» .

Так вот, для настройки цикличности нужно нажать на символ «Обратная стрелка». И выбрать либо ограниченное количество повторов, либо бесконечный вариант.

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

Остановка вращения при наведении курсора мышки на баннер.

Первым делом на первом ключевом кадр (второй по счёту) устанавливаем ярлык. Для этого над кадром нажмите правую кнопку мышки и выберите пункт меню «Добавить ярлык» . Вводите название ярлыка и жмёте клавишу Enter.

А на следующем шаге выбираете в качестве приёмника « Page1» . Других там вариантов не будет.

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

Сохраняете события и проверяете. Вращение баннера будет останавливаться при наведении курсора мышки, на том кадре, где был сделан ярлык.

Возобновление вращения после отведения курсора мышки.

Для того чтобы вращение было продолжено, после отведения курсора в сторону, настройте ещё одно событие.

Настраивается оно аналогично предыдущему, только лишь с двумя отличиями.

В качестве события выбирается «Мышь» — « mouseout» .

Событие - отведение мышки

А в качестве действия «Временная шкала» — « togglePlay» .

Действие - Продолжить

Вот и готов наш баннер с 3D эффектом. И таких различных эффектов вы можете придумать сколько угодно.

Только не забудьте сделать событие на клик мышки и открытие ссылки. Баннер ведь не ради красоты создавали, ведь так.

Изначально, этот процесс, может показаться сложным, но сделав пару баннеров, вам уже не будет так казаться.

На этом у меня сегодня всё, друзья. Всем желаю успехов, жду ваших комментарием и до встречи в новых статьях и видеоуроках.

С уважением, Максим Зайцев.

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

Достоинства Процесс создания

Для создания HTML5 баннеров применяются давно изученные способы. Внешне они не различаются с Flash, а все отличие состоит в технологиях, на которых основаны эти форматы. Создается такой баннер в форме адаптивной HTML5 страницы, после чего наполняется картинками, ссылками, текстами и украшается. Среди наиболее распространенных способов – использование графических редакторов, специализированных программ, готовых инструментов и др.Из-за своей главной особенности — адаптивности, эти баннеры позволяют в процессе их создания использовать целый диапазон значений.

1. Карточка баннера

Описание:

баннер со встроенной графикой, HTML-формами, несколькими ссылками.

Тип кода:

фреймовый, Poster, Ajax, Extension.

Подробнее:

HTML-баннеры реализуют графические объекты и интерактивные механизмы взаимодействия с пользователями. HTML-баннер может состоять из нескольких объектов. Это могут быть изображения (простые картинки), Flash-анимации, фрагменты HTML-кода. Например, в одном баннере может быть несколько ссылок, в зависимости от того, куда кликнет посетитель, он попадает на разные страницы сайта.

Примечание: В случае необходимости показывать баннер при доскролле до баннерного места, можно воспользоваться кодом Poster или специальным кодом . В остальных случаях используйте стандартные коды Ajax или Extension.

2. Подготовка баннера

Подготовьте HTML-код баннера. Это может быть любой HTML-код, в том числе HTML 5, представляющий собой HTML верстку баннера с CSS стилями и JavaScript-кодом. JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера, а не подключать отдельными файлами. Однако в случае необходимости использование отдельных файлов также допускается. Можно использовать как абсолютные ссылки на файлы, подгружаемые в баннер (различные изображения и Flash-файлы), так и относительные.

Важно: При использовании относительных путей к файлам, необходимо, чтобы все файлы баннера в обязательном порядке находились в той же папке, что и сам подготавливаемый HTML-файл. Т.е. не должно фигурировать дополнительных папок для изображений, js-файлов или медиа-файлов. Названия всех файлов баннера должны соответствовать .

Примечание: Для баннеров на коде IFrame (размерных) HTML-файл баннера обязательно должен называться index.html .

Примечание: Если баннер использует дополнительные скрипты, их название должно быть отлично от script.js . Название script.js зарезервировано за управляющим скриптом баннера.

3. Учет кликов в баннере

По умолчанию клики в HTML-баннере не учитываются. Для учета кликов в HTML-файл баннера необходимо внести изменения согласно одной из следующих инструкций:

• Прошивка на клик для HTML-креативов
• Откройте текстовым редактором HTML-файл баннера. Подключите файл html.js :

  Если баннер расположен на стороннем сервере, укажите полный путь до файла html.js :

  Примечание: Скачивать плагин html.js или создавать его самостоятельно не требуется. Данный плагин размещается на серверах AdRiver и достаточно просто подключить его в подготавливаемом файле.

• Для учета кликов и перехода по ссылке, указанной в системе при загрузке баннера (поле Линк баннера ), используйте функцию ar_callLink . Вызов функции может быть осуществлен при любом событии для любого тэга в коде баннера, например: Перейти на сайт

  Перейти на сайт

  Возможные параметры:

  объект события (click, mousedown и т.п.). При передаче данного параметра, в кликовую ссылку добавятся координаты клика внутри IFrame с баннером

  Все параметры опциональны.

• для подсчета кликов по ссылкам в HTML-баннере с помощью кликовой ссылки AdRiver

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

Размер загружаемых файлов должен соответствовать .

Примечание: Для HTML-баннеров на кодах вместе с управляющим скриптом. Подробнее .

4.2. Загрузка HTML-баннеров на кодах Extension / Poster / Ajax как Generic-баннеров 4.2.1. HTML-баннер на коде Poster / Extension

Распакуйте .

Откройте текстовым редактором файл script.js . Внесите изменения в верхнюю часть скрипта, отмеченную как Editable block : var ar_width = "240"; var ar_height = "400"; var ar_gif_pixel = "";

Переменные:

ширина баннера. Укажите ваше значение

высота баннера. Укажите ваше значение

вызов стороннего счётчика. Если не требуется - оставьте значение пустым

Сохраните файл script.js

Откройте текстовым редактором файл index.html из архива. Скопируйте HTML код вашего баннера и вставьте в файл index.html в указанном месте:

Если в баннере используются буквы русского алфавита, то

Формат присылаемых данных — ZIP-архив.

Размер архива не должен превышать 150 килобайт.

Архив может содержать один HTML-файл и несколько файлов в форматах JS, JSON, CSS, JPG, GIF, PNG, SVG.

В архивах будет игнорироваться содержимое папки __MACOSX и файлы.DS_Store. Они создаются при архивировании на платформах Apple Mac OS X и для работы рекламных материалов не нужны.

Для имени файлов и директорий допустимо использовать только такой набор символов:
-._~ , цифры и латинский алфавит.

Все ссылки в рекламных материалах должны быть относительными путями в ZIP-архиве. При отработке рекламных материалов не должно быть внешних сетевых обращений. При необходимости все вспомогательные JS-библиотеки должны предоставляться вместе с рекламными материалами.

Нужно минимизировать число файлов в архиве. Изображения объединить в лист спрайтов. При необходимости можно объединить все JS/CSS/Image-документы и включить их в HTML-файл. Максимальное число файлов — 50.

Рекламные материалы должны корректно работать в браузерах Internet Explorer 9 и выше, Firefox 14 и выше, Safari 5 и выше, Chrome 14 и выше, Opera 14 и выше, Яндекс.Браузер 14 и выше, Microsoft Edge. При необходимости в файле должна учитываться функциональность браузера, необходимая для его работы.

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

Переходы в баннере должны получать адрес перехода на сайт рекламодателя таким вызовом yandexHTML5BannerApi.getClickURLNum(1) для первого клика, yandexHTML5BannerApi.getClickURLNum(2) для второго клика и т.д.

// после объявления тегов " "
// присваиваем для них обработчики на клик так:

Переходы в баннере должны использовать значение параметра linkN из get параметров URL к HTML-документу следующим образом: link1 для первого клика, link2 для второго и т.д. Можно использовать такой код:

Размер файла баннера указывается в теге следующим образом:

Сразу после тега должно быть включение рекламной библиотеки Яндекс:

В рекламных материалах разрешены внешние ссылки на некоторые базовые библиотеки, включённые в инструменты разработки на HTML5: Adobe Edge Animate CC , Adobe Flash CC HTML5 Canvas , CreateJS , GreenSock , Swiffy и другие.
Для того чтобы внешние ссылки были допустимы в баннере, они должны вести только на сайт производителя библиотеки.

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

Запрещается использовать раздражающее вредоносное поведение скриптов: например, вызовы для самопроизвольного открытия pop-up, смены адреса страницы и т.п. Запрещено использование расширений для браузера (flash/java и др.).

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

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

Рекламный баннер должен отвечать требованиям по загрузке CPU .

Рекламные материалы должны соответствовать требованиям, изложенным в документе « », в пп. 3-10.

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

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

Дополнительно к рекламным материалам могут загружаться видеоролики в формате MP4 (если они разрешены в продукте). Максимально допустимый размер видеофайла - 2 мегабайта.

Обращение к роликам должно быть URL JS вызовом начиная с 1. Например для ролика 1
var url_video1 = yandexHTML5BannerApi.getVideoURLNum(1);

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

Рекламодатель может сделать подсчет запусков просмотра видео, для этого при нажатии кнопки проигрывания видеоролика должен отрабатывать такой javascript вызов:
Для ролика 1: yandexHTML5BannerApi.reportVideoStart(1);
Для ролика 2: yandexHTML5BannerApi.reportVideoStart(2);

При таком тестировании баннер не должен потреблять более 50% процессорных ресурсов согласно данным в закладке Performance в Task Manager (UpdateSpeed установлен в значение High).
Считается, что баннер требует слишком много ресурсов, если загрузка более 50% ресурсов процессора происходит в течение заметного времени (доли/единицы секунд) или максимальная загрузка процессора в пике составляет более 70%.
Оптимизация использования оперативной памяти не производится, дополнительные утилиты или резидентные программы при старте не загружаются. После входа в систему объем памяти, занятой различными системными процессами, составляет порядка 62-63 МБ по данным Task Manager.