Your SlideShare is downloading. ×
0
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Html Email - Algunas cosas que considerar
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html Email - Algunas cosas que considerar

146

Published on

Hay algunas limitaciones en el HTML que podemos usar en un HTML email. El 99% del CSS no funcionará, y hay que usar tablas para la diagramación... como en los '90.

Hay algunas limitaciones en el HTML que podemos usar en un HTML email. El 99% del CSS no funcionará, y hay que usar tablas para la diagramación... como en los '90.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
146
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML Email algunas cosas que considerar
  • 2. Hello @ Un HTML Email es una página web que se envía por email
  • 3. <img> <h1>Hello</h1> HTML Content-Type: text/html @ Puede ser únicamente el código HTML
  • 4. HTML <img> <h1>Hello</h1> Multipart/Alternative MIME Hello TXT @ O puede incluir también texto plano alternativo
  • 5. ENVIAR TXT <?php $txt = file_get_contents("message.txt"); $from = "admin@host.dev"; $to = "akobashikawa@gmail.com"; $subject = "Text Email Test "; $headers = "From: $fromrnReply-To: $from"; if ( mail( $to, $subject, $txt, $headers ) ) { echo "OK"; } else { echo "KO"; } Ejemplo de código para enviar un email normal
  • 6. ENVIAR HTML <?php $html = file_get_contents("message.html"); $from = "admin@host.dev"; $to = "akobashikawa@gmail.com"; $subject = "HTML Email Test "; $headers = "From: $fromrnReply-To: $from"."rn"; $headers .= "MIME-Version: 1.0"."rn"; //$headers .= "Content-Type: text/html; charset=ISO-8859-1rn"; $headers .= "Content-Type: text/html; charset=UTF-8rn"; if ( mail( $to, $subject, $html, $headers ) ) { echo "OK"; } else { echo "KO"; } Ejemplo de código para enviar HTML Email
  • 7. <HTML> De modo similar a como el mismo HTML se renderiza diferente en diferentes navegadores
  • 8. <HTML> Outlook Lotus Notes El mismo HTML se renderiza diferente en diferentes clientes email
  • 9. NO ● ● ● ● ● ● SÍ <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) Además, hay varias limitaciones en el HTML que se puede usar
  • 10. HTML como en 1996 Es decir
  • 11. Tablas y gif para diagramación <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 eiusmod tempor 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>
  • 12. Tablas y gif para diagramación ● ● ● ● ● ● ● ● <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.
  • 13. Más tips ● <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
  • 14. img/ <img src="img/smile. png"> <h1>Hello</h1> Una página web tiene normalmente referencias a recursos externos, como las imágenes, que pueden ser relativas
  • 15. http://mydomain. com/img/ <img src="http://mydomain. com/img/smile.png"> <h1>Hello</h1> En un HTML Email, esas referencias tienen que ser absolutas
  • 16. <img src="ci:smileimg"> <h1>Hello</h1> Usando Multipart/Alternative MIME se puede incrustar la imagen en el mismo email y enlazarla mediante el id asignado
  • 17. GMail GDocs PASTE COPY Internamente, se copia el HTML y todas las referencias son absolutas Una forma práctica de crear un HTML Email es usando Google Docs y GMail
  • 18. Enlaces ● http://htmlemailboilerplate.com/ Plantilla que incluye varias cosas descubiertas por expertos a lo largo de varios años.
  • 19. Referencias ● http://kb.mailchimp.com/article/how-to-code-htmlemails ● http://css-tricks.com/sending-nice-html-email-withphp/ ● http://www.campaignmonitor. com/blog/post/2695/lotus-notes-doesnt-support-pngimages/
  • 20. Gracias akobashikawa@rcp.pe

×