Scribd Logo
Importer

Bienvenue sur Scribd !

  • Utilizar CSS para Maquetar Un Boletín

    Transféré par

    Paul Delgado Soto
    26 vues5 pages

    Titre original

    Utilizar CSS para maquetar un boletín

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    DOC, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    26 vues5 pages

    Utilizar CSS para Maquetar Un Boletín

    Transféré par

    Paul Delgado Soto

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 5

    Utilizar CSS para maquetar un boletn

    Las ventajas de la maquetacin CSS, con respecto a la maquetacin tradicional por tablas, se pueden aplicar tambin a envos de boletines en formato HTML.

    La maquetacin con CSS ofrece muchas ventajas para la accesibilidad de la pgina, carga en bytes y claridad del cdigo. En este artculo vamos a contar cmo podemos aprovecharnos de esas ventajas tambin 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 pgina, separando por completo el contenido y presentacin. El contenido se define en el cdigo HTML de la pgina y cualquier especificacin del aspecto se incluye en un archivo externo CSS.
    Referencia: Para saber ms de CSS podemos consultar la seccin CSS a fondo. Tambin podemos consultar acerca de la maquetacin 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 boletn se debe hacer una pgina web normal y luego se enviar como cuerpo del mensaje. Como cualquier otra pgina web, la que creamos para hacer el boletn, puede realizarse utilizando CSS, lo que redundar en ventajas para el creador del boletn 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 cdigo. Podremos cambiar el aspecto del mensaje con slo cambiar la hoja de estilos, sin necesidad de modificar el cdigo HTML que venimos utilizando para hacer el envo. Esto nos ofrece una mayor capacidad de innovacin en el envo del mensaje. Si se pierde la hoja de estilos por cualquier razn o el sistema de correo del suscriptor no soporta CSS, simplemente ver el mensaje sin el aspecto definido por el creador del boletn. Pero por lo menos ver perfectamente el envo, con toda la informacin del mensaje, presentada con los estilos predeterminados del sistema del usuario. En caso de que a un usuario no soporte formato HTML, podra darse el caso de que viese el cdigo de la pgina (con las etiquetas y todo), en lugar de ver el formato web. En ese caso, por lo menos recibira un cdigo mucho ms 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 modificacin es mucho ms sencilla. Como todo en esta vida, maquetar un boletn con CSS, tambin tiene algunas desventajas. La principal que veo es que hace falta tener mayores conocimientos para crear un boletn con CSS. Es decir, cualquier persona es capaz de hacer una pgina con HTML bsico utilizando un editor de webs como Frontpage o

    Dreamweaver. Sin embargo, con CSS deberemos dominar una tecnologa adicional y algn que otro programa para realizar el trabajo. Otra desventaja es que algunos sistemas de correo no incluyen enlaces con archivos externos, ya sean imgenes o declaraciones CSS. Esto hace que no muestren los estilos del boletn, aunque por lo menos se mostrar la pgina bsica sin los estilos. Una posibilidad para evitar esto es incluir los estilos dentro del propio cdigo de la pgina, aunque entonces estaremos contaminando un poco el cdigo limpio de nuestro boletn.

    Ejemplo de boletn en formato HTML con CSS Nosotros llevamos tiempo enviando en nuestra web MercadoProfesional.com un boletn semanal en formato HTML, que est maquetado por completo con CSS. Vamos a mostrar aqu su cdigo HTML y el cdigo CSS que utilizamos para definir los estilos. Sera bueno ver el boletn en una pgina aparte, para hacernos una idea previa del contenido y estilo creados. Cdigo HTML Podemos ver a continuacin el cdigo HTML de uno de nuestros boletines de novedades.
    <html> <head> <title>Boletn 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>Boletn 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"> Boletn 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 promocin de un portal, exactamente, no sabemos que temtica 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 aplicacin 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 cdigo no tiene ningn estilo definido a travs de HTML, resulta bastante sencillo de interpretar. Cdigo CSS Ahora podemos ver el cdigo del archivo CSS que estamos utilizando para definir los estilos del documento. Seguramente alguno de los estilos definidos no lo estaremos utilizando en esta edicin del boletn de novedades. No os estraaros por eso. En general, no extraarse si no est totalmente optimizada la declaracin 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 declaracin de estilos resulta bastante larga, pero como decamos, se puede podra optimizar bastante todava. Podemos ver el boletn en una pgina aparte. Conclusin El paso ms difcil para realizar este boletn es hacer la maquetacin 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 pgina para visualizar el boletn sin la definicin de estilos asociada. As es como se vera el boletn si por cualquier cuestin 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 boletn queda bastante comprensible, aunque no tan vistoso.

    Vous aimerez peut-être aussi