 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Directorio
|
Manuales
|
Scripts
|
FAQs
|
Programas
|
Artículos Copyleft
|
Actualidad
|
La Cosecha
|
Colabora
Alojamiento
|
Dominios.es
|
Micropagos SMS
|
Buscadores
|
Patentes, marcas
|
Creación web
|
Multimedia
|
Videos
Utilizar CSS para maquetar un boletín
Las ventajas de la maquetación CSS, con respecto a la maquetación tradicional por tablas, se pueden aplicar también a envíos de boletines en formato HTML.
26/5/05 - La maquetación con CSS ofrece muchas ventajas para la accesibilidad de la página, carga en bytes y claridad del código. En este artículo vamos a contar cómo podemos aprovecharnos de esas ventajas también en los boletines de novedades enviados en formato HTML.
Para maquetar con CSS se utiliza una hoja de estilo en cascada, donde se especifica cualquier atributo de aspecto de la página, separando por completo el contenido y presentación. El contenido se define en el código HTML de la página y cualquier especificación del aspecto se incluye en un archivo externo CSS.
| Referencia: Para saber más de CSS podemos consultar la sección CSS a fondo. También podemos consultar acerca de la maquetación CSS. |
Un newsletter, como se ha comentado en nuestro manual de boletines de novedades, se puede enviar en formato HTML para dar vistosidad al correo. En esos casos, a la hora de crear el boletín se debe hacer una página web normal y luego se enviará como cuerpo del mensaje.
Como cualquier otra página web, la que creamos para hacer el boletín, puede realizarse utilizando CSS, lo que redundará en ventajas para el creador del boletín y suscriptor.
- El peso del mensaje se podrá reducir, al no ser necesario incluir ninguna etiqueta HTML para definir los estilos. Esto nos ahorrará mucho código.
- Podremos cambiar el aspecto del mensaje con sólo cambiar la hoja de estilos, sin necesidad de modificar el código HTML que venimos utilizando para hacer el envío. Esto nos ofrece una mayor capacidad de innovación en el envío del mensaje.
- Si se pierde la hoja de estilos por cualquier razón o el sistema de correo del suscriptor no soporta CSS, simplemente verá el mensaje sin el aspecto definido por el creador del boletín. Pero por lo menos verá perfectamente el envío, con toda la información del mensaje, presentada con los estilos predeterminados del sistema del usuario.
- En caso de que a un usuario no soporte formato HTML, podría darse el caso de que viese el código de la página (con las etiquetas y todo), en lugar de ver el formato web. En ese caso, por lo menos recibiría un código mucho más legible y comprensible por el suscriptor, que si estuviera mezclado con etiquetas HTML para definir los estilos.
- A la hora de crear los distintos boletines cada vez, se ahorra tiempo, puesto que no hay que preocuparse por definir los estilos. Es decir, la modificación es mucho más sencilla.
- La principal que veo es que hace falta tener mayores conocimientos para crear un boletín con CSS. Es decir, cualquier persona es capaz de hacer una página con HTML básico utilizando un editor de webs como Frontpage o Dreamweaver. Sin embargo, con CSS deberemos dominar una tecnología adicional y algún que otro programa para realizar el trabajo.
- Otra desventaja es que algunos sistemas de correo no incluyen enlaces con archivos externos, ya sean imágenes o declaraciones CSS. Esto hace que no muestren los estilos del boletín, aunque por lo menos se mostrará la página básica sin los estilos. Una posibilidad para evitar esto es incluir los estilos dentro del propio código de la página, aunque entonces estaremos contaminando un poco el código limpio de nuestro boletín.
Nosotros llevamos tiempo enviando en nuestra web MercadoProfesional.com un boletín semanal en formato HTML, que está maquetado por completo con CSS. Vamos a mostrar aquí su código HTML y el código CSS que utilizamos para definir los estilos.
Sería bueno ver el boletín en una página aparte, para hacernos una idea previa del contenido y estilo creados.
Código HTML
Podemos ver a continuación el código HTML de uno de nuestros boletines de novedades.
<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 no tiene ningún estilo definido a través de HTML, resulta bastante sencillo de interpretar.
Código CSS
Ahora podemos ver el código del archivo CSS que estamos utilizando para definir los estilos del documento. Seguramente alguno de los estilos definidos no lo estaremos utilizando en esta edición del boletín de novedades. No os estrañaros por eso. En general, no extrañarse si no está totalmente optimizada la declaración de estilos.
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;
}
La declaración de estilos resulta bastante larga, pero como decíamos, se puede podría optimizar bastante todavía.
Podemos ver el boletín en una página aparte.
Conclusión
El paso más difícil para realizar este boletín es hacer la maquetación propiamente dicha en CSS. Pero siempre resulta interesante perder un poco de tiempo para mejorar nuestra manera de hacer las cosas.
Antes de acabar, queremos poner un enlace a una página para visualizar el boletín sin la definición de estilos asociada.
Así es como se vería el boletín si por cualquier cuestión el sistema del suscriptor no acepta CSS o no se llega a enlazar con la hoja de estilos por cualquier motivo. Se verá que el boletín queda bastante comprensible, aunque no tan vistoso.
Seguir navegando a partir aquí:
+ 2 manuales relacionados+ 1 categoria relacionada
+ 2 comentarios (Añadir)
+ 10 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Diego Pinilla*
Responsable relaciones exteriores de MercadoProfesional.com URL: http://www.mercadoprofesional.com Licencia Copyleft. Puedes reproducirlo citando al autor y enlazando con Mercadoprofesional.com. * Para consultas técnicas utilizar la lista de correo.
|
Manuales relacionados con este artículo
Dentro de Taller de CSS
Siguiente: Recuadro sencillo y elegante con CSS
Anterior: Crear un menú dinámico con CSS
Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en CSS Comentarios de los visitantes
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestran 2 comentarios revisados |
Comentario de Hector Centeno
19/10/05
El problema con esto es que "clientes" como Hotmail y Gmail, no aplican el CSS cuando viene en la parte superior del html (entre HEAD) y por ello ahi que escribir el CSS directo sobre el HTML, o ¿¿ sabes como forzar esto ??
Comentario de nacho
20/10/05
El articulo es claro y está muy bien explicado. Pero no puedo resistirme a criticar el envío de mails con contenido web. Un correo elecrtrónico no debe de llevar niguna otra cosa salvo texto plano en el cuerpo; a perte de los archivos que se quiera adjuntar.
Es penoso el uso que se le está dando al correo últimamente, saltándose los estándares a la torera y enviando cosas que no se pueden leer en clientes de correo normales.
Espero no haber sido muy duro en mi crítica. Pero es mi forma de pensar.
Nacho
Es penoso el uso que se le está dando al correo últimamente, saltándose los estándares a la torera y enviando cosas que no se pueden leer en clientes de correo normales.
Espero no haber sido muy duro en mi crítica. Pero es mi forma de pensar.
Nacho
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||
Tienda DesarrolloWeb
