COMO FAZER E-MAIL MARKETING EM HTML
-
Upload
renato-melo -
Category
Design
-
view
572 -
download
4
description
Transcript of COMO FAZER E-MAIL MARKETING EM HTML
INTRODUÇÃOÀ WEB E HTML
RENATO MELO – 2014
Internet, como é composta?
1. Tecnologia de rede aberta
2. Hipertexto
3. Interface gráfica
HTMLNão é grego, nem coisa
de nerd.
É que nem inglês. Não precisa saber, mas quem sabe sempre tem um diferencial.
INTERFACE GRÁFICAA parte legal da história...
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
Os opostos
se atraemO desenvolvimento das interfaces
gráficas permitiu a criação de programas WYSIWYG
What You See Is What You
Get
CONTRATANDOUM ESTAGIÁRIO
#estagiário
#bolsa
auxílio
#650 reais
#estagiário
#bolsa
auxílio
#650 reais
#SEO
#links patrocinados
#web analytics
#redes sociais
#facebook, twitter,
youtube, google+, linkedin
#wordpress
#geolocalização
#foursquare
#desenvolvimento de
aplicativos
#webdesigner
#php e asp
#diagramação
NO FINAL DAS CONTAS...
E o que eu
preciso saber?
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á.
Por isso...É bom saber o que é e como
funciona cada coisa.
Especialista
Conheça a área, mas
especialize-se!
REGRA 02
A Web muda todo dia.Atualize-se
Atualize-seAtualize-se
Atualize-se
HTMLHtml é um arquivo que pode ser interpretado por navegadores.
HTMLE pode ser editado desde o bloco de notas até programas WYSIWYG, como o Dreamweaver
Bloco de notasSomente a linha de código contendo sua programação
DreamweaverEdição do html na linha de código ou no design.
E COMO FUNCIONA
UM CÓDIGO?
<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>
TÁ BOM QUE EU VOU FAZER ISSO!!!!
VAMOS DEIXÁ-LO
FÁCIL!
VAMOS CRIAR UM E-MAIL MARKETING EM HTML:
Arquivo:http://
www.renatomelo.com.br/esamc/uol.zip
VAMOS MUDAR TUDO!
EDITE O ARQUIVO PELO BLOCO DE NOTAS
DESCOMPACTE TUDO NA MESMA PASTA
ABRA O HTML NO NAVEGADOR
SALVE O ARQUIVO NO BLOCO DE NOTAS
QUER VER COMO ESTÁ INDO AS ALTERAÇÕES?
PRESSIONE A TECLA F5 NO NAVEGADOR
SELECIONE PARA ABRIR TODOS OS ARQUIVOS
PARA APARECER O HTML
HÁ APENAS DOIS ARQUIVOS! O HTML E A
IMAGEM DO EXTRA.
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>
O ABRE E FECHA DE CADA CÓDIGO
TOME CUIDADO PARA NÃO APAGAR
ELEMENTOS. <COMANDO> ABRE
UM COMANDO
</COMANDO> FECHA UM COMANDO.
<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.
<title>Uol</title></head>
INTERPRETANDO O CÓDIGO
TITLE = TÍTULOLOGO, VAMOS TROCAR UOL PELA PALAVRA DA
SUA ESCOLHA.
<body style="margin: 0px; padding: 0px;“>
INTERPRETANDO O CÓDIGO
INFORMAÇÕES DE MARGEM E DISTÂNCIA.
NÃO VAMOS MEXER AQUI.
<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.
<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.
<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.
<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.
<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.
VAMOS SUBSTITUIR A IMAGEM DO TIOZINHO
DA UOL?
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
<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.
<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”
GRUPObit.ly/gruporenato
#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?
#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
FACEBOOK.COM/RENATOMELOMKT