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 HTML5 puro GOOGLE WEB DESIGNER adobe animate adobe animate jpg - png - gif
RICH MEDIA RICH MEDIA
HTML5 puro HTML5 PURO GOOGLE WEB DESIGNER RISING STAR* 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 Banner Estándar Rich Media
ESPECIFICACIONES TÉCNICAS ESPECIFICACIONES TÉCNICAS
CLICK AQUÍ especificaciones técnicas
DESKTOP DESKTOP ESTÁNDAR 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. 3. Debe contener un botón o área sensible que cubra todo el banner. 2. El archivo index.html no debe estar dentro de una carpeta. 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 El tamaño del video debe ser enviado a la medida implementación de código clicktag considerados banner estándar. que se va a utilizar en la animación del banner. especificaciones técnicas Video MP4: Son considerados Rich Media Peso: El peso máximo del banner con video es (consultar con ejecutivo). de 5MB (animación + MP4) 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í Comprimir 5. La animación debe contener el evento Loop. Ver demo aquí y enviar
Si desea adicionar un video al banner: CONSIDERACIONES DE VIDEOS:
Link de Video: (Youtube, Vimeo) son El tamaño del video debe ser enviado a la medida implementación de código clicktag considerados banner estándar. que se va a utilizar en la animación del banner. especificaciones técnicas Video MP4: Son considerados Rich Media Peso: El peso máximo del banner con video es (consultar con ejecutivo). de 5MB (animación + MP4) FORMATOS DE BANNER ESPECIFICACIONES TÉCNICAS DESKTOP - ESTÁNDAR
ADOBE ANIMATE
1. Realizarlo en HTML5 Canvas. 8. La animación debe realizarse con Movimiento Clásico (Classic Tween). 2. El nombre del documento no debe contener espacios ni caracteres especiales. (Muy Importante) 9. Se sugiere trabajar las imágenes a la medida exacta a usar.
3. Velocidad de la animación a 24 FPS. 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. 11. Enviar los siguientes archivos comprimido (Peso 150KB). 5. Todos los objetos deben estar dentro de un clip de película.
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 El tamaño del video debe ser enviado a la medida implementación de código clicktag considerados banner estándar. que se va a utilizar en la animación del banner. especificaciones técnicas Video MP4: Son considerados Rich Media Peso: El peso máximo del banner con video es (consultar con ejecutivo). de 5MB (animación + MP4) 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. Comprimir Ver demo aquí 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 Banner Estándar Rich Media
ESPECIFICACIONES TÉCNICAS ESPECIFICACIONES TÉCNICAS
CLICK AQUÍ especificaciones técnicas
Móvil Móvil ESTÁNDAR rich media
¿Qué plataforma vas a usar? ¿Qué plataforma vas a usar?
HTML5 PURO HTML5 PURO
ADOBE ANIMATE Rising star otros formatos otros formatos
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) 10. Los materiales importados de Illustrator no deben contener máscaras. 4. Velocidad de la animación a 24 FPS. 11. Exportar el material de la siguiente manera: Ver demo aquí 5. Textos convertidos a curvas. 12. Enviar los siguientes archivos comprimido: 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.
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 Imagen Imagen estática estática 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 Formatos
1. Peso máximo 150KB.
2. Pueden enviar archivos JPG, PNG, GIF.
Imagen Imagen Imagen estática estática estática y/o con movimiento (tiene baja calidad de imagen)
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