Una de las principales ventajas que nos proporciona el universo digital es que posee innumerables formatos comunicativos. En este sentido, podemos seleccionar diferentes formatos para incorporarlos a nuestro sitio web y conseguir diferentes resultados. Estamos convencidos de que conoces lo que son los banners. Incluso aunque no sepas de qué te hablamos, has interactuado con ellos millones de veces como usuario de internet.
¿Qué es un Banner Publicitario?
Lo primero que tenemos que comprender es qué es un banner. Para quienes no estén familiarizados con ese concepto, debemos provocarles un mindblowing diciéndoles que se cruzan con él prácticamente cualquiera de los días que navegan por internet. Son esos espacios publicitarios que se incluye en zonas estratégicas de las páginas web. Después de todo, son utilizados por todas las páginas HTML, o no, que sobreviven a base de publicidad monetizada. En este sentido, sitios web como los sitios web informativos contienen gran cantidad de este tipo de formatos publicitarios.
Es muy importante que los banners no entorpezcan la lectura cómoda del contenido del sitio web, salvo que queramos provocar esto intencionadamente para el mayor impacto de la publicidad.
La Transición de Adobe Flash a HTML5
Tras el anuncio en junio del 2015 de que Chrome va a pausar las animaciones en Flash que considere que no son parte importante del sitio web que estemos visitando, HTML 5 se convierte en el nuevo futuro rey de las animaciones y del Rich Media. Los diseñadores de animaciones y/o banners publicitarios que han venido utilizando Adobe Flash se ven en la necesidad de cambiar de tecnología para seguir haciendo su trabajo. Pero no va a ser tan horrible como parece. En Internet ya hay un buen puñado de software que nos ayudará a crear un banner HTML 5.
Ventajas de los Banners HTML5
En muchísimos casos este banner toma la forma de un banner animado con HTML y CSS. Al final, y como ocurre con la publicidad offline, sea en televisión o en marquesinas, el movimiento atrae la atención mucho más que las imágenes estáticas. Por eso en internet es muy habitual entrar en una página web y encontrar la publicidad en forma de banner animado o tipo GIF. Si nos interesa nos quedamos a verlo un momento más. Si no pues pasamos al contenido que nos ha llevado a dicha página.
Lea también: IVA 21% Excel
El uso de anuncios HTML5 puede ser una gran ventaja para tus campañas publicitarias. HTML5 es compatible con los principales navegadores web, y puede usarse para mucho más cosas, aparte de los banners publicitarios. Puedes elaborar atractivas animaciones, en una fracción en el tamaño del fichero, haciéndolas perfectas para cualquier funcionalidad adicional que quieras agregar a tu sitio web o tienda web.
Herramientas para la Creación de Banners HTML5
¿Quieres introducir un banner CSS en tu sitio web? Pues en ese caso lo primero debemos realizar es la creación del propio banner. Puedes optar por banners genéricos, puedes crearlos tú desde cero o puedes emplear algunas de las miles de herramientas que existen en la red para fabricar banners, tanto a partir de diseños predeterminados como desde cero.
Una de esas herramientas es Google Web Designer, que se posiciona como una de las mejores. Con ella tenemos la posibilidad de crear banners en HTML5 con una gran facilidad y comodidad. ¿Estás pensando en un banner animado y no en un simple banner estático? Lo entendemos. Cuando se trata de publicidad hay que intentar llamar la atención de los consumidores, aunque sin pasarse. Pero tranquilo. Con Google Web Designer, así como con muchas otras de las herramientas de creación de banners que tiene internet, puedes diseñar, elaborar y exportar el banner animado con HTML o CSS que necesitas.
Google Web Designer: Creación Detallada de Banners HTML5
Google Web Designer es una herramienta gratuita que permite diseñar y crear animaciones y banners en HTML 5. La interfaz es bastante intuitiva si estás acostumbrado a trabajar con software de diseño gráfico. Tiene el típico menú de herramientas a la izquierda, el menú de opciones en la barra superior, una línea de tiempo en la parte inferior y paneles de control a la derecha para propiedades, color, eventos, etc. Una de las funcionalidades más interesantes es que lo que creas a golpe de ratón en la “vista de diseño”, tiene una traducción instantánea a código que puedes ver y editar desde la “vista de código”. Por si te gusta ver cómo funcionan las tripas de tu animación.
Pasos para Crear un Banner HTML5 con Google Web Designer:
- Descarga e Instalación: Descárgate Google Web Designer y ejecuta el archivo para instalarlo en tu ordenador.
- Crea un Archivo Nuevo: Al abrir el programa nos pregunta qué tipo de archivo crear: nuevo o basado en plantillas. Seleccionamos la opción que os interese. Si eliges crear un nuevo archivo deberás elegir el tamaño que tendrá y la ubicación donde se guardará. También si quieres que sea un banner HTML 5 preparado para DoubleClick, Admob, Adwords o para un entorno que no sea de Google. En el tipo de animación seleccionaremos “avanzado”.
- Añade las Imágenes que Vayas a Usar: Una buena práctica es tener todas las imágenes que vayas a usar preparadas y añadirla a la biblioteca de recursos, que es un panel que tenemos en la parte derecha de la ventana. Para añadir archivos a la biblioteca de recursos podemos arrastrar los archivos directamente sobre ella o seleccionarlos con el icono de añadir elemento que aparece en la parte inferior izquierda del panel. También, cualquier imagen que arrastremos desde una carpeta al lienzo (ventana principal de diseño) se añadirá automáticamente a la biblioteca.
- Crea y Anima tu Banner HTML5:
- Añades una imagen al lienzo desde la biblioteca o directamente desde su ubicación en tu pc. Será el fondo de la animación. Lo puedes colocar en la posición que quieras del lienzo mediante el panel de propiedades situado a la derecha, ajustando los valores izquierda y arriba de la sección “Posición y tamaño”. En ese mismo panel también puedes controlar el ancho y alto de tu imagen. También es importante el campo ID, en donde podemos cambiar el nombre del objeto a uno más descriptivo.
- En la línea de tiempo los elementos que añadimos al escenario se colocan automáticamente separados por capas. Con el botón derecho del ratón podemos insertar fotogramas clave en la décima de segundo que queramos para cada uno de los elementos. Mediante estos fotogramas clave iremos controlando la animación.
- Al insertar un nuevo fotograma clave nos aparecerá medio rombo donde hemos hecho clic para señalarlo. Si es el primer fotograma que insertamos se añadirá automáticamente otro en el segundo 00.00.00. Una línea gris entre ambos fotogramas nos indica que existe una transición.
- Para controlarla deberemos seleccionar el fotograma en donde queramos efectuar un cambio (se deberá poner en un tono azul) y modificaremos la propiedad que nos interese (la ubicación, el color, el tamaño, etc) del objeto que estemos seleccionando. El programa se encargará automáticamente de realizar la animación. Por ejemplo: para la imagen que hemos insertado fuera del escenario principal, insertamos un fotograma clave en el segundo 00.01.00 y le indicamos una nueva posición dentro del escenario. Hacemos clic sobre el botón de vista previa, que esta sobre la línea de tiempo, y podremos ver como nuestra imagen tarda 1 segundo en ir desde la ubicación fuera del escenario hasta la ubicación dentro de él. De esta manera ya tendríamos nuestra primera animación. De esta manera podríamos proceder con cualquier elemento: imágenes, textos, etc.
- Añade un Enlace a la Animación: Para añadir un enlace a la animación deberemos usar el panel componentes y el panel eventos (en el margen derecho). Arrastramos desde el panel componentes el componente “Área para tocar” y modificamos su ubicación y tamaño (e ID si queremos) desde el panel de propiedades. Queremos que se ajuste al tamaño del marco. Desde el panel eventos podemos añadirle alguna acción a cualquier elemento de nuestro banner HTML 5. Para hacer que el área para tocar que acabamos de añadir nos lleve a un enlace al hacer clic con el ratón deberemos añadir un nuevo evento haciendo clic en el símbolo + que está en la parte inferior izquierda del panel eventos. Se nos abrirá una nueva ventana que nos obligará a ir configurando las siguientes propiedades:
- Objetivo: Sobre qué objeto se podrá activar el evento, en nuestro caso lo haremos sobre el área para tocar, seguramente con ID “gwd-taparea_1”.
- Evento: Qué tipo de evento activará la siguiente acción. Seleccionamos “click” de la lista de eventos de ratón.
- Acción: Qué acción se realizará con el evento que hemos seleccionado. Marcamos “Anuncio de Google > Salir”.
- Receptor: Seleccionamos sobre qué objeto se efectúa la acción. En este caso, como marcamos que queremos salir sólo nos muestra una opción: gwd-ad. Si hubiéramos elegido una acción que cambiara el CSS, por ejemplo, aquí podríamos elegir sobre qué elemento de los que están sobre el escenario se iba a efectuar este cambio.
- Configuración: Este panel cambia según la acción a realizar.
- Exporta el Resultado: Ahora que ya tenemos un pequeño banner HTML5 animado sólo nos queda publicarlo. Para ello, hacemos clic sobre el botón “Publicar” que se encuentra sobre la línea de tiempo y elegimos la opción “Publicar localmente”. Se nos abrirá una ventana para configurar la publicación asignando un nombre a la carpeta, una ubicación en donde guardar el banner. Esta última acción nos publicará los archivos necesarios para publicar el banner.
Creación Rápida de Banners HTML5 con Herramientas en Línea
Si buscas una solución más rápida o necesitas inspiración, existen herramientas generadoras en línea que te permiten crear banners HTML5 en cuestión de minutos. Por ejemplo, la galería de Bannersnack ostenta más de 4000 ejemplos de banners y plantillas publicitarias HTML5, listas para ajustarse y personalizarse de cualquier modo en que creas adecuado.
Lea también: Guía IVA reducido
Para crear impresionantes anuncios gráficos para tus sitios web y campañas publicitarias, el primer paso es asegurarte de elegir el tamaño correcto para tu banner HTML. Si necesitas generar el mismo banner en diferentes tamaños, puedes usar el Generador de diseño para trabajar en varios tamaños a la vez. Es posible que la inspiración no aparezca cuando más la necesitas, por lo que comenzar con una plantilla puede ahorrarte mucho tiempo y esfuerzo.
Con un creador de banner HTML5, podrás sondear los diseños animados hasta encontrar el que se adapte a tus necesidades. Personaliza tu banner HTML, comenzando con el fondo adecuado. Puedes elegir de entre una amplia variedad de imágenes en existencia, o incluso puedes cargar tus propias fotos. Luego que hayas establecido tu fondo, puedes hacer variantes, agregando texto y usando los colores y fuentes que quieras. Si tienes una fuente diseñada especialmente para tu marca, puedes importarla y usarla para todas tus creaciones.
Con tu diseño listo, puedes pasar a la etapa de animación dentro del proceso de elaboración. Agrega animaciones individuales HTML5 a todos tus elementos, como texto, iconos, formas y botones. Para ahorrar más tiempo, puedes usar nuestro Animador mágico, para agregar animaciones a todos tus elementos con tan solo un clic. De esta manera, puedes hacer anuncios HTML5 profesionales sin ninguna habilidad de codificación o diseño, generando banners HTML5 usando tus propios logos, fuentes o vectores.
Declarando la Estructura de un Banner con HTML y CSS
Existen varias opciones para desarrollar un banner HTML. Un banner con imagen y texto es una excelente manera de mostrar un mensaje o promocionar un producto o servicio. En primer lugar, se debe crear la estructura del banner utilizando HTML.
Estructura HTML Básica para un Banner con Imagen y Texto
En este ejemplo, se utilizará un contenedor principal con una clase «banner», y dentro de este contenedor se colocarán la imagen y el texto y un botón. El código anterior describe un banner que contiene una imagen principal, un título, un párrafo con información y un botón para ir a una tienda. A continuación te describo cada una de las etiquetas utilizadas en la estructura:
Lea también: ¿Cómo localizar tus XML del SAT?
- <div class="dj-banner">: Crea un contenedor para el banner.
- <div class="dj-bg">: Crea un contenedor para la imagen, el título, el párrafo y el botón.
- <img src="/images/img-principal.png" alt="" height="400px">: Inserta una imagen con la ruta «/images/img-principal.png», sin texto alternativo y con una altura de 400 pixels. Los materiales que necesitaremos serán una imagen, en nuestro caso una captura de pantalla del showcase de sitios de usuarios usando nuestros temas WordPress, con formato PNG si vamos a aplicarle algún recorte previo y queremos mantener un área transparente o JPG si no vamos a necesitar transparencia.
- <div class="dj-text">: Crea un contenedor para el título, el párrafo y el botón.
- <h1><b>Your Title</b></h1>: Inserta un título con un texto «Your Title» en negrita.
- <p>The information you want to present.</p>: Inserta un párrafo con un texto «The information you want to present.».
- <p><a href="#"><label style="border-radius: 5px; background: #ce2032; border-color:#ce2032; height:44px; color: white; width: 152px; text-align: center; font-size: 16px; padding: 10px 0;">Shop Now</label> </a></p>: Inserta un botón de enlace «Shop Now» que lleva a un destino, se muestra como una etiqueta de texto con estilo de diseño personalizado.
Estilización del Banner con CSS
Una vez que se ha creado la estructura del banner, se puede empezar a estilizarlo con CSS. En este ejemplo, se utilizarán algunos estilos básicos para hacer que el banner se vea atractivo y profesional. El resto de elementos los vamos a maquetar via HTML y CSS, por lo que no es necesario ningún asset adicional, desde el fondo degradado CSS3 hasta los círculos y sombras que aparecerán en el banner. En lo personal, me gusta colocar el css en un archivo diferente a mi index, me parece una forma más limpia y ordenada de hacerlo, sin mencionar que el código css se puede volver enorme y tenerlo todo junto se vuelve inmanejable. Además, para que esto funcione deberemos utilizar el escuchador de eventos de javascript, DOMContentLoaded, que se utiliza para ejecutar la función cuando el documento HTML ha sido cargado en el navegador, pero antes de que cosas como imágenes y hojas de estilo se carguen.
Existen diferentes enfoques para la estilización. La primera de ellas es la más sencilla: debe realizarse una llamada a imagen y ubicarla en la parte superior para, posteriormente, generar los elementos accesorios mediante pseudoelementos CSS. Después de todo, en eso consiste la simbiosis tan productiva de estos dos lenguajes: el HTML nos proporciona el contenido y el CSS nos permite personalizarlo de un modo bastante cómodo. Pero también podemos obviar el CSS. Muy sencillo: sustituimos esos pseudoelementos CSS que nos permiten personalizar la imagen HTML por gráficos vectoriales redimensionables, los cuales nos aportan el componente imprescindible del banner y de cualquier otro elemento gráfico en el internet: diseño responsive.
Hay tres opciones de trabajar con los elementos comentados. La segunda opción consiste en sustituir los pseudo-elementos CSS por svg en el HTML y posicionarlos como absolute dentro del contenedor. Existe una tercera opción, muy útil si no tenemos acceso al HTML y donde usamos toda la potencia que nos permite la propiedad background en CSS3, pudiendo añadir múltiples declaraciones al mismo elemento. Con una sola declaración llamamos a 6 elementos y los vamos ubicando según la posición que queramos.
Consideraciones de Diseño Responsive y Optimización
En la era del diseño responsive y el mobile first no tiene sentido seguir trabajando con medidas de banners fijas, tipo 125×125 o 300×250, por mucho que la mayoría de plataformas de publicidad sigan manteniendo y demandando estos formatos. La flexibilidad de los mismos y su integración dentro del contenido serán las referencias sobre las que empezar a diseñar y maquetar. Hoy les traigo un banner con imagen y texto ajustable al tamaño de la pantalla. Este es el resultado del banner responsive diseñado usando degradados y pseudoelementos CSS. El contenedor del texto tiene un ancho variable, definido por una mediaquery, para ocupar una parte del banner en resoluciones más generosas y cuando sea necesario y posible, llenar el 100% del ancho sin superponerse a la imagen. La imagen en este ejemplo también cambia, pues necesitamos posicionarla de forma absoluta para que se ubique siempre desde la esquina superior derecha, o lo que es lo mismo, top: 0; y right: 0;.
Los banners son elementos importantes en cualquier sitio web ya que llaman la atención de los usuarios y les proporcionan información sobre lo que se ofrece. Los estilos y colores seleccionados deben ser coherentes con la marca y el diseño general del sitio web, y deben utilizarse para resaltar la oferta o mensaje que se está transmitiendo. Además, el texto debe ser claro y conciso, y debe destacar los puntos clave de la oferta o mensaje que se desea transmitir.
Tamaños de Banner Recomendados por Google
Hay algunos tamaños diferentes que Google recomienda al reproducir banner publicitarios en dispositivos móviles y equipos de escritorio. Para equipos de escritorio, estos son los que mejor funcionan:
| Dispositivo | Tamaños Recomendados (px) |
|---|---|
| Equipos de Escritorio | 300 x 250, 336 x 280, 728 x 90, 970 x 90, 468 x 60, 300 x 600, 160 x 600, 250 x 250, 200 x 200 |
Optimización de Imágenes
La resolución de la imagen determina la calidad del banner. Entre menor sea la resolución de la imagen, menor será el tamaño del fichero. Por eso es importante asegurarse de que tu banner publicitario tenga menos de 150 kb, que es el límite de tamaño en Google Ads.
Insertando el Banner en tu Sitio Web
Una vez que has elaborado tu banner HTML5, puedes usarlo de varias maneras. Tras esto sólo nos quedará insertarlo en donde queramos mediante un iframe, por ejemplo. Descárgalo en formato HTML5 y cárgalo en la plataforma publicitaria elegida (p. ej., Google Ads) o consigue el código de inserción del banner y úsalo en tu sitio web. ¿Tienes ya tu banner? Pues en ese caso lo único que tienes que hacer es incrustarlo en tu sitio web.
Gracias a las propiedades de Google Web Designer puedes personalizar todos los componentes del banner de modo que solo tienes que copiar el código, que puedes encontrar en la Vista de código de la herramienta, pegarlo en el archivo HTML de tu sitio web y disfrutar de él. En otras palabras: Google Web Designer permite crear el banner con CSS e incrustarlo como HTML.