Download - Html y email
![Page 1: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/1.jpg)
HTML Emailalgunas cosas que considerar
![Page 2: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/2.jpg)
Un HTML Email es una página web que se envía por email
Hello
@
![Page 3: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/3.jpg)
Puede ser únicamente el código HTML
<img><h1>Hello</h1>
@
Content-Type: text/htmlHTML
![Page 4: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/4.jpg)
O puede incluir también texto plano alternativo
<img><h1>Hello</h1>
Hello
@
Multipart/Alternative MIME
HTML
TXT
![Page 5: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/5.jpg)
Ejemplo de código para enviar un email normal
<?php$txt = file_get_contents("message.txt");$from = "[email protected]";$to = "[email protected]";$subject = "Text Email Test ";$headers = "From: $from\r\nReply-To: $from";if ( mail( $to, $subject, $txt, $headers ) ) { echo "OK";} else { echo "KO";}
ENVIAR TXT
![Page 6: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/6.jpg)
Ejemplo de código para enviar HTML Email
<?php$html = file_get_contents("message.html");$from = "[email protected]";$to = "[email protected]";$subject = "HTML Email Test ";$headers = "From: $from\r\nReply-To: $from"."\r\n";$headers .= "MIME-Version: 1.0"."\r\n";//$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";$headers .= "Content-Type: text/html; charset=UTF-8\r\n";if ( mail( $to, $subject, $html, $headers ) ) { echo "OK";} else { echo "KO";}
ENVIAR HTML
![Page 7: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/7.jpg)
De modo similar a como el mismo HTML se renderiza diferente en diferentes navegadores
<HTML>
![Page 8: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/8.jpg)
El mismo HTML se renderiza diferente en diferentes clientes email
<HTML>
Lotus Notes
Outlook
![Page 9: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/9.jpg)
Además, hay varias limitaciones en el HTML que se puede usar
● <doctype>,<head>, <body> suelen ser borrados
● 99% del CSS no funciona● UTF-8 no siempre es reconocido● URL relativos no funcionan● Algunas versiones de Lotus
Notes (6 y 7) no soportan PNG● No se puede usar imágenes
como background
● Inline styles● Tablas y gif para espaciado● <font> para fuentes● ISO-8859-1 y &xxxx;● URL absolutos● Usar JPG, GIF● Usar texto gráfico cuando se
requiera (no importa el SEO)
NO SÍ
![Page 10: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/10.jpg)
Es decir
HTML como en
1996
![Page 11: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/11.jpg)
<table border="1" cellspacing="0" cellpadding="0" style="width:100%;" align="center" bgcolor="#888"> <tr><td> <table border="1" cellspacing="0" cellpadding="0" width="600" align="center" bgcolor="#fff"> <tr><td><img style="display:block;" src="spacer.gif" width="10" height="10"></td> <td><img style="display:block;" src="spacer.gif" width="40" height="10"></td> <td><img style="display:block;" src="spacer.gif" width="540" height="10"></td> <td><img style="display:block;" src="spacer.gif" width="10" height="10"></td></tr> <tr><td></td> <td valign="top"><font size="7" face="Times" color="#088">L</font></td> <td align="justify">orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore <b>magna aliqua</b>. Ut enim ad minim veniam. </td> <td></td></tr> <tr><td><img style="display:block;" src="spacer.gif" width="10" height="30"></td> <td></td> <td></td> <td></td></tr> <tr><td></td> <td colspan="2" align="justify"><i>Quis nostrud exercitation ullamco laboris</i> nisi ut . . . </table> </td></tr></table>
Tablas y gif para diagramación
![Page 12: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/12.jpg)
● <table align="center">para centrar una tabla
● <table cellpadding="0" border="0" cellspacing="0" style="border-collapse:collapse;">previene el espaciado por default que se suele aplicar a las tablas.
● <td><img style="display:block;"></td>previene el gap que puede aparecer debajo de las imágenes.
● <td align="justify">para justificar texto en la celda
● El ancho de los img de la primera fila pueden servir para fijar los anchos de sus respectivas columnas.
● La altura de los img de la primera columna pueden servir para fijar las alturas de sus respectivas filas.
● Controlar los márgenes con columnas o filas extra.● Una herramienta visual, como Dreamweaver o Fireworks, facilita este tipo de
diagramación.
Tablas y gif para diagramación
![Page 13: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/13.jpg)
● <font size="n">para el tamaño del texto (1: 9px, 7: 48px)
● <font color="#123456">para el color del texto
● <b> para negritas● <i> para itálicas● <a style="color:#333333;text-decoration:none;">
para ocultar el color y subrayado de un link
Más tips
![Page 14: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/14.jpg)
Una página web tiene normalmente referencias a recursos externos, como las imágenes, que pueden ser relativas
<img src="img/smile.png">
<h1>Hello</h1>
img/
![Page 15: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/15.jpg)
En un HTML Email, esas referencias tienen que ser absolutas
<img src="http://mydomain.com/img/smile.png">
<h1>Hello</h1>
http://mydomain.com/img/
![Page 16: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/16.jpg)
Usando Multipart/Alternative MIME se puede incrustar la imagen en el mismo email y enlazarla mediante el id asignado
<img src="ci:smileimg"><h1>Hello</h1>
![Page 17: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/17.jpg)
Una forma práctica de crear un HTML Email es usando Google Docs y GMail
GMail GDocs
COPYPASTE
Internamente, se copia el HTML y todas las referencias son absolutas
![Page 18: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/18.jpg)
● http://htmlemailboilerplate.com/ Plantilla que incluye varias cosas descubiertas por expertos a lo largo de varios años.
Enlaces
![Page 19: Html y email](https://reader033.vdocumento.com/reader033/viewer/2022051020/55cf862a550346484b94e4f7/html5/thumbnails/19.jpg)
● http://kb.mailchimp.com/article/how-to-code-html-emails
● http://css-tricks.com/sending-nice-html-email-with-php/
● http://www.campaignmonitor.com/blog/post/2695/lotus-notes-doesnt-support-png-images/
Referencias