Post on 27-Jun-2015
description
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
• 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