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.
Posição | Tamanho(máx) | Dispositivos | O que é |
---|---|---|---|
Cabeçalho | 560x60 | Apenas portal web PC e mobile | Mídia no topo do site, ao lado do logotipo do jornal |
Central Corpo | 1024x90 | Portal web e aplicativos | Após o menu, antes das manchetes e notícias |
Final de conteúdo | 700x40 | Portal web e aplicativos | No final de matérias, logo após o fim do texto, antes dos comentários |
Início de conteúdo | 768x60 | Portal web e aplicativos | No início de uma matéria, logo após o título e a chamada antes do texto |
Janela Popup | 500x500 | Apenas portal web PC, não abrimos janela no mobile | Janela com publicidade. O fundo é escurecido e o leitor deve clicar para fechar |
Lateral Superior | 300xlivre | Apenas portal web PC e mobile | Em páginas que possuem barra lateral, a mídia aparece no topo. |
Lateral Central | 300xlivre | Apenas portal web PC e mobile | Em páginas que possuem barra lateral, a mídia aparece no centro. |
Lateral Inferior | 300xlivre | Apenas portal web PC e mobile | Em páginas que possuem barra lateral, a mídia aparece no final da lateral. |
Rodapé | 768x60 | Apenas portal web PC e mobile | No rodapé das páginas, junto com o mapa do site, após o fim de qualquer conteúdo |
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.