:: Tutorial de E-mails ::

Curso de Formatação Intermediário- Lição 6 - Onde inserir os scripts nos e-mails?

Até agora trabalhamos com scripts completos para serem copiados e colados na aba "Origem". Mas é muito importante aprendermos a inserir um script na mensagem, sem ter de apagar tudo o que está na aba "Origem". Às vezes, temos um e-mail bonitinho ao qual queremos, por exemplo, apenas inserir uma moldura e uma barra de rolagem colorida.

Muito bem, esta atividade de hoje é fundamental para nossos trabalhos futuros. Caso você esteja encontrando dificuldades, insista porque você consegue.

Se você abrir um novo e-mail e clicar na aba "Origem", irá encontrar algo mais ou menos assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16587" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV> </DIV>

</BODY></HTML>

Vamos entender um pouco o código:

Perceba que cada linha ou cada comando aparece entre os sinais < >

Dizemos que estamos abrindo e encerrando um comando. O Outlook precisa entender nossos comando para fazer aquilo que estamos pretendendo e essa é a linguagem que ele entende.

Vamos analisar as várias tags, que são comandos que avisam ao browser (navegador) quais efeitos exibir.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

De acordo com as especificações do W3C (O World Wide Web Consortium W3C é um consórcio de âmbito internacional dedicado a "conduzir a Web ao seu pleno potencial"), um DOCTYPE informa ao validador qual é a versão do HTML, ou XHTML, que está sendo usada, e deve constar no topo de cada página ou e-mail do Outlook.

<html> e </html>: indicam o começo e o fim da página HTML

<head> e </head>: indicam o início e o fim de uma seção de cabeçalho para o e-mail. Traz as informações sobre o documento que estamos "escrevendo" ou formatando. Sempre tem que estar entre <html> e <body>

<body> e </body>: indicam o início e o fim do corpo da página ou do e-mail, no qual vai todo o conteúdo real do e-mail, isto é: os textos, as figuras, as tabelas, as imagens, os links...

Exatamente entre as tags <body> e </body> são, geralmente, colocados os scripts. É comum encontramos códigos prontos que dizem algo assim: Cole entre as tags <body> e </body>. Isto quer dizer que devemos colar o script nesse lugar. Uma dica: Quando se pede para colar um código entre <body> e </body>, cole-o sempre antes da tag final </body> (deixei-a assinalada em vermelho no código lá de cima para facilitar a visualização)

Os meta dados são uma breve descrição do conteúdo da página da web, seu autor, data de criação, linguagem e outras informações relevantes. Aparece tsmbém no código de e-mail, mas não precisamos mexer em nada.

<STYLE></STYLE>

Aqui são inseridos os estilos, os efeitos diferentes que queiramos usar no e-mail. Por exemplo, mudar as cores, determinar o tipo de fonte, enfim, uma série de detalhes que deixam nosso e-mail mais bonito, interessante e atraente.

Se quiser ler mais sobre estilo, basta consultar o W3C (em inglês).

<DIV> </DIV> são elementos que servem, basicamente, para alinhar itens.

Muito bem, tivemos uma noção bem básica sobre os códigos e comandos principais de um e-mail. Agora, vamos realmente ao que interessa.

Quando formos definir o tipo de moldura da mensagem, as cores da barra de rolagem, a cor, o tamanho e o estilo de fonte, colocamos estas informações entre as tags <Style> </Style>, dentro de <Body> porque são informações referentes ao corpo da mensagem.

Os scripts, devem vir, como já falei anteriormente, antes do finalzinho do encerramento das informações sobre o corpo da mensagem </Body>.

Muito bem, você acha que falei demais e que você não entendeu nada?

E agora?

Muito bem, na verdade, o importante mesmo é você saber encontrar na aba "Origem" os lugares onde devem ser inseridos os códigos e scripts. Achei que seria mais correto falar um pouquinho sobre o significado básico de cada tag, mesmo porque sei que muitas pessoas estão muito interessadas nessas informações.

Vamos ao que interessa, na prática.

Tarefa

Crie um e-mail com um papel de carta simples (pode ser apenas um back). Vamos fazer nesse e-mail duas modificações, inserindo códigos, sempre pela aba "Origem".

1. Insira o seguinte código pela abinha "Origem". Perganta: Onde? Isso você deve decidir.

<STYLE>BODY {BORDER-BOTTOM: #486050 10px ridge; BORDER-LEFT: #486050 10px ridge; BORDER-RIGHT: #486050 10px ridge; BORDER-TOP: #486050 10px ridge; SCROLLBAR-FACE-COLOR: #ad4110; SCROLLBAR-HIGHLIGHT-COLOR: #000000; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #000000
}</STYLE>
--------------------------------------------------------------------------------------------------------------------

2. Agora, no mesmo e-mail ao qual vc inseriu o código acima, insira o seguinte script;

<SCRIPT language=JavaScript>
<!--
ScrollSpeed = 250; // milliseconds between scrolls
ScrollChars = 4; // chars scrolled per time period

function SetupTicker() {
// add space to the left of the message
msg = " *** http://www.ilove.terra.com.br/lili *** ";
RunTicker();}

function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();

</SCRIPT>
--------------------------------------------------------------------------------------------------------------------

Agora é só voltar à aba "Editar" e escrever algo e conferir, pela aba "Visualizar" como ficou.

Envie para o grupo.

Importante: Insira seu cartão de visitas!

Endereço do grupo: tutorial_emails@yahoogrupos.com.br

Lembre-se de indicar no campo Assunto: Nome do aluno, Nível e Número da lição. Caso a lição tenha sido refeita, inclua a palavra "refeita".

Lição elaborada por Lilian Russo


	.