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