Guia para Criativos em HTML5 ABRIL

Transcrição

1 Guia para Criativos em HTML5 ABRIL Versão 1.2 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. Javascript... 6 II. Animações... 6 III. Imagens... 6 IV. Vídeos... 6 V. Fontes Uso de Swiffy... 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 ou por problemas de desempenho I. Tags de terceiro Aceitamos tags de AdServers terceiros, com anúncios produzidos em HTML5. O criativo é hospedado pela agência/anunciante. 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. O criativo é hospedado pelo nosso AdServer desde que respeite as especificações de peso.

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): 50kb 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 Fontes

5 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 inicio do 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. Javascript Evite o uso de Loops, Timeouts e Intervals. Não recomendamos 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. II. Animações Utilize transições do CSS para animações evitando o uso de Javascript. III. 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 IV. Vídeos O carregamento do vídeo deve ser feito a partir do play feito pelo usuário. Use link para servidores externos, caso o peso exceda o limite. Vídeos do Youtube pode ser colocados através de embed.

7 O formato mp4 é o mais recomendado, pois é compativel com a maioria dos navegadores e devices. V. Fontes É possível fazer apenas o carregamento dos caracteres usados pelo criativo: 6. Uso de Swiffy O uso do Swiffy para conversão de arquivo Flash para HTML é permitido. O Swiffy gera um arquivo HTML self-contained 1. Entre na página de upload do Swiff. 2. Selecione o arquivo, aceite os termos e condições e clique em upload

8 3. Depois de finalizado é possível fazer o download do arquivo HTML gerado. (botão direito no botão "View Conversion" e clique em "Salvar link" ou "Salvar como"). 4. Nem todas as funcionalidades ActionScript são suportadas pelo Swiffy. O Swiffy irá listar as funcionalidades não suportadas, mas que foram detectadas.