HTML5 — баннеры: для чего нужны и как можно их сделать. Адаптивный рекламный баннер при помощи HTML5 и CSS3 Как проверить, что мне сделали правильный HTML5-баннер

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

div.sb { text-indent: 0px; outline: 2px solid #f4e9ce; border: 2px solid #ddcca2; padding: 4px 3px 0px 3px; background-image: -moz-linear-gradient(#f4e9ce, #ddcca3); background-image: -webkit-gradient(linear, center top, center bottom, from(#f4e9ce), to(#ddcca3)); filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#f4e9ce,endColorStr=#ddcca3); background-image: -o-linear-gradient(top,#f4e9ce,#ddcca3); height: 65px; width: 260px; font-family: Impact, Arial, Verdana; font-size: 200%; font-weight: 100; text-transform: uppercase; font-style: oblique; font-weight: bold; } span.sb1 { border-bottom: #ddcca2 5px solid; color: #991500; margin: 0; text-shadow: -1px -1px white, 1px 1px #333; float: left; } span.sb2 { color: #ddcca2; margin: 11px 0; position: relative; text-shadow: 1px 1px 1px #000; float: left; } Шпаргалкаблоггера

Как сделать анимацию в Фотошопе.

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

• "Анимация",
• "Слои" (горячая клавиша F7),
• "Инструменты".

Для изображения в форматах BMP и PNG слои никак не сделать, поэтому нужно (для JPEG и GIF этот пункт пропускаем):

Рис.1 Перенести изображение в Фотошопе.

Из-за того, что стирать элементы проще, чем дорисовывать, то мы продублируем, выделив (Рис.2), интересующий нас слой.

Затем, выделив (см. синий фон) один из слоя и указав только на нём глаз, орудуем пипеткой (I) , для автоматического определения и установки выбранного цвета, и карандашом (B) для удаления ненужных фрагментов путём их закрашивания в палитру фона. При этой процедуре я люблю увеличивать масштаб фотографий: если посмотреть на Рис.1, то он равен 100%, а я указываю в 300%, чтобы не затронуть лишние элементы. Также полезной функцией является прозрачность слоя (Рис.2).

Затем для каждого кадра проставляем око (глаз) только на те слои, которые должны отображаться на нём.

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

Реклама — нужная вещь для любого сайта. Только стоимость инструментов для рекламы бывает выше дохода от нее. Вот тогда многие начинают мудрить, чтоб хоть немного сэкономить. Для таких «мудреных » мы и поведаем, как сделать баннер.

Что такое баннеры

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

Современный рост эффективности баннерной рекламы связан с использованием контекстного таргетинга. При этом на баннерах сайта рекламируют только те товары и услуги, которые «созвучны » с тематикой ресурса:

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

• Статические баннеры – состоят из статического изображения. Представляют собой рисунки в формате JPEG или PNG . Характеризуются малым весом, не влияющим на скорость загрузки страницы.
• Анимированные баннеры – анимация создана с помощью GIF . Состоит из нескольких картинок, сменяющих друг друга с заданной частотой. Вес баннера зависит от количества используемых в нем изображений.
• Flash – в таком баннере анимация сделана на основе Flash . Она может реагировать на действия пользователя.

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

Существует много различных размеров баннеров для сайта. Но самыми популярными из них являются:

• 88 на 31 пиксель;
• 120 на 60 пикселей;
• 120 на 90 пикселей;
• 120 на 240 пикселей;
• 125 на 125 пикселей;
• 120 на 600 пикселей;
• 160 на 600 пикселей;
• 180 на 150 пикселей;
• 234 на 60 пикселей;
• 240 на 400 пикселей;
• 250 на 250 пикселей;
• 300 на 600 пикселей;
• 300 на 250 пикселей;
• 336 на 280 пикселей;
• 150 на 150 пикселей;
• 468 на 60 пикселей;
• 728 на 90 пикселей.

Признаки эффективного рекламного баннера

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

• Привлекать внимание пользователя – но это не значит, что баннер должен быть чересчур ярким и мигающим. Такая реклама вызовет у посетителя раздражение, а не внимание. Содержимое баннера должно ненавязчиво «намекнуть» пользователю о своем присутствии. Поэтому при подборе изображения и текста для него всегда должен учитываться психологический фактор;
• Вызвать интерес – баннеры для сайта должны вызывать у пользователя интерес к объекту рекламы. Товар или услуга должны быть поданы не только со вкусом, но и оригинально. Приветствуется использование легкого остроумия и юмора:

• Побуждение к переходу по ссылке баннера – достигается за счет эффекта некоторой таинственности и недосказанности,
  вложенного в содержимое баннера.
• Побуждение к заказу услуги или покупке – прежде всего, зависит от содержимого баннерной рекламы. Оно должно показывать самые лучшие стороны объекта рекламы или ту выгоду, которую может получить пользователь от его приобретения.
• Если баннер предназначен для повышения узнаваемости бренда и увеличения его имиджа, то рекламное содержимое должно навеивать потребителю чувство доверия. Но не вызывать при этом негативных ассоциаций.

Закономерности, которые стоит учитывать перед тем, как размещать баннер на сайте:

• Чем больше баннер, тем выше вероятность перехода по нему пользователя. Самым эффективным размером считается 240 на 400 пикселей;
• Наибольшим эффектом обладает баннерная реклама, размещенная сверху (в шапке ). Также она может быть размещена сбоку или внизу страницы, но эффективность здесь несколько ниже;
• Анимированные баннеры способны быстрее привлечь внимание пользователя – интуитивно глаз человека реагирует на движение.

Создание и размещение рекламного баннера

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

Код большинства баннеров соответствует шаблону:

• a href=»/ссылка на сайт рекламодателя» – адрес ресурса, на который приведет пользователя щелчок по баннеру;
• title=»заголовок» – текст, отображающийся в сплывающей подсказке при наведении на область баннера;
• target=»_blank» – задает правила отображения сайта рекламодателя после перехода по ссылке баннера («_blank»- откроется в новом окне);
• rel=»nofollow» – запрещает поисковикам обработку этой ссылки;
• img src=»https://www.сайт/wp-content/uploads/путь к изображению» – задает путь к изображению, отображаемому в баннере;
• alt=»альтернативный текст» – текст, который будет отображен в баннере, если его рисунок не загружен.

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

Или можно заказать создание баннера в профессиональной студии. Тогда это обойдется дороже… Вот примерные расценки:

• Разработка обычного GIF баннера – от 25$;
• Создание баннера на основе Flash – 70-150$;
• Ресайз – примерно 50% от первоначальной его цены.

Но если немного помудрить, то можно сотворить простенький баннер самостоятельно. Вот какое чудо получается после десяти минут манипуляций с кодом html и изображением в Coreldraw :

Код баннера:

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

Вот что получилось:

Код примера:

Создание анимированных и видео баннеров

Рассмотрим на примере как сделать анимированный баннер с помощью программы Ulead GIF Animator .

В меню «Файл » выбираем пункт «Мастер анимации ». В появившемся окне задаем размер будущего баннера. На следующем шаге загружаем подготовленные изображения:

Затем задается скорость смены картинок в анимации. В маленьком окне эта скорость демонстрируется с помощью меняющихся цифр.

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

Нам нужен новый способ сделать баннерную рекламу.

Нам нужны адаптивные баннеры …

Новый формат для баннерной рекламы

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

• HTML-объявления полностью доступны , а семантическая разметка делает их совместимыми с различными разрешениями.
• Текст, изображения, видео, Javascript и формы могут быть использованы в баннере так же, как любая веб-страница.
• Баннеры могут использовать динамические серверные скрипты и базы данных, если это необходимо.
• HTML-объявления могут занимать очень мало дискового пространства.
• Обслуживание баннера по сути такое же, как веб-хостинг.
• Нет новой технологии для веб-разработчиков — она ​​такая же, как обычная веб-разработка.
• и, конечно, HTML5-объявления можно адаптировать к любому размеру с помощью медиа-запросов CSS3 — это как раз то, что нам нужно для адаптивных баннеров!

Итак, как мы можем сделать отзывчивую рекламу?

Единственная хитрость заключается в том, чтобы сделать размеры iframe динамическими с помощью медиазапросов CSS3, я расскажу об этом чуть позже … Но в основном, все!

Посмотрим как это работает

Вот пример объявления HTML5, показанного в популярном размере 125×125 пикселей:

А вот то же объявление с гибкой шириной:

Обратите внимание, как реагирует второе рекламное объявление, когда вы изменяете размер окна вашего браузера … Довольно круто! 🙂

Адаптивные макеты требуют, чтобы элементы страницы имели переменную ширину, поэтому баннеры теперь должны следовать этому требованию.

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

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

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

Я предлагаю придерживаться минимальной ширины 88 пикселей и иметь следующий набор стандартных высот:

• 31px «микро»
  микробар (88 х 31)
• 60px «кнопка»
  кнопка 2 (120 х 60)
  полу баннер (234 х 60)
  полный баннер (468 х 60)
• 90px «баннер»
  кнопка 1 (120 х 90)
  таблица лидеров (728 х 90)
• 125px «маленький прямоугольник»
  квадратная кнопка (125 х 125)
• 250px «средний прямоугольник»
  вертикальный баннер (120 х 240 * достаточно близко!)
  квадратное всплывающее окно (250 х 250)
  средний прямоугольник (300 х 250)
• 400px «большой прямоугольник»
  вертикальный прямоугольник (240 х 400)
• 600px «небоскреб»
  небоскреб (120 х 600)
  широкий небоскреб (240 х 600)
  объявление на полстраницы (300 x 600)

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

Не только это, но моя демонстрационная баннерная реклама в целом стоит менее 25 КБ (HTML, CSS и изображение JPG). Это меньше, чем максимальный размер файла для одного маленького баннера!

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

Изменение размера фреймов с помощью медиазапросов CSS

Иногда вам может потребоваться адаптивная высота для рекламы, для этого вам нужно изменить размер iframe с помощью медиазапросов CSS. Я считаю, что лучший способ сделать это — установить ширину и высоту iframe равными 100% и поместить их в div с конкретными размерами, установленными в CSS. Вот как это выглядит:

< div id = "ad" > < iframe src = "ad.html" border = "0" scrolling = "no" allowtransparency = "true" width = "100%" height = "100%" style = "border:0;" > < / iframe > < / div >

А вот и CSS:

/* default height */ #ad { height:60px; } @media only screen and (height:90px) { /* 90 pixels high */ #ad { height:90px; } } @media only screen and (height:125px) { /* 125 pixels high */ #ad { height:125px; } }

/* default height */ #ad { height : 60px ; @media only screen and (height:90px) { /* 90 pixels high */ #ad { height : 90px ; @media only screen and (height:125px) { /* 125 pixels high */ #ad { height : 125px ;

Отслеживание показов и кликов

Самое лучшее в объявлениях HTML5 — их можно отслеживать с помощью Google Analytics, как и на обычных веб-сайтах.

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 в указанном месте:

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

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

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

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

По поводу демо: у каждого примера (баннера) внизу присутствует длительность в секундах, а также кнопка "Обновить", которая начинает показ баннера сначала.

Баннер #1 — "Индивидуальное обучение сайтостроению" :

Данный баннер я создавал около 2-х дней. Почему так долго? Потому что для адаптации баннера (чтобы сделать его резиновым) ушло некоторое время при пересчете координат. Сейчас его размер зависит от ширины блока-родителя (в котором находится сам баннер CSS).

Этот баннер я создал буквально за 2-2.5 часа. Единственное, что здесь тормозило процесс создания — это выбор иконок. Потому что их необходимо было подобрать близкими по тематике баннера.

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

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

Преимущества и недостатки CSS баннеров:

Как создать баннер CSS? 1 Идея

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

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

2 HTML структура

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

Как правило есть один общий блок, в котором находятся все остальные. И в этом общем блоке мы можем управлять элементами как нам это необходимо.

3 CSS анимация

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

Чтобы создать свой баннер, Вам необходимо хорошо владеть основами CSS и HTML.

Изучите базовую анимацию на CSS с помощью данного урока — .

Вывод

Все современные браузеры поддерживают CSS3 свойства, а, значит, и баннеры будут корректно отображаться в таких браузерах. Но с помощью JS плагинов можно создать баннеры CSS и для старых браузеров. Изучив основы анимации CSS, Вы поймете процесс создания баннеров и вскоре создадите свой первый баннер на чистом CSS! 😉