como fazer e-mail marketing em html
DESCRIPTION
Nesta aula vamos conferir uma introdução ao html e como programar um e-mail marketing em html.TRANSCRIPT
![Page 1: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/1.jpg)
INTRODUÇÃOÀ WEB E HTML
RENATO MELO – 2014
![Page 2: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/2.jpg)
Internet, como é composta?
1. Tecnologia de rede aberta
2. Hipertexto
3. Interface gráfica
![Page 3: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/3.jpg)
HTMLNão é grego, nem coisa
de nerd.
É que nem inglês. Não precisa saber, mas quem sabe sempre tem um diferencial.
![Page 4: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/4.jpg)
INTERFACE GRÁFICAA parte legal da história...
![Page 5: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/5.jpg)
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
![Page 6: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/6.jpg)
Os opostos
se atraemO desenvolvimento das interfaces
gráficas permitiu a criação de programas WYSIWYG
What You See Is What You
Get
![Page 7: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/7.jpg)
CONTRATANDOUM ESTAGIÁRIO
![Page 8: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/8.jpg)
#estagiário
#bolsa
auxílio
#650 reais
![Page 9: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/9.jpg)
#estagiário
#bolsa
auxílio
#650 reais
#SEO
#links patrocinados
#web analytics
#redes sociais
#facebook, twitter,
youtube, google+, linkedin
![Page 10: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/10.jpg)
#wordpress
#geolocalização
#foursquare
#desenvolvimento de
aplicativos
#webdesigner
#php e asp
#diagramação
![Page 11: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/11.jpg)
NO FINAL DAS CONTAS...
![Page 12: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/12.jpg)
E o que eu
preciso saber?
![Page 13: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/13.jpg)
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á.
![Page 14: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/14.jpg)
Por isso...É bom saber o que é e como
funciona cada coisa.
![Page 15: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/15.jpg)
Especialista
Conheça a área, mas
especialize-se!
![Page 16: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/16.jpg)
REGRA 02
A Web muda todo dia.Atualize-se
Atualize-seAtualize-se
Atualize-se
![Page 17: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/17.jpg)
HTMLHtml é um arquivo que pode ser interpretado por navegadores.
![Page 18: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/18.jpg)
HTMLE pode ser editado desde o bloco de notas até programas WYSIWYG, como o Dreamweaver
![Page 19: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/19.jpg)
Bloco de notasSomente a linha de código contendo sua programação
![Page 20: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/20.jpg)
DreamweaverEdição do html na linha de código ou no design.
![Page 21: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/21.jpg)
E COMO FUNCIONA
UM CÓDIGO?
![Page 22: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/22.jpg)
<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>
![Page 23: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/23.jpg)
TÁ BOM QUE EU VOU FAZER ISSO!!!!
![Page 24: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/24.jpg)
VAMOS DEIXÁ-LO
FÁCIL!
![Page 25: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/25.jpg)
VAMOS CRIAR UM E-MAIL MARKETING EM HTML:
Arquivo:http://
www.renatomelo.com.br/esamc/uol.zip
![Page 26: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/26.jpg)
VAMOS MUDAR TUDO!
![Page 27: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/27.jpg)
EDITE O ARQUIVO PELO BLOCO DE NOTAS
DESCOMPACTE TUDO NA MESMA PASTA
ABRA O HTML NO NAVEGADOR
![Page 28: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/28.jpg)
SALVE O ARQUIVO NO BLOCO DE NOTAS
QUER VER COMO ESTÁ INDO AS ALTERAÇÕES?
PRESSIONE A TECLA F5 NO NAVEGADOR
![Page 29: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/29.jpg)
SELECIONE PARA ABRIR TODOS OS ARQUIVOS
PARA APARECER O HTML
![Page 30: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/30.jpg)
HÁ APENAS DOIS ARQUIVOS! O HTML E A
IMAGEM DO EXTRA.
![Page 31: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/31.jpg)
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>
![Page 32: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/32.jpg)
O ABRE E FECHA DE CADA CÓDIGO
TOME CUIDADO PARA NÃO APAGAR
ELEMENTOS. <COMANDO> ABRE
UM COMANDO
</COMANDO> FECHA UM COMANDO.
![Page 33: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/33.jpg)
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
INTERPRETANDO O CÓDIGO
INFORMAÇÕES INICIAIS DO CÓDIGO, NÃO VAMOS MEXER
EM NADA.
![Page 34: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/34.jpg)
<title>Uol</title></head>
INTERPRETANDO O CÓDIGO
TITLE = TÍTULOLOGO, VAMOS TROCAR UOL PELA PALAVRA DA
SUA ESCOLHA.
![Page 35: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/35.jpg)
<body style="margin: 0px; padding: 0px;“>
INTERPRETANDO O CÓDIGO
INFORMAÇÕES DE MARGEM E DISTÂNCIA.
NÃO VAMOS MEXER AQUI.
![Page 36: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/36.jpg)
<div style="font-size: 10px; font-family: verdana; padding:10px 0 10px 0;"
align="center“>
INTERPRETANDO O CÓDIGO
INFORMAÇÕES DE FONTE, DISTÂNCIA E
ALINHAMENTO. NÃO VAMOS MEXER AQUI.
![Page 37: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/37.jpg)
<p>Caso não esteja conseguindo visualizar esta mensagem <a
href="www.esamc.br">acesse este link</a> </p>
INTERPRETANDO O CÓDIGO
CASO O SERVIDOR DE E-MAIL BLOQUEIE A EXIBIÇÃO DA MENSAGEM, A CRIAÇÃO
DESTE LINK RESOLVE O PROBLEMA.
![Page 38: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/38.jpg)
<p>Caso não esteja conseguindo visualizar esta mensagem <a
href="www.esamc.br"> acesse este link</a> </p>
INTERPRETANDO O CÓDIGO
O <P> É DE PARÁGRAFO, POR ISSO INCLUI TUDO
ONDE TEM TEXTO.
![Page 39: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/39.jpg)
<p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br">
acesse este link</a> </p>
INTERPRETANDO O CÓDIGO
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.
![Page 40: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/40.jpg)
<p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br">
acesse este link</a> </p>
INTERPRETANDO O CÓDIGO
COMO ESTAMOS TRABALHANDO DIRETO DO COMPUTADOR,
VAMOS TROCAR O LINK. ALTERE O CONTEÚDO ENTRE “” PARA
OUTRO SITE QUALQUER.
![Page 41: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/41.jpg)
VAMOS SUBSTITUIR A IMAGEM DO TIOZINHO
DA UOL?
![Page 42: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/42.jpg)
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
![Page 43: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/43.jpg)
<a href=" http://www.esamc.br "><img src=" uol.jpg " border="0"></a>
</div></body></html>
INTERPRETANDO O CÓDIGO
ESTE LINK SIGNIFICA QUE, AO CLICAR NA IMAGEM DO
TIOZINHO, VOCÊ VAI PARA O SITE DA ESAMC. ALTERE O LINK PARA
UM SITE QUALQUER.
![Page 44: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/44.jpg)
<a href="http://www.extra.com.br"><img src= "uol.jpg" border="0"></a>
</div></body></html>
INTERPRETANDO O CÓDIGO
TROQUE O ENDEREÇO DA IMAGEM, DE UOL PARA O NOME
ESCOLHIDO, ASSIM: “ARQUIVO.JPG”
![Page 45: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/45.jpg)
GRUPObit.ly/gruporenato
![Page 46: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/46.jpg)
#PRÉVIA 01E-MAIL MARKETING
Ler: http://bit.ly/aula02webLer: http://bit.ly/aula02webResponder:Responder:1) Qual dos 5 motivos você julga mais 1) Qual dos 5 motivos você julga mais importante na estratégia de e-mail importante na estratégia de e-mail marketing?marketing?2) Qual importância do e-mail marketing 2) Qual importância do e-mail marketing no marketing digital?no marketing digital?
![Page 47: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/47.jpg)
#PRÉVIA 01E-MAIL MARKETING
Enviar para o e-mail: Enviar para o e-mail: [email protected]@gmail.com
1- Até 28.08 às 18h30 – 100% VALOR1- Até 28.08 às 18h30 – 100% VALOR2- Até 04.09 às 18h30 – 50% VALOR2- Até 04.09 às 18h30 – 50% VALOR
3- APÓS ÀS 18H30 DO DIA 04.09 = 0% 3- APÓS ÀS 18H30 DO DIA 04.09 = 0% VALORVALOR
![Page 48: COMO FAZER E-MAIL MARKETING EM HTML](https://reader031.vdocuments.pub/reader031/viewer/2022020718/557b4ebed8b42a0d388b52ea/html5/thumbnails/48.jpg)
FACEBOOK.COM/RENATOMELOMKT