Multiplataformas Web

ADELANTE

IMPORTANTE FLASH Todos los avisos realizados en ADOBE FLASH pasan por un filtro de conversión en HTML5, el cual se generan estos inconvenientes: - La velocidad de la animación no será igual al original (animación lenta). - La calidad de las imágenes en la animación no será la misma a la original (baja la calidad un 40% aprox.) * Se sugiere al cliente o agencia que envíe los materiales en ADOBE ANIMATE O HTML5.

HTML5 PURO - Pueden usar cualquier software de animación o editor de texto HTML5 (Dreamweaver, Sublime, Brackets, etc). - El área de diseño no brinda soporte para animaciones, solo incorporará los códigos de métricas para el banner. - En caso el cliente solicite adaptaciones, es necesario que el cliente cuente con los materiales editables (proyecto).

CLICK AQUÍ

PLATAFORMAS PARA CREAR BANNERS

desktop

MÓVIL

FORMATOS DE BANNER

FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

ESPECIFICACIONES TÉCNICAS

VER LOS TIPOS DE PLATAFORMA

TIPOS DE PLATAFORMAS se recomienda el uso de las siguientes plataformas:

desktop

MÓVIL

Estándar

Estándar

HTML5 puro GOOGLE WEB DESIGNER adobe animate

HTML5 puro adobe animate jpg - png - gif

RICH MEDIA

RICH MEDIA

HTML5 puro GOOGLE WEB DESIGNER rising star*

HTML5 PURO RISING STAR* jpg - png - gif

*Es una plataforma para avisos con interactividad especial (galería de fotos, galeria de videos, raspar, arrastrar, formularios, parallax, etc).

CLICK AQUÍ

FORMATOS DE BANNER

DESKTOP

Banner Estándar

Banner Rich Media

TOP

TOP Push down

Right

Expandible push

Botón

Layer

Daily

Peel / OREJA

Middle

zócalo expandible

PRE-ROLL

ESPECIFICACIONES TÉCNICAS

ESPECIFICACIONES TÉCNICAS CLICK AQUÍ

especificaciones técnicas DESKTOP ESTÁNDAR

DESKTOP rich media

¿Qué plataforma vas a usar?

¿Qué plataforma vas a usar?

HTML5 PURO

HTML5 PURO

GOOGLE WEB DESIGNER

GOOGLE WEB DESIGNER

ADOBE ANIMATE

Rising star FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

DESKTOP - ESTÁNDAR HTML5 PURO 1. Peso máximo del archivo zipeado es de 150 KB. 2. El archivo index.html no debe estar dentro de una carpeta.

3. Debe contener un botón o área sensible que cubra todo el banner. 4. La animación debe loopear (rebobinar automáticamente). 5. No debe contener botón replay.

Si desea adicionar un video al banner:

CONSIDERACIONES DE VIDEOS: Link de Video: (Youtube, Vimeo) son considerados banner estándar.

El tamaño del video debe ser enviado a la medida que se va a utilizar en la animación del banner.

Video MP4: Son considerados Rich Media (consultar con ejecutivo).

Peso: El peso máximo del banner con video es de 5MB (animación + MP4)

implementación de código clicktag especificaciones técnicas FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

DESKTOP - ESTÁNDAR GOOGLE WEB DESIGNER 1. Peso máximo del archivo zipeado: 150 KB.

6. Enviar el archivo ZIP exportado.

2. Crear proyecto de la siguiente manera: Ver demo aquí

* Si se solicita cambios o adaptación será necesario que envíen la carpeta del proyecto (comprimido).

3. Agregar el componente área sensible y colocarla sobre todas las capas cubriendo todo el tamaño del banner. (No incluir el evento o link de destino). Ver demo aquí 4. Renombrar el componente área sensible como: ClickTag. Ver demo aquí 5. La animación debe contener el evento Loop. Ver demo aquí

Comprimir y enviar

Si desea adicionar un video al banner:

CONSIDERACIONES DE VIDEOS: Link de Video: (Youtube, Vimeo) son considerados banner estándar.

El tamaño del video debe ser enviado a la medida que se va a utilizar en la animación del banner.

Video MP4: Son considerados Rich Media (consultar con ejecutivo).

Peso: El peso máximo del banner con video es de 5MB (animación + MP4)

implementación de código clicktag especificaciones técnicas FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

DESKTOP - ESTÁNDAR ADOBE ANIMATE 1. Realizarlo en HTML5 Canvas. 2. El nombre del documento no debe contener espacios ni caracteres especiales. (Muy Importante) 3. Velocidad de la animación a 24 FPS.

8. La animación debe realizarse con Movimiento Clásico (Classic Tween). 9. Se sugiere trabajar las imágenes a la medida exacta a usar. 10. Colocar un botón que cubra todo el tamaño del banner y debe ser ubicado encima de todas las capas de la animación.

4. Convertir los textos a curvas. 5. Todos los objetos deben estar dentro de un clip de película.

11. Enviar los siguientes archivos comprimido (Peso 150KB).

6. Las capas no deben contener Máscaras. No usar materiales enmascarados en Illustrator. 7. No realizar efectos de sombra, difuminado o Blur.

Comprimir y enviar

Si desea adicionar un video al banner:

CONSIDERACIONES DE VIDEOS: Link de Video: (Youtube, Vimeo) son considerados banner estándar.

El tamaño del video debe ser enviado a la medida que se va a utilizar en la animación del banner.

Video MP4: Son considerados Rich Media (consultar con ejecutivo).

Peso: El peso máximo del banner con video es de 5MB (animación + MP4)

implementación de código clicktag especificaciones técnicas FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

DESKTOP - Rich Media HTML5 PURO 1. Peso máximo del banner 2MB (banner + video hasta 5MB).

4. El botón CLICKTAG no debe incluir link de destino.

2. Comprimir los archivos de la siguiente manera:

5. Las animaciones (contraído y expandido) deben loopear independientemente. 6. Debe contener los botones abrir y cerrar, que funcionen dándole click (ubicados por sobre el botón CLICKTAG). 7. Este tipo de banners no deben contener implementación de códigos de cierre de 8 segundos. 8. La estructura del banner debe ser: primero contraído y luego expandido.

3. Debe contener un botón (nombre CLICKTAG) que cubra todo el banner: uno para el contraído y otro para el expandido (estos deben ser ubicados: uno encima del contraído y el otro encima del expandido).

especificaciones técnicas FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

DESKTOP - Rich Media GOOGLE WEB DESIGNER 1. Peso máximo del banner 2MB (banner + video hasta 5MB).

7. Enviar el archivo ZIP exportado.

2. Crear el proyecto de la siguiente manera: Ver demo aquí

* Si se solicita cambios o adaptación será necesario que envíen la carpeta del proyecto (comprimido)

3. Pueden usar todos los componentes que brinda Google Web Designer. 4. Colocar el componente área sensible sobre todas las capas cubriendo todo el tamaño del banner (No incluir el evento o link de destino). Ver demo aquí 5. Renombrar el componente área sensible como: ClickTag. Ver demo aquí

Comprimir y enviar

6. La animación debe contener el evento Loop. Ver demo aquí

especificaciones técnicas FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

DESKTOP - Rich Media Risign Star 1. Los banners Rising Star son elaborados por el equipo de diseño del Grupo EcoMedia. 2. Deben enviar los archivos editables en cualquiera de los siguientes programas: Photoshop, Illustrator, PDF.

especificaciones técnicas FORMATOS DE BANNER

FORMATOS DE BANNER

MÓVIL

Banner Estándar

Banner Rich Media

TOP

Zócalo

Botón

take over

Daily

Middle Inferior

ESPECIFICACIONES TÉCNICAS

ESPECIFICACIONES TÉCNICAS CLICK AQUÍ

especificaciones técnicas Móvil ESTÁNDAR

Móvil rich media

¿Qué plataforma vas a usar?

¿Qué plataforma vas a usar?

HTML5 PURO

HTML5 PURO

ADOBE ANIMATE

Rising star

otros fo rmatos

otros fo rmatos FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

Móvil - ESTÁNDAR HTML5 PURO

1. Peso máximo del archivo zipeado es de 150 KB. 2. El archivo index.html no debe estar dentro de una carpeta.

3. La animación debe loopear (rebobinar automáticamente). 4. No debe contener botón replay. 5. La animación debe ser responsive.

especificaciones técnicas FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

Móvil - ESTÁNDAR ADOBE ANIMATE 1. Peso máximo 150KB.

8. No realizar efectos de sombra, difuminado o blur.

2. Realizarlo en HTML5 Canvas.

9. La animación debe realizarse con Movimiento Clásico (Classic Tween).

3. El nombre del documento no debe contener espacios ni caracteres especiales. (Muy Importante) 4. Velocidad de la animación a 24 FPS. 5. Textos convertidos a curvas. 6. Antes de realizar la animación, cada objeto (texto, imágenes, formas, etc) debe estar dentro de un clip de película.

10. Los materiales importados de Illustrator no deben contener máscaras. 11. Exportar el material de la siguiente manera: Ver demo aquí 12. Enviar los siguientes archivos comprimido:

7. Las capas no deben contener Máscaras.

Comprimir y enviar

especificaciones técnicas FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

Móvil - ESTÁNDAR OTROS FORMATOS 1. Peso máximo 150KB. 2. Pueden enviar archivos JPG, PNG, GIF.

Imagen estática

Imagen estática

Imagen estática y/o con movimiento (tiene baja calidad de imagen)

especificaciones técnicas FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

Móvil - Rich Media HTML5 PURO 1. Peso máximo 150 KB (banner + video hasta 5MB). 2. El archivo index.html no debe estar dentro de una carpeta.

3. La animación debe loopear (rebobinar automáticamente). 4. debe contener un botón cerrar de 70 x 70 píxeles, ubicado en la parte superior derecha. Descargar imagen del Botón 5. La animación debe ser responsive.

especificaciones técnicas FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

Móvil - Rich Media Risign Star 1. Los banners Rising Star son elaborados por el equipo de diseño del Grupo EcoMedia. 2. Deben enviar los archivos editables en cualquiera de los siguientes programas: Photoshop, Illustrator, PDF.

NOTA: • En caso el diseño del aviso esté elaborado en JPG considerar que éste NO ES ARCHIVOS EDITABLES. • En lo cual el diseñador se limitará en la realización del aviso.

especificaciones técnicas FORMATOS DE BANNER

ESPECIFICACIONES TÉCNICAS

Móvil - Rich Media Otros Fo rmatos

6. Antes de realizar la animación, cada objeto (texto, imágenes, formas, etc) debe estar dentro de un clip de película. 7. Las capas no deben contener Máscaras.

Imagen estática

Imagen estática

Imagen estática y/o con movimiento (tiene baja calidad de imagen)

8. No realizar efectos de sombra, difuminado o blur. 9. La animación debe realizarse con Movimiento Clásico (Classic Tween). 10. Los materiales importados de Illustrator no deben contener máscaras.

ADOBE ANIMATE:

11. Exportar el material de la siguiente manera: Ver demo aquí

Solo los formatos TakeOver simples (solo animación) se pueden realizar en Adobe Animate.

12. Enviar los siguientes archivos comprimido:

1. Peso máximo 150KB. 2. Realizarlo en HTML5 Canvas. 3. El nombre del documento no debe contener espacios ni caracteres especiales. (Muy Importante)

Comprimir y enviar

4. Velocidad de la animación a 24 FPS. 5. Textos convertidos a curvas.

especificaciones técnicas FORMATOS DE BANNER

Pasos para implementar el código Clicktag

DESKTOP - ESTÁNDAR GOOGLE WEB DESIGNER

1. Descomprimir el archivo exportado (NombreDelArchivo.zip). 2. Abrir el archivo con nombre index.html en un editor de códigos HTML (Sublime Text, Dreamweaver). 3. Ubicar la línea de código del área sensible llamado ClickTag:

4. Insertar el código ClickTag:





Debe quedar de la siguiente manera:

5. Ahora debemos guardar el archivo (Para PC: CTRL + S) (Para MAC: CMD + S) 6. Finalmente seleccionamos todos los archivos (Imágenes + html), comprimirlos en un ZIP y enviar.

VOLVER

Pasos para implementar el código Clicktag

DESKTOP - ESTÁNDAR Adobe Animate

1. Abrir el archivo HTML (NombreDelArchivo.html) en un editor de códigos HTML (Sublime Text). 2. Ubicar la línea de código :

3. Insertar el código ClickTag:

Debe quedar de la siguiente manera:

4. Guardar el archivo con nombre index. 5. Seleccionar todos los archivos (Imágenes + html) y lo comprimimos en un ZIP. 6. Enviar el archivo ZIP.

VOLVER

Pasos para implementar el código Clicktag

DESKTOP - ESTÁNDAR HTML5 PURO

1. Abrir el archivo HTML (NombreDelArchivo.html) en un editor de códigos HTML (Sublime Text). 2. Ubicar la línea de código del botón e insertar el siguiente código ClickTag:

3. Guardar el archivo con nombre index.html. 4. Seleccionar todos los archivos (Imágenes + html) y lo comprimimos en un ZIP. 5. Enviar el archivo ZIP.

VOLVER