![Page 1: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/1.jpg)
![Page 2: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/2.jpg)
Y CLARO, TRABAJAMOS CON FLASH…
PROGRAMA09:30¿Que es bannercity?Antecedentes Generales
10:00 Coffee Break
10:25 Tips para enfrentar el cambioTips para enfrentar el cambio (Marcas)Tips para enfrentar el cambio (Agencia de medios)Tips para enfrentar el cambio (Digital / Publicidad)Tips para enfrentar el cambio (Diseñadores / Desarrolladores)
11:45 La solución BannercityRonda de preguntas.
![Page 3: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/3.jpg)
Y CLARO, TRABAJAMOS CON FLASH…¿QUÉ ES
BANNERCITY?
![Page 4: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/4.jpg)
Mayo 2013 Agosto 2013 Octubre 2013 Septiembre 2014 Agosto 2015
![Page 5: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/5.jpg)
CLARO, TRABAJAMOS CON FLASH…TODAVÍA.
![Page 6: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/6.jpg)
PERO DESDE SEPTIEMBRE DEL 2015 HTML5 SERÁ EL NUEVO FORMATO STANDARD
PARA EL DESARROLLO DE PIEZAS BANNERS
![Page 7: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/7.jpg)
![Page 8: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/8.jpg)
LOS QUE HAN DICHO NO A FLASH
![Page 9: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/9.jpg)
FIREFOX YA LO HIZO.• JUNIO 2015 Y SIN PREVIO AVISO.
• FIREFOX SOLICITÓ A ADOBE RESOLVER PROBLEMAS DE SEGURIDAD.
• ESTUVO 1 MES SIN REPRODUCIR FLASH.
![Page 10: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/10.jpg)
SEGURIDAD AHORRO ENERGÉTICO
![Page 11: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/11.jpg)
¿CUÁNDO?
1 DE SEPTIEMBRE 2015 OCTUBRE 2015 DE AQUÍ A 9 MESES MÁS, PAULATINAMENTE
“En Septiembre de 2015, esta configuración será habilitada por defecto de manera de que los usuarios de Chrome puedan disfrutar de un rendimiento más rápido y puedan ver más contenido antes de tener que cargar la batería de sus dispositivos. Este cambio afectará la mayoría de las creatividades Flash de tamaño estándar en Chrome y alineará a Chrome con otros navegadores como Safari, que ya tienen habilitada una función similar. Pueden leer más sobre esta configuración de Chrome en este artículo del centro de ayuda. Cómo este cambio afecta sus anuncios de Google: Como resultado de este cambio AdWords dejará de servir anuncios Flash en Chrome desde el 1 de Septiembre. Los anuncios Flash no servidos por Google (anuncios que utilizan un servidor de terceros) continuarán mostrándose en Chrome pero verán una reducción significativa de los CTRs dado que los usuarios deberán hacer clic una vez para ver el anuncio y nuevamente para ir a la página de destino o interactuar con el anuncio.”
![Page 12: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/12.jpg)
¿A QUIÉNES AFECTA?
https://statcounter.com/
Mundial / Navegadores / Escritorio /Últimos 12 meses
![Page 13: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/13.jpg)
¿A QUIÉNES AFECTA?
https://statcounter.com/
Chile / Navegadores / Escritorio / Últimos 12 meses
![Page 14: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/14.jpg)
¿COMO SE VERÁ EL BLOQUEO
DE FLASH EN CHROME?
![Page 15: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/15.jpg)
¿COMO SE VERÁ EL BLOQUEO DE FLASH EN CHROME?
![Page 16: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/16.jpg)
¿COMO SE VERÁ EL BLOQUEO DE FLASH EN CHROME?
![Page 17: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/17.jpg)
¿COMO SE VERÁ EL BLOQUEO DE FLASH EN CHROME?
![Page 18: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/18.jpg)
¿COMO SE VERÁ EL BLOQUEO DE FLASH EN CHROME?
![Page 19: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/19.jpg)
¿COMO SE VERÁ EL BLOQUEO DE FLASH EN CHROME?
![Page 20: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/20.jpg)
IMPACTO DEL CAMBIO EN MEDIOS DIGITALES
CTR promedio estándar banners display.
CTR = 0,20% CTR = 0,10%
![Page 21: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/21.jpg)
El problema directo para la publicidad online:• Performance de campañas• Baja de inventario• Aumento de pujas• Aumentos de costos (CPC - CPM - CPL)• Baja de inversión
IMPACTO DEL CAMBIO EN MEDIOS DIGITALES
![Page 22: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/22.jpg)
Coffee Break
![Page 23: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/23.jpg)
TIPS PARA ENFRENTAR EL CAMBIO
![Page 24: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/24.jpg)
DIFERENCIAS ENTRE AMBOS FORMATOSFLASH HTML5
Solo para equipos Desktop Desktops y dispositivosTecnología propietaria Standard (open source)Replicación más rápida de piezas
Replicación más lenta de piezas
Software de Pago GratisLimitado hasta su última versión
Oportunidades de mejora constante
Perfil de Diseñador Gráfico Perfil de Desarrollador WebBanner en 1 archivo Banner con varios archivos
![Page 25: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/25.jpg)
CÓMO FUNCIONARÁ LA IMPLEMENTACIÓN
![Page 26: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/26.jpg)
La Advertencia de Google Adwords
Peso de todos los archivos compilados y comprimidos en zip: 150 kilos
![Page 28: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/28.jpg)
TIPS PARA ENFRENTAR EL CAMBIO PARALAS MARCAS
![Page 29: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/29.jpg)
TIPS PARA ENFRENTAR EL CAMBIO PARA MARCAS• Considera animar tus banners ( Tu competencia lo
animará ).• Estudios avalan que los banners animados tienen
mayores resultados que los estáticos.• Impacto en el costo de las piezas.• Producción HTML5 afectará los tiempos de replicación.• Considera experiencias interactivas para contribuir al
branding digital con Html5• Enriquece el engagement en smartphones y tablets.
![Page 30: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/30.jpg)
TIPS PARA ENFRENTAR EL CAMBIO DESDE LA AGENCIA DE MEDIOS
![Page 31: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/31.jpg)
TIPS PARA ENFRENTAR EL CAMBIO DESDE LA AGENCIA DE MEDIOS
Consultar alternativas TAGS a desarrolladores de banners en caso que el adserver no soporte HTML5.
Definir métricas con que se evaluará el plan de medios.Weborama, Sizmek, Google Adwords, DoubleClick, DFP son algunos adservers que soportan HTML5.
Restructurar especificaciones técnicas en grillas de medios.
Solicitar a los medios especificaciones claras acerca de la implementación de piezas HTML5 junto con sus clicktags.
*Hasta el momento Google Adwords acepta piezas Html5 solo cuando se hace desde un MCC con facturación.
![Page 32: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/32.jpg)
TIPS PARA ENFRENTAR EL CAMBIO DESDE LA AGENCIA DIGITAL / PUBLICIDAD
![Page 33: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/33.jpg)
CONSIDERAR LOS FORMATOS MÁS USADOS Y DE MEJORES OPCIONES MOBILE
728x90
300x250336x280
300x600 160x600
320x100
![Page 34: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/34.jpg)
![Page 35: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/35.jpg)
AÑADE UN CARÁCTER DE URGENCIA / VALOR
![Page 36: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/36.jpg)
PIENSA EN MOBILERevisar diagramaciones y diseños en las piezas que consideren versiones mobile
DEMASIADO CONTENIDO
CONTENIDO IDEAL
![Page 37: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/37.jpg)
NO USES DEMASIADAS IMÁGENES INNECESARIAMENTE
Cantidad de imágenes:
• Fondo.jpg• Boton.jpg• Brillobtn.pngl• Logo.png• Dispositivos.png
Cantidad de imágenes:
• FondoTxt.jpg• Boton.jpg• Logo.png
Cantidad de imágenes:
• Dispositivos.svg• Logo.svg
![Page 38: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/38.jpg)
LA MUERTE DEL LOOPCONSIDERAR QUE EL ÚLTIMO FRAME DE LA PIEZA LLEVE LA INFORMACIÓN CLAVE QUE SE QUIERE
ENTREGAR.
FIN BANNER SIN CALL TO ACTION BANNER CON CALL TO ACTION
![Page 39: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/39.jpg)
REALIZA DISEÑOS ACORDE A LA PÁGINA DE DESTINO
![Page 40: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/40.jpg)
EXPLORA Y SÉ CREATIVO.
![Page 41: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/41.jpg)
TIPS PARA ENFRENTAR EL CAMBIO PARA DISEÑADORES /DESARROLLADORES.
![Page 42: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/42.jpg)
EL PROGRAMA IDEAL PARA
HACER BANNERS HTML5:
![Page 43: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/43.jpg)
EL QUE A MÁS TE ACOMODE
Adobe Edge Swiffy 1.1.1 Adobe Flash cc
![Page 44: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/44.jpg)
ANTES, LO QUE NECESITABAS PARA HACER BANNERS:
![Page 45: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/45.jpg)
Lo que necesitas ahora:Herramienta de creación de imágenes
HTML5 Herramienta de Animación
Convertidores Flash
Librerías JavaScript
Compresores de Código
Compresores de Imagen
Generadores de Sprites
Fuentes
![Page 46: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/46.jpg)
Revisar compatibilidades respecto a degradados con css.
Checar que colores corporativos no necesariamente serán idénticos en la web.
Considerar versiones de los colores representados en desktop y en mobile
UTILIZA LOS COLORES ADECUADOS.
![Page 47: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/47.jpg)
IMPLEMENTACIÓN DEL CLICK TAG.Antes había una forma de insertar el click tag. Ahora hay varias:
• Google Web Editor utiliza el componente “pulsación” más un evento de salida.
• Inserción de función clicktag en el código html (depende de cada medio).
• URL Final (sin click tag).
![Page 48: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/48.jpg)
COMIENZA A USAR EN REEMPLAZO DE PNG
![Page 49: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/49.jpg)
• PREFIERE GOOGLE WEB FONTS.• BUSCA FONTS ALTERNATIVAS SIMILARES A LAS CORPORATIVAS EN
GWF.• SI USAS FUENTES CORPORATIVAS, IDEAL SEAN EN FORMATO WEB.• USA FUENTES TRAZADAS.
![Page 50: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/50.jpg)
HAZ EL “MASTER” PENSANDO EN LA REPLICACIÓN Y EN LA
DIAGRAMACIÓN MULTIDISPOSITIVO.
![Page 52: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/52.jpg)
RESUMEN GENERAL• Aumento de tiempo de replicación de piezas• Si de todas maneras se decide construir y publicar piezas en flash, esto
afectará considerablemente en el CTR de la campaña• Ya no hay replicas…hay masters• Aumento de skills por parte de los desarrolladores• Aumento considerable de pesos kb por pieza• Consideración un elemento extra en los presupuestos (hosting)• Aumento de costos de desarrollo por pieza• Al ser HTML5, las piezas serán 100% responsivas• HTML5 permite una amplia gama de posibilidades de interactividad
![Page 53: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/53.jpg)
DESPUES DE TODO ESTO,¿QUÉ HACER?
![Page 54: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/54.jpg)
LA SOLUCIÓNBANNERCITY
![Page 55: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/55.jpg)
“Necesitamos al menos 48 horas para entregar las piezas”
“¿Qué significa eso del clicktag?”
“Otra vez llegaron mal las piezas”
“¡El adserver me las rechazó! ”
“…está como fome el banner…”
“¿porque se ve tan pixelado?”
“ya es muy tarde y se fueron todos los diseñadores…¿te puedo enviar los banners mañana a ultima hora?”
“son las 10:00 de la noche…aun no llegan las piezas”
“No puedo implementar la campaña”
PARA QUE NO VUELVAS A ESCUCHAR ESTO:
![Page 56: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/56.jpg)
• Servicio de HTML5 ADServer propio que nos permite crear nuestros propios TAGS.
• Comunicación y gestión constante en la actualización de especificaciones de medios.
• Sistema CLOUD de Banners 24/7.• Profesionales dedicados exclusivamente a la generación de banners.• Más de 13.500 banners desarrollados hasta la fecha.• Ambiente de prueba de banners.
![Page 57: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/57.jpg)
RONDA DE PREGUNTAS
![Page 58: TIPS para gestionar y desarrollar piezas banners Html5](https://reader035.vdocuments.net/reader035/viewer/2022081605/587afcd01a28ab93488b5865/html5/thumbnails/58.jpg)
BANNERS HTML5:¿ESTÁS LISTO?www.bannercity.click