Categorias
tutorial

PushDown

Formato expansível que empurra o conteúdo do site após expansão.

Template:

Resumo

O Template possui todas as mecânicas necessárias para a expansão, retração, clique, custom interaction e outros.
É possível alterar os tamanhos da parte retraída e da parte expandida de acordo com as necessidades de cada anúncio.

Inserindo a animação:

Dentro da pasta raiz em ‘index.html’ temos 3 div’s, sendo duas delas principais: ‘banner’ e ‘userExpand’.


Sem remover qualquer elemento, deve-se inserir os elementos HTML dentro das div’s mencionadas, apenas escondendo os elementos que não forem necessários ou editando-os em ‘style/styles.css’.

Disparando a animação

Dentro de scripts/script.js temos diversas funções sendo a ‘initializeCreative’ e ‘handleExpandButtonClick’ as principais.

Deve-se adicionar a função que iniciará animação dentro de ‘initializeCreative’ e a função que iniciará a animação da parte expandida em ‘handleExpandButtonClick’.

Comando de Click

Dentro de scripts/script.js temos a função handleClickthroughButtonClick responsável por disparar nosso comando de click.

Links

Single Expandable

Single Expandable_video

Categorias
tutorial

Tutorial – How to insert clicktag in simple banners

Tutorial – How to insert clicktag in simple banners

1. Insert the script call below into the head tag:

<script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js"></script>

2. Insert the code below as close as possible to the opening of the body tag:

<script type="text/javascript">
	function checkInit() {
		if (!EB.isInitialized()) {
			EB.addEventListener(EBG.EventName.EB_INITIALIZED, onInit); // This code checks whether the EB object is initialized, if the object is initialized, it launches the function "onInit", otherwise it registers to the "EB_INITIALIZED" event.
		} else {
			onInit()
		}
	}
 
	function onInit() {
		// --- ATENÇÃO ---
		// Insira aqui a função que inicializa a animação
 
	}
 
	window.onload = function(){ checkInit(); };
</script>

3. Insert the function below in the click of the element that will direct the user to the final URL.
ATTENTION – It is not necessary to enter the destination URL or window.open () function:

EB.clickthrough ();

<div id="banner" onclick="EB.clickthrough();" style="cursor:pointer;"></div>

Categorias
tutorial

Self Service

Categorias
tutorial

Full Service

1 – Processos, SLA e Escopo

2. Treinamento de preenchimento de ADP

3. Extração e Configuração de Reports

4. Treinamento Dashboard

5. Treinamento de Mapeamento de Conversões

Categorias
tutorial

Tutorial – Como criar um banner Pushdown

ATENÇÃO – As dimensões utilizadas nos templates disponibilizados são modelos. Tais propriedades podem ser alteradas nos arquivos e devem seguir as especificações determinadas pelo portal onde o banner será veiculado.

  • Animações em GWD,  Adobe Edge, e demais ferramentas de animação não são compatíveis.

1. Faça o download do template no link abaixo:

PushDown

***Apenas modificar arquivos que estão sendo referenciados no tutorial,  não alterar outras pastas e arquivos ou excluir elementos do template.***

Painel fechado

Se as especificações do portal tiver dimensões diferentes do template, altere conforme os itens abaixo.

3.1. No arquivo index.html da raiz do diretório principal insira o código HTML no local indicado.

html parte fechada

3.2. No arquivo style.css do diretório “styles” altere as dimensões da div #banner. Mantenha 2pxs a menos na altura e largura para que a borda complete a dimensão total. Insira o estilo da sua animação.

banner css

3.3. No arquivo script.js do diretório “scripts” insira a função que inicia a animação no local indicado, isso é necessário para que não ocorra problemas com exibição do banner em branco.

script js

Painel aberto

4.1. No arquivo index.html do diretório “panels/default” insira o código HTML no local indicado. Altere as informações de altura e largura do painel.

index html painel aberto

4.2. No arquivo style.css do diretório “panels/default/styles” altere as dimensões da div #container. Mantenha 2pxs a menos na altura e largura para que a borda complete a dimensão total. Insira o estilo da sua animação.

css da parte aberta

4.3. No arquivo script.js do diretório “panels/default/scripts” insira a função que inicia a animação no local indicado, isso é necessário para que não ocorra problemas com exibição do banner em branco.

script js parte aberta

Formato com Vídeo

5.1 Para montar um formato com vídeo, é necessário ter efetuado o download do template e ter feito os passos acima.

5.2 No arquivo index.html do diretório “panels/default” existe um codigo HTML pronto que efetua a chamada do vídeo.

Video

5.3 Para que o vídeo funcione os arquivos deverão estar  dentro do diretório “panels/default/videos” em dois formatos MP4 e WEBM, para alterar o vídeo que é exibido no banner basta substituir os arquivos, como no exemplo abaixo:

TrocaVideo

5.4 Depois de efetuar a inserção do vídeo vá ao diretorio “panels/default/styles/” e altere o arquivo “style.css” de acordo com o tamanho e posicionamento desejado.

StyleVideo
Categorias
tutorial

Tutorial – Como criar um banner Interstitial

ATENÇÃO – As dimensões utilizadas nos templates disponibilizados são modelos. Tais propriedades podem ser alteradas nos arquivos e devem seguir as especificações determinadas pelo portal onde o banner será veiculado.

Demonstração do Formato: Interstitial

1. Faça o download de um dos templates:Interstitial

Se as especificações do portal tiver dimensões diferentes do template, altere conforme os itens abaixo.

1 – Inserir a animação no arquivo index.html da pasta panels/default

2 – Alterar as dimensões do banner se necessários dentro do arquivo style.css localizado em panels/default/styles/style.css

Obs: note que temos 2 opções: portrait e landscape. Ajustar conforme necessidade:

3 –  Inserir função inicialização de animação dentro do arquivo script.js em panels/default/scripts/script.js

Categorias
tutorial

Tutorial – Como criar um banner expansível

Os tutoriais para as ferramentas listadas abaixo estão disponíveis em inglês:

ATENÇÃO – As dimensões utilizadas nos templates disponibilizados são modelos. Tais propriedades podem ser alteradas nos arquivos e devem seguir as especificações determinadas pelo portal onde o banner será veiculado.

1. Desenvolva a animação das partes fechada e aberta em dois projetos distintos.

2. Faça o download de um dos templates:Download – Template expansível 728×90 | 728×300 (Sem vídeo)Download – Template expansível 728×90 | 728×300 (Com vídeo)Download – Template expansível 728×90 | 728×300 (Com vídeo com botão fechar)

Painel fechado

3.1. No arquivo index.html da raiz do diretório principal insira o código HTML no local indicado.

3.2. No arquivo style.css do diretório “styles” altere as dimensões da div #banner. Mantenha 2pxs a menos na altura e largura para que a borda complete a dimensão total. Insira o estilo da sua animação.

3.3. No arquivo script.js do diretório “scripts” insira a função que inicia a animação no local indicado, isso é necessário para que não ocorra problemas com exibição do banner em branco.

Painel aberto

4.1. No arquivo index.html do diretório “panels/expand” insira o código HTML no local indicado. Altere as informações de altura e largura do painel.

4.2. No arquivo style.css do diretório “panels/expand/styles” altere as dimensões da div #expansion. Mantenha 2pxs a menos na altura e largura para que a borda complete a dimensão total. Insira o estilo da sua animação.

4.3. No arquivo script.js do diretório “panels/expand/scripts” insira a função que inicia a animação no local indicado, isso é necessário para que não ocorra problemas com exibição do banner em branco.

Categorias
tutorial

Tutorial – Como criar um banner DHTML | Float

ATENÇÃO – As dimensões utilizadas nos templates disponibilizados são modelos. Tais propriedades podem ser alteradas nos arquivos e devem seguir as especificações determinadas pelo portal onde o banner será veiculado.

1. Faça o download de um dos templates:Download – Template genérico 300×250Download – Template Globo 300×250Download – Template Globo 728×728Download – Template Globo 640×332

Se as especificações do portal tiver dimensões diferentes do template, altere conforme os itens abaixo.

2. No arquivo index.html da raiz do diretório principal altere as informações de altura e largura presentes na linha 10, e insira o código HTML no local indicado.

3. No arquivo style.css do diretório styles altere as dimensões nas linhas 48 e 49. Mantenha 2pxs a menos na altura e largura para que a borda complete a dimensão total. Insira o estilo da sua animação.

4. No arquivo script.js do diretório scripts altere o tempo de fechamento automático na linha 6. Insira a função que inicia a animação no local indicado, isso é necessário para que não ocorra problemas com exibição do banner em branco.

Categorias
tutorial

Adaptação de peças – Google Web Designer

Clique nos links abaixo para visualizar os tutoriais:

Categorias
tutorial

Adaptação de peças – Flash CC HTML5 Canvas

Clique no link abaixo para visualizar o tutorial: