Digital
Disponible en
Especificaciones

Dimensiones del creativo: 300 x 600 píxeles.

Formatos aceptados: HTML5.

Aclaraciones:

El formato Filmstrip es una creatividad que funciona como una “Ventana” en la que podemos ver un anuncio total de 300x3000px (en 5 segmentos de 300x600). Su particularidad es que podemos hacer scroll en el contenido, mediante controles o roll-overs.

Creatividades en HTML5:

Materiales a entregar: Es importante cumplir obligatoriamente con todos los pasos. El anuncio junto con todos sus archivos y recursos que utilice deben ser enviados o cargados en formato zip. El anuncio dentro del zip debe contener obligatoriamente el nombre de “index.html” y todas las rutas de imágenes, css, javascript, etc deben ser relativas (por ejemplo: video.mp4 // OK http://www.dominio.com/carpeta/video.mp4 // MAL). En la siguiente imagen, se describe como se debe armar el zip:

envio-piezas

¿CÓMO SE PROGRAMA?
Debe estar tal cual este código en el html:

Creatividad con video:
<body 0px; padding: 0px;">
 <div id="filmstripContenedor" hidden; width: 300px; height: 600px; backgroundcolor:#D8DDE2;">
 <div id="filmstripContenido" 1200px;">
 <a return false"href="#!">
 <img src="filmstrip1.jpg" alt="" block;"/>
 <img src="filmstrip2.jpg" alt="" block;"/>
 </a>
 <div>
 <div id="VideoFilm">
 <video id="v1" width="280" height="200" controls autoplay muted />  <source src="video.mp4" type="video/mp4">
 </video>
 </div>
 </div>
</body>

Creatividad sin video:
<body 0px; padding: 0px;">
 <div id="filmstripContenedor" hidden; width: 300px; height: 600px; backgroundcolor:#D8DDE2;">
 <div id="filmstripContenido" 1225px;">
 <a return false"href="#!">
 <img src="filmstrip1.jpg" alt="" block;"/>
 <img src="filmstrip2.jpg" alt="" block;"/>
 </a>
 <div>
 </div>

» id: VideoFilm: Se le deben de dar estilos css para posicionar el video en el anuncio.
» filmstrip1.jpg/filmstrip2.jpg las creatividades de 300px por 600px cada una; que componen la creatividad final de 300px por 1200px.
» id: filmstripContenedor: Lleva de medidas el ancho y alto de las imágenes que conforman la creatividad 300px por 600px.
» id: filmstripContenido: Se le debe de verificar que la altura sea la suma de las dos imágenes que conforman la creatividad. Ejemplo si tengo dos imagenes de 300x600px la altura del filmstripContenido será 1200px.

No se debe utilizar iframes

Si se diseña en google web designer:
Realizar un anuncio que NO es de google
Realizar correctamente todos los divs, por separado para clicktag y botones.

 

 

Especificaciones técnicas para el clickTag:

El clickTag es genérico para todos los tipos de formatos y piezas programadas, la implementación es la siguiente:

<a onclick="window.open(window.clickTag); return false" href="#!"></a>

Si requerimos que un área específica por ejemplo un div realice el clickTag realizamos lo siguiente:

<a onclick="window.open(window.clickTag); return false" href="#!">
<div id="clickTag" style="width:400px;height:400px"></div>
</a>

Englobamos nuestro elemento HTML con la etiqueta <a> para que se aplique la zona activa.

Insertar video en la creatividad:

El video debe ser MP4, con codificación estándar (H264 lo recomendado) y estar incluido dentro del zip. Las urls en el HTML5 que lo llamen deberán ser relativas.

Se recomienda previamente chequear si el video funciona correctamente en Chrome y Firefox, a modo de testing nomás.

El video debe ser llamado en el HTML mediante el tag <video> y el source correspondiente:

<video id="v1" width="320" height="320" controls autoplay muted>
<source src="video.mp4" type="video/mp4">
</video>

Peso máximo permitido del video: 3 MB.

Descargar pieza ejemplo:

http://www.e-planning.net/public/formatos/000000078-ejemplos_filmstrip.zip