HTML5

Animações

Procurar utilizar os recursos de transição via CSS, evitando o uso de javascript para as animações do seu formato.

Fontes

Caso deseje utilizar fontes personalizadas, opte pela escolha do Google Fonts.

Javascripts

Caso seja necessário o uso de Javascript, procure evitar funções com processamento elevado, tais como intervalos de tempo, efeitos dentre outros. Adotando estes cuidados, será possível entregar um formato de qualidade melhorando a experiência do usuário.

Até 200KB

Aceitamos diversas formas de veiculação em HTML5 de acordo com as observações abaixo:

1) HTML5 Compacto

Quando não há assets, nem mesmo por referências externas.

2) Pacote HTML5 – Hospedagem no GAM

Necessário envio do formato contendo o HTML principal e os assets (IMAGENS/JS/CSS) compactado em ZIP.

2.1) Passo a passo para envio do Pacote HTML5

Fontes

Opte pelo uso de fontes de sistema. No caso de fontes personalizadas, recomendamos o uso do Google Fonts.

Estrutura

Dentro do pacote não pode conter pastas. Todos os arquivos, HTML e ASSETS, devem estar juntos, ou seja, no mesmo diretório. Só é permitido referência para arquivos externos como Pixel Contador e Google Fonts.

Assets suportados

Imagens: *.jpg / *.png / *.gif

CSS: *.css

Javascript: *.js

Pixel Contador

Deve ser criado e enviado separadamente pelo cliente para serem cadastrados no GAM.

Deve permitir o clicktracking ou clickmacro.

Variável de clique padrão do GAM a ser usada é: %%CLICK_URL_ESC%%%%DEST_URL%%

A variável deve ficar exposta no código principal, não podendo ficar dentro de JS ou scripts externos, pois ela será processada pelo sistema antes da publicação do formato.

Exemplos:

Javascript

<a href="" id="clickArea" target="_blank"></a><script type="text/javascript">
var clickTag = "%%CLICK_URL_ESC%%%%DEST_URL%%";
document.getElementById('clickArea').href = clickTag;
</script>

HTML

<a href="%%CLICK_URL_ESC%%%%DEST_URL%%" target="_blank" ></a>

Nas conversões para HTML5 de peças flash já produzidas deve-se tomar os seguintes cuidados:

Doubleclick Studio Layouts
Templates “Plug n’ Play” sem nenhum código.

GWD (Google Webdesigner)
Com várias templates disponíveis dos mais variados formatos.
https://support.google.com/webdesigner

Adobe Animate
Também pode exportar HTML5, https://helpx.adobe.com/animate/using/creating-publishing-html5-canvas-document.html