Cómo crear un anuncio HTML5 interactivo en 10 minutos
Con la desaparición de Flash, la responsabilidad de los anuncios interactivos pasó a HTML5. Aquí aprendemos cómo crear un anuncio HTML5 interactivo en solo 10 minutos.
Hoy nos gustaría demostrar cómo crear un banner publicitario HTML5 interactivo.
Este fue un proyecto que hicimos para Carlsberg hace un tiempo, que creemos que puede ser útil para diseñadores y programadores interesados en el trabajo de diseño de front-end.
Carlsberg es una marca de cerveza global de miles de millones de dólares que emplea a más de 40.000 personas en todo el mundo. Además de la marca doméstica Carlsberg, también albergan otras marcas como Tuborg, Somersby (sidra), Kronenbourg y Dali Beer (una marca de rápido crecimiento en Asia).
¿Qué es un anuncio interactivo?
Hagamos un resumen rápido. En los viejos tiempos, teníamos anuncios de texto, que son básicamente una breve propaganda de texto con un enlace a la página, el producto o el servicio del anunciante.
Luego vinieron los anuncios de banner estáticos. Suelen ser imágenes estáticas. Son más atractivos que los anuncios de texto, porque las imágenes valen más que mil palabras. Los principales formatos vienen en 300 × 250 píxeles (caja), 728 × 90 (ancho) o 90 × 728 (rascacielos).
Luego, el juego de tecnología Flash en el navegador de escritorio. Flash fue revolucionario porque permitió una ola de anuncios de banner animados, así como interactivos. Los anuncios animados cautivan la atención del usuario, lo que resulta en tasas de clics (CTR) más altas. Los jugadores incluso podrían jugar un microjuego como disparar algo o lanzar una pelota al aro.
En 2010, Apple convenció al mundo de las virtudes de cambiar a HTML5, y con gigantes como Google siguiendo su ejemplo, la tecnología Flash declinó rápidamente.
Las empresas de tecnología publicitaria ven el enorme potencial de crecimiento en los dispositivos móviles y, por lo tanto, comenzaron a implementar HTML5 en un nuevo bloque de anuncios multiplataforma. Esta unidad se denomina anuncio interactivo HTML5 y está respaldada por los nuevos estándares de la industria, como MRAID, MRAID2, etc.
En pocas palabras, un anuncio HTML5 interactivo, es un anuncio que ahora funciona en teléfonos inteligentes, tabletas y navegadores de escritorio.
Entonces, ¿de qué se trata este anuncio de Carlsberg?
Aquí está un enlace al video, que muestra el anuncio interactivo que se ejecuta en un iPhone:
El objetivo de este anuncio interactivo es dar a conocer el World Rugby Sevens Tournament, un evento anual de rugby que se realiza en Hong Kong. Los mejores de los mejores equipos de todo el mundo compiten anualmente para ganar el premio mayor. Carlsberg es uno de los principales patrocinadores.
La experiencia del anuncio es simple. Los usuarios ven una botella de cerveza Carlsberg que brilla intensamente. Un mensaje le pide al usuario que toque la botella brillante.
Al tocarlo, se reproduce una breve animación de un jugador de rugby que lleva un cubo frío y helado de cervezas Carlsberg.
Aparece un divertido lema de la marca: «¿Estás lista para la cerveza»?
Los usuarios pueden tocar el enlace ‘Encuéntrenos en Facebook’ para visitar la página del anunciante y obtener más información.
Volver a nuestra programación habitual
Un anuncio HTML5 interactivo consta de 5 elementos principales:
- index.html (punto de entrada principal)
- main.js (el javascript que contiene la lógica)
- main.css (la hoja de estilo CSS)
- activos (activos visuales)
- el enlace de salida (donde el anuncio debe llevar a los usuarios)
Empecemos a crear el anuncio …
Parte 1: index.html
El index.html consta de declaraciones HTML estándar.
Ver la pluma Demostración de anuncios interactivos de Carlsberg: index.html por Ben Chong (@marketjs) en CodePen.
Lo que importa aquí es la ventana gráfica meta y el enlace a main.css y main.js
Como puede ver, es bastante simple. Nada fuera de lo común.
Parte 2: main.js (La carne y los huesos)
Main.js es un archivo Javascript que impulsa toda la interacción con el anuncio.
Ver la pluma Demostración de anuncios interactivos de Carlsberg – main.js por Ben Chong (@marketjs) en CodePen.
En la parte superior, insertamos todo el JS minificado de jQuery. Tenga en cuenta que puede usar la última versión de jQuery desde http://jquery.com/
jQuery será útil para la mayoría de las técnicas de manipulación DOM que utilizamos.
A continuación, creamos una función de precarga basada en imágenes simple.
Precargamos un montón de recursos gráficos relacionados con el anuncio.
Ahora, pasemos a la lógica. Cuando se cargue el anuncio, notará que creamos 2 divs, llamados escena 1 y scene2.
scene1 contiene el div de la botella brillante. Cuando se hace clic en él, pasa a scene2, a través de la función gotoScene2
scene2 en sí contiene el lema div, que redirige a la página de Facebook de Carlsberg, cuando se toca.
Eso es básicamente todo. Se necesita una lógica muy simple.
Parte 3: main.css (la hoja de estilo)
El archivo main.css contiene todos los estilos relacionados con CSS.
Ver la pluma Demostración de anuncios interactivos de Carlsberg – main.css por Ben Chong (@marketjs) en CodePen.
En este ejemplo, hicimos algunas de las animaciones geniales que ves a través de CSS.
Por ejemplo, la botella de cerveza que brilla intensamente utiliza el valor del intermitente del -webkit-animation propiedad
También agregamos algunos algoritmos estándar que los usuarios tienden a amar, como bounceIn y bounceOut.
Parte 4: Activos visuales
Los anuncios interactivos requieren imágenes divertidas relacionadas con la marca. Por lo tanto, es recomendable trabajar con un diseñador en anuncios HTML5 interactivos.
En nuestro caso usamos: El fondo verde en blanco; La botella; El fondo con el hombre de rugby que sostiene un cubo de hielo frío de cervezas; Los gráficos de llamada a la acción.
Parte 5: Llamada a la acción (CTA)
Estas son las partes más importantes de cualquier anuncio interactivo. La llamada a la acción debe diseñarse para que los usuarios realmente quieran hacer clic para obtener más información.
Tiene que ser un mensaje convincente que se vincule con la curiosidad del usuario.
Resumen
Esperamos que este artículo sea de utilidad para la comunidad. Como puede ver, este anuncio interactivo es realmente fácil de crear y no le llevará más de 10 minutos armarlo usted mismo.
haga clic aquí para descargar los archivos del proyecto y el código fuente.
