View
217
Download
0
Category
Preview:
Citation preview
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
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
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
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
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
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
Dimensões em pixels:728x90.
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.
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).
Restrições: Não pode ser em HTML5
Tempo de exibição:Período de exibição da página.
Z-index:De 10 a 20.
Áudio:Não pode conter áudio.
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
Dimensões em pixels:300x450.
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
Dimensões em pixels:265x311.
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 de HTML5.
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.
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.
*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.
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ã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.
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.
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.
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.
*Caso seja preciso, solicitar o arquivo PSD contendo o modelo da peça.
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
Dimensões em pixels:993x330.
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. 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.
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.
Posição de flutuação:O banner terá o seguinte posicionamento na página:Topo 465px.
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.
Observações:Peças no formato DHTML Intervenção estão sujeitas à aprovação.Esse formato aceita vídeo. Veja as especificações.
*Caso seja preciso, solicitar o arquivo PSD contendo o modelo da peça.
29 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).
Áudio:Não pode conter áudio.
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
Especificações de formato | Mini banner lojas e concessionárias
Dimensões em pixels:100x40.
Peso máximo:2KB.
Tipos de arquivo:GIF (estático)
Restrições: Não pode ser em HTML5
Z-index:De 10 a 20.
Restrições:Não pode conter animação.
35 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
Dimensões em pixels:295 x 212.
Peso máximo:5KB (logo).
Tipos de arquivo:Texto e Imagem GIF (Sem animação).
Restrições: Não pode ser em HTML5
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.
Áudio:Não pode conter áudio.
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
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
Especificações de formato | Slide entre fotos
Dimensões em pixels:630 x 386.
Peso máximo:40KB.
Tipos de arquivo:JPG, GIF (estático).
Restrições: Não pode ser em HTML5
Z-index:De 10 a 20.
Observações:- Aparece após a terceira foto
43 de 55
Especificações de formato | Skyscraper
Dimensões em pixels:120x600.
Peso máximo:20KB GIF.155KB ZIP com arquivos HTML5.
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.
Áudio:Não pode conter áudio.
Restrições:Só é exibido em resolução igual ou maior que1280x720px.
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.
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
Dimensões em pixels:728x90.
Peso máximo:20KB GIF.155KB ZIP com arquivos HTML5.
Tipos de arquivo:JPG, GIF (estático ou animado) ou ZIP(Verificar guia de boas práticas de HTML5).
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.
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.
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.
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.
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
Dimensões em pixels:970x90.
Peso máximo:20KB GIF.155KB ZIP com arquivos HTML5.
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.
Á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.
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.
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.
Á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.
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.
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
Especificações de formato | Wide Skyscraper
Dimensões em pixels:160x600.
Peso máximo:30KB GIF.155KB ZIP com arquivos HTML5.
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.
Áudio:Não pode conter áudio.
Restrições:Só é exibido em resolução igual ou maior que1280x720px.
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.
Observações:No Resultado de Busca, essa peça fica fixa junto da rolagem.
55 de 55
Recommended