
HTML5
O Chrome sofrerá uma atualização gradual começando em setembro/2015 onde conteúdos em Flash não prioritários e/ou que não estejam no centro das páginas permanecerão pausados até que o usuário ative-os com um clique (documentação do google). O Chrome representa mais de 50% do trafégo na web e e mais de 70% no UOL, alé disso outros browsers como o Safari e Firefox já possuem recursos similares
Os principais motivos são:
- Alto consumo de processamento do computador e de bateria;
- Falta de segurança;
- Necessidade do plugin ser constantemente atualizado;
- Flash não funcionalidade em dispositivos mobile;

Boas práticas
Com o objetivo de diminuir problemas de implementação e veiculação disponibilizamos algumas especificações e boas práticas para o uso de HTML5:
O banner HTML5 deve ter todas suas referências externas como relativas. É importante lembrar que o anúncio será veiculado em páginas mais complexas e com diversos elementos, portanto é fundamental que o funcionamento do banner seja compatível com o SafeFrame do DFP.
Não utilizar as boas práticas descritas neste documento pode impactar negativamente o funcionamento do anúncio e da página. Além de prejudicar a experiência do usuário. A construção da peça não pode depender de qualquer outro elemento da página ou bibliotecas javascript externas. Fontes, CSS, JS, HTML e imagens devem ser enviadas no pacote da peça.
Sugerimos para a criação e conversão - de peças publicitárias em HTML5 - as opções abaixo:
- 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áveis. Serve de ponto de partida e existem mais de 30 templates em vários formatos e tamanhos. https://support.google.com/webdesigner/
Vanilla HTML5:
http://www.cssreflex.com/2014/01/vanilla-html-minimal-semantic-html5-framework.html
Flash CC
Também pode exportar HTML5, https://helpx.adobe.com/flash/using/creating-publishing-html5-canvas-document.html.
Peso máximo dos anúncios
- Desktop / Tablet: 150KB (DESCOMPACTADO)
Mobile (mWEB ou In-App) 40kB (DESCOMPACTADO)
Polite Download (somente via tag de terceiros)
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 seguindos os limites abaixo:- Desktop / Tablet 1MB (DESCOMPACTADO)
- Mobile (mWEB ou In-App) 300KB (DESCOMPACTADO)
clickTag
- Existem diversas maneiras de criar a clickTag (área de clique do anúncio) e em todas elas a página do anunciante deve abrir em uma nova janela ou aba do navegador. Abaixo temos alguns exemplos de como fazer, porém em resumo: sempre inclua a macro abaixo como URL de redirecionamento da peça.
%%CLICK_URL_ESC%%%%DEST_URL%%
- Uma forma simples de usar a variável clickTag é atribuir o href dinamicamente após o carregamento da página via 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>
Obs. Lembrando que a 'clickArea' precisa existir em seu HTML e seja a área clicável para redirecionamento. Além disso a chamada javascript deve vir após a existência do elemento clickArea no HTML.
HTML - Outra possibilidade é feito no próprio elemento HTML, conforme exemplos abaixo:
- Ex 1 HTML puro:
<a href="%%CLICK_URL_ESC%%%%DEST_URL%%" target="_blank" ></a>
- Ex 2 HTML + Javascript:
var clickTag = '%%CLICK_URL_ESC%%%%DEST_URL%%'; <a href="javascript: window.open(clickTag, '_blank'); void(0)"></a>
- Ex 3 HTML + Javascript em um elemento DIV:
<div id="clickArea" onclick="javascript: window.open(clickTag, '_blank'); void(0)" style="cursor:pointer;" ></div>
Obs. No uso de DIV clicável, ela deve sempre exibir o cursor de 'mão'. - Em casos de várias urls de clique dentro do mesmo anúncio, declare as variáveis de click da seguinte forma: clickTag, clickTag1, clickTag2, caso deseje utilizar via javascript.
-
var clickTag = "%%CLICK_URL_ESC%%http://www.uol.com.br"; var clickTag1 = "%%CLICK_URL_ESC%%http://economia.uol.com.br"; var clickTag2 = "%%CLICK_URL_ESC%%http://esporte.uol.com.br"; var clickTag3 = "%%CLICK_URL_ESC%%http://entretenimento.uol.com.br";
- Caso deseje usar em HTML puro basta adicionar as urls logo após %%CLICK_URL_ESC%%
Ex:<a href="%%CLICK_URL_ESC%%http://www.uol.com.br" target="_blank" >Clique 1</a> <a href="%%CLICK_URL_ESC%%http://economia.uol.com.br" target="_blank" >Clique 2</a> <a href="%%CLICK_URL_ESC%%http://esporte.uol.com.br" target="_blank" >Clique 3</a> <a href="%%CLICK_URL_ESC%%http://entretenimento.uol.com.br" target="_blank" >Clique 4</a>
Javascript
Múltiplos Cliques
Backup
- Os anúncios devem servir imagem de backup para os browsers que não oferecem suporte à HTML5.
O mesmo deve ocorrer se algum recurso externo não esteja disponível. Por exemplo no uso de XML para peças dinâmicas.
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ão adicionados 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
- Muitos efeitos (como o gradiente) são possíveis com o uso de CSS. (http://www.cssmatic.com/gradient-generator e http://www.w3schools.com/css/)
- Para uso de vetores a melhor opçã é PNG
- O uso de PNG e JPG como 'Save for web do Photoshop', não usam a melhor compreensão. logo experimente outras opções como TinyPNG (https://tinypng.com/ ) e TinyJPG (https://tinyjpg.com/)
- Obs: O uso de animações utilizando o SVG não é permitido!! Utilize o canvas.
Fontes
- Fontes fora do padrão do sistema acrescentarão diversos KBs ao anúncio, podendo aumentar consideravelmente o tempo de carregamento. Sempre que possível utilize suas fontes como imagens/vetor ou defina-as em classes css especificas.
Google Fonts: (https://developers.google.com/fonts/docs/getting_started): Biblioteca com 698 fontes para uso livre ou integrado ao Google Web Designer.
Fontsquirrel: (http://www.fontsquirrel.com/tools/webfont-generator ): Faz a conversão de fontes proprietárias para formatos WebFonts, reduzindo o peso.
Font Subsetting: http://demosthenes.info/blog/878/Slash-Page-Load-Times-With-CSS-Font-Subsetting: Técnica para reduzir peso de fontes, utilizando apenas o necessário
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 próprios IDs ou Classes que não sejam genéricos. Por ex: container, wrapper, header, etc.
Vídeo
Para o uso de vídeo, recomendamos o uso do player do Youtube embedado. Além disso com algumas restrições abaixo:
- Autoplay:
Não recomendamos o uso e não permitimos o uso sem polite download.
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+
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 nos determinados browsers e versões.
Este site: https://html5test.com/results/desktop.html mostra a classificação de cada browser e versão e seu desempenho.