Transcript
Page 1: Aula Digitalks de Producão Web -

Produção para WEB Rafael S. Soares

Page 2: Aula Digitalks de Producão Web -

Rafael S. Soares • Bacharel em Design de Interfaces Digitais.

• Especialista em projetos digitais voltados à

performance.

• Como gerente de Produção da Media Factory foi

responsável por projetos de presença digital de

empresas como ClickOn, Cardif, Onodera, Sotreq,

Planeta Futebol, entre outros.

Page 3: Aula Digitalks de Producão Web -

Agenda 1. Produção Online X Offline

2. Objetivos

3. Estratégias

4. Banners

5. Email Marketing

6. Redes Sociais

7. Landing Page

8. Site Otimizado (SEO)

Page 4: Aula Digitalks de Producão Web -

Online X Offiline • Mensuráveis

• Dinâmicas

• Testes A/B

• Call to action

• Opt In

• Behavioral Targeting

Page 5: Aula Digitalks de Producão Web -

Definição de Objetivos • Vendas

• Cadastros

• Fidelização

• Branding

• Reputação / Proteção

• Adquirir novos clientes

Objetivos Estratégias Mensuração

Page 6: Aula Digitalks de Producão Web -

Estratégias • Qual a ação esperada? Call to Action

• Longo, médio e curto prazo

• Presença Digital

• Testes são fundamentais

Page 7: Aula Digitalks de Producão Web -

Banners • Definição do objetivo

• Call to action

• Referências

• Estático X Animado

• Criação da “arte”

• Programação

Page 8: Aula Digitalks de Producão Web -

Banners

Page 9: Aula Digitalks de Producão Web -

Banners • Programação – Ficar atento ao Mídia Kit

Page 10: Aula Digitalks de Producão Web -

Banners • Dimensão

Page 11: Aula Digitalks de Producão Web -

Banners • Peso

Page 12: Aula Digitalks de Producão Web -

Banners • Formatos: JPG (estático) / GIF / SWF (flash)

• Frame Rate

Page 13: Aula Digitalks de Producão Web -

Banners • Versão do Flash Player

• Versão do Action Script

• Publish Settings:

Page 14: Aula Digitalks de Producão Web -

Banners • Click Tag

on(release) { getURL(_root.url, "_blank"); }

Page 15: Aula Digitalks de Producão Web -

Email Marketing • Objetivos – Informativo, Vendas, Cadastros, etc.

• Criação da arte

• Programação

• Definição do Assunto

• Ferramenta de envio

Page 16: Aula Digitalks de Producão Web -

Email Marketing • Balancear texto e imagem, texto em HTML

Page 17: Aula Digitalks de Producão Web -

Email Marketing

Page 18: Aula Digitalks de Producão Web -

Email Marketing

Call to Action

Page 19: Aula Digitalks de Producão Web -

Email Marketing • Programação:

HTML básico

Não utilizar Scripts

Não utilizar CSS

Hospedar imagens -> Demanda

Page 20: Aula Digitalks de Producão Web -

Email Marketing • Definição do assunto:

É a primeira informação a ser lida

Deve convencer

Page 21: Aula Digitalks de Producão Web -

Email Marketing • Ferramenta de envio:

Optar por ferramentas que permitam mensurações:

Taxas de Abertura, Cliques, etc.

Sigam leis de envio: Link para descadastro, base

opt in

Page 22: Aula Digitalks de Producão Web -

Redes Sociais • Objetivos

• Quais redes estar? Twitter, Facebook, Orkut, etc.

• Criação de layout

• Implementação

Page 23: Aula Digitalks de Producão Web -

Redes Sociais • Twitter:

Avatar

Fundo

Cores

Page 24: Aula Digitalks de Producão Web -

Redes Sociais • Twitter - Avatar

Page 25: Aula Digitalks de Producão Web -

Redes Sociais • Twitter - Background

Page 26: Aula Digitalks de Producão Web -

Redes Sociais • Twitter - Background

Page 27: Aula Digitalks de Producão Web -

Redes Sociais • Twitter - Background

Page 28: Aula Digitalks de Producão Web -

Redes Sociais • Twitter - Cores

Page 29: Aula Digitalks de Producão Web -

Redes Sociais • Facebook

Avatar

Fanpage/Tab

Page 30: Aula Digitalks de Producão Web -

Redes Sociais • Facebook – Avatar

Page 31: Aula Digitalks de Producão Web -

Redes Sociais • Facebook – Fanpage/Tab

Page 32: Aula Digitalks de Producão Web -

Redes Sociais • Facebook – Fanpage - Programação

HTML, Flash, etc.

Aplicativo Static HTML: iframe tabs

Permite iframe

Page 33: Aula Digitalks de Producão Web -

Redes Sociais • Outras:

• Definição de cores – Identidade da marca

• Fundo (Background) – Tomar cuidado com

variações de acordo com resoluções de tela

Page 34: Aula Digitalks de Producão Web -

Landing Page • Criação

De onde a visita vem?

Qual meu objetivo?

Ação esperada

Possibilidade de saber mais

Reduzir possibilidade de ações

Guiar visitante

Evitar Scroll

Tomar cuidado com tempo de carregamento

Etapas

Testes A/B

Page 35: Aula Digitalks de Producão Web -

Landing Page • Criação – Guiar Usuário

Page 36: Aula Digitalks de Producão Web -

Landing Page • Criação – Identidade/Continuidade

Page 37: Aula Digitalks de Producão Web -

Landing Page • Criação – Captação de Opt In

Page 38: Aula Digitalks de Producão Web -

Landing Page • Criação - Inscrições

Page 39: Aula Digitalks de Producão Web -

Landing Page • Programação

Permite qualquer linguagem para WEB

Não esquecer de implementar ferramenta de

métrica

Hospedar no domínio de seu site -> credibilidade

Page 40: Aula Digitalks de Producão Web -

HTML • Estrutura

• <abre></fecha>

Page 41: Aula Digitalks de Producão Web -

HTML • Conteúdo Textual

• <h1><h2><h3>

• <h1>Titulo</h1>

• <p>Paragrafo</p>

Page 42: Aula Digitalks de Producão Web -

HTML • Imagens

• <img src=“imagem1.jpg” alt=“texto alternativo”>

Page 43: Aula Digitalks de Producão Web -

HTML • Link

• <a href=“http://www.site.com” target=“_blank”>

Conteúdo Linkado</a>

• <a href=“http://www.site.com” target=“_blank”>

<img src=“imagem1.jpg”></a>

Page 44: Aula Digitalks de Producão Web -

HTML • Links

• Relativo:

• “images/foto.jpg”

• Absoluto:

• “http://www.site.com/images/foto.jpg”

Page 45: Aula Digitalks de Producão Web -

HTML • Tabela

Page 46: Aula Digitalks de Producão Web -

HTML • Formatação do texto

• <font face=“” color=“” size=“”></font>

Page 47: Aula Digitalks de Producão Web -

Site Otimizado • SEO

Métodos que facilitam a leitura de conteúdo do

site pelos sistemas de busca (Google, Bing, Yahoo,

etc.)

Não basta ter conteúdo relevante se ele não é

indexado

Grande parte das visitas são provenientes dos

buscadores

Site em Flash = Site em branco

Page 48: Aula Digitalks de Producão Web -

Site Otimizado • Site não otimizado:

• Site otimizado:

Page 49: Aula Digitalks de Producão Web -

Site Otimizado • Meta Tags (<head></head>)

• <meta name="keywords" content="">

• <meta name="description" content="">

• <meta name="robots" content="index, follow">

Page 50: Aula Digitalks de Producão Web -

Site Otimizado • Imagens:

• Nome otimizado .jpg

• Alt e Tittle

• Tamanho do arquivo

• <img src=“nome-otimizado.jpg” alt=“Explicação da

Imagem”>

Page 51: Aula Digitalks de Producão Web -

Site Otimizado • Links

• Meusite.com/?336

• Meusite.com/meu+produto+em+promocao

Page 52: Aula Digitalks de Producão Web -

Site Otimizado • Conteúdo Textual

• <h1><h2><h3>

• <h1>Titulo</h1>

• <p>Paragrafo</p>

Page 53: Aula Digitalks de Producão Web -

Site Otimizado • CMS – Content Management System

• Gerenciamento de conteudo

• Estrutura preparada – fácil atualização

Page 54: Aula Digitalks de Producão Web -

Site Otimizado • Wordpress

Gratuito

Código Aberto

Plugins

Temas

PHP + MySQL

Page 55: Aula Digitalks de Producão Web -

Site Otimizado • Passo a Passo

Preparação do servidor – Instalação do Wordpress

Configuração do Wordpress

Instalação de Plugin

Plugins Importantes

Configurar Plugin SEO

Configurar Plugin Site Map

Instalando e editando um tema

Inserindo posts

Inserindo páginas

Criação de menus

Edição de Widgets

Implementação de Analytics

Implementação de Google Webmaster Tools

Mantendo Atualizado

Page 56: Aula Digitalks de Producão Web -

Site Otimizado • Instalação do Wordpress:

• Instaladores

Page 57: Aula Digitalks de Producão Web -

Site Otimizado • Instalação Manual

• Baixar ultima versão em: http://wordpress.org/

• Criar um banco de dados MySQL

• Editar o arquivo wp-config-sample.php com as

informações do banco de dados, salvar como wp-

config.php

• Subir arquivos para o servidor

• Abrir, pelo navegador, seusite.com/wp-

admin/install.php

Page 58: Aula Digitalks de Producão Web -

Site Otimizado

Page 59: Aula Digitalks de Producão Web -

Site Otimizado • Configurando o Wordpress

Page 60: Aula Digitalks de Producão Web -

Site Otimizado • Configurando o Wordpress

Page 61: Aula Digitalks de Producão Web -

Site Otimizado • Configurando o Wordpress

Page 62: Aula Digitalks de Producão Web -

Site Otimizado • Instalando Plugin

Page 63: Aula Digitalks de Producão Web -

Site Otimizado • Instalando Plugin

Page 64: Aula Digitalks de Producão Web -

Site Otimizado • Instalando Plugin

Page 65: Aula Digitalks de Producão Web -

Site Otimizado • Instalando Plugin

• FTP > Subir arquivos para:

• /wordpress/wp-content/plugins

Page 66: Aula Digitalks de Producão Web -

Site Otimizado • Plugins importantes:

• SEO Ultimate

• Google XML Sitemaps

• Facebook

• Twitter

• Google +1

• Youtube – Integração

• Flickr – Integração

Page 67: Aula Digitalks de Producão Web -

Site Otimizado • Configurando o plugin SEO Ultimate

Page 68: Aula Digitalks de Producão Web -

Site Otimizado • Configurando o plugin SEO Ultimate

Page 69: Aula Digitalks de Producão Web -

Site Otimizado • Configurando o plugin SEO Ultimate

Page 70: Aula Digitalks de Producão Web -

Site Otimizado • Configurando o plugin SEO Ultimate

Page 71: Aula Digitalks de Producão Web -

Site Otimizado • Configurando o plugin SEO Ultimate

Page 72: Aula Digitalks de Producão Web -

Site Otimizado • Plugin permite inserir descrição por página/post

Page 73: Aula Digitalks de Producão Web -

Site Otimizado • Instalando um tema

Page 74: Aula Digitalks de Producão Web -

Site Otimizado • Instalando um tema

Page 75: Aula Digitalks de Producão Web -

Site Otimizado • Instalando um tema

• Subir manualmente em:

• /wordpress/wp-content/themes

• Cada tema possibilita configurações próprias

Page 76: Aula Digitalks de Producão Web -

Site Otimizado • Estrutura padrão dos temas:

• header.php – Cabeçalho, presente em todas as páginas

• footer.php – Rodapé presente em todas as páginas

• index.php – Home do site

• single.php – Post

• page.php – Página

• archive.php – Arquivo de posts

• comments.php – Estrutura de comentários do post

• search.php – Página onde aparece resultados das pesquisar

• sidebar.php – Barra lateral do site (onde ficam os widgets)

• style.css – Definição de cores e posições

• images – Pasta que contem todas imagens do tema

• Outros arquivos ou pastas podem aparecer de acordo com o tema instalado, complementando a estrutura padrão.

Page 77: Aula Digitalks de Producão Web -

Site Otimizado • Estrutura de arquivos

header.php

index.php page.php single.php

sidebar.php

footer.php

Page 78: Aula Digitalks de Producão Web -

Site Otimizado • Inserindo posts

Page 79: Aula Digitalks de Producão Web -

Site Otimizado • Inserindo posts

Page 80: Aula Digitalks de Producão Web -

Site Otimizado • Adicionar página

Page 81: Aula Digitalks de Producão Web -

Site Otimizado • Criação de Menus

Page 82: Aula Digitalks de Producão Web -

Site Otimizado • Adicionando Widgets

Page 83: Aula Digitalks de Producão Web -

Site Otimizado • Implementação do analytics:

Criar conta em analytics.google.com

Gerar código

Utilizar plugin de SEO

Page 84: Aula Digitalks de Producão Web -

Site Otimizado • Criar conta no Google Webmaster Tools

• www.google.com/webmasters/tools

Page 85: Aula Digitalks de Producão Web -

Site Otimizado

Page 86: Aula Digitalks de Producão Web -

Site Otimizado • Manter site sempre atualizado é fundamental

• Manter no site uma área que possibilite

atualizações constantes

• Publicar e linkar conteúdos com redes sociais e

outros sites

• Utilizar plugins de redes sociais constantemente

• Link Building

Page 87: Aula Digitalks de Producão Web -

Obrigado! Rafael Soares

[email protected]