aula digitalks de producão web -

Produção para WEB Rafael S. Soares

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.

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)

Online X Offiline • Mensuráveis

• Dinâmicas

• Testes A/B

• Call to action

• Opt In

• Behavioral Targeting

Definição de Objetivos • Vendas

• Cadastros

• Fidelização

• Branding

• Reputação / Proteção

• Adquirir novos clientes

Objetivos Estratégias Mensuração

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

• Longo, médio e curto prazo

• Presença Digital

• Testes são fundamentais

Banners • Definição do objetivo

• Call to action

• Referências

• Estático X Animado

• Criação da “arte”

• Programação

Banners

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

Banners • Dimensão

Banners • Peso

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

• Frame Rate

Banners • Versão do Flash Player

• Versão do Action Script

• Publish Settings:

Banners • Click Tag

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

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

• Criação da arte

• Programação

• Definição do Assunto

• Ferramenta de envio

Email Marketing • Balancear texto e imagem, texto em HTML

Email Marketing

Email Marketing

Call to Action

Email Marketing • Programação:

HTML básico

Não utilizar Scripts

Não utilizar CSS

Hospedar imagens -> Demanda

Email Marketing • Definição do assunto:

É a primeira informação a ser lida

Deve convencer

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

Redes Sociais • Objetivos

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

• Criação de layout

• Implementação

Redes Sociais • Twitter:

Avatar

Fundo

Cores

Redes Sociais • Twitter - Avatar

Redes Sociais • Twitter - Background

Redes Sociais • Twitter - Background

Redes Sociais • Twitter - Background

Redes Sociais • Twitter - Cores

Redes Sociais • Facebook

Avatar

Fanpage/Tab

Redes Sociais • Facebook – Avatar

Redes Sociais • Facebook – Fanpage/Tab

Redes Sociais • Facebook – Fanpage - Programação

HTML, Flash, etc.

Aplicativo Static HTML: iframe tabs

Permite iframe

Redes Sociais • Outras:

• Definição de cores – Identidade da marca

• Fundo (Background) – Tomar cuidado com

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

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

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

Landing Page • Criação – Identidade/Continuidade

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

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

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

HTML • Estrutura

• <abre></fecha>

HTML • Conteúdo Textual

• <h1><h2><h3>

• <h1>Titulo</h1>

• <p>Paragrafo</p>

HTML • Imagens

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

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>

HTML • Links

• Relativo:

• “images/foto.jpg”

• Absoluto:

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

HTML • Tabela

HTML • Formatação do texto

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

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

Site Otimizado • Site não otimizado:

• Site otimizado:

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

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

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

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

Site Otimizado • Imagens:

• Nome otimizado .jpg

• Alt e Tittle

• Tamanho do arquivo

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

Imagem”>

Site Otimizado • Links

• Meusite.com/?336

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

Site Otimizado • Conteúdo Textual

• <h1><h2><h3>

• <h1>Titulo</h1>

• <p>Paragrafo</p>

Site Otimizado • CMS – Content Management System

• Gerenciamento de conteudo

• Estrutura preparada – fácil atualização

Site Otimizado • Wordpress

Gratuito

Código Aberto

Plugins

Temas

PHP + MySQL

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

Site Otimizado • Instalação do Wordpress:

• Instaladores

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

Site Otimizado

Site Otimizado • Configurando o Wordpress

Site Otimizado • Configurando o Wordpress

Site Otimizado • Configurando o Wordpress

Site Otimizado • Instalando Plugin

Site Otimizado • Instalando Plugin

Site Otimizado • Instalando Plugin

Site Otimizado • Instalando Plugin

• FTP > Subir arquivos para:

• /wordpress/wp-content/plugins

Site Otimizado • Plugins importantes:

• SEO Ultimate

• Google XML Sitemaps

• Facebook

• Twitter

• Google +1

• Youtube – Integração

• Flickr – Integração

Site Otimizado • Configurando o plugin SEO Ultimate

Site Otimizado • Configurando o plugin SEO Ultimate

Site Otimizado • Configurando o plugin SEO Ultimate

Site Otimizado • Configurando o plugin SEO Ultimate

Site Otimizado • Configurando o plugin SEO Ultimate

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

Site Otimizado • Instalando um tema

Site Otimizado • Instalando um tema

Site Otimizado • Instalando um tema

• Subir manualmente em:

• /wordpress/wp-content/themes

• Cada tema possibilita configurações próprias

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.

Site Otimizado • Estrutura de arquivos

header.php

index.php page.php single.php

sidebar.php

footer.php

Site Otimizado • Inserindo posts

Site Otimizado • Inserindo posts

Site Otimizado • Adicionar página

Site Otimizado • Criação de Menus

Site Otimizado • Adicionando Widgets

Site Otimizado • Implementação do analytics:

Criar conta em analytics.google.com

Gerar código

Utilizar plugin de SEO

Site Otimizado • Criar conta no Google Webmaster Tools

• www.google.com/webmasters/tools

Site Otimizado

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

Obrigado! Rafael Soares

rafael@rafaelsoares.com.br