Aula Digitalks de Producão Web -

3.124 visualizações

Publicada em

Aula Digitalks de Producão Web

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
3.124
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2.194
Ações
Compartilhamentos
0
Downloads
43
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula Digitalks de Producão Web -

  1. 1. Produção para WEB Rafael S. Soares
  2. 2. 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.
  3. 3. Agenda1. Produção Online X Offline2. Objetivos3. Estratégias4. Banners5. Email Marketing6. Redes Sociais7. Landing Page8. Site Otimizado (SEO)
  4. 4. Online X Offiline• Mensuráveis• Dinâmicas• Testes A/B• Call to action• Opt In• Behavioral Targeting
  5. 5. Definição de Objetivos• Vendas• Cadastros• Fidelização• Branding• Reputação / Proteção• Adquirir novos clientes Objetivos Estratégias Mensuração
  6. 6. Estratégias• Qual a ação esperada? Call to Action• Longo, médio e curto prazo• Presença Digital• Testes são fundamentais
  7. 7. Banners• Definição do objetivo• Call to action• Referências• Estático X Animado• Criação da “arte”• Programação
  8. 8. Banners
  9. 9. Banners• Programação – Ficar atento ao Mídia Kit
  10. 10. Banners• Dimensão
  11. 11. Banners• Peso
  12. 12. Banners• Formatos: JPG (estático) / GIF / SWF (flash)• Frame Rate
  13. 13. Banners• Versão do Flash Player• Versão do Action Script• Publish Settings:
  14. 14. Banners• Click Tag on(release) { getURL(_root.url, "_blank"); }
  15. 15. Email Marketing• Objetivos – Informativo, Vendas, Cadastros, etc.• Criação da arte• Programação• Definição do Assunto• Ferramenta de envio
  16. 16. Email Marketing• Balancear texto e imagem, texto em HTML
  17. 17. Email Marketing
  18. 18. Email Marketing Call to Action
  19. 19. Email Marketing• Programação: HTML básico Não utilizar Scripts Não utilizar CSS Hospedar imagens -> Demanda
  20. 20. Email Marketing• Definição do assunto: É a primeira informação a ser lida Deve convencer
  21. 21. 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
  22. 22. Redes Sociais• Objetivos• Quais redes estar? Twitter, Facebook, Orkut, etc.• Criação de layout• Implementação
  23. 23. Redes Sociais• Twitter: Avatar Fundo Cores
  24. 24. Redes Sociais• Twitter - Avatar
  25. 25. Redes Sociais• Twitter - Background
  26. 26. Redes Sociais• Twitter - Background
  27. 27. Redes Sociais• Twitter - Background
  28. 28. Redes Sociais• Twitter - Cores
  29. 29. Redes Sociais• Facebook Avatar Fanpage/Tab
  30. 30. Redes Sociais• Facebook – Avatar
  31. 31. Redes Sociais• Facebook – Fanpage/Tab
  32. 32. Redes Sociais• Facebook – Fanpage - Programação HTML, Flash, etc. Aplicativo Static HTML: iframe tabs Permite iframe
  33. 33. Redes Sociais• Outras:• Definição de cores – Identidade da marca• Fundo (Background) – Tomar cuidado com variações de acordo com resoluções de tela
  34. 34. 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
  35. 35. Landing Page• Criação – Guiar Usuário
  36. 36. Landing Page• Criação – Identidade/Continuidade
  37. 37. Landing Page• Criação – Captação de Opt In
  38. 38. Landing Page• Criação - Inscrições
  39. 39. 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
  40. 40. HTML• Estrutura• <abre></fecha>
  41. 41. HTML• Conteúdo Textual• <h1><h2><h3>• <h1>Titulo</h1>• <p>Paragrafo</p>
  42. 42. HTML• Imagens• <img src=“imagem1.jpg” alt=“texto alternativo”>
  43. 43. 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>
  44. 44. HTML• Links• Relativo:• “images/foto.jpg”• Absoluto:• “http://www.site.com/images/foto.jpg”
  45. 45. HTML• Tabela
  46. 46. HTML• Formatação do texto• <font face=“” color=“” size=“”></font>
  47. 47. 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
  48. 48. Site Otimizado• Site não otimizado:• Site otimizado:
  49. 49. Site Otimizado• Meta Tags (<head></head>)• <meta name="keywords" content="">• <meta name="description" content="">• <meta name="robots" content="index, follow">
  50. 50. Site Otimizado• Imagens:• Nome otimizado .jpg• Alt e Tittle• Tamanho do arquivo• <img src=“nome-otimizado.jpg” alt=“Explicação da Imagem”>
  51. 51. Site Otimizado• Links• Meusite.com/?336• Meusite.com/meu+produto+em+promocao
  52. 52. Site Otimizado• Conteúdo Textual• <h1><h2><h3>• <h1>Titulo</h1>• <p>Paragrafo</p>
  53. 53. Site Otimizado• CMS – Content Management System• Gerenciamento de conteudo• Estrutura preparada – fácil atualização
  54. 54. Site Otimizado• Wordpress Gratuito Código Aberto Plugins Temas PHP + MySQL
  55. 55. 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
  56. 56. Site Otimizado• Instalação do Wordpress:• Instaladores
  57. 57. 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
  58. 58. Site Otimizado
  59. 59. Site Otimizado• Configurando o Wordpress
  60. 60. Site Otimizado• Configurando o Wordpress
  61. 61. Site Otimizado• Configurando o Wordpress
  62. 62. Site Otimizado• Instalando Plugin
  63. 63. Site Otimizado• Instalando Plugin
  64. 64. Site Otimizado• Instalando Plugin
  65. 65. Site Otimizado• Instalando Plugin• FTP > Subir arquivos para:• /wordpress/wp-content/plugins
  66. 66. Site Otimizado• Plugins importantes:• SEO Ultimate• Google XML Sitemaps• Facebook• Twitter• Google +1• Youtube – Integração• Flickr – Integração
  67. 67. Site Otimizado• Configurando o plugin SEO Ultimate
  68. 68. Site Otimizado• Configurando o plugin SEO Ultimate
  69. 69. Site Otimizado• Configurando o plugin SEO Ultimate
  70. 70. Site Otimizado• Configurando o plugin SEO Ultimate
  71. 71. Site Otimizado• Configurando o plugin SEO Ultimate
  72. 72. Site Otimizado• Plugin permite inserir descrição por página/post
  73. 73. Site Otimizado• Instalando um tema
  74. 74. Site Otimizado• Instalando um tema
  75. 75. Site Otimizado• Instalando um tema• Subir manualmente em:• /wordpress/wp-content/themes• Cada tema possibilita configurações próprias
  76. 76. 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.
  77. 77. Site Otimizado• Estrutura de arquivos header.php index.php page.php sidebar.php single.php footer.php
  78. 78. Site Otimizado• Inserindo posts
  79. 79. Site Otimizado• Inserindo posts
  80. 80. Site Otimizado• Adicionar página
  81. 81. Site Otimizado• Criação de Menus
  82. 82. Site Otimizado• Adicionando Widgets
  83. 83. Site Otimizado• Implementação do analytics: Criar conta em analytics.google.com Gerar código Utilizar plugin de SEO
  84. 84. Site Otimizado• Criar conta no Google Webmaster Tools• www.google.com/webmasters/tools
  85. 85. Site Otimizado
  86. 86. 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
  87. 87. Obrigado! Rafael Soaresrafael@rafaelsoares.com.br

×