Guia para Criativos em HTML5 ABRIL

Transcrição

1 Guia para Criativos em HTML5 ABRIL Versão 1.4 Criativos em HTML5 referem-se a anúncios que são construídos utilizando tecnologias web nativas, como HTML, CSS e Javascript. HTML5 é a quinta revisão do padrão de linguagem HTML, que contém novos recursos que os fabricantes de navegadores implementaram para acompanhar esta nova versão do padrão. HTML5 também pode ser usado em conjunto como os recursos dos padrões CSS3 e ECMAScript (ECMAScript é a padronização da linguagem Javascript). Em setembro de 2015 o navegador Chrome receberá uma atualização onde os conteúdos em Flash não prioritários permanecerão pausados até que o usuário os ative através de clique. Outros navegadores como Safari e Firefox possuem recursos similares. Os principais motivadores da mudança é que o Flash possui alto consumo de processamento de computadores e bateria, não é totalmente seguro e não é compatível para todos os devices. Sendo assim o desenvolvimento de um criativo HTML5 possibilita total compatibilidade para a maioria dos navagedores modernos e por devices mobile, como Smartphones, Phablets e Tablets. Esse documento poderá ser utilizado como uma guia com definições e padrões para a veiculação de anúncios publicitários usando a tecnologia HTML5.

2 SUMÁRIO 1. Formatos de publicidade HTML5 aceitos... 3 I. Tags de terceiro... 3 II. Doubleclick Campaign Manager (DCM) tags... 3 III. Criativos com HTML5 completo (self-contained)... 3 IV. Arquivo Zip HTML Especificações para envio de Arquivo Zip... 4 Estrutura... 4 Assets aceitos... 4 Peso do Criativo Macros de Click Pixels Contadores Boas Práticas... 6 I. HTML... 6 II. Javascript... 6 III. Animações... 6 IV. Imagens... 7 V. Vídeos... 7 VI. Fontes... 7

3 1. Formatos de publicidade HTML5 aceitos A Abril se dá o direito de avaliar e pausar criativos em caso de não cumprimento das especificações desse guia, por problemas de desempenho ou por problemas que afetam a experiência do usuário I. Tags de terceiro Aceitamos apenas tags de AdServers homologados com criativos produzidos em HTML5. Tags que não sejam de AdServers homologados não serão aceitas. Em caso de dúvida sobre quais AdServers são aceitos, por favor, nos consulte. II. Doubleclick Campaign Manager (DCM) tags nesse link. Tags do DCM também são aceitas. Mais informações sobre veiculação dessas tags III. Criativos com HTML5 completo (self-contained) Único código HTML5, sem assets/arquivos externos. O criativo é hospedado pelo nosso AdServer desde que respeite as especificações de peso. IV. Arquivo Zip HTML5 Arquivo Zip contendo um arquivo HTML principal e assets necessários como imagens, arquivos Cascading Style Sheets (CSS) e arquivos Javascripts.

4 2. Especificações para envio de Arquivo Zip Estrutura Não é permitido o uso de pastas para organizar os assets. Os assets deve estar no mesmo nível do html principal. Assets aceitos Imagens (.jpg,.png e.gif) Cascading Style Sheet (.css) Javascript (.js) Peso do Criativo Criativos comuns o Desktop: 200kb o Mobile (mweb e In-App): 60kb Criativos Polite (Apenas Rich Media) o Desktop: Até 2mb após carregamento da página o Mobile (mweb e In-App): Até 300kb após carregamento da página É considerada a somatória dos pesos de todos os arquivos dentro do zip na contabilização do peso total

5 Fontes Arquivos de fontes, como, por exemplo,.woff não são permitidos. Use as fontes do sistema e caso precise de fontes que não são de sistemas recomendamos o uso do Google Fonts. Mais informações nesse link. 3. Macros de Click Sempre inclua no HTML o seguinte código: A variável clicktag pode ser usada das seguintes maneiras:

6 Múltiplas clicktags também podem ser declaradas: 4. Pixels Contadores Pixels contadores de impressão podem ser enviados separadamente e serão inseridos no final do HTML. 5. Boas Práticas I. HTML Recomendado remover as margens do body do arquivo html: II. Javascript Evite o uso de Loops, Timeouts e Intervals. Não use settimeouts com window.location.reload() para reiniciar as animações do criativo. Não recomendado o uso de bibliotecas como jquery, jquery UI, YUI, Mootols, etc. Caso for realmente necessário utilize a biblioteca Zepto.js que possui a principais funções de jquery, porém, bem menor. Sempre que possível use arquivos javascript minificados. Recomendado que javascripts de fontes externas sejam servidos com https. III. Animações Utilize transições do CSS para animações evitando o uso de Javascript.

7 IV. Imagens Para evitar o alto número de requests utilize sprites para imagens Alguns sites auxiliam na compressão de imagens como tinypng.com e tinyjpg.com V. Vídeos O carregamento do vídeo deve ser feito a partir do play feito pelo usuário. Use link para servidores externos. Vídeos do Youtube podem ser colocados através de embed. O formato mp4 é o mais recomendado, pois é compatível com a maioria dos navegadores e devices. VI. Fontes É possível fazer apenas o carregamento dos caracteres usados pelo criativo: