PRODUTOS DE MÍDIA WEBMOTORS 2015 · Guia de boas práticas HTML5 Especificações dos formatos publicitários. MENU Guia de boas práticas de HTML5 • Especificações Gerais •

PRODUTOS DE MÍDIA

WEBMOTORS 2015Guia de boas práticas HTML5Especificações dos formatos publicitários

MENU

Guia de boas práticas de HTML5

• Especificações Gerais

• Restrições

• Método de envio

• Redução do tamanho de arquivos e compressão

• clickTag

• Dimensão dos anúncios

• Animação

02 de 55

*Seguimos como referência o guia de HTML5 da iab. internacional:

http://www.iab.net/media/file/HTML5DAv101.pdf

http://www.iab.net/media/file/HTML5DAv101.pdf

MENU

FORMATOS SITE

▪ Arroba

▪ Background (home)

▪ Background especial

▪ Super Banner Integrado

▪ Destaque integrado ao classificado

▪ DHTML Floater

▪ DHTML Integrado (home)

▪ DHTML Integrado (tabela)

▪ DHTML Intervenção

▪ E-mail marketing

▪ Informe Publicitário

▪ Mini banner lojas e concessionárias

▪ Post Patrocinado

▪ PPI Alert

▪ Searchback

▪ Slide entre fotos

▪ Skyscraper

▪ Super Banner

▪ Super Banner Expanded

▪ Superleaderboard

▪ Vídeo

03 de 55

▪ Wide Skyscraper

Guia de boas práticas HTML5Especificações gerais

• Deve ser um documento .html que siga padrões da W3C.

• O conteúdo deve conter a tag <!DOCTYPE html> e conter as tags <html>

e <body>.

• Deve seguir os padrões de segurança SSL.

• A peça com chamadas externas deve vir com todo o material hospedado:

Imagens, JS, CSS, etc.

• Utilizar a biblioteca de fontes do Google.

04 de 55

http://www.w3c.br/Padroes

https://www.google.com/fonts

Guia de boas práticas HTML5Restrições

• Não é permitido carregar arquivos cross-domain por questões de

segurança.

• JSON: Não é permitido por questões de segurança.

• Audio: Desligado e somente é permitido após o click de interação do

usuário.

• Chamadas externas não hospedadas.

• Animação maior que 12 segundos

• Loop da animação

05 de 55

Guia de boas práticas HTML5Método de envio

• Todos os arquivos da peça criativa deve vir em um único arquivo .zip.

• Os outros arquivos do pacote .zip já deve estar hospedado e o arquivo

.html deve fazer a chamada aos arquivos hospedados.

• Este arquivo .zip com todos os arquivos devem estar dentro do limite de

peso de cada criativo. Mesmo com as chamadas externas hospedadas.

06 de 55

Guia de boas práticas HTML5Redução do tamanho de arquivos e compressão

Como não é feito uma otimização automática para códigos e arquivos de HTML5,

existem métodos diferentes de redução do tamanho de seus arquivos e fazer a

compressão do seu código. Veja alguns exemplos:

• Minimização do código para remover espaços extras e caracteres desnecessários do código:

http://minifycode.com

• Compressor de JPG ou PNG sem perder a qualidade: http://tinypng.com / http://tinyjpg.com

• Utilizar sempre que possível texto em HTML, para reduzir o peso do arquivo e melhorar a

qualidade de leitura.

• Reduzir a quantidade de arquivos dentro do .zip para diminuir seu tamanho total.

• Usar CSS Sprite Sheets sempre que possível: https://developer.mozilla.org/en-

US/docs/Web/Guide/CSS/CSS_Image_Sprites

• Utilizar softwares de criação de peças em HTML5

• Adobe Edge CC

• Adobe Flash CC JS Canvas

• Google Webdesigner

07 de 55

http://minifycode.com/

http://tinypng.com/

http://tinyjpg.com/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites

Guia de boas práticas HTML5clickTag

08 de 55

• Para a correta contabilização dos cliques, deve ser usado o parâmetro em

javascript de clickTag.

var clickTag=“%%CLICK_URL_ESC%%http://URLDEDESTINO");

• A chamada da clickTag deve ser feitas dentro do arquivo HTML e sem nenhuma

minificação. Variáveis devem ser inclusas no primeiro arquivo .html a ser

carregado (no caso de peças polite).

• Sempre utilizar a variável clickTag para qualquer ação de click. Independente do

método de navegação.

• Não é aceito criativos com múltiplas clickTag/múltiplos clickthrough URL.

Guia de boas práticas HTML5clickTag

09 de 55

• Sempre definir a URL de destino para uma página _blank, no caso de usar uma

tag específica para isso:

• <a href=(URL DA clickTag) target="_blank"></a>

• Também é possível definer uma ID única para definer a href dinamicamente

no javascript:

HTML: <a id=“clickArea” target=“_blank”> </a>

Javascript: var

clickArea=document.getElementById(“clickArea”);clickArea.href=ClickTag

Guia de boas práticas HTML5Dimensões dos anúncios

10 de 55

• A dimensão do anúncio deve ser a mesma que está no midia kit.

• Para definí-la, deve ser usado uma tag <meta> dentro da tag <head>

<meta name=“ad.size” content=“width=728, height=90”>

Guia de boas práticas HTML5Animação

11 de 55

• Evite efeitos intensos de animação e considere um uso correto de controles de tempo

Javascript (setInterval, setTimeout), loops de animações, elementos DOM, para ser otimizados

corretamente.

• Animações em CSS3 utilizam GPU apenas quando configurado no browser do usuário final.

• CSS ou Javascript podem ser utilizados para animação. Separe corretamente Javascript e

CSS.

No geral, siga o estabelecido pela indústria e que seja aceito nas melhores práticas de Javascript,

como por exemplo:

• Minimizar acesso ao DOM.

• Garantir performance.

• Usar ferramentas de detectação de browser para melhorar eficiência.

• Não utilize funções ‘eval()’ para evitar problemas de segurança.

• FPS não altera a performance dentro do HTML5 da mesma maneira que acontece

com o flash. Utilize métodos para rodar a animação dentro de uma velocidade

permitida do browser:

setInterval para o caso de browser antigos (IE( e anteriores)

requestAnimationFrame sempre que possível como alternativa para a função

acima.

ARROBA

Formato exibido na Home,Resultado da Busca, no Detalhe doAnúncio e na seção Revista, gerandoexposição qualificada em seçõesimportantes.

Arroba

12 de 55

Especificações de formato | Arroba

Dimensões em pixels:300x250.

Peso máximo:20KB GIF/JPG.155KB ZIP com arquivos HTML5.

Z-index:De 10 a 20.

Tipos de arquivo:JPG, GIF (estático ou animado) ou ZIP(Verificar guia de boas práticas de HTML5).

Áudio:Não pode conter áudio.

TAG:Para peças em HTML5 é obrigatória a inserção da TAG de contabilização.Para essas e outras informações técnicas, verifique nosso guia de boas práticas de HTML5.

13 de 55

http://institucional.webmotors.com.br/formatos


Formato exibido ao fundo dahomepage do WebMotors.

Background

14 de 55

BA

CK

GR

OU

ND

BA

CK

GR

OU

ND

Especificações de formato | Background

Dimensões em pixels: 2000x1000px (total),Duas áreas de 680x145px (foco da campanha).Respiro de 45px do topo e de 15px, de cada lado, entre a peça e o conteúdo do site e usar o fundo na cor #f4f4f4.

Peso máximo:160KB JPG, PNG, GIF (estático).

Z-index: 0.

Tipos de arquivo: JPG, GIF (estático).

Restrições: Não pode ser em HTML5 Produto destinado, especificamente, para

montadoras. As diárias do Background não podem ser

concomitantes com o DHTML Intervenção

Observações: O foco da campanha deve ser inserido nas áreas claras das laterais. A área escura pode ser usada para preenchimento da arte, conforme os exemplos mostrados ao lado.

*Caso seja necessário, solicitar o arquivo PSD contendo o modelo.

15 de 55

Formato exibido ao fundo dapágina de login.

Background Especial

16 de 55

Especificações de formato | Background Especial

Dimensões em pixels:2000x620 (total)

Peso máximo:120KB JPG, PNG, GIF (estático).

Z-index:0.

Tipos de arquivo:JPG, GIF (estático).

Restrições: Não pode ser em HTML5

Link: O espaço clareado representa a área deClick.

Observações: O foco da campanha deve ser inserido na área mais clara. A área escura deve ser usada para preenchimento da arte, não sendo recomendado a inclusão de qualquer informação relevante nesta área.

17 de 55

Formato exibido no resultado debusca de carros e motos.

Super Banner Integrado

18 de 55

SUPER BANNER INTEGRADO

Especificações de formato | Super Banner Integrado


Peso máximo:20KB GIF/JPG.155KB ZIP com arquivos HTML5.

Z-index:De 10 a 20.




19 de 55



Formato exibido como o primeiroanúncio do Resultado de busca decarros e motos.

Destaque Integrado ao Classificado

20 de 55

DESTAQUE INTEGRADO AO CLASSIFICADO

Especificações de formato | Destaque integrado ao classificado

Dimensões em pixels:660 x 130

Peso máximo:35KB.

Tipos de arquivo:JPG, PNG, GIF (Sem animação).


Tempo de exibição:Período de exibição da página.

Z-index:De 10 a 20.


Observações:A peça deve seguir o modelo semelhante ao Resultado de busca e precisa conter:▪ Indicação de publicidade;▪ Imagem do auto/moto;▪ Indicação de imagem ilustrativa;▪ Frase “Considere também esse veículo em sua busca”;▪ Especificação de marca, modelo e versão;▪ Apresentação de até 3 atributos do veículo;▪ Logo da montadora;▪ Recomendado: Link para resultado de busca no WebMotors.

Restrições:Produto destinado, especificamente, para montadoras.

Caso seja preciso, solicitar o arquivo PSD contendo o modelo em swf.

21 de 55

Formato exibido no resultadode busca de carros e motos ena Revista.

DHTML Floater

22 de 55

DHTML FLOATER

Especificações de formato | DHTML Floater


Peso máximo:GIF/JPG 60KB.

Tipos de arquivo:JPG, GIF (estático ou animado) ou TAG de terceiro em HTML5.

Tempo de exibição:Até 12 segundos.

Z-index:45.

Áudio:Permitido desde que não seja no modelo padrão Integrado. Deve conter botão “liga” e “desliga“ e cujo início do áudio seja opção do internauta.A criação do botão e a função de “liga” e “desliga“ devem ser feitas pelo anunciante.

TAG:Para peças em HTML5 é obrigatória a inserção da TAG de contabilização.Para essas e outras informações técnicas, verifique nosso guia de boas práticas.

Restrições:O indicador do tempo de exibição é obrigatório e deve seguir o padrão abaixo. Quando o círculo sumir totalmente, a mídia some.

23 de 55



Formato exibido na homepage doWebMotors, posicionada na colunado meio.

DHTML Integrado Home

24 de 55

DHTMLINTEGRADO

Especificações de formato | DHTML Integrado home





Z-index:45.

Áudio:Permitido desde que não seja no modelo padrão Integrado. Deve conter botão “liga” e “desliga“ e cujo início do áudio seja opção do internauta.A criação do botão e a função de “liga” e “desliga“ devem ser feitas pelo anunciante.


Observações:A peça pode ser livre para criação ou seguir modelo integrado. Para o modelo integrado ela deverá conter:▪ Logo da montadora;▪ Frase: “Considere também” + Marca + “em sua busca”;▪ Imagem do auto/moto;▪ Indicação de imagem ilustrativa;▪ Texto;▪ Recomendado: Link para resultado de busca no WebMotors.


*Caso seja preciso, solicitar o arquivo PSD contendo o modelo da peça.

25 de 55



Formato exibido no resultado deavaliação da Tabela WebMotors, aolado direito dos dados da avaliação.

DHTML Integrado Tabela

26 de 55

Especificações de formato | DHTML Integrado Tabela

Dimensões em pixels:348 x 238.




Z-index:45.

Áudio:Permitido desde que não seja no modelo padrãoIntegrado. Deve conter botão “liga” e “desliga“ ecujo início do áudio seja opção do internauta.A criação do botão e a função de “liga” e“desliga“ devem ser feitas pelo anunciante.


Observações:A peça pode ser livre para criação ou seguir modelo integrado. Para o modelo integrado ela deverá conter:▪ Logo da montadora;▪ Frase: “Considere também” + Marca + “em sua busca”;▪ Texto;▪ Recomendado: Link para resultado de busca no WebMotors.



27 de 55



Formato de alto impacto exibido nahomepage do Webmotors.

DHTML Intervenção

28 de 55

DHTMLINTERVENÇÃO

Especificações de formato | DHTML Intervenção




Tempo de exibição:Até 12 segundos. Caso seja menor que 12 segundos, deve ser colocado STOP no final da animação para evitar looping.

Z-index:45.

Áudio:Permitido desde que não seja no modelo padrãoIntegrado. Deve conter botão “liga” e “desliga“ ecujo início do áudio seja opção do internauta.A criação do botão e a função de “liga” e “desliga“devem ser feitas pelo anunciante.


Posição de flutuação:O banner terá o seguinte posicionamento na página:Topo 465px.


Observações:Peças no formato DHTML Intervenção estão sujeitas à aprovação.Esse formato aceita vídeo. Veja as especificações.


29 de 55



Formato personalizável de grandealcance.

E-mail Marketing

30 de 55

Especificações de formato | E-mail Marketing

Dimensões em pixels:550 de largura x altura variável.

Peso máximo:100Kb (html + imagem).

Tipos de arquivo:Peça em HTML e imagens que compõem a peça em JPG ou GIF (não animado).


Restrições: Peça deve ser composta obrigatoriamente de texto e imagem; Diagramar o layout em tabelas; Links devem ter target blank. ; Não é permitido o mapeamento de imagens; Não é permitido inserir formulários na mensagem; Não é permitido utilizar imagens de fundo na tag <body>; Acentuação de texto deve estar no formato HTMLencoding;

Recomendações: Em textos utilizar fontes de sistema (Arial, Verdana,

Times etc); Usar o atributo alt da tag <img> para as imagens

mais relevantes do template; Utilizar CSS apenas da forma inline, pois alguns

provedores de e-mail não consideram nada acimada tag <head> ;

Formatar textos, preferencialmente utilizando a tag<font>;

Não posicionar elementos no template por meio deCSS, utilizar propriedades como float, position, top,left, bottom e right;

Ao usar cor de fundo na tag <body>, especificá-lapor meio do atributo bgcolor do HTML e dapropriedade

background-color do CSS; Para evitar que o Hotmail e Gmail acrescente

espaços extras ao redor das imagens, insirastyle=”display:block;

em todas as tags < img > do template Para otimizar a entrega das mensagens, desenvolva

o código HTML para que tenha até 30 kb.

31 de 55

Conteúdo editorial do anunciantepublicado na seção Revista doWebMotors.

Informe Publicitário

32 de 55

Especificações de formato | Informe Publicitário

Restrições Links devem ter target blank. Exibição da material será de acordo com o layout

padrão da página de matéria da seção Revista.

Observações: O material entregue deve conter: Até 19 fotos (mínimo de 1 foto) Título: até 40 toques Subtítulo: Até 80 toques Texto: aproximadamente 2.550 toques.

33 de 55

Formato exibido na Busca de lojas econcessionárias.

Mini banner lojas econcessionárias

34 de 55

Especificações de formato | Mini banner lojas e concessionárias


Peso máximo:2KB.

Tipos de arquivo:GIF (estático)


Z-index:De 10 a 20.

Restrições:Não pode conter animação.

35 de 55

Formato divulgado no perfil doWebMotors no Twitter .

Post Patrocinado

36 de 55

Especificações de formato | E-mail Marketing

Quantidade máxima de toques:136

Peso máximo:60KB.

Tipos de arquivo:Texto e JPG, PNG, GIF estático.

Link:Direciona para página definida peloanunciante

Observações:Imagem ilustrativa opcional

37 de 55

Formato exibido no Resultadode busca de carros e motos,aparecendo no canto inferior direito.

PPI Alert

38 de 55

Especificações de formato | PPI Alert


Peso máximo:5KB (logo).

Tipos de arquivo:Texto e Imagem GIF (Sem animação).


Tempo de exibição:Período até a rolagem da página (último bloco de anúncio) ou após clique no botão fechar. Apóso fechamento, fica disponível ícone que permitereabri-la.


Observações:Deverá ser encaminhado:▪ Logo montadora: GIF com transparência (45x45px);▪ Logo montadora: GIF com fundo branco (45x45px);▪ Título: Limitado a 2 linhas de 11 toques;▪ Texto comercial: Limitado em 75 toques;▪ Recomendado: Link para resultado de busca noWebMotors.

Restrições:Produto destinado, especificamente, para montadoras.

39 de 55

Formato exibido na home da seçãoComprar, em torno do combo debusca.

Searchback

40 de 55

Especificações de formato | Searchback

Dimensões em pixels:993x445 (arte total)993x265 (foco da campanha)

Peso máximo:100KB GIF/JPG.

Tipos de arquivo:JPG, GIF (estático) e texto

Z-index:De 10 a 20.

URL DE DESTINO:Recomenda-se que o link seja direcionado para páginasinternas do WebMotors

Restrições:• Não pode ser em HTML5• A imagem enviada deve ser obrigatoriamente de um

veículo;• Produto destinado, especificamente, para montadoras

Observações:• Texto com quantidade máxima de 30 toques.• O foco da campanha deve ser inserido na área mais

clara. A área escura deve ser usada como preenchimento da arte, sendo proibido qualquer texto nesta área, além de não recomendarmos a inclusão de qualquer informação relevante nesta área.

41 de 55

SEARCHBACK

Exemplo:

993PX

445PX

265PX

Formato exibido dentre as fotosDo conteúdo editorial.

Slide entre fotos

42 de 55

Especificações de formato | Slide entre fotos


Peso máximo:40KB.

Tipos de arquivo:JPG, GIF (estático).


Z-index:De 10 a 20.

Observações:- Aparece após a terceira foto

43 de 55

Formato exibido no Resultado deBusca e na Revista WebMotors

Skyscraper

44 de 55

Especificações de formato | Skyscraper


Peso máximo:20KB GIF.155KB ZIP com arquivos HTML5.


Z-index:De 10 a 20.


Restrições:Só é exibido em resolução igual ou maior que1280x720px.


Observações:No Resultado de Busca, essa peça fica fixa junto da rolagem.

45 de 55



Formato exibido em todas as seções,exceto Vender e Minha WebMotors(área logada).

Super Banner

46 de 55

SUPER BANNER

Especificações de formato | Super Banner




Z-index:De 20 a 30.

Áudio:Permitido, desde que com botão “liga” e“desliga“ e cujo início do áudio seja opção dointernauta.A criação do botão e a função de “liga” e “desliga”devem ser feitas pelo anunciante.


47 de 55



Formato exibido em todas as seções,exceto Vender e Minha WebMotors(área logada).

Super Banner Expanded

48 de 55

SUPER BANNER EXPANDED

Especificações de formato | Super Banner Expanded

Dimensões em pixels:728x90 (fechado) e 728x300 (aberto).

Peso máximo:155KB ZIP com arquivos HTML5.

Tipos de arquivo:TAG de terceiros em HTML5.

Z-index:35.

Áudio:Permitido, desde que com botão “liga” e“desliga“ e cujo início do áudio seja opçãodo internauta.A criação do botão e a função de “liga” e “desliga”devem ser feitas pelo anunciante.

Restrições:Não é permitido banner transparente.


Observações:Expande em mouse over, sobrepondo parte do conteúdo.

49 de 55



Formato exibido no footer na Home,footer do Resultado de Busca e noDetalhe do Anúncio.

Superleaderboard

50 de 55

SUPERLEADERBOARD

Especificações de formato | Superleaderboard



Tipos de arquivo:Tipos de arquivo:JPG, GIF (estático ou animado) ou ZIP(Verificar guia de boas práticas de HTML5).

Z-index:De 10 a 20.



51 de 55



Peças em vídeo podem serpublicadas em diferentes formatose diversas tecnologias. Todas elaspassam, antes, por aprovação.

Vídeo

52 de 55

VÍDEO

Especificações de formato | Vídeo

Formatos:DHTML Floater, DHTML Intervenção, Arroba, Super Banner Expanded.

Dimensões em pixels:De acordo com o formato selecionado.

Peso máximo:Aceito streaming ou polite download. Até 300KB para DHTML floater. Até 600KB para DHTML intervenção e Super

banner expanded;

Z-index:De 10 a 20.

Frame Rate:18 FPS.

Tipos de arquivo:TAG de terceiro em HTML5.

Tempo do vídeo:Até 30 segundos.Obs: o vídeo deve possuir botão de iniciar e só começaao clique do usuário.

Tempo de animação em HTML5:15 segundos, sendo permitido looping dentro do tempoestipulado.



Observações:É imprescindível enviar o vídeo com o link para aprovação.O WebMotors não hospeda nenhum dos arquivos.

53 de 55

Formato exibido no Resultado deBusca

Wide SkyscraperWID

E SK

YSC

RA

PER

54 de 55

Especificações de formato | Wide Skyscraper




Z-index:De 10 a 20.


Restrições:Só é exibido em resolução igual ou maior que1280x720px.


Observações:No Resultado de Busca, essa peça fica fixa junto da rolagem.

55 de 55



Documents

PRODUTOS DE MÍDIA WEBMOTORS 2015 · Guia de boas práticas HTML5 Especificações dos formatos publicitários. MENU Guia de boas práticas de HTML5 • Especificações Gerais •