html [html] Sistema De Novidades

[rubinhobarrichelo 0]

Tudo sobre boletins de novidades...

Mostra o que é um boletim, como distribuí-los, conselhos para criá-los melhor. Além disso, explicamos como fazer boletins em formato HTML e outras coisas.

1 - O que são boletins de novidades?

Um boletim de novidades ou newsletter é um correio eletrônico que se envia periodicamente aos visitantes de nosso site que desejaram se inscrever. Em tal correio costuma-se assinalar as novidades ocorridas em nosso site, tratando-se de novos conteúdos ou serviços. A periodicidade do boletim pode ser variável em função das necessidades de nosso web, embora se recomenda que seja sempre a mesma.

 

Qualquer web que se preze deve manter também um bom boletim de novidades. Não quer dizer que tenhamos que empreender este trabalho para chegar a um status elevado, mas sim, que as vantagens de tal boletim são as que farão com que nossa página suba de categoria. Os boletins nos dão mais presença e recordam aos visitantes a existência da web a cada mês, com o qual se animam a visitá-la. Vejamos com detalhe estas vantagens.

 

Por que devemos fazer um boletim?

 

A primeira razão de criar um boletim é de fomentar a fidelidade de nossos visitantes. Os boletins têm um grau alto de resposta por parte dos destinatários, o que faz com que cada vez que o envie obtenha uma boa quantidade de visitas.

 

Precisamente, este alto grau de resposta e o interesse que suscita um bom boletim, faz deste canal um lugar muito apropriado para colocar mensagens de publicidade, em forma de texto, ou banners se nosso boletim se distribui em formato HTML. Assim mesmo, se nosso site é de comércio eletrônico, o boletim é o lugar apropriado para introduzir as ofertas mais importantes do momento. Pelas mesmas razões, os boletins costumam ser um excelente lugar para realizar intercâmbios de publicidade, se é que não temos outros tipos de ofertas para preencher nossos espaços publicitários.

 

Quando criamos e mantemos um boletim de novidades, damos uma imagem de estarmos atualizando a página constantemente. Cada vez que um usuário o recebe sabe que introduzimos novidades e os visitantes que encontram em nossa página a opção de se inscrever podem deduzir que atualizamos a página constantemente, mesmo que não cheguem a pensar em se inscrever.

 

Os boletins servem para divulgar e promover os novos serviços que oferecemos em nosso web, quando ainda são pouco conhecidos e pretendemos que os usuários cheguem até eles.

 

Haverá usuários que prefiram se inscrever para receber o boletim antes mesmo de nos visitar constantemente para ver se realmente há novidades, portanto devemos oferecer a possibilidade de que nossas novidades cheguem perfeitamente ao seu correio.

 

2 - Criação dele em forma HTML

Muitas vezes nos perguntam como fabricamos e distribuímos nosso boletim de novidades em formato HTML. Esta é uma pergunta muito repetida a cada mês, depois do lançamento de nosso boletim. É muito fácil realizar um boletim como o nosso, portanto em poucas linhas vamos dar a luz a este tema.

 

Forma da mensagem

 

Nossa mensagem de correio para enviar o boletim há que ter formato HTML, visto que tal formato é imprescindível para inserir imagens no correio e para a inserção de links e outros elementos.

 

Poderíamos propor duas técnicas para a inserção destas imagens no boletim. Embora só vamos ilustrar uma delas, vale a pena comentar as duas para que fique tudo muito mais claro.

 

1) Mandar as imagens como arquivos em anexos

Esta opção é interessante porque assim nos asseguramos que as imagens que saem na mensagem serão vistas sempre perfeitamente. É a opção mais complicada e não veremos sua implementação. Ademais, tem a desvantagem de que a mensagem pesa mais e o pior é que contém arquivos em anexo. O problema de tais arquivos em anexo é que podem conter vírus, enquanto que uma mensagem sem arquivos em anexo é quase impossível que contenha vírus. Atualmente, recebemos mais de 100 mensagens com vírus ao final de um dia. Isto faz com apague diretamente sem ler quase todas as mensagens que chegam com arquivos em anexo.

 

2) Mandar a mensagem sem imagens em anexo

O que se faz é que qualquer imagem que aparece no boletim se extrai diretamente de seu endereço na Internet, de forma que quando se lê o correio se acessa ao endereço na web que contém tal imagem e não a um arquivo em anexo a mensagem. Esta opção é muito mais fácil de desenvolver e também mais segura, visto que a mensagem chegaria sem dados em anexo e, portanto com menores possibilidades de vírus. O único problema é que se o usuário não estiver conectado à Internet na hora de ler a mensagem as imagens aparecerão "quebradas" e não sairão no corpo do correio até que o usuário se conecte.

 

Sendo assim, vamos ver como nós fazemos: não enviamos correios com arquivos em anexo. O que fazemos é enviar a mensagem em formato HTML e linkar todas as imagens, outros recursos e links com URLs absolutas.

 

O que fazemos é criar a página com um editor, tal como desejamos que se envie,

mas colocando todos os endereços dos links e das imagens encaminhadas

para páginas e imagens que estão na web, ao invés de encaminha-las a outras

páginas e imagens que estão em seu disco rígido.

 

Assim, os atributos HREF dos links e os SRC das imagens ficariam com URLs absolutas:

 

<a href="http://meuotserver.com/novidades">Novidades no meuotserver</a>

 

<img src="http://meuotserver.com/imagens/logo.gif" width=120 height=70>

 

Vistos os códigos de uns exemplos de imagens e links podemos imaginar o código da página inteira. Um código HTML perfeitamente comum onde, insisto, temos URLs absolutas em todos os recursos com os que há que linkar.

 

Existe uma etiqueta que também costumamos incluir dentro do código HTML do boletim, neste caso para conseguir que todos os links se mostrem numa janela à parte e não dentro do corpo da mensagem. Desta forma, a navegação sobre os conteúdos de nossa web se realizará com todo o espaço da janela do navegador.

 

<base target="_blank">

3 - Enviando correio em formato HTML

Uma vez criada a página web -uma página HTML normal, com todos os links e imagens com URLs absolutas- devemos inclui-la em uma mensagem de e-mail.

 

Nosso boletim pode ter um código como o seguinte:

 

<head><link rel="STYLESHEET" type="text/css" href="http://omeuotserver.com/estilo.css">

<base target="_blank">

</head>

<body bgcolor="ffffff" topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>

<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="000033" background="http://omeuotserver.com/images/fundoacima.gif">

<tr>

<td align="center" background="http://omeuotserver.com/images/trama3.gif"> <b><font face="verdana,arial,helvetica" size="4" color=ffffff>Novidades do meu Servidor</font></b></td>

</tr>

<tr>

<td bgcolor="cccc66" align="center"><span class=fonte8><font face="verdana,arial,helvetica" size="1">

Número#13 1 de maio de 2005</font></span>

</table>

<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="cccc66">

<tr>

<td bgcolor="cccc66" align="center">

<a href="http://www.criar.com/desenvolvedores" target="_blank">

<img src="http://omeuotserver.com/images/banners/d_desenvolvedores.gif" width="468" height="60" border="0" alt="Clique para acessar ao diretório de desenvolvedores" vspace="3"></a>

<br>

</td>

</tr>

</table>

<br>

<table width="100%" cellspacing="0" cellpadding="2" border="0">

<tr>

<td valign="top">

<font face="verdana,arial,helvetica" size="2">

Temos vários artigos novos que com certeza lhes interessarão.

<br>

<br>

<b>CONTEUDOS</b>

<br>

1.- Novos artigos

<br>

2.- Novos programas

<br>

<br>

.....

<br>

<br>

<b><a href="http://omeuotserver.com/novo_sistema/">Novo Sistema</a></b>

<br>

Novo sistema de montaria, e tudo mais...

</td></tr></table>

</body>

</html>

 

O programa de correio que você utilizar terá sua própria maneira incluir código HTML dentro de uma mensagem. Em Outlook Express há que acessar ao menu de Inserir > Texto de arquivo. Se a mensagem que estiver escrevendo tiver formato HTML, você poderá inserir arquivo que tenham extensão .html ou .htm. Indico isto porque no caso de que seu e-mail estivesse formato "somente texto", somente poderá inserir arquivos de texto .txt. Para mudar o formato de mensagem a HTML em Outlook Express devemos nos dirigir ao menu Formato > Texto enriquecido (HTML).

 

Atenção: Ao inserir o código do arquivo HTML dentro do boletim há que observar no inserir arquivo HTML como um arquivo em anexo, senão em inserir o código de tal arquivo como texto no e-mail. Em Outlook Express é fácil equivocar-se, pois as duas opções estão uma ao lado da outra, no menu inserir. Neste programa há que escolher a opção "Inserir > Texto de arquivo" ao invés de "Inserir > Arquivo em anexo".

Uma vez composta a mensagem, a enviamos a nossa lista de correio, que se encarrega de distribuir as mensagens a milhares de inscritos do boletim. Geralmente, as listas de correio têm um endereço ao qual mandar as mensagens de correio que quisermos dirigir a todos os componentes da lista, algo como minhaLista_recepcao@meuProvedor.net.

 

Em geral, o envio da mensagem em formato HTML será realizado da mesma maneira que uma mensagem em formato normal, exceção feita do comentado. Esperamos que não seja nenhum problema.

 

4 - Como escrever newslatters

Resumo:

1. As conclusões no início.
   
2. O bom se for breve será 2 vezes bom.
   
3. Procure não abusar do HTML dentro do e-mail.
   
4. Como mínimo uma vez por mês. Como máximo uma vez por semana.
   
5. Um breve conselho para quando enviarmos uma mensagem a muitos amigos.
   

1. As conclusões no início:

Como sempre. Procure dizer o interessante no primeiro parágrafo. Deixe o demais para o final.

Agora vejamos as partes de um e-mail:

• Quem manda o e-mail. Se utilizar um codinome ou um apelido para enviar o e-mail procure fazer com que se possa lhe identificar e responder a esse mesmo codinome.
  
• No subject procure dizer o assunto do e-mail de forma clara e simples. Algo assim como "Atualização do site", "Liquidação de janeiro", "Opine sobre o preço da gasolina".
  
• O primeiro parágrafo deve dizer tudo de uma forma clara e simples. Incluindo os links às páginas que se faça referência.
  
• Eu não sou muito partidário dos sumários nas newsletters. O único que faz é ocupar espaço e diminuir tempo para ler o assunto principal. Melhor colocar o tema principal e se desejar incluir mais assuntos, coloca-los abaixo indicando claramente que estes são temas secundários que podem ser de interesse para o usuário.
  
• Por último inclui o típico "cancelara inscrição", "incluir inscrição" e um link ao seu site.
  

2. O bom se for breve será 2 vezes bom.

No caso do e-mail ainda mais. A leitura do e-mail não é algo relaxante, mas sim as pessoas costumam estar algo "tensas", portanto quanto antes leiam o assunto, antes se relaxaram e seguirão lendo. Se começamos o e-mail dizendo coisas como, "Você acaba de receber uma oferta que não poderá recusar..." o único que conseguiremos é que o joguem no lixo. Melhor começar com coisas do estilo "Oferta de 40% na seção de discos. Clique neste link.". E logo, podemos seguir descrevendo sobre a promoção para que o usuário se informe bem do assunto antes de clicar. Mas procure reduzir ao máximo o que tiver que dizer.

 

3. Não abuse do HTML.

Quando está bem usar o html no e-mail:

• Para incluir links longos que podem se cortar no e-mail.
  
• Para incluir fontes, cor e tabelas que ajudem a ler o e-mail.
  

Quando não está bem incluir html no e-mail:

• Para enviar paginas web completas pelo e-mail. Costumam pesar muito e ocupam muito espaço. Lembre-se também que a janela do e-mail costuma ser menor que a do navegador.
  
• Para incluir imagens no e-mail. É melhor indicar que dispõem de imagens no seu site e linkar tal foto, por exemplo.
  

Muita gente lê os e-mails em casa onde a conexão pode ser pior que no trabalho com o qual lhe custará mais baixar documentos complexos. Procure não abusar do e-mail e ao enviar imagens gratuitamente.

 

4. Como mínimo uma vez por mês. Como máximo uma vez por semana.

Convém enviar um e-mail de boas vindas cada vez que alguém se registre em seu serviço. Isto confirmará que o sistema funciona e que estamos na lista.

Como mínimo uma vez por mês. É recomendável enviar uma newsletter por mês. Pelo menos para que as pessoas saibam que a página continua viva e em andamento. Se passar muito tempo entre uma newsletter e outra, as pessoas podem se esquecer de você e não reconhecer mais a próxima vez que você escrever.

Como máximo uma vez por semana.. Também não convém abusar dos usuários e mais de uma vez por semana pode se considerar "Spam". De qualquer forma, procure enviar por e-mail somente aqueles eventos relevantes que ocorrem no seu site. Se não ocorre nada, você não tem porque enviar nada. Um e-mail que não tenha valor irá diretamente ao lixo e pode fazer com que o usuário bloqueie o endereço do correio de origem.

 

5. Um breve conselho para quando enviarmos uma mensagem a muitos amigos.

Muitas vezes quando ocorre algo importante (um vírus, uma catástrofe,...) as pessoas costumam pegar sua lista de correios completa e enviar um e-mail para todo mundo... Isto às vezes gera que alguém da lista copie todos os endereços e se dedique a fazer spam...

Para evitar isto, simplesmente copie sua lista de correio no BCC e assim não será pública para todo mundo.

 

5 - Newslatter que servem para vender

1. O "Tema" (subject) do e-mail deve ser curto e honesto. Deve suscitar certa curiosidade.
   
2. Em "Quem" procure oferecer informação honesta e utilizar um endereço de correio ao qual se possa responder.
   
3. Ofereça informação clara e útil. Deve gerar Ação.
   
4. Linke páginas que ofereçam a mesma informação que no e-mail, mas as opções adicionais (evite linkar ao portal ou a páginas de registro).
   
5. Prove o e-mail em grupos reduzidos para corrigir.
   
6. Lance diferentes versões para testar resultados.
   

1. O "tema" do e-mail deve ser curto e honesto. Procure suscitar certa curiosidade.

O "quem" e o "tema" servem para que o usuário abra ou exclua diretamente o e-mail recebido.

 

Procure que o tema seja curto e honesto. <li> Títulos em maiúsculo geram mais ação (evite tudo maiúsculas ou minúsculas). <li> O ponto crucial é não molestar o usuário com uma mensagem agressiva.

 

2. O "quem" deve oferecer informação honesta e utilizar um endereço de correio ao qual se possa responder.

Em "quem" ofereça signos de identificação reais. Um nome de pessoa pode gerar mais confiança que um "departamento" ou um e-mail do estilo "info@empresaXXX.com". Procure que em "apelido" apareçam signos que identifiquem a empresa. Usar o domínio pode ser suficiente.

Procure que o endereço de correio da newsletter seja um endereço ao qual se possa responder. Do contrário, terá que colocar instruções para explicar a situação, o qual pode entorpecer a possibilidade de captar um cliente.

 

O e-mail ao que se responde deve estar respaldado por gente que seja capaz de responder de forma rápida e precisa.

 

 

3. Oferece informação clara e útil. Deve gerar Ação.

Você tem 5 segundos para captar a atenção do usuário. Qualquer segundo de dúvida fará com que o usuário clique o botão de excluir.

 

4. Linkas páginas que ofereçam a mesma informação que no e-mail, mais as opções adicionais.

 

O exemplo OK mostra uma página web que se corresponde com a oferta da newsleter. Talvez o estilo deveria ser mais uniforme, mas a informação se corresponde.

 

O exemplo KO mostra uma oferta que conduz a uma página de registro. Se o objetivo de seu site é que as pessoas se registram, o comunique no newsletter.

 

Se a chave de sua newsletter está na página de destino, procure que o conteúdo seja o mesmo e de forma clara se indique o caminho a seguir.

 

Procure contabilizar as visitas para poder obter resultados precisos da ação.

 

5. Prove o e-mail em grupos reduzidos para corrigir.

Dentro de sua empresa, entre amigos, usuários selecionados, uma parte de sua lista de correio, qualquer mostra será boa para comprovar que "apelido", "tema" e conteúdo da newsletter é melhor.

 

Procure provar diferentes versões e compare qual dá o melhor resultado. Comprove que tipo de links, imagens, texto, formato é o mais efetivo e comprova tecnicamente que tudo vai funcionar de forma efetiva (os links, o formato, o peso).

 

 

6. Lance diferentes versões para testar resultados.

Uma das vantagens das newsletters e internet é que se podem medir com bastante facilidade a resposta dos usuários.

 

Você pode enviar o mesmo conteúdo variando o formato para comprovar qual é mais efetivo, que tipo de mensagem é mais apropriado, etc. A economia do meio e a facilidade de processar os dados, fazem com que seja um bom campo para experimentar.

 

Procure não abusar da paciência dos usuários (para newsletters corporativas 1 envio a cada 2 meses pode ser adequado) e gratifica de alguma forma a resposta do usuário.

 

6 - Utilizar CSS para montar um boletim

A construção com CSS oferece muitas vantagens para a acessibilidade da página, carregamento em bytes e clareza do código. Neste artigo vamos contar como podemos aproveitar essas vantagens também nos boletins de novidades enviados em formato HTML.

 

Para construir com CSS utiliza-se uma folha de estilo em cascata, onde se especifica qualquer atributo de aspecto da página, separando por completo o conteúdo e a apresentação. O conteúdo se define no código HTML da página e qualquer especificação do aspecto se inclui em um arquivo externo CSS.

 

Referência: Para saber mais sobre CSS podemos consultar a seção CSS a fundo. Tambem podemos consultar o artigo sobre a Construção CSS. Como qualquer outra página web, a que criamos para fazer o boletim, pode ser realizada utilizando CSS, o que redundará em vantagens para o criador do boletim e para quem se inscreveu.

• O peso da mensagem poderá se reduzir, por não ser necessário incluir nenhuma etiqueta HTML para definir os estilos. Isto nos economizará muito código.
  
• Poderemos mudar o aspecto da mensagem com somente mudando a folha de estilos, sem necessidade de modificar o código HTML que viemos utilizando para fazer o envio. Isto nos oferece uma maior capacidade de inovação no envio da mensagem.
  
• Se por alguma razão perdemos a folha de estilos ou se o sistema de correio do usuário que se inscreveu não suporta CSS, simplesmente verá a mensagem sem o aspecto definido pelo criador do boletim. Porém, pelo menos verá perfeitamente o envio, com toda informação da mensagem, apresentada com os estilos pré-determinados do sistema do usuário.
  
• No caso de que a um usuário não suporte o formato HTML, poderia acontecer de ver o código da página (com as etiquetas e tudo), ao invés de ver o formato web. Neste caso, pelo menos receberá um código muito mais legível e compreensível do que se estivesse misturado com etiquetas HTML para definir os estilos.
  
• Na hora de criar os diferentes boletins cada vez, se economiza tempo, visto que não há que se preocupar por definir os estilos. Ou seja, a modificação é muito mais simples.
  

Como tudo nesta vida, montar um boletim com CSS, também tem algumas desvantagens:

• A principal que vejo é que faz falta ter maiores conhecimentos para criar um boletim com CSS. Ou seja, qualquer pessoa é capaz de fazer uma página com HTML básico utilizando um editor de webs como Frontpage ou Dreamweaver. Entretanto, com CSS deveremos dominar uma tecnologia adicional e algum programa ou outro para realizar o trabalho.
  
• Outra desvantagem é que alguns sistemas de correio não incluem links com arquivos externos, já seja imagens ou declarações CSS. Isto faz com que não se mostrem os estilos do boletim, embora pelo menos se mostrará a página básica sem os estilos. Uma possibilidade para evitar isto é incluir os estilos dentro do próprio código da página, embora assim também estaremos contaminando um pouco o código limpo de nosso boletim.
  

Exemplo de boletim em formato HTML com CSS

 

Nós levamos tempo enviando em nossa web MercadoProfesional.com um boletim semanal em formato HTML, que está totalmente construído com CSS. Vamos mostrar aqui seu código HTML e o código CSS que utilizamos para definir os estilos.

 

Seria bom ver o boletim em uma página a parte, para termos uma idéia prévia do conteúdo e estilo criados.

 

Observação: Este exemplo é de uma página web de freelance em castelhano chamada Mercado Profesional.

Código HTML

 

Podemos ver a seguir o código HTML de um de nossos boletins de novidades.

 

<html>

<head>

<title>Boletín de novedades 25 .:MercadoProfesional.com:.</title>

<link rel="STYLESHEET" type="text/css" href="estilos.css">

</head>

 

<body>

<div id="container">

<div id="cabecera">

<div id = "titulo">

<h1>Boletín de novedades<BR> MercadoProfesional.com</h1>

</div>

<div id="logo">

<a href="http://www.mercadoprofesional.com/"><img src="http://www.mercadoprofesional.com/mail_boletin_novedades/imgs/logo.gif" width = "155px" height = "78px" border="0px" valign="top"></a>

</div>

</div>

<div id="topCuerpo"></div>

<div id="cuerpo">

 

<div id="numBoletin"> Boletín de Novedades 25 # 18/05/2005 # </div>

<div id="cuerpo1">

<p>Saludos cordiales,

</p>

<p>

 

Te llega este correo por ser uno de los profesionales registrados en MercadoProfesional.com

Te informamos de las nuevas solicitudes que han llegado, para que no dejes pasar la oportunidad de enviar tus presupuestos. </p>

 

</div>

<div id="cuerpoNov"><h2 class="icoTit"> Nuevos Proyectos: </h2>

<h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/364.php"> Tienda Online</a></h3>

<p class="par">Tienda online, muy bien definida, para venta de servicios de revelado online</p>

<h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/366.php"> Desarrollo de portal inmobiliario</a></h3>

<p class="par">Como su nombre indica, un portal inmobiliario, hacen especial hincapié en la funcionalidad.</p>

<h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/368.php"> Desarrollo de portal</a></h3>

<p class="par">Desarrollo y promoción de un portal, exactamente, no sabemos que temática quieren utilizar.</p>

<h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/369.php"> Formulario de flash y PHP</a></h3>

<p class="par">Breve desarrollo en php para una aplicación en flash, con opciones de seguir colaborando en el futuro.</p>

</div>

<p>Esta semana tenemos 4 proyectos nuevos.</p>

<p>Simplemente despedirnos de todos vosotros y desearos suerte con los presupuestos.</p>

<p>© Guiarte Multimedia S.L. - +34 915440837 - <a href ="mailto:info@mercadoprofesional.com">info@mercadoprofesional.com</a> -</p>

</div> <div id="pieCuerpo"></div>

</body>

</html>

 

Como este código não tem nenhum estilo definido através de HTML, é bastante simples de interpretar.

 

Código CSS

 

Agora podemos ver o código do arquivo CSS que estamos utilizando para definir os estilos do documento. Certamente algum dos estilos definidos não estaremos utilizando nesta edição do boletim de novidades. Em geral, não estranhem se a declaração de estilos não estiver totalmente otimizada.

 

BODY {

margin : 0 0 0 0px;

background-color: #CCCCCC;

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

text-align : center;

}

 

#cabecera {

background-image: url(imgs/fondo_cab.gif);

background-repeat : no-repeat;

margin : 0 0 0 0px;

background-position : right;

padding : 0 0 0 0px;

width : 500px;

height: 96px;

}

 

#logo {

padding : 7 20 11 20px;

}

 

#titulo {

padding : 18 20 0 20px;

float : right;

margin-right: 24px;

}

 

#container {

width : 500px;

padding : 0 0 0 0px;

margin : auto;

text-align : left;

}

 

#topCuerpo {

margin-bottom : 0px;

margin-left : 0px;

margin-right : 0px;

margin-top : 5px;

border-bottom : 1px solid #9b9b9b;

width : 493px;

float : right;

}

 

#cuerpo {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

padding : 10 10 10 10px;

background-image : url(imgs/fondo_cuerpo.gif);

margin : 0 0 0 6px;

background-position : right;

background-repeat : repeat-y;

clear : both;

}

 

A:ACTIVE{

color : #003366;

}

 

A:HOVER{

color : #003366;

text-decoration : none;

}

 

A:LINK{

color : #003366;

}

 

A:VISITED {

color : #003366;

}

 

#numBoletin {

background-color : #e9e9e9;

border : 1px solid #666666;

width : 304px;

float : right;

padding : 6 0 6 10px;

}

 

#cuerpo1 {

clear : both;

padding-top: 10px;

}

 

#cuerpoNov {

background-color : #d2e3fb;

border : 1px solid #666666;

padding : 5 10 10 5px;

}

 

#pieCuerpo {

background-image : url(imgs/bajo_cuerpo.gif);

height:9px;

background-repeat : no-repeat;

margin-left : 6px;

}

 

H1 {

font-size : 16px;

font-weight : bold;

color : #003366;

text-align : center;

}

 

H2 {

font-size : 11px;

font-weight : bold;

color : #003366;

}

 

.icoTit{

background-image : url(imgs/IcoTit.gif);

background-repeat : no-repeat;

padding-left:12px;

margin-top:0px;

background-position : left;

}

 

H3 {

font-size: 10px;

font-weight : bold;

color : #003366;

}

.icoNovedad{

background-image : url(imgs/IcoNovedad.gif);

background-repeat : no-repeat;

padding-left:10px;

margin-left:3px;

margin-top:0px;

margin-bottom:2px;

background-position : left;

}

 

.par{

margin-top:2px;

padding-left:10px;

margin-left:3px;

}

 

.resaltado {

background-color : #e9e9e9;

border : 1px solid #666666;

padding : 6 0 6 10px;

}

 

A declaração de estilos é bastante longa, mas como dizíamos, poderia ainda se otimizar bastante mais.

 

Podemos ver o boletim em uma página a parte.

 

Observação: Este exemplo é de uma página web de freelance em castelhano chamada Mercado Profesional.

Conclusão

 

O passo mais difícil para realizar este boletim é fazer a construção propriamente dita em CSS. Mas sempre é interessante perder um pouco de tempo para melhorar nossa maneira de fazer as coisas.

 

Antes de acabar, queremos colocar um link a uma página para visualizar o boletim sem a definição de estilos associada.

Assim é como se veria o boletim se por algum motivo o sistema de algum usuário não aceita CSS ou se não chega a linkar com a folha de estilos por qualquer razão. Pode-se ver que o boletim ainda fica bastante compreensível, embora não tão vistoso.

 

Desenvolvido por: Miguel Angel Alvarez

Conteúdo analizado, formatador por mim.

[LorDz 14]

Excelente;

Como sempre

 

só não intendo porque já não criou direto na devida seção?

[rubinhobarrichelo 0]

Porque eu não sou responsável em aprovar tutoriais,mesmo assim eu aprovaria numa boa, mais as vezes não ta bom para a galera, por isso resolvi postar aqui para elas verem se aprovam.

Ai poderão mover.

 

Abraço;

[DaNDaNrOxX 15]

Aprovado!

 

~> Movido para a seção correta <~

 

Abraços