Резиновый баннер html5: Адаптивный или резиновый html5 баннер

Содержание

как сделать резиновый баннер HTML5 — «BannerMakers»

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

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

Что такое тянущийся баннер?

Тянущийся баннер в HTML5 (он же “Резиновый HTML5-Баннер”, “перетяжка”, “адаптивный баннер”) – это баннер, который не имеет фиксированной ширины. Такой баннер умеет подстраиваться под ширину сайта, заполняя все доступное пространство. Баннер одинаково хорошо смотрится и на маленьком экране смартфона, и на большом настольном мониторе, без пустот или обрезов по краям.

Рассмотрим на примерах:

Так выглядит резиновый HTML5-баннер и фиксированный баннер.

Зачем нужен тянущийся (резиновый) баннер?

Главный плюс использования такого баннера – больше пространства для вашей рекламы. Баннер, занимающий всю ширину сайта, становится визуально главным на странице и привлекает внимание пользователя.

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

Способы реализации (как изготовить).

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

Способ 1
Баннер с растягивающимся фоном.

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

Способ 2
Пропорциональное растяжение.

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

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

Способ 3
Адаптивная верстка.

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

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

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

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

Выбор способа изготовления, тянущегося HTML5-баннера, зависит от условий размещения и содержания баннера. Опираясь на опыт, мы всегда предложим оптимальное решение и подробно разъясним – почему выбран именно такой способ.

Особые требования.

К тянущимся HTML5-баннерам предъявляется ряд специальных требований рекламных сетей и площадок.

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

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

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

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

Как расшифровать эти непонятные цифры в описании баннера?

При описании формата тянущегося баннера обычно используется такая запись: Баннер 100%х90 (min 768px)

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

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

Один за всех. Тянущийся баннер вместо фиксированных.

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

Да. Например, правильно изготовленный тянущийся баннер 100%х90 может быть размещен на местах фиксированных баннеров: 728x90px, 760x90px, 960x90px, 1200x90px и подобных размеров той же высоты. Ведь он “резиновый” и будет корректно отображаться при любой ширине.

Так что мне заказать? Тянущийся (резиновый) HTML5-баннер или обычный, фиксированного размера?

В данный момент, наиболее популярные форматы для рекламных сетей (Google adWords, РСЯ Яндекс, Адфокс, Адривер) – это баннеры фиксированного размера (768х90px, 300х250px, 160х600px и т.д). Поэтому, для проведения рекламной кампании в этих сетях, лучше заказать комплект анимированных баннеров HTML5 стандартных фиксированных размеров. Стоимость и условия смотрите здесь.

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

Адаптивные баннеры на HTML5 и CSS3 / Хабр

Адаптивный веб-дизайн — значительное достижение для всего Интернета. Мы больше не скованы давно устаревшей моделью «печатной страницы» со статическим содержимым, разбитым на области фиксированного размера. Сегодня Интернет способен жить, дышать и приспосабливаться, заполняя всё пространство, доступное на экранах различных устройств, начиная от мобильных телефонов — и вплоть до огромных видеодисплеев. Это то, какой и предполагалась Глобальная сеть.

Но есть небольшая проблема. Веб-сайты зачастую содержат баннерную рекламу и традиционные баннеры, не обладающие особой гибкостью. Как flash-, так и GIF-баннеры имеют фиксированные размеры, из-за чего несовместимы с современной адаптивной вёрсткой. Нам необходим новый метод создания баннерной рекламы. Нам нужны «адаптивные» баннеры…

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

HTML-реклама доступна повсеместно, а семантическая разметка сделает её подходящей для скрин-ридеров;
текст, изображения, видео, скрипты и формы — всё это может быть использовано в баннере точно так же, как и на любой веб-странице;
при необходимости баннеры могут задействовать динамические сценарии и базы данных на серверной стороне;
в баннер могут быть внесены изменения уже после его размещения;
файл (набор файлов) HTML-баннера может иметь весьма скромный размер
;
banner serving, по существу, сводится к веб-хостингу;
веб-разработчикам не нужно изучать что-либо новое — все технологии остаются теми же, что и при обычной веб-разработке;
и, конечно, при помощи CSS3 медиа-запросов можно заставить HTML5-рекламу «подстраиваться» под любые размеры — ведь именно такое поведение мы ожидаем от адаптивных баннеров!

Во-первых, баннер создается как резиновая HTML5-страница. Мы наполняем её текстом, изображениями, ссылками на требуемую страницу, украшая всё это при помощи CSS3. Во-вторых, такой баннер может быть размещен на любом веб-сайте посредством плавающего фрейма iframe. Есть одна хитрость, задействующая CSS3 медиа-запросы чтобы сделать динамическими размерности iframe’а, и вскоре я расскажу о ней… Однако, по большому счёту, это всё!

Вот пример HTML5-баннера популярного формата 125 x 125 px («квадратная кнопка»). А вот пример того же баннера с измененной шириной. Обратите внимание, как этот баннер ведет себя при изменении размеров окна браузера. Изящно, не правда ли? 🙂

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

Для сохранения обратной совместимости адаптивные баннеры должны иметь те же значения высоты, что и традиционные. Теоретически мы можем создать баннеры, работающие с любой шириной/высотой, но их слишком сложно конструировать или тестировать. Я предлагаю отталкиваться от минимальной ширины в 88 px и придерживаться следующего набора стандартных высот:

31px «микро»

микро полоса (88 x 31)

60px «кнопка»

кнопка 2 (120 x 60)
половина длинного баннера (234 x 60)
длинный баннер (468 x 60)

90px «баннер»

кнопка 1 (120 x 90)
горизонтальный (ведущий) длинный (728 x 90)

125px «малый прямоугольник»

квадратная кнопка (125 x 125)

250px «прямоугольник средней величины»

вертикальный баннер (120 x 240 *Достаточно близко!)
всплывающий квадрат (250 x 250)
прямоугольник средней величины (300 x 250)

400px «большой прямоугольник»

вертикальный прямоугольник

600px «небоскрёб»

небоскрёб (120 x 600)
широкий небоскрёб (160 x 600)
объявление на полстраницы (300 x 600)

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

Самым замечательным является тот факт, что 14 общепринятых форматов баннеров сводятся всего к семи, причём все они могут быть представлены всего одним HTML5-баннером! В добавок, мой демо-баннер занимает менее 25k

вместе со всеми составляющими (HTML, CSS и JPG-изображение).

Опробуйте эти новые форматы в моём приложении для проверки адаптивных баннеров — с его помощью вы можете тестировать и свои собственные баннеры. Измените размер окна браузера чтобы увидеть, как все они «приспосабливаются».

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

<div>
   <iframe
      src="ad. html"
      border="0"
      scrolling="no"
      allowtransparency="true"
     
     
     >
   </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;
   }
}

Откройте CSS-файл моего адаптивного баннера, чтобы рассмотреть рабочий пример.

Ещё одна замечательная особенность HTML5-баннеров состоит в том, что их можно отслеживать в Google Analytics — как и обычный веб-сайт. Фактически, мы получаем намного больше данных, чем от типичной системы показа рекламы. Вы можете надежно отследить не только количество показов баннера (banner impression tracking), но и рефереров, браузеры, разрешения экранов, мобильные устройства, популярные страны/города и много чего ещё!

Кроме того, задачу отслеживания количества кликов по баннеру можно легко решить, воспользовавшись одним из множества бесплатных сервисов сокращения ссылок. Лично я предпочитаю bit.ly. Если ваш баннер содержит большое количество ссылок, вы сможете отследить их по отдельности. Только не забудьте добавить target=»_top» в гиперссылки, чтобы реклама «вышла» за пределы фрейма, полностью захватив окно браузера.

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

<meta
   name="displayheight"
   content="31, 60, 90, 125, 250, 400, 600" />

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

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

<div >
   <iframe
      src="http://matthewjamestaylor.com/responsive-ads/ad.html"
      border="0"
      scrolling="no"
      allowtransparency="true"
     
     
     >
   </iframe>
</div>

Свяжитесь со мной, если у вас есть любые предложения или багфиксы. У меня не было возможности протестировать всё в IE… У меня сын, которому всего 11 дней, и 20-месячная дочь, поэтому у меня не так много свободного времени… Невероятно, но мне всё же удалось дописать эту статью!

Некоторые достаточно критично относятся к внедрению HTML5 (связки HTML5+CSS3+JavaScript) в различные области разработки: создание баннеров, игровая индустрия и проч. И я не могу не согласиться, что сегодня существует достаточно проблем, связанных с производительностью (CSS3 Transition, JavaScript), отсутствием достаточно мощных дизайнерских инструментов (Adobe Flash vs Adobe Edge) или необходимостью изучения и разработки новых технологий, приёмов и подходов. Но лично для меня очевидно, что все эти проблемы

не

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

P.S. В HTML5 для тега iframe добавлен атрибут sandbox, позволяющий накладывать ограничения на содержание фрейма. Возможно, этот факт поможет сгладить ту волну паранойи, которая иногда охватывает iframe. Правда, с поддержкой в разных браузерах пока слабовато (проверить можно тут).

UPD: Немного здравой критики.

Сколько энергии можно хранить в резинке?

Getty Images

Ретт Аллен

Наука

23 марта 2018 г. 10:00

По шкале от «легкий удар» до «боже, смотри с этой штукой!»

Сколько энергии может храниться в резинке? Очевидно, ответ зависит от размера резинки.

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

Позвольте мне начать с простой резинки, которую я буду растягивать. Самое классное в резинках то, что они в основном похожи на идеальную пружину, но не совсем. И пружины, и резинки обладают особым свойством: чем сильнее вы тянете, тем больше требуется усилий, чтобы их растянуть. Или вы могли бы сказать, что сила, с которой лента тянет назад, пропорциональна растяжке. Эта константа пропорциональности называется жесткостью пружины и обозначается символом k (в единицах Н/м).

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

Итак, мне просто нужно посмотреть, является ли резинка «пружиной», а затем измерить жесткость пружины. Как насчет некоторых реальных данных о типичной резинке — той, что вы можете найти в ящике стола или той, которая скрепляет все ваши карандаши вместе.

Самые популярные

Вы можете видеть, что это в основном выглядит как линейная зависимость между расстоянием растяжения и силой (прямо как пружина). Наклон этой линии будет пружинной константой со значением 9.0,8 Н/м. Это означает, что если я растяну резиновую ленту примерно на 20 сантиметров (это около точки разрыва), то в ней будет храниться 1,8 Дж энергии.

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

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

Это выглядит как довольно линейная зависимость — точно так же, как зависимость растяжения от силы. Наклон этой линии показывает взаимосвязь между углом закручивания и крутящим моментом — я буду называть это жесткостью вращательной пружины (k _р). Для этой резинки у меня есть вращательная пружина, равная 3,68 x 10 ^-5 Ньютон*метров. Теперь я могу рассчитать полную энергию с помощью этого выражения (вы можете вывести его для домашнего задания).

Самый популярный

Итак, сколько энергии я могу таким образом сохранить в резинке? Я могу прокрутить резинку на 100 оборотов, не порвав ее (она порвалась на 111 оборотах). Это будет общий запас энергии 7,2 Дж. Странно. Кажется, я могу накапливать больше энергии, скручиваясь, а не растягиваясь.

Прежде чем рассчитать плотность энергии, мне нужен объем резиновой ленты. Если вы возьмете резинку и разрежете ее, она станет очень длинным и тонким прямоугольным параллелепипедом. Все, что мне нужно сделать, это измерить длину, ширину и высоту. Для этой конкретной резинки я получаю объем 8,1 х 10 ^-7 м ³ . Это даст плотность энергии резиновой ленты 2,2 МДж/м ³ для растяжения и 8,9 МДж/м ³ для скручивания. Может показаться, что это слишком много энергии, но помните, что ³ ³ бензин имеет 34 ГДж/м ³ .

А как насчет удельной энергии? Опять же, это просто энергия, запасенная на единицу массы. Резинка имеет массу 1,09 грамма. Это дает удельную энергию 1651 Дж/кг при растяжении и 6605 Дж/кг при скручивании. Это полезно? Если вы строите автомобиль с приводом от резиновой ленты, да, это будет очень полезно.

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

Вращательная жесткость этой более толстой ленты, как не удивительно, выше, чем у резиновой ленты нормального размера, со значением 4,92 x 10 ^-4 Н*м. Если предположить, что я мог бы также повернуть его 100 раз, то запас энергии в нем составил бы 97,1 Дж. Конечно, он хранит больше энергии, но и имеет больший объем. Измерив размеры и вычислив объем, я получаю плотность энергии 6,4 МДж/м ³ . Это примерно такая же плотность энергии, как у маленькой резинки. Я думаю, это довольно круто. Может быть, мне нужно повторить это измерение для всех видов резинок. Или, может быть, я мог бы просто оставить это на ваше усмотрение в качестве домашнего задания.

Ретт Аллен — адъюнкт-профессор физики Университета Юго-Восточной Луизианы. Он любит преподавать и говорить о физике. Иногда он разбирает вещи и не может собрать их обратно.

TopicsexperimentEnergyphysics

Больше от WIRED

Accelerate Learning

Создан в партнерстве
с NYSCI

Преодолеть разрыв между преподаванием инженерной практики и вдохновением будущих инженеров

Создан в сотрудничестве с New York Hall of Science (NYSCI), STEMscopes Направляющие DIVE-in Engineering студентов с помощью увлекательной инженерной программы, построенной на гибких практических уроках, разработанных для превратите свой класс в настоящее рабочее пространство.

Подарите своим учащимся практический образовательный опыт, основанный на исследованиях, который поощряет исследование и вдохновлять изобретательность, используя Метод ПОГРУЖЕНИЯ .

Разобрать

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

Имитация

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

Варьируются

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

Исследовать

Знания и навыки, полученные студентами на предыдущих этапах, подготовили их к финалу.

Рубрики