O documento fornece especificações e diretrizes para a criação de anúncios em HTML5 para o site Manual do Homem Moderno, incluindo tamanhos máximos de arquivos, formados suportados, ferramentas recomendadas e contatos para suporte.

1. AD SPECIFICATIONS
Manual do Homem Moderno

2. AD SPECIFICATIONS
Criação de Peças
HTML5 - Por que utilizar ?
A criação de peças publicitárias utilizando a tecnologia Adobe Flash, está
sendo desencorajada desde setembro de 2015, quando a Google dona do
principal navegador utilizado por mais de 50% dos usuários da internet
anunciou que iria começar a bloquear conteúdos criados utilizando a
tecnologia.
Principais motivos para o bloqueio de conteúdos em flash
● Alto consumo de processamento do computador e de bateria
● Falta de segurança
● Alta frequência de atualização do plugin
● A tecnologia Flash não funciona em dispositivos móveis

3. AD SPECIFICATIONS
Dispositivos
Desktop / Tablet's: 150KB
Mobile: 40K
Polite download
Desktop / Tablet's: 2MB
Mobile: 400K
Todos os arquivos subsequentes ao carregamento de peças in-page, que ultrapassam
os tamanhos citados acima só poderão ser descarregados após o carregamento
completo da página
Polite download é um método de visualização de um arquivo de pequeno tamanho,
enquanto um maior é baixado. Isso garante que não haja nenhum "ponto em branco" no
anúncio, enquanto os downloads de arquivos maiores são baixados e permite que os
anunciantes criem anúncios com complexidade maior.
Criação de Peças
HTML5 - Tamanho dos arquivos

4. AD SPECIFICATIONS
Ao criar peças em HTML5 deve-se seguir as seguintes orientações
Em caso de peças que não estejam hospedadas no AdServer do Cliente:
● Arquivos externos da peça deve ser enviada em um só pacote
{ ex: banner-300x250.html, imagem-de-fundo.png, animacao.css, eventos.js}
● Caminhos de fontes externas da peça, { Bibliotecas Javascript, Estilos em
CSS, Templates HTML e Imagens } devem sempre ter seus caminhos
relativos.
{ex: <script type="text/javascript" src="eventos.js"></script> ou <link
rel='stylesheet' href="animacao.css"} supondo que todos os arquivos
estejam no mesmo nível da peça html5
Criação de Peças
HTML5 - Caminhos relativos

5. AD SPECIFICATIONS
● Peças devem ter uma versão em imagem para ser utilizada como
fallback caso navegador não suporte HTML5 quando utilizado
recursos avançados de carregamento de conteúdos externos.
● Estilos CSS não devem ter seletores globais como { html, body, div,
span, a, table} crie um "PREFIXO" para que não conflite com nenhum
seletor do site em que a peça está sendo exibida ex:
<div class="adynvolve-area-visivel"> <!-- content banner --> </div>
Criação de Peças
HTML5 - Boas práticas

6. AD SPECIFICATIONS
Sugestão de Ferramentas
Criação de Peças HTML5
● Google Web Designer - https://www.google.com/webdesigner/
● Adobe Animate CC - http://www.adobe.com/go/edge-news
Conversão de Flash para HTML5
Swiffy - https://developers.google.com/swiffy/
Ferramentas
HTML5

7. AD SPECIFICATIONS
Formato Desktop
728x90 - Super Banner
728
90
FORMATO DIMENSÕES PESO PEÇA IMAGEM PESO PEÇA HTML5
Super Banner 728x90 40KB 150K
FRAMES - ANIMAÇÃO
18 frames por segundo
ADSERVER - GOOGLE DFP
Suporta os principais formatos do mercado: iframe e tags javascript

8. AD SPECIFICATIONS
Formato Mobile e Desktop
728x90 - Retângulo Médio
300
250
FORMATO DIMENSÕES PESO PEÇA IMAGEM PESO PEÇA HTML5
Retângulo Médio 300X250 40KB 150K
FRAMES - ANIMAÇÃO
18 frames por segundo
ADSERVER - GOOGLE DFP
Suporta os principais formatos do mercado: iframe e tags javascript

9. AD SPECIFICATIONS
Formato Mobile
320x50 - Banner Padrão
320
50
FORMATO DIMENSÕES PESO PEÇA IMAGEM PESO PEÇA HTML5
Banner Padão 320x50 40KB 150K
FRAMES - ANIMAÇÃO
18 frames por segundo
ADSERVER - GOOGLE DFP
Suporta os principais formatos do mercado: iframe e tags javascript

10. AD SPECIFICATIONS
Formato Desktop
1000x772 - Full Screen / Pre-View
1000
772
FORMATO DIMENSÕES PESO TOTAL PEÇA HTML5
Full Screen Pre-View 1000x772 2MB
FRAMES - ANIMAÇÃO
18 frames por segundo
ADSERVER - GOOGLE DFP
Suporta os principais formatos do mercado: iframe e tags javascript

11. AD SPECIFICATIONS
Formato Mobile
320x568 - Full Screen / Pre-View
320
568
FORMATO DIMENSÕES PESO TOTAL PEÇA HTML5
Full Screen Pre-View 320x568 400KB
FRAMES - ANIMAÇÃO
18 frames por segundo
ADSERVER - GOOGLE DFP
Suporta os principais formatos do mercado: iframe e tags javascript

12. Suporte
comercial@manualdohomemmoderno.com.br
Weslley Alves
+55 11 95943-2191