Agenda Vantagens e desvantagens Tipos de arquivos Dicas 3
Vantagens e desvantagens Vantagens Flexibilidade de desenvolvimento por seu uma linguagem aberta e gratuita Ferramentas de baixo custo para produção Responsivo e Crossdevice É nativo (não precisa de plug-in), exigindo menos processamento e economizando bateria Possibilidade de maior interatividade 4
Vantagens e desvantagens Desvantagens Tempo de produção Maior complexidade para desenvolver animações Necessário testar em diferentes versões de browsers Arquivos finais maiores Necessidade de um padrão de mercado e uma documentação mais técnica por parte dos Publishers e Adservers 6
Tipos de arquivos aceitos Tags de terceiros Pacote (zip) HTML5 Peso do criativo Macros de Click e Pixels Contadores 7
Tags de terceiros Deve se consultar a política interna de cada Publisher para o uso de TAG de terceiros. Respeitando os limites IAB para os formatos iniciais Os arquivos subsequentes devem ser descarregados após interação do usuário ou carregamento total da página É importante que as tags sejam compatíveis com o do SafeFrame 8
Pacote (zip) HTML5 Não é recomendado o uso de bibliotecas JQuery - Isso aumenta o tamanho do arquivo, além de não ser suportados em alguns ambientes Cada arquivo.zip deve representar um único criativo Deve haver pelo menos um arquivo index.html em cada.zip - Este arquivo sempre será o primeiro a ser carregado O arquivos como fontes, imagens e css, podem está dividido em sub pastas ou dentro de uma única pasta 9
Pacote (zip) HTML5 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 Todas referências externas devem ser relativas 9
Peso dos criativos Limite de peso inclui todos os arquivos necessários para visualização completa do criativo. Para arquivos subsequentes é recomendado que sejam descarregados após interação do usuário ou carregamento total da página É recomendado sempre consultar a politica de pesos do publisher ou consultar o guia do IAB GUIA: http://iabbrasil.net/guias-e-pesquisas/pratica/guia-html5-para-publicidade-digital---2015 10
Macros de Click e Pixels Contadores O clique de um criativo dever sempre abrir em uma nova aba ou uma nova janela do navegador Existem várias formas de se construir uma clicktag, sendo assim é recomendado que se consulte sempre as recomendações do publisher Para pixels contadores, consulte as politicas do publisher 11
Informações gerais HTML5 Estrutura Observações: Pastas Link para fontes externas Construção de links externos através de javascript 12
Informações gerais HTML5 Initial load Carregamento de todos os recursos da peça inicial. Isto inclui todos os arquivos: imagens, HTML, CSS, JS, e qualquer biblioteca compartilhada necessárias para a peça inicial Subload Alguns criativos que podem não carregarem em menos de 1s após o domcontentloadedeventend, exigem alguns recursos (imagens, HTML) para que sejam carregados assim que o domcontentloadedeventend é disparado. Na sequência o criativo continua o carregamento da peça 13
Informações gerais HTML5 User-initiated load Depois da interação do usuário, como expansão ou clique. Neste caso deve consultar a documentação do veículo, bem como considerar a experiência do usuário 13
Assets Assets suportados Fontes Imagens CSS Javascript Videos 14
Assets Fontes Fontes de máquina e webfonts Fontes pagas e proprietárias Font Squirrel (direitos de uso!) Fontes gratuitas Google Fonts 15
Assets Peso das fontes Quando usar? Quais alternativas? (2.7KB) (9KB) 16
Assets Otimizações para o uso de fontes Carregamento Normal (22.4kB): Carregamento Reduzido (4.5kB): 17
Assets Imagens Compactação da imagem para uso de acordo com a dimensão do banner 18
Assets Imagens Atenção aos tipos ideais de imagens para cada tipo de aplicação JPG 21KB PNG 95KB GIF 36KB 19
Assets Imagens Atenção aos tipos ideais de imagens para cada tipo de aplicação JPG (70%) 4KB PNG 3.4KB GIF (256) 2.1KB 20
Assets Imagens Imagens suportadas vs não suportadas vs SVG 21
Assets CSS Minifique o código Priorize animações com CSS, tente não usar o javascript para isso http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp 22
Assets Javascript Minifique o código Arquivos.js externos Em muitos publishers há restrições em ter referências a arquivos js e bibliotecas externas (que não estejam no zip), apenas aos assets do pacote 23
Assets Javascript BIBLIOTECAS - Os limites de peso devem ser respeitados, portanto recomendamos que, se for extremamente necessário, usem bibliotecas simplificadas, que tenham apenas os recursos necessários para o funcionamento da peça. - jquery não é recomendado para anúncios HTML5 pelas seguintes razões: Desempenho reduzido em dispositivos móveis por causa da dependência de animações baseadas em tempo. Ponderação desnecessária de arquivos: a maioria das funcionalidades da biblioteca não é necessária. Como alternativa, procure bibliotecas mais leves, como a zepto.js 23
Assets Javascript Evite recursos que elevem o processamento da máquina do usuário, como loopings, Intervals, efeitos, etc. Isso prejudica a experiência do usuário e a navegação nas páginas (use CSS para as animações) 23
Assets Vídeos Formatos e codecs Os formatos recomendados para uso de vídeo em HTML5 são: MP4 ou WebM - Esses formatos estão aptos para as maioria dos navegadores. Para saber mais informações consulte a documentação da IAB Exemplo de código para incluir arquivos de vídeo no HTML5: <video width="320" height="240" controls> <source src="pr6.mp4" type="video/mp4; codecs=avc1.42e01e,mp4a.40.2"> <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis"> <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis"> </video> Para mais informações de boas práticas e de usabilidade, é sempre importante consultar as politicas internas de de cada publisher 24
Ferramentas criação de peças Google Web Designer (GWD) Adobe Edge Hype 25
Dúvidas?
educacao@iabbrasil.org.br facebook.com/iabbrasil Twitter.com/iabbrasil linkedin.com/company/iab-brasil