Edgardo,
Muchas gracias, muy completo el manualcito.
Solo agregaría una cosa: así como hacer la estructura de un boletín de
correo nos implica un flash-back y volver a codificar de la manera que ya
estábamos empezando a olvidar, podemos usar imagenes como las que ya
estábamos empezando a olvidar: los gifs animados. Obviamente en un boletín
de correo no usamos, ni Flash, ni Javascript, así que la única forma de
ponerle movimiento son los gifs animados, incluso uno puede convertir una
pequeño clip de video en gif animado y logra un efecto espectacular.
Saludos,
Germán
El 20 de julio de 2012 20:05, Edgardo Raúl Galletto <
edgardogalle...@gmail.com> escribió:
> Ahora tengo el agrado de enseñarles como hacer una buena plantilla de mail
> corporativa. Muchas veces hemos recibido publicidad vía mail, algún
> newslétter, etc... Pero la verdad es que nadie nos enseñó como hacerlas.
> Existen empresas que se dedican a la publicidad viral por mail, campañas de
> mailing list y podemos seguir con ejemplos. Son obviamente pagos. Pero como
> hacerlo a eso nosotros, aprender y evitar una erogación cuantiosa? Pues
> bien, aquí están los pasos.
> 1. Utilizarás tu editor web preferido, el que quieras. Yo uso DreamWeaver,
> Sublime Text, o Notepa d++. Debemos olvidarnos del diseño web actual y su
> filosofía. Quiero decir que tenemos que hacerlo a la antigua, usando tablas
> para maquetar y diseñar. Me refiero al uso de las famosas etiquetas <table>
> y </table>.
> 2. Jamás usemos etiquetas elaboradas como <div>, las HTML5, o selectores
> CSS3 y otras. Solo nos manejaremos con las básicas y simples. Tablas,
> párrafos, encabezados de titulares, links, imágenes y listo. Me refiero a
> <table>, <p>, <h1>...hasta el <h6>, <a> y <img>. Es recomendable de mi
> parte usar DremWeaver o uno equivalente, ya que mientras vas creando las
> tablas vas viendo el diseño como va quedando. Coda es un buen ejemplo.
> 3. Es muy importante lo anterior ya que un solo <div> nos arruinara todo.
> Podemos usar CSS para dar estilo, diseñar y dar forma a nuestro proyecto.
> Hay personas que directamente, a cada párrafo o titular le dan formato de
> manera individual. O sea, esto es un ejemplo: <p align=“right“,
> style=“color:#ffdd22, padding: 1em“>Texto de párrafo</p>. Yo no estoy de
> acuerdo! Esto es desordenado, demasiado personalizado y tira por la borda
> todo lo que nos indican los actuales principios de separar la "estructura,
> diseño y del contenido". Lo que haremos es incluir lo siguiente entre las
> etiquetas <head> y </head>:
> <style>
> Body
> {
> Background: #cccccc
> Font-family: verdana, tahoma, serif
> ...y etc con todas etiquetas necesarias para dar un buen diseño.
> }
> </style>
>
> Usaremos los selectores tanto de clases como de 'Id' que hagan falta. En
> lo personal recomiendo muchas mas clases que de Id, ya que podemos usar.,
> reutilizar las clases, y anidarlas. Incluso usar mas de una en una
> etiqueta. Los Id's prefiero que sean pocos y sguiendo la modalidad de una
> web común: ó sea, Header, Content, sidebar, footer, o la denominación mas
> cómoda parar uds. Recomiendo mucho usar nombres que coincidan con las
> nuevas etiquetas de HTML5. Así nos vamos acostumbrando, y a pensar en
> función de las nuevas tecnologías. Otra cosa, si siguen estos consejos
> cualquiera que modifique la plantilla podrá entenderlo fácilmente. "son
> reglas de buena estructuración y documentación de código". Incluso se
> pueden agregar comentarios!!! Es genial y recomendable.
> 4. Suponiendo que ya tienes todo, ahora faltan las fotos. Ya tiene que
> estar editadas y 'arregladas'. Lo importante es que jamás deben mandarse
> adjuntas. Siempre tienen que estar cargadas en el servidor de tu sitio web.
> Lo que figurara en el código html de la plantilla es solo la dirección URL
> hacia la foto. O sea, <img href="
> http://www.tusitio.com/wp-content/upload/tuplantilla-mail/header.jpg";> es
> solo un ejemplo. Pero como estamos desarrollando y trabajando en local, las
> imágenes las guardaremos, seguramente, en la carpeta de imágenes o en la
> misma de la plantilla. Seamos prolijos, sigamos las pautas de buenas formas
> de acomodar y organizar las cosas.
> 5. En las imágenes podemos incluir zonas activas o mapas para insertar
> enlaces. Una vez hecho el diseño debemos incorporar la famosa frase al
> comienzo: si no puede ver este mail haga clic aquí. Antes de colocar el
> enlace a algo que todavía no subimos, tenemos que asegurarnos de la
> dirección física de URL que le vamos a dar y el lugar o carpeta en nuestro
> webhosting. Aclaro esto porque a veces nuestro servidor web te rechaza
> ciertos lugares o carpetas. Por mas que físicamente, alojes la plantilla
> con las imágenes creada a tal efecto, te da el mensaje de error 404 de
> página no encontrada. En el caso de WordPress suele darte estos mensajes de
> error. La solución sera alojarla en la famosa carpeta /wp-content/upload.
> La recomendación para acomodar todo con correcto criterio organizativo,
> seria crear una carpeta con un nombre indicativo del proyecto
> anteponiendole un numero de orden, sin espacios en blanco y que sea corto.
> No mas de 20 caracteres. Unos ejemplos:
> www.elotrositio.com.ar/wp-content/uploads/01-mail-VB
> www.elotrositio.com.ar/wp-content/upload/02-mail-PCLan.
> Ahora hay que seguir lo mismo con los archivos de nuestra plantilla.
> Numerarlos y nombrarlos correctamente cómos los ejemplos anteriores.
> 6. Vamos a subir las cosas a nuestro hosting o el determinado hosting de
> tu cliente. Tenemos que asegurarnos que tenemos todas las cosas listas, ok?
> Para seguir una pauta organizada y secuenciada haremos lo siguente: una vez
> creada la carpeta en el hosting subimos primero las imágenes.
> 7. Luego tomamos nuestra plantilla que seguramente sera a modo de ejemplo,
> 01-tu-plantalla.html
> Y lo que haremos es cambiar todos los links de las fotos e imagenes por
> las que recién alojamos en el hosting. Hacemos lo mismo con el resto de los
> links. También, hay hacer lo mismo con el mensaje que esta al principio:
> "si no puede ver ...haga clic aquí". Con este link tenemos que completarle
> al final con el nombre de la plantilla, pues porque todavia no hemos subido
> el archivo. Esto es como predictivo.
> 7. Ahora haremos algo raro. Cambiemos el nombre de la carpeta de la
> plantilla de nuestra compu local y cambiamos de lugar la plantilla. La
> abrimos con nuestro navegador preferido. Vamos probando los links,
> chequeamos que todas las imágenes se cargaron correctamente. Vaciamos el
> historial y la caché del navegador. Si cometimos un error allí lo
> notaremos. Generalmente los errores son por algún error de alguna URL.
> 8. Una vez terminado importamos la plantilla con nuestro cliente de correo
> y procedemos a enviar mails. Y vualaaaá! A disfrutar!
> PD: cada mail que enviemos implicara crear una plantilla nueva y subirla
> al servidor de web hosting, el tuyo o el de tu respectivo cliente; el que
> corresponda. O sea con nuevo contenido y fotos. Pero la misma estructura.
> Por eso la recomendación de la numeración. Para seguir un orden en la linea
> de tiempo.
> Edgard_Roul
> ...:: In Trance We Trust ::...
> www.WebModerna.com.ar
> i...@webmoderna.com.ar
> www.Facebook/edgardroul
> Enviado desde mi MoraNegra® (BlackBerry en inglés) de Claro Argentina
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
--
*Germán Bustos*
Asesor en estrategias de comunicación en Internet para organizaciones
sociales
http://atarraya.org
http://germanbustos.com
Tel: (+57) *3044281544*
<http://atarraya.org/>
<http://germanbustos.com/>
<http://www.facebook.com/german.bustos>
<http://twitter.com/kommodin>
<http://www.linkedin.com/in/germanbustos>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
![http://www.tusitio.com/wp-content/upload/tuplantilla-mail/header.jpg"](http://www.tusitio.com/wp-content/upload/tuplantilla-mail/header.jpg"){kind=link}