HTML5-баннеры: методы разработки

  • 29/09/2020, 10:05
Главная задача рекламного блока на сайте — привлечение внимания, и потому классические графические баннеры активно вытесняются анимированными.

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

Достоинства технологии

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

Использование данной технологии дает важные преимущества:

  • Баннеры адекватно отображаются на экранах ПК и портативных устройств, не нужно использовать дополнительные расширения для браузеров.
  • В рекламные блоки легко интегрируются разнообразные приложения: кнопки соцсетей, карты, календари и т.д.
  • Баннеры на HTML5 в лучшую сторону отличаются от Flash — не тормозят загрузку страниц сайта в браузере, так как мало весят и используют минимум ресурсов.
  • Предусмотрен сбор статистики посещений и переходов по привязанным ссылкам — с помощью Google Analytics легко оценить эффективность рекламного объявления.

Крупные игроки мирового рынка, включая Apple, Amazon, Mozilla, постепенно отказываются от флеш-технологий. Google уже отключил поддержку флеш-анимации в своем браузере Chrome, а также полностью перешел на HTML5-баннеры в сервисах поисковой рекламы.

Методы разработки

Баннер HTML5 представляет собой отдельно созданную страницу. На сайт рекламное объявление встраивается как плавающее окно через тег «iframe». Для разработки баннера можно использовать разные методы.

CSS3 и JavaScript

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

Но это задача для профессионала, владеющего специфическими навыками верстки. Кроме того, разработка баннера средствами CSS3 и JavaScript занимает много времени.

Adobe Edge Animate

Специализированная программа проста в использовании — для создания анимированного контента не требуется знать HTML5, CSS3 и JavaScript. Чтобы освоить Edge Animate, можно воспользоваться многочисленными видеоуроками и руководствами в Сети.

Основные достоинства:

  • Значительная часть процессов автоматизирована, библиотека из трех десятков визуальных эффектов ускоряет и упрощает работу.
  • Поддерживается импорт популярных форматов: HTML, .gif, .jpeg, .svg, .png, поддерживаются аудио- и видеоформаты.
  • Готовый баннер отвечает всем техническим стандартам Google и Яндекса, адекватно отображается браузерами и мобильными приложениями.

К недостаткам относят отсутствие русифицированной версии. Также следует учесть, что проект Adobe Edge Animate был остановлен в 2015 году, обновлений нет и не будет. Программу можно найти в архиве Creative Cloud.

Adobe Animate CC

Из-за массовых отказов от использования технологии Flash, разработчики Adobe Flash Professional доработали свою программу и переименовали ее в Animate CC. Интерфейс практически тот же, но возможности уже иные.

Основные достоинства Animate CC:

  • Включена функция создания 3D изображений.
  • Ассортимент векторных кистей, использование возможностей растровой графики (недоступно для Edge Animate).
  • Регулярное появление обновлений, расширение функционала.
  • Предусмотрена русифицированная версия.
  • Конечные файлы экспортируются в JavaScript/HTML, gif, jpeg, mov, svg, png, oam. Чтобы ускорить загрузку баннера, его элементы можно сохранить в спрайтах одним нажатием кнопки.

У Animate CC есть два существенных недостатка:

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

Google Web Designer

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

Google Web Designer порадует пользователя:

  • Простым интерфейсом.
  • Готовыми шаблонами для рекламных объявлений на площадках Google.
  • Русифицированной версией.
  • Возможностью создавать адаптивные баннеры, подстраивающиеся под ширину сайта — такие рекламные блоки эффектно смотрятся на экранах с любым разрешением.

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

Анимированные рекламные объявления можно создавать и иными способами, благо есть другие программы и сервисы, но вышеперечисленные методы доказали свою эффективность. Созданные с их помощью HTML-баннеры соответствуют техническим требованиям и стандартам востребованных рекламных площадок.

Создание адаптивного резинового баннера в Google Web Designer

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

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

Программа Google Web Designer позволяет создать гибкий макет, в котором компоновка элементов баннера меняется при изменении ширины окна.

Создание адаптивной страницы

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

Обратите внимание: создание адаптивного макета доступно не для всех типов файлов.

Положение и размеры

Ширину и высоту адаптивного баннера задают на уровне 100% — в этом случае HTML5-документ будет занимать все отведенное для него место на странице сайта.

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

Сделать все необходимое поможет функция «Резиновый макет», которая входит в состав инструментов выравнивания и распределения.

Изменение стиля

Функционал Google Web Designer позволяет обеспечить гибкое отображение визуального контента баннера в зависимости от размеров областей просмотра и их ориентации. К примеру, информация на мониторе может отображаться в два столбца, а на экране смартфона — в один.

Чтобы задать изменение (переопределение) стиля, следует на панели «Адаптивные»:

  • внести требуемые изменения в «Правила по умолчанию»;
  • указать выбранные размеры или их диапазон в «Правилах обработки мультимедиа», задать стили отображения.

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

Пошаговая инструкция по созданию баннера

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

  1. Подготавливаются исходные изображения, включая кнопки, логотипы и т.д. Рекомендуется заранее оптимизировать их для веб-страниц, чтобы уменьшить вес.
  2. Фон. Для настройки следует зайти в раздел «Свойства» — «Стиль». Выбирается цвет, эффекты (градиент) и т.д.
  3. Построение баннера. Из папки с изображениями перетаскиваются графические объекты и размещаются на фоне. Требуется получить конечный вид баннера. Каждому объекту присваивается идентификатор и стартовая позиция на временной шкале в нижней части экрана.
  4. Настройка анимации. Важно продумать очередность появления объектов и выбрать анимационные эффекты из предусмотренных программой. Определив первый объект, его выбирают в нижней панели и подводят курсор к выбранной точке на временной шкале. В меню, появившемся при нажатии правой кнопки мыши, выбирается пункт «Вставить ключевой кадр». Одновременно в начале временной шкалы появляется исходный кадр, к которому можно применить выбранный эффект, например сделать прозрачным, используя раздел «Свойства». Изменяя положение ключевого кадра на шкале, можно отрегулировать плавность анимации. Аналогично настраивается анимация остальных объектов. В ходе настройки можно просматривать анимацию, включая кнопку «Воспроизведение».
  5. Настройка временных интервалов. Чтобы визуально сформировать каждый кадр и установить между ними определенные временные интервалы, следует перейти в «Быстрый режим» (три квадратика рядом с кнопкой воспроизведения).
  6. Настройка событий. Раздел «Компоненты» в левой панели поможет сделать кнопки на баннере кликабельными, обеспечить переход на страницы с партнерскими предложениями.
  7. Предварительный просмотр. Нажав на соответствующую кнопку в нижней части панели, можно посмотреть, как будет выглядеть и функционировать готовый баннер на сайте.
  8. Если разрабатывается гибкий макет, необходимо воспользоваться инструментами выравнивания и распределения объектов, а также возможностями переопределения стиля (панель «Адаптивные»).
  9. Готовый баннер публикуется на сайте.

Фото: pixabay.com, автор- geralt

Популярное с сайта

Минздрав закупит экспресс-тесты для диагностики ковида

С их помощью наличие или отсутствие заболевания обещают определить за час.

МегаФон приобретает 33,8% акций видеосервиса START

Основная доля и контроль сохранятся за текущими акционерами и основателями холдинга.

Горсовет проголосовал за повышение зарплат для муниципальных служащих

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

Подписаться на новости

Введите свой e-mail

 
×
×
Октябрь 2020
Пн Вт Ср Чт Пт Сб Вс
« Сен    
 1234
567891011
12131415161718
19202122232425
262728293031  
×
Arrow
Arrow
Slider
×
Arrow
Arrow
Slider
×
Arrow
Arrow
Slider
×





Отправляя сообщение, я принимаю условия соглашения об использовании персональных данных и соглашаюсь с Правилами сайта
Я согласен (согласна)

×

Оставьте свои контакты и наш менеджер свяжется с вами, чтобы уточнить необходимые данные.



Отправляя сообщение, я принимаю условия соглашения об использовании персональных данных и соглашаюсь с Правилами сайта
Я согласен (согласна)

×

Оставьте свои контакты и наш менеджер свяжется с вами, чтобы уточнить необходимые данные.



Отправляя сообщение, я принимаю условия соглашения об использовании персональных данных и соглашаюсь с Правилами сайта
Я согласен (согласна)

×
Андрей Травников

Губернатор Новосибирской области. В 2019 году возглавил реготделение партии «Единая Россия». За эффективную работу губернатора и областных органов исполнительной власти регион вошел в десятку лидеров рейтинга и получил из федерального бюджета 1,4 млрд рублей, в область пришли деньги на разморозку перинатального центра, строительство волейбольного центра, ЛДС. Урегулировал взаимодействие между исполнительной и законодательной властью, а также правительством и мэрией Новосибирска.

×
Андрей Травников

Мэр Новосибирска. В сентябре второй раз выиграл выборы на пост главы города. Добился увеличения в бюджет города налогов (УСН), ранее поступавших в областной бюджет

×
Андрей Шимкив

Спикер регионального парламента. Назначен куратором выборной кампании в региональный парламент и горсовет от партии «Единая Россия». Продвигает создание законов по регулированию лесной отрасли, был одним из инициаторов модернизации закона об аграрной политике.

×
Андрей Панферов

В 2019 году руководил реготделением партии «Единая Россия», параллельно работал в статусе вице-спикера регионального парламента. После назначения главой реготделения Андрея Травникова, стал его заместителем. По версии исследования, проведенного новосибирским Институтом политики и технологий и алтайским Центром политического консалтинга, является лидером рейтинга по уровню доверия избирателей среди депутатов Законодательного собрания.

×
Сергей Бойко

Координатор регионального штаба Алексея Навального в Новосибирске. Получил второе место на выборах мэра города. Заявил о готовности принять участие в выборах в горсовет Новосибирска в 2020 году.

×
Наталья Пинуc

Депутат горсовета Новосибирска. Участвовала в выборах мэра от «Российского общенационального союза». Активно поднимала темы задолженности застройщиков за аренду земли, размещения мусорных полигонов, утилизации ТБО.

×
Антон Горестов

Совладелец федеральной сети стрит-фуда «Дядя Дёнер», основатель сети Primetime.

Расширение сети кафе Primetime, запуск проекта «фабрика-кухня», разработка проекта по корпоративному питанию. Переформатирование сети бутик-отелей Ahotels в службу бронирования. Выход на долговой рынок.

×
Александр Лубенец

Финансист, инвестор, председатель НРО ООО «Российский Союз Налогоплательщиков», руководитель комиссии по устойчивому развитию региона и вопросам инвестиционного климата Общественной палаты Новосибирской области. Реализация масштабного проекта по добыче золота в Алтайском крае. Подготовка предложения по регулированию добычи стратегических ресурсов, которые сейчас переданы на рассмотрение в Госдуму и Совет Федерации.

×
Игорь Дедюхин

Гендиректор ООО «РоссПак». Запуск нового производства в Промышленно-логистическом парке. В 2019 году за счет новой площадки компания планировала увеличить выпуск продукции на 25%, в 2020 году — на 30-40%.

×
Борис Горкунов

Руководитель и собственник ГК «Горкунов». В 2019 году началась реконструкция производственных площадей тепличного комплекса «Новосибирский», который будет перепрофилирован под розы. В 2020 году компания планирует приступить к выращиванию цветов на срез. Запустил реализацию проекта по созданию в Колывани селекционно-генетического центра по разведению крупного рогатого скота.

×
Виталий Хан

Гендиректор ОАО «СКТБ «Катализатор». В рамках программы реиндустриализации «СКТБ «Катализатор» реализует проект «Реализация технологической инициативы КИТ: Катализаторы, Инжиниринг, Технологии». На площадке предприятия в Новосибирске создается научно-технологический центр прикладного катализа мирового уровня по разработке современных катализаторов и адсорбентов. В 2019 году компания приступила к реализации проекта «Национальный центр инжиниринга и испытаний катализаторов», в его рамках планируется создание на площадке в Новосибирске парка пилотных установок по основным процессам нефтепереработки, на которых можно было бы проводить испытания катализаторов в реальных условиях работы установок на конкретных НПЗ и на реальном сырье. Участвует в проекте «Строительство завода по производству солей и редкоземельных металлов» в ТОСЭР «Линево».

×
Сергей Грибов

Бизнесмен и девелопер (ГК «Новоград»). Освободился из мест заключения в ноябре 2019 года. Намерен опротестовывать выдвинутые против него обвинения. Учредитель Новосибирской региональной общественной организации правовой и социальной помощи участникам пенитенциарной системы «Сибирский острог». Работает над рестартом МФК «Снежная миля». Дорожную карту по развитию проекта планирует представить в марте 2019 года.

×
Модернизация аэропорта Толмачево и его инфраструктуры

 

В ценах 2019 года совокупная сумма инвестиций в два этапа модернизации аэропорта составит 20 млрд рублей. Около 3,6 млрд рублей будут инвестированы в реконструкцию ВПП-2 (взлетно-посадочная полоса). Сейчас руководство аэропорта ведет переговоры о реконструкции ВПП-1. Еще около 4 млрд рублей планирует вложить в строительство новой ВПП Минобороны РФ и 4 млрд рублей — в создание дополнительных рулежных дорожек — Минтранс РФ.

×
Сырзавод Холдинга «ЭкоНива»

В 2019 году началось строительство сырзавода Холдинга «ЭкоНива» в Маслянинском районе. Общий объем инвестиций — 20 млрд рублей. Предприятие станет одним из крупнейших в России производителей широкого ассортимента молочной продукции, в том числе сыров российской, голландской, швейцарской групп, сливочного масла, йогуртов и сухой деминерализованной сыворотки. Ввод объекта в эксплуатацию запланирован на 2020 год.

 

×
Логистический комплекс «Почты России»

На объекте логистического комплекса уже закрыт корпус, идет поставка и установка оборудования. Запуск намечен на 2020 год. Это будет один из крупнейших в России логистических центров площадью около 50 тысяч кв. м. Расчетная пиковая нагрузка — до 2 млн отправлений в сутки.

 

×
Завод PepsiCo по производству снеков

Новое предприятие станет третьей производственной площадкой в России, выпускающей данную продукцию. Объем инвестиций в проект — не менее 10 млрд рублей. На новом производстве будут созданы около 900 новых рабочих мест (без учета сопутствующих рабочих мест, связанных с ресурсным и сервисным обеспечением площадки). Запланирована установка 4 производственных линий, которая будет осуществлена в несколько этапов с 2019 по 2022 год. Завод намерен покупать сырье у новосибирских сельхозпроизводителей.

 

×
Завод «Ангиолайн»

Новый производственный комплекс компании ООО «Ангиолайн» сдан на год раньше запланированного срока. Инвестиции в строительство составили более 500 млн рублей. Новый научно-исследовательский и производственный центр занимает 9,5 тысячи кв. м, что позволит нарастить производственные мощности более чем вдвое. Благодаря этому будут созданы принципиально новые возможности для производства инновационных медицинских изделий с целью лечения сердечно-сосудистых заболеваний.

 

×
ПФК «Обновление»

Единственная фармкомпания не только в России, но и в мире, которая перешла на стопроцентную маркировку всей своей продукции. Линии по маркировке были запущены в декабре 2019-го, несмотря на то, что правительство РФ перенесло срок вступления в силу закона на середину 2020 года. Объем инвестиций в оборудование для нанесения кода Data Matrix на продукцию в компании не называют. На производственной площадке в Сузуне недавно, в декабре 2019 года, компания запустила полномасштабное галеновое производство. В 2020-м запланирован запуск еще нескольких производственных площадок. Сегодня компания выпускает каждую тридцатую упаковку лекарственных препаратов (сейчас выпуск составляет 15-20 млн упаковок в месяц). Задача: к концу 2021 года выйти на производство 300 млн упаковок в год.

 

×
Правила голосования

 

В голосовании принимают участие читатели информационно-аналитического портала Infopro54.ru. 
Голосование является независимым и анонимным.
Выбирайте в трех номинациях наиболее достойные персон и проекты с вашей точки зрения. Голосование продлится до 31 января 2020 года. 
После этого редакция портала Infopro54.ru подвеет итоги голосования.
Чтобы получить информацию о персоне или проекте,  нужно нажать на подпись под фотографией.
Важное условие: один читатель может выбрать только 1 номинацию в каждой категории.

 

×

Оставьте свои контакты и наш менеджер свяжется с вами, чтобы уточнить необходимые данные.



Отправляя сообщение, я принимаю условия соглашения об использовании персональных данных и соглашаюсь с Правилами сайта
Я согласен (согласна)

×

Извините! Страница пока в разработке!

×

Эксклюзивный материал

Материалы, отмеченные значком , являются эксклюзивными, то есть подготовлены на основе информации, полученной редакцией InfoPro54.ru. При цитировании, перепечатке ссылка на источник обязательна

×
Верховенство российского права

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

×
Ограничения в гражданстве для должностных лиц

Членам Правительства РФ, Совета Федерации, судьям, депутатам Госдумы, государственным служащим будут запрещёны вид на жительство или гражданство иностранного государства.

×
Ужесточение требований к кандидату в президенты

Главой государства гражданин сможет избираться не более двух раз, вне зависимости от того, следуют сроки подряд или нет. Также кандидат в президенты должен проживать на территории России не менее 25 лет и не иметь гражданства или вида на жительство иностранного государства.

×
Закрепление роли Госсовета

Вместо консультативной функции Государственный совет, состоящий из руководителей Совета Федерации, Государственной думы, лидеров её фракций и высших должностных лиц субъектов Федерации, будет наделён полномочиями по определению основных направлений государственной политики и координации работы органов государственной власти.

×
Отклонение президентом законов

Президент сможет отклонить принятый Госдумой закон через Конституционный суд РФ. Но это в случае, если суд признает его противоречащим Конституции.

×
Увеличение полномочий Совета Федерации и Государственной думы

После внесения поправок Совет Федерации, помимо текущих своих полномочий, сможет назначать судей и председателей судов и отстранять их от должности, а также консультировать президента относительно кандидатур на должности министров и прокуроров субъектов РФ. У Госдумы появится право утверждать кандидатуру председателя и членов Правительства РФ.

×
Социальная поддержка населения.

Речь идёт о закреплении в Конституции уровня МРОТ не ниже прожиточного минимума, а также обязательной регулярной индексации пенсионных выплат.

×
Наверх в Новости Новосибирска