Académique Documents
Professionnel Documents
Culture Documents
com
Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Csar Martn Miguel Angel Alvarez Diego Pinilla
http://www.unosaficionados.com (2 captulos) Director de DesarrolloWeb.com http://www.desarrolloweb.com (6 captulos)
Albert Pastor
Director de TecnicasMarketing.com. http://www.tecnicasmarketing.com/ (1 captulo)
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Boletines de novedades
Un boletn de novedades o newsletter es un correo electrnico que se enva peridicamente a los visitantes de nuestro sitio que han deseado apuntarse. En dicho correo se suelen sealar las novedades ocurridas en nuestro sitio, ya se trate de nuevos contenidos o servicios. La periodicidad del boletn puede ser variable en funcin de las necesidades de nuestro web, aunque se recomienda que sea siempre la misma. Cualquier web que se precie debe mantener tambin un buen boletn de novedades. No quiere decir que debamos acometer este trabajo para llegar a un estatus elevado, sino ms bien, que las ventajas de dicho boletn son las que harn que nuestra pgina suba de categora. Los boletines nos dan ms presencia y recuerdan a los visitantes la existencia de la web cada mes, con lo que animan a visitarla. Veamos con detalle estas ventajas. Por qu debemos hacer un boletn La primera razn de crear un boletn es fomentar la fidelidad de nuestros visitantes. Los boletines tienen un grado alto de respuesta por parte de los destinatarios, lo que hace que cada vez que lo enves obtengas una buena cantidad de visitas. Precisamente este alto grado de respuesta y el inters que suscita un buen boletn hacen de este canal un lugar muy apropiado para colocar mensajes publicitarios, en forma de texto, o banners si nuestro boletn se distribuye en formato HTML. As mismo, si nuestro sitio es de comercio electrnico, el boletn es el lugar apropiado para introducir las ofertas ms importantes del momento. Por las mismas razones, los boletines suelen se un excelente lugar para realizar intercambios de publicidad, si es que no tenemos otro tipo de ofertas para rellenar nuestros espacios publicitarios. Cuando creamos y mantenemos un boletn de novedades, damos una imagen de estar actualizando la pgina constantemente. Cada vez que un usuario lo recibe sabe que hemos introducido novedades y los visitantes que encuentran en nuestra pgina la opcin de apuntarse pueden deducir que actualizamos la pgina constantemente, aunque no lleguen a plantearse el suscribirse. Los boletines sirven para promocionar los nuevos servicios que ofrecemos en nuestro web, cuando aun son poco conocidos y pretendemos que los usuarios lleguen hasta ellos. Habr usuarios que prefieran apuntarse al boletn antes de visitarnos constantemente para ver si hay novedades, por lo que debemos ofrecer la posibilidad de que nuestras novedades lleguen perfectamente a su correo. En el manual de Boletines de Novedades ampliamos esta informacin, indicamos distintas maneras de difundir los correos de manera masiva, ofrecemos consejos para construirlos mejor, con ms efectividad. Tambin estudiamos la manera de mandar boletienes en formato HTML. Artculo por Miguel Angel Alvarez
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Como vemos, es mejor que contemos con un servicio de envo masivo de mails. Estos servicios suelen ser listas de correo, que consisten en una lista de direcciones de correo de destinatarios y un mecanismo para que cuando se enve un mensaje a la lista, se rebote para todos sus componentes. Estas listas de correo, adems de realizar por nosotros la accin de envo de los mensajes, se encargarn de preservar la identidad de los componentes del boletn. Otra tareas de mantenimiento de la lista de correo del boletn que tenemos ya implementadas en este servicio suelen ser dar de alta o baja direcciones de correo, con lo que no tenemos que realizar difciles scripts para suscribir o borrar direcciones. Tambin hay listas que comprueban los mensajes para que no contengan virus, que nos ofrecen un histrico de los boletines emitidos, etc. Todo depende de la lista de la que dispongamos. Otras opciones Tambin podramos hacer un programa propio que mande correos masivamente utilizando ASP o PHP, pero en caso de enviar miles de mensajes, habra evaluar la posibilidad de saturacin del servidor donde tenemos alojadas las pginas, que puede no estar preparado para una tarea como esa. Artculo por Miguel Angel Alvarez
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
El uso de las listas de correo para el envo de los boletines tiene algunas ventajas e inconvenientes. Como ventaja podemos sealar que los sistemas de listas de correo gratuitas estn preparados para enviar mensajes de correo de manera masiva y que, aunque enviemos cientos de miles de emails, no habr problema de saturacin de sus servidores. Como desventaja, sealaremos insercin de publicidad por parte del proveedor en nuestros boletines, necesaria para rentabilizar su servicio. Llegado a este punto, tambin queremos recomendar otro servicio gratuito de listas de correo, que estamos utilizando con la web guiarte.com. Se trata de Melma Magazines. Las herramientas para administrar la lista son mucho ms simples y permiten menos opciones.
Nota: Melma ha dejado de dar servicio gratuito de listas de correo.
Otra opcin para mandar los correos sin necesidad de una lista gratuita sera tener nuestra propia lista de correo. Muchos alojamientos tienen como recursos la posibilidad de crear listas de correo, slo habra que preguntar en nuestro proveedor de hosting acerca de esa posibilidad, o cuando contratemos los servicios asegurarnos que nos ofrecen esa posibilidad. Cada vez es ms habitual que cobren por servicios como las listas de correo, por esa razn, si pensamos utilizarlas en nuestra web, puede ser muy interesante que nos aseguremos que el proveedor donde contratamos el hosting ofrezca el servicio de listas de correo. Atencin en este punto, porque muchas veces los proveedores limitan el nmero de usuarios que puede tener la lista como mximo.
Nota: En ocasiones las listas de correo de los proveedores de Hosting no son tan buenas como las gratuitas, puesto que las listas gratuitas se han desarrollado con la experiencia probada de miles de administradores.
No podemos ofrecer mucha informacin sobre cmo manejar una de las listas de correo. Lo mejor es que os informis en vuestro proveedor del servicio de listas, puesto que puede ser diferente administrar una lista de correo que otra. Seguro que el proveedor que nos ofrezca las listas tiene una excelente documentacin para ensearos a manejarlas. Un detalle que salta a la vista pero que creo interesante comentar, es que la lista de correo que mantiene el boletn debe estar configurada para que slo acepte mensajes venidos desde la direccin del administrador de la lista, porque en caso contrario, cualquiera podra enviar mensajes de correo a todos los suscritos al boletn haciendo spam a tus usuarios, que siempre es bastante molesto. Artculo por Miguel Angel Alvarez
1. Las conclusiones al principio: Como siempre. Procura decir lo interesante en el primer parrafo. Deja lo demas para el final.
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 4
Ahora veamos las partes de un mail: Quien manda el mail. Si utilizas un alias para enviar el mail procura que se te pueda indentificar y responder a ese mismo alias. En el subject procura decir el tema del mail de forma clara y sencilla. Algo asi como "Actualizacion del site", "Rebajas de Enero", "Opina sobre el precio del Atun en escabeche". El primer parrafo debe decirlo todo de forma clara y sencilla. Incluyendo los links a las paginas que se haga referencia. Yo no soy muy partidario del sumario en las newsletters. Lo unico que hace es ocupar espacio y restar tiempo a leer el tema principal. Mejor poner el tema principal y si deseas incluir mas temas, ponlos debajo idicando claramente que estos son temas secundarios que pueden ser de interes para el usuario. Por ultimo incluye el tipico "borrar suscripcion", "incluir suscripcion" y un enlace a tu site.
Liquidamos la seccion de Pop. Todos los discos de U2 por 1.500 ptas. Lo mejor de Enrique Iglesias por 1.200 ptas. Descuber mas oportunidades en nuestra seccion de Pop. <<<<<< Es bueno empezar con un buen gancho. Esto animara a la gente a seguir leyendo el mail. >>>>>> Nuevo disco de Dover. Escucha el singel para comprobar que siguen siendo la mejor banda de Rock. Ahora por solo 2.500 ptas.
Lo mejor del Techno de Ibiza. 15 remezclas de lo mejor del verano 2000. Entre otros Dj La olla y Dj Pastis. Ahora por solo 2.200 ptas. Podriamos acabar incluyendo la lista del "top pen" y algun enlace de interes. Al final el tipico suscribir y borrar suscripcion y un enlace al home. Poco mas es necesario. 2. Lo bueno si breve 2 veces bueno. En el caso del mail mas. La lectura del mail no es algo relajante, mas bien la gente suele estar algo "tensa" (Nielsen), por lo que cuando antes lean el tema antes se relajaran y seguiran leyendo. Si empezamos el mail diciendo cosas como, "Acabas de recibir una oferta que no podras rechazar..." lo unico que conseguiremos es que lo tiren a la basura. Mejor empezar con cosas del estilo "Rebajas del 40% en la seccion de discos. Pinche en este enlace." y luego podemos seguir describiendo de que va esta promocion para que el usuario se informe bien del tema antes de pinchar. Pero procura reducir al maximo lo que tengas que decir. 3. No abuses del HTML
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 5
Cuando esta bien usar el html en el mail: Para incluir enlaces largos que pueden cortarse en el correo. Para incluir fuentes, color y tablas que ayuden a leer el correo.
Cuando no esta bien incluir html en el mail: Para enviar paginas web completas por el mail. Suelen pesar mucho y ocupan mucho espacio. Ten en cuenta que la ventan de mail suele ser mas pequea que el navegador. Para incluir imagenes en el mail. Es mejor que indiques que dispones de imagenes en tu site y el enlace a dicha foto.
Mucha gente lee el correo en casa donde la conexion puede ser peor que en el trabajo con lo que le costara mucho bajarse documentos complejos. Procura no abusar del correo y procura no enviar imagenes gratuitamente. 4. Como minimo una vez al mes. Como maximo una vez a la semana. Conviene enviar un mail de bienvenida cada vez que alguien se registre en tu servicio. Esto confirmara que el sistema funciona y que estamos en la lista. Como minimo una vez al mes. Es recomendable enviar una newsletter al mes. Por lo menos para que la gente sepa que sigues vivo y que la cosa sigue en marcha. Si pasa mucho tiempo entre una newsletter y otra la gente se puede olvidar de ti y no reconocerte la proxima vez que los escribas. Como maximo una vez a la semana. Tampoco conviene abusar de los usuarios y mas de una vez a la semana puede considerarse "Spam". De todos modos procura enviar por mail solo aquellos eventos relevantes que ocurran en tu site. Si no ocurre nada no tienes por que enviar nada. Un mail que no tenga valor ira directamente a la basura y puede hacer que el usuario bloque la direccion de correo de origen. 5. Un breve consejo cuando enviemos mensaje a muchos amigos Muchas veces cuando ocurre algo importante (un virus, ETA, ...) la gente suele coger su lista de correo completa y envia un mail a "todo el mundo"... Esto a veces genera que alguien de la lista copie todas las direcciones y se dedique a hacer spam... Para evitar esto, sencillamente copia tu lista de correo en el BCC y asi no sera publica para el resto del mundo. Artculo por Csar Martn
Nuestro mensaje de correo electrnico para enviar al boletn ha de tener formato HTML, dado que dicho formato es imprescindible para insertar imgenes en el correo y para la insercin de enlaces y otros elementos. Podramos proponer dos tcnicas para la insercin de estas imgenes en el boletn. Aunque slo vamos a ilustrar una de ellas, merece la pena comentar las dos para que quede todo mucho ms claro. 1) Mandar las imgenes como archivos adjuntos Esta opcin es interesante porque as nos aseguramos que las imgenes que salen en el mensaje se vern siempre perfectamente. Es la opcin ms complicada y no veremos su implementacin. Adems, tiene la desventaja de que el mensaje pesa ms y lo peor es que contiene archivos adjuntos. El problema de tales archivos adjuntos es que pueden contener virus, mientras que un mensaje sin archivos adjuntos es casi imposible que contenga virus. Actualmente, recibo ms de 100 mensajes con virus al cabo de un da. Esto hace que borre directamente sin leer casi todos los mensajes que me llegan con archivos adjuntos. 2) Mandar el mensaje sin imgenes adjuntas Lo que se hace es que cualquier imagen que aparece en el boletn se extrae directamente desde su direccin de Internet, de modo que cuando se lee el correo se accede a la direccin en la web que contiene dicha imagen y no a un archivo adjunto al mensaje. Esta opcin es mucho ms fcil de desarrollar y tambin ms segura, puesto que el mensaje llegara sin datos adjuntos y por tanto con menores posibilidades de virus. El nico problema es que si el usuario no est conectado a Internet a la hora de leer el mensaje las imgenes aparecern "rotas" y no saldrn en el cuerpo del correo hasta que el usuario se conecte. As pues, vamos a ver cmo lo hacemos nosotros: no enviamos correos con archivos adjuntos. Lo que hacemos es enviar el mensaje en formato HTML y enlazar todas las imgenes, otros recursos y links con URLs absolutas. Lo que hacemos es crear la pgina con un editor, tal como deseamos que se enve, pero poniendo todas las direcciones de los enlaces y las imgenes dirigidas hacia pginas e imgenes que estn en la web, en lugar de dirigirlas a otras pginas e imgenes que estn en tu disco duro. As, los atributos HREF de los enlaces y los SRC de las imgenes quedaran con URLs absulotas: <a href="http://www.desarrolloweb.com/manuales">Manuales de DesarrolloWeb.com</a> <img src="http://www.desarrolloweb.com/images/logo.gif" width=120 height=70> Vistos los cdigos de unos ejemplos de imgenes y enlaces podemos imaginarnos el cdigo de la pgina entera. Un cdigo HTML perfectamente comn donde, insisto, tenemos URLs absolutas en todos los recursos con los que hay que enlazar. Hay una etiqueta que tambin solemos incluir dentro del cdigo HTML del boletn, en este caso para conseguir que todos los enlaces se muestren en una ventana a parte y no dentro del cuerpo del mensaje. De este modo, la navegacin sobre los contenidos de nuestra web se realizar con todo el espacio de la ventana del navegador.
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
<base target="_blank"> En el siguiente captulo veremos cmo enviar el archivo HTML a la lista de nuestro boletn. Artculo por Miguel Angel Alvarez
moverse a otro mes y ao. </td></tr></table> </body> </html> * Este boletn es una simplificacin y recorte de nuestro boletn de novedades. El cdigo en si no tiene mucha importancia, lo que tenemos que fijarnos es en que las imgenes y los enlaces tienen URLs absolutas.
El programa de correo que utilices tendr su propia manera de incluir cdigo HTML dentro de un mensaje. En Outlook Express hay que acceder al men de Insertar > Texto de archivo. Si el mensaje que ests escribiendo tiene formato HTML, podrs insertar archivos que tengan extensin .html o .htm. Indico esto porque en el caso de que tu email estuviera en formato "solo texto", slo podras insertar archivos de texto .txt. Para cambiar el formato de mensaje a HTML en Outlook Express debemos dirigirnos al men Formato > Texto enriquecido (HTML).
Atencin: Al insertar el cdigo del archivo HTML dentro del boletn hay que fijarse en no insertar el fichero HTML como un archivo adjunto, sino en insertar el cdigo de dicho archivo como texto en el mail. En Outlook Express es fcil equivocarse pues las dos opciones estn una al lado de la otra, en el men insertar. En este programa hay que escoger la opcin "Insertar > Texto de archivo" en lugar de "Insertar > Archivo adjunto".
Una vez compuesto el mensaje lo enviamos a nuestra lista de correo, que se encarga de distribuir los mensajes a los miles de suscriptores del boletn. Generalmente, las listas de correo tienen una direccin a la que mandar los mensajes de correo que queremos dirigir a todos los componentes de la lista, algo como miLista_recepcin@miProveedor.net. En general, el envo del mensaje en formato HTML ser realizado de la misma manera que un mensaje en formato normal, excepcin hecha de lo comentado. Esperamos que no resulte un problema. Hasta aqu nuestros consejos sobre el envo de boletines en formato HTML, as como la creacin de boletines de novedades en general. Ahora, a poner en prctica las ideas. Artculo por Miguel Angel Alvarez
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Procura generar curiosidad y confianza. "Tema" No recomendado Consigue tu Hipoteca. CONSIGUE TU PC GRATIS AHORA!!! seguro que tu banco es el mejor? AHORA es el momento de comprar Vaqueros!!!
"Tema" Recomendado Hipotecas Nuevo Ordenador Comparativa De Bancos Vaqueros Rebajados 50%
Es crucial el no "chillar" al usuario con un mensaje agresivo. 2. El "quien" debe ofrecer informacion honesta y utilizar una direccion de correo a la que se pueda responder. En el quien ofrece signos de identificacion reales. Un nombre de persona puede generar mas confianza que un "departamento" o un mail del estilo "info@empresaXXX.com". Procura que en "alias" del quien aparezcan signos que identifiquen la empresa. Usar el dominio puede ser suficiente (Juan Sanchez - empresa.com). Procura que la direccion de correo de la newsletter sea una direccion a la que se pueda responder. De lo contrario, tendras que poner instrucciones para explicar la situacion, lo cual puede entorpecer la posibilidad de captar un cliente. El mail al que se responde debe estar respaladado por gente que sea capaz de responder de forma rapida y precisa.
Un buen ejemplo.
Mensaje claro, boton contundente de "apply now", un diseo profesional, la firma del responsable.
3. Ofrece informacion clara y util. Debes generar Accion. Tienes 5 segundos para captar la atencion del usuario. Cualquier segundo de duda hara que el usuario pulse el boton de borrar. Usa HTML para formatear el contenido y crear "destacados" dentro del texto. Es importante ofrecer titulares con gancho e informacion que le sirva de apoyo. Resume, resume y resume. La informacion fundamental no debe estar dentro de los graficos. Los graficos pueden servir para ilustrar el contenido y para ofrecer imagen de calidad y confianza. Procura ofrecer un "que", "cuando", "cuanto" y "como" que generen accion (visitar una web,
Solo texto y enlaces puede ser confuso. Mejor utilizar algo de HTML para definir fuentes, usar negritas y cierto estilo en el formato.
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
10
llamar, responder al correo). 4. Enlaza a paginas que ofrezcan la misma informacion que en el e-mail mas las opciones adicionales.
El ejemplo OK muestra una pagina web que se corresponde con la oferta d Quizas el estilo deberia ser mas uniforme, pero la informacion se correspo
El ejemplo KO muestra una oferta que conduce a una pagina de registro. S site es que la gente se registre, comunicalo en la newsletter.
Si la clave de tu newsletter esta en la pagina de destino, procura que el contendio sea el mismo y de form el camino a seguir. Procura contabilizar las visitas para poder obtener resultados precisos de la accion.
5. Prueba el mail en grupos reducidos para corregir. Dentro de tu empresa, entre amigos, usuarios seleccionados, un parte de tu lista de correo, cualquier muestra sera buena para comprobar que "alias", "tema" y contenido de la newsletter es mejor. Procura probar diferentes versiones y compara cual da mejor resultado. Comprueba que tipo de enlaces, imagenes, texto, formato es el mas efectivo y comprueba tecnicamente que todo vaya a funcionar de forma efectiva (los enlaces, el formato, el peso). 6. Lanza diferentes versiones para testear resultados. Una de las ventajas de las newsletters e internet es que se pueden medir con bastante facilidad la respuesta de los usuarios. Puedes enviar el mismo contendio variando el formato para comprobar cual es mas efectivo, que tipo de mesaje es mas apropiado, etc. La economia del medio y la facilidad de procesar los datos hace que sea un buen campo de experimentacion. Procura no abusar de la paciencia de los usuarios (para newsletters corporativas 1 envio cada 2 meses puede ser adecuado) y gratifica de alguna forma la respuesta del usuario.
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
11
configurado para que lo ignore, ya que es una posible fuente de programacin maliciosa para correos. Por otro lado, cuando quieras sacar el reporte de los resultados de la encuesta, podrs utilizar una pgina de programacin en el servidor y calcular cualquier cosa, sacar grficas sencillas o complejas, etc. Artculo por Miguel Angel Alvarez
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. 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
Como todo en esta vida, maquetar un boletn con CSS, tambin tiene algunas desventajas.
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
13
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"> Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 14
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; Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 15
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;
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
16
} 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.
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
17
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
18
Manual de creacin y envo de boletines de novedades: www.desarrolloweb.com/manuales/28/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
19