Especificações Técnicas

Tudo o que sua equipe técnica precisa saber está aqui!

Esp. Técnicas   HTML5

O Chrome sofreu uma atualização gradual, que começou em setembro/2015, onde a maioria dos banners em Flash serão pausados. A animação do banner é pausada em seus primeiros frames e um botão de play é exibido para o usuário; ao clicar neste botão, a animação é exibida. Para que o usuário visite a página do anunciante serão necessários dois cliques no banner.

Como padrão, esta funcionalidade estará ativa e a decisão de pausar ou não o banner é do Chrome. O usuário pode habilitar a livre execução das animações, mas não é simples, sendo necessário acessar as configurações avançadas do Chrome.

Boas práticas HTML5

  • Considerar o peso máximo das peças em até 150kb
  • Receberemos apenas a tag (caminho) da peça hospedada.

Browsers Suportados

Todos os browsers modernos suportam o uso de HTML5:
  • Chrome 40+
  • Firefox 35+
  • Internet Explorer 10+ (incluindo Edge)
  • Opera 20+
  • Safari 7.0+
É essencial que todos anúncios funcionem nesses browsers e versões. O site HTML5 Test (https://html5test.com/results/desktop.html) mostra a classificação de cada browser e versão e seu desempenho.
 

Scripts

  • Não recomendamos:
    Usar frameworks javascript como jQuery, Prototype, YUI, Dojo, MooTools, EXTJS e AngularJS pois a probabilidade da página já utilizar um desses recursos é grande e o uso em um anúncio pode comprometer o funcionamento da página ou de outros anúncios.
    Não recomendamos o uso de jQuery pois além de comprometer outras funcionalidades da página serãoadicionados 97KB e neste caso pode-se optar por zepto.js que conta com as principais funções e mesma sintaxe, porém com 9.1KB

  • Recomendamos:
    Minifying, existem ferramentas online que fazem a compressão (minifying) de scripts, além disso os principais editores de código também contam com essa funcionalidade.

Imagens

Fontes

CSS

  • Nunca use CSS em tags globais como: body, div, span. Isso pode interferir na página e essa boa prática garante que o CSS será aplicado apenas nos elementos corretos do seu anúncio. Coloque CSS in-line ou crie seus IDs ou Classes.

Vídeo

Com o HTML5 foi criado a tag < video >, entretanto algumas restrições ao comportamento devem ser respeitadas:

  • Autoplay:
    Não recomendamos o uso e não permitimos o uso sem polite download, portanto aguardando o termino do carregamento da página. Browsers como Safari e Opera não aceitam este atributo, assim como iPad e iPhone.
  • Poster:
    É importante adicionar o thumb enquanto o vídeo não é carregado.
  • Controls:
    Caso não desenvolva os próprios controles, este atributo é necessário para que o usuário tenha o controle do vídeo.
  • Track:
    Se houver a necessidade de legenda externa nos vídeos, deve-se observar que esta tag funciona apenas nos browsers abaixo a partir das versões:
    - Google Chome 18+
    - Internet Explorer 10+
    - Mozilla Firefox: 31+
    - Safari 6+
    - Opera 15+
  • Formato:
    A extensão deve ser .mp4 (codec H.264)
    O vídeo deve ser encaminhado junto com a peça ou chamados diretamente de serviços de streaming de mercado usando a API do serviço e respeitando as condições de polite download 
  • Obs. Vídeos do Youtube podem ser embedados na peça.

Conversão das peças - Flash para HTML5 

  • Doubleclick Studio Layouts:
    Templates "Plug n' play", sem nenhum desenvolvimento/código. Demo - HTML5 YouTube Masthead; Desktop, Tablet e Mobile

 

  • GWD (Google Webdesigner):
    Diferentemente do Doubleclick Studio, são 100% customizável. Serve de ponto de partida e existem mais de 30 templates em vários formatos e tamanhos. https://support.google.com/webdesigner/

 

 

 

Esclareça todas as suas dúvidas com nossa equipe técnica e comercial.