Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

COMO FAZER E-MAIL MARKETING EM HTML

15,628 views

Published on

Nesta aula vamos conferir uma introdução ao html e como programar um e-mail marketing em html.

Published in: Design

COMO FAZER E-MAIL MARKETING EM HTML

  1. 1. INTRODUÇÃO À WEB E HTML RENATO MELO – 2014
  2. 2. Internet, como é composta? 1. Tecnologia de rede aberta 2. Hipertexto 3. Interface gráfica
  3. 3. HTML Não é grego, nem coisa de nerd. É que nem inglês. Não precisa saber, mas quem sabe sempre tem um diferencial.
  4. 4. INTERFACE GRÁFICA A parte legal da história...
  5. 5. Mas antes, vem a teoria... Antigamente: Interface com computadores era negócio para gênios da informática Hoje: O desenvolvimento de interfaces gráficas permite o uso por não especialistas
  6. 6. Os opostos se atraem O desenvolvimento das interfaces gráficas permitiu a criação de programas WYSIWYG What You See Is What You Get
  7. 7. CONTRATANDO UM ESTAGIÁRIO
  8. 8. #estagiário #bolsa auxílio #650 reais
  9. 9. #SEO #links #estagiário #bolsa auxílio #650 reais patrocinados #web analytics #redes sociais #facebook, twitter, youtube, google+, linkedin
  10. 10. #wordpress #geolocalização #foursquare #desenvolviment o de aplicativos #webdesigner #php e asp #diagramação
  11. 11. NO FINAL DAS CONTAS...
  12. 12. E o que eu preciso saber?
  13. 13. REGRA 01 O seu cliente ou o seu patrão querem o lucro... Não importa o quanto você saiba, não importe como ele virá.
  14. 14. Por isso... É bom saber o que é e como funciona cada coisa.
  15. 15. Especialista Conheça a área, mas especialize-se!
  16. 16. REGRA 02 A Web muda todo dia. Atualize-se Atualize-se Atualize-se Atualize-se
  17. 17. HTML Html é um arquivo que pode ser interpretado por navegadores.
  18. 18. HTML E pode ser editado desde o bloco de notas até programas WYSIWYG, como o Dreamweaver
  19. 19. Bloco de notas Somente a linha de código contendo sua programação
  20. 20. Dreamweaver Edição do html na linha de código ou no design.
  21. 21. E COMO FUNCIONA UM CÓDIGO?
  22. 22. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Extra</title> </head> <body style="margin: 0px; padding: 0px;"> <div style="font-size: 10px; font-family: verdana; padding:10px 0 10px 0;" align="center"> <p>Caso não esteja conseguindo visualizar esta mensagem <a href="http://renatomelomkt.com.br/esamc/web-aula2/extra.html">acesse este link</a> </p> <a href="http://www.extra.com.br"><img src="http://renatomelomkt.com.br/esamc/web-aula2/extra.jpg" border="0"></a> </div> </body> </html>
  23. 23. TÁ BOM QUE EU VOU FAZER ISSO!!!!
  24. 24. VAMOS DEIXÁ-LO FÁCIL!
  25. 25. VAMOS CRIAR UM E-MAIL MARKETING EM HTML: Arquivo: http://www.renatomelo.com .br/esamc/uol.zip
  26. 26. VAMOS MUDAR TUDO!
  27. 27. DESCOMPACTE TUDO NA MESMA PASTA ABRA O HTML NO NAVEGADOR EDITE O ARQUIVO PELO BLOCO DE NOTAS
  28. 28. QUER VER COMO ESTÁ INDO AS ALTERAÇÕES? SALVE O ARQUIVO NO BLOCO DE NOTAS PRESSIONE A TECLA F5 NO NAVEGADOR
  29. 29. SELECIONE PARA ABRIR TODOS OS ARQUIVOS PARA APARECER O HTML
  30. 30. HÁ APENAS DOIS ARQUIVOS! O HTML E A IMAGEM DO EXTRA.
  31. 31. O CÓDIGO TEM 2 PARTES <HEAD> TUDO AQUILO QUE NÃO É EXIBIDO NO NAVEGADOR, COM EXCESSÃO DO TÍTULO. </HEAD> <BODY> TUDO AQUILO QUE É EXIBIDO NO NAVEGADOR.</BODY>
  32. 32. O ABRE E FECHA DE CADA CÓDIGO TOME CUIDADO PARA NÃO APAGAR ELEMENTOS. <COMANDO> ABRE UM COMANDO </COMANDO> FECHA UM COMANDO.
  33. 33. INTERPRETANDO O CÓDIGO <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> INFORMAÇÕES INICIAIS DO CÓDIGO, NÃO VAMOS MEXER EM NADA.
  34. 34. INTERPRETANDO O CÓDIGO <title>Uol</title> </head> TITLE = TÍTULO LOGO, VAMOS TROCAR UOL PELA PALAVRA DA SUA ESCOLHA.
  35. 35. INTERPRETANDO O CÓDIGO <body style="margin: 0px; padding: 0px;“> INFORMAÇÕES DE MARGEM E DISTÂNCIA. NÃO VAMOS MEXER AQUI.
  36. 36. INTERPRETANDO O CÓDIGO <div style="font-size: 10px; font-family: verdana; padding:10px 0 10px 0;" align="center“> INFORMAÇÕES DE FONTE, DISTÂNCIA E ALINHAMENTO. NÃO VAMOS MEXER AQUI.
  37. 37. INTERPRETANDO O CÓDIGO <p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br">acesse este link</a> </p> CASO O SERVIDOR DE E-MAIL BLOQUEIE A EXIBIÇÃO DA MENSAGEM, A CRIAÇÃO DESTE LINK RESOLVE O PROBLEMA.
  38. 38. INTERPRETANDO O CÓDIGO <p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br"> acesse este link</a> </p> O <P> É DE PARÁGRAFO, POR ISSO INCLUI TUDO ONDE TEM TEXTO.
  39. 39. INTERPRETANDO O CÓDIGO <p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br"> acesse este link</a> </p> O <A> É PARA INCLUSÃO DE LINKS. NO CASO, AS PALAVRAS ACESSE ESTE LINK VÃO SER MARCADAS PARA RECEBER O ENDEREÇO DO SITE.
  40. 40. INTERPRETANDO O CÓDIGO <p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br"> acesse este link</a> </p> COMO ESTAMOS TRABALHANDO DIRETO DO COMPUTADOR, VAMOS TROCAR O LINK. ALTERE O CONTEÚDO ENTRE “” PARA OUTRO SITE QUALQUER.
  41. 41. VAMOS SUBSTITUIR A IMAGEM DO TIOZINHO DA UOL?
  42. 42. PASSO A PASSO 1 – PROCURE UMA IMAGEM NO GOOGLE 2 – SALVE NA MESMA PASTA DO HTML 3 – DEIXE A IMAGEM COM UM NOME FÁCIL E EM MINÚSCULO 4 – VERIFIQUE SE A IMAGEM ESTÁ EM PNG OU JPG
  43. 43. INTERPRETANDO O CÓDIGO <a href=" http://www.esamc.br "><img src=" uol.jpg " border="0"></a> </div> </body> </html> ESTE LINK SIGNIFICA QUE, AO CLICAR NA IMAGEM DO TIOZINHO, VOCÊ VAI PARA O SITE DA ESAMC. ALTERE O LINK PARA UM SITE QUALQUER.
  44. 44. INTERPRETANDO O CÓDIGO <a href="http://www.extra.com.br"><img src= "uol.jpg" border="0"></a> </div> </body> </html> TROQUE O ENDEREÇO DA IMAGEM, DE UOL PARA O NOME ESCOLHIDO, ASSIM: “ARQUIVO.JPG”
  45. 45. GRUPO bit.ly/gruporenato
  46. 46. #PRÉVIA 01 E-MAIL MARKETING LLeerr:: hhttttpp::////bbiitt..llyy//aauullaa0022wweebb RReessppoonnddeerr:: 11)) QQuuaall ddooss 55 mmoottiivvooss vvooccêê jjuullggaa mmaaiiss iimmppoorrttaannttee nnaa eessttrraattééggiiaa ddee ee--mmaaiill mmaarrkkeettiinngg?? 22)) QQuuaall iimmppoorrttâânncciiaa ddoo ee--mmaaiill mmaarrkkeettiinngg nnoo mmaarrkkeettiinngg ddiiggiittaall??
  47. 47. #PRÉVIA 01 E-MAIL MARKETING EEnnvviiaarr ppaarraa oo ee--mmaaiill:: rreennaattoommeelloo8855@ggmmaaiill..ccoomm 11-- AAttéé 2288..0088 ààss 1188hh3300 –– 110000%% VVAALLOORR 22-- AAttéé 0044..0099 ààss 1188hh3300 –– 5500%% VVAALLOORR 33-- AAPPÓÓSS ÀÀSS 1188HH3300 DDOO DDIIAA 0044..0099 == 00%% VVAALLOORR
  48. 48. FACEBOOK.COM/ RENATOMELOMKT

×