GazMidiaPosicoes

Abaixo você pode conferir as posições e formatos de mídia suportados pela plataforma MavenGaz.

EM BREVE: Colocaremos aqui um midia kit de exemplo com as posições abaixo

Formatos suportados

As peças podem ser arquivos JPG, PNG, GIF ou ainda código em html/javascript. Caso você receba um código em javascript, certifique-se que você informou para a agência ou cliente sobre as limitações de tamanho para o espaço onde a mídia irá aparecer. No caso do Google AdSense, utilize sempre a opção de publicidade "responsiva". Mais abaixo fizemos um guia de boas práticas para você enviar para a agência ou cliente que deseja criar uma peça em html.

Atenção: A programação abaixo é exclusiva para o portal de notícias. 

Programação para mídias

Você poderá escolher as seguintes opções para as suas mídias:

• Menu - Escolha em quais seções do site (menus) a mídia poderá aparecer. Por exemplo, um patrocinador de "Esportes" só irá aparecer na home de notícias do menu "Esportes".
• Páginas - Se você criar alguma landing page ou alguma página especial e esta for patrocinada você também pode inserir mídias em páginas especiais.
• Dispositivos - Você pode escolher uma ou todas as opções entre: Computadores, Tablets, Smartphones e Aplicativo. Caso o seu anunciante queira divulgar uma campanha apenas no mobile você pode vender mídia tanto para o acesso responsivo em tablets e smartphones quanto o acesso via aplicativo iOS e Android.
• Agendamento -

Especificações técnicas

As localizações abaixo foram projetadas para a primeira versão do MavenGaz. Iremos criar ainda outras opções e locais comuns.

• Peso máximo dos anúncios: Desktop / Tablet: 150KB (DESCOMPACTADO) e Mobile (mWEB ou aplicativo) 40kB (DESCOMPACTADO)
• Extensões aceitas: JPG, PNG, GIF ou código HTML/Javascript. Não se aceitam animações em Flash.
• Randomicidade: Você irá gerenciar quantas mídias poderão aparecer na mesma posição em determinado período.
• Tamanhos: Os tamanhos abaixo são apenas recomendados, mas você tem a liberdade de criar seus padrões, apenas cuide para não deformar o layout. Lembrar que o tamanho poderá ser redimensionado para acesso responsivo em tablets e smartphones.

Publicidade nativa : Você pode também criar matérias e marca-las como "Patrocinada", informando o nome do patrocinador e criando conteúdo personalizado pago.

Guia para publicidade em HTML/Javascript

Envie o guia abaixo para a agência ou cliente. Os termos e instruções foram escritos para que o designer ou o programador do anúncio possa compreender o que usar e o que não usar. 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.

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: https://support.google.com/dfp_premium/answer/6023110

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.

• 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. Quando possível tentem sempre utilizar código javascript puro.

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ção é 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 é recomendado, utilizem 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 pois o visitante acaba sendo obrigado a consumir o vídeo. 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.

• 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.