AitorAlejandro · August 29, 2015 14:17
diff --git a/emailing_template.html b/emailing_template.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Plantilla básica</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 </head>
 <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">
 <!--
 Se utiliza XHTML 1.0 Transitional, así que ojo con la sintaxis.
 Imagina que estamos en el 1996 maquetando HTMLs.
 Este fichero está guardado utilizando el encoding utf-8.
 Las anteriores propiedades del body darán error en un validador. Son para Outlook  :-0 -->

 <!-- La siguiente tabla es en realidad el <body> para los web mails: gmail, hotmail, yahoo, etc. Si algún atributo existe en HTML, utilízalo en vez de usar CSS. Y si usas CSS que sea SIEMPRE en línea. Hay que utilizar los 6 caracteres para el color hex -->
 <center>
 <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FAFAFA">
 	<tr>
 		<td align="center" valign="top">
 			
 			<!-- La siguiente tabla será el cuerpo del email. 600px suele ser el máximo ideal para todos los clientes de correo. Se aconseja también utilizar un borde para el contenido y, si se quiere, un margen arriba y abajo. -->
 			<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#FFFFFF" style="border-collapse: collapse;border:1px solid #AAAAAA;margin-top:10px;margin-bottom:10px; font-family:sans-serif; color: #333333;">
 				<tr>
 					<td align="center" valign="top" style="padding:20px 30px 20px 30px; text-align:center;">
 						<strong>Cabecera</strong>
 					</td>
 				</tr>
 				<tr>
 					<td align="center" valign="top" style="padding:0px 0px 0px 0px">
 						<!-- Para insertar una imagen en un email. No olvides el alt ya que por defecto los gestores no mostrarán las imágenes. -->
 						<img src="http://placehold.it/600x200.jpg" alt="Describe la imagen." width="600" height="200" border="0" style="display:block; border:0; height:auto; outline:none;" />
 					</td>
 				</tr>
 				<tr>
 					<!-- Para el padding hay que usar los 4 valores.
 					Se recomienda un line-height alto para mayor claridad. Cada vez más la gente lee los correos en el móvil. Tenlo en cuenta.
 					Utiliza <b> para texto en negrita y <i> para el texto en itálica 
 					En cada enlace pon los estilos en línea -->
 					<td align="justify" valign="top" style="padding:20px 30px 20px 30px; line-height:150%; text-align:justify;">
 						<b>Chocolate bar brownie liquorice</b>. Gummies brownie croissant tart sesame snaps oat cake fruitcake. Fruitcake carrot cake biscuit toffee croissant. Dragée pie jujubes topping liquorice tiramisu halvah icing sugar plum. <a href="http://www.google.es" style="text-decoration:none; color:#2BB874;">Applicake pie gingerbread</a> cotton candy jelly-o muffin jujubes pie lollipop. Tootsie roll apple pie chupa chups biscuit. Pudding applicake dragée muffin gummies carrot cake. Lollipop candy bear claw dragée chocolate bar tart. Jelly sweet roll cheesecake tiramisu.
 					</td>
 				</tr>
 				<tr>
 					<td align="justify" valign="top" style="padding:0px 30px 20px 30px; line-height:150%; text-align:justify;">
 						Wafer gummies applicake dessert muffin lemon drops. <i>Croissant</i> bear claw candy. Bear claw sugar plum marshmallow chupa chups donut tiramisu cheesecake toffee gingerbread. Applicake oat cake cotton candy.
 					</td>
 				</tr>
 				<tr>
 					<td align="justify" valign="top" style="padding:0px 30px 20px 30px; line-height:150%; text-align:justify;">
 						Jelly beans jujubes <i>dragée</i> chupa chups. Apple pie liquorice candy soufflé jelly-o croissant bonbon pie. Gummi bears tiramisu gummi bears tart toffee. Brownie toffee macaroon liquorice applicake soufflé. Cookie apple pie applicake icing muffin. Danish halvah lemon drops. Halvah cotton candy tootsie roll sweet roll ice cream. Pie cake carrot cake sesame snaps pudding cookie tiramisu dessert unerdwear.com.
 					</td>
 				</tr>
 				
 				<!-- Ejemplo de texto a dos columnas.
 				La anchura de 255px sale de 600 - 60 (padding izq y dch) - 30 (columna separadora) / 2columnas = 255px -->
 				<tr>
 					<td align="justify" valign="top" style="padding:20px 30px 20px 30px; line-height:150%;">
 						<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF" style="border-collapse: collapse;font-family:sans-serif; color: #333333;">
 							<tr>
 								<td align="justify" valign="top" width="255" style="text-align:justify;">
 									Donut dessert soufflé. Applicake apple pie topping apple pie liquorice muffin danish. Jelly toffee <a href="http://www.google.es" style="text-decoration:none; color:#2BB874;">gummi bears</a> bear claw macaroon bonbon carrot cake. Oat cake jujubes dragée danish applicake jujubes.
 								</td>
 								
 								<!-- Así se hace una columna que solo sirve de separación. No olvides el &nbsp; -->
 								<td height="30" width="30" style="font-size:0; line-height:0;">&nbsp;</td>
 								
 								<td align="justify" valign="top" width="255" style="text-align:justify;">
 									Croissant candy lollipop fruitcake sesame snaps <a href="http://www.google.es" style="text-decoration:none; color:#2BB874;">candy carrot</a> cake chupa chups. Cake jujubes toffee pastry marshmallow carrot cake. Gingerbread sweet roll croissant sweet roll carrot cake chupa chups jelly beans lemon drops. Sweet roll danish liquorice chocolate bar.
 								</td>
 							</tr>
 						</table>
 					</td>
 				</tr>
 				<tr>
 					<td align="center" valign="top" style="padding:20px 20px 20px 20px; color:#707070;">
 						<small><i>&copy; Pie del mail. Reservados todos los derechos y tal.</i></small>
 					</td>
 				</tr>
 			</table>
 			
 		</td>
 	</tr>
 </table>
 </center>

 <!-- Por último: 
 	1. Pasa los textos por un convertidor http://www.web2generators.com/html/entities para utilizar HTML entities cuando proceda.
 	2. Si quieres establecer tamaños para los textos hazlo en px. Lo mejor es no utilizar tamaño para que se ajuste pero si hay que diferenciar tamaños entre textos, no queda otra. Recuerda que hay <small> y <strong>
 	3. Es mejor utilizar familias de letra sans-serif (son más claras) y mejor aún utilizar font-family: sans-serif sin especificar ninguna en concreto. Verdana, Arial, Helvetica y "Trebuchet MS" son las más recomendables.
 	4. Valida el código en http://validator.w3.org/. Este documento dará los 5 errores de los atributos del body.
 	5. Borra todos los comentarios
 	6. Haz las pruebas necesarias en los clientes de correo que te pidan.
 	7. Una aproximación para Outlook es abrir los HTMLs con Word. Pero no te fies 100%.
 -->
 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Plantilla básica</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	</head>
	<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">
	<!--
	Se utiliza XHTML 1.0 Transitional, así que ojo con la sintaxis.
	Imagina que estamos en el 1996 maquetando HTMLs.
	Este fichero está guardado utilizando el encoding utf-8.
	Las anteriores propiedades del body darán error en un validador. Son para Outlook :-0 -->

	<!-- La siguiente tabla es en realidad el <body> para los web mails: gmail, hotmail, yahoo, etc. Si algún atributo existe en HTML, utilízalo en vez de usar CSS. Y si usas CSS que sea SIEMPRE en línea. Hay que utilizar los 6 caracteres para el color hex -->
	<center>
	<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FAFAFA">
	<tr>
	<td align="center" valign="top">

	<!-- La siguiente tabla será el cuerpo del email. 600px suele ser el máximo ideal para todos los clientes de correo. Se aconseja también utilizar un borde para el contenido y, si se quiere, un margen arriba y abajo. -->
	<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#FFFFFF" style="border-collapse: collapse;border:1px solid #AAAAAA;margin-top:10px;margin-bottom:10px; font-family:sans-serif; color: #333333;">
	<tr>
	<td align="center" valign="top" style="padding:20px 30px 20px 30px; text-align:center;">
	<strong>Cabecera</strong>
	</td>
	</tr>
	<tr>
	<td align="center" valign="top" style="padding:0px 0px 0px 0px">
	<!-- Para insertar una imagen en un email. No olvides el alt ya que por defecto los gestores no mostrarán las imágenes. -->
	<img src="http://placehold.it/600x200.jpg" alt="Describe la imagen." width="600" height="200" border="0" style="display:block; border:0; height:auto; outline:none;" />
	</td>
	</tr>
	<tr>
	<!-- Para el padding hay que usar los 4 valores.
	Se recomienda un line-height alto para mayor claridad. Cada vez más la gente lee los correos en el móvil. Tenlo en cuenta.
	Utiliza <b> para texto en negrita y <i> para el texto en itálica
	En cada enlace pon los estilos en línea -->
	<td align="justify" valign="top" style="padding:20px 30px 20px 30px; line-height:150%; text-align:justify;">
	<b>Chocolate bar brownie liquorice</b>. Gummies brownie croissant tart sesame snaps oat cake fruitcake. Fruitcake carrot cake biscuit toffee croissant. Dragée pie jujubes topping liquorice tiramisu halvah icing sugar plum. <a href="http://www.google.es" style="text-decoration:none; color:#2BB874;">Applicake pie gingerbread</a> cotton candy jelly-o muffin jujubes pie lollipop. Tootsie roll apple pie chupa chups biscuit. Pudding applicake dragée muffin gummies carrot cake. Lollipop candy bear claw dragée chocolate bar tart. Jelly sweet roll cheesecake tiramisu.
	</td>
	</tr>
	<tr>
	<td align="justify" valign="top" style="padding:0px 30px 20px 30px; line-height:150%; text-align:justify;">
	Wafer gummies applicake dessert muffin lemon drops. <i>Croissant</i> bear claw candy. Bear claw sugar plum marshmallow chupa chups donut tiramisu cheesecake toffee gingerbread. Applicake oat cake cotton candy.
	</td>
	</tr>
	<tr>
	<td align="justify" valign="top" style="padding:0px 30px 20px 30px; line-height:150%; text-align:justify;">
	Jelly beans jujubes <i>dragée</i> chupa chups. Apple pie liquorice candy soufflé jelly-o croissant bonbon pie. Gummi bears tiramisu gummi bears tart toffee. Brownie toffee macaroon liquorice applicake soufflé. Cookie apple pie applicake icing muffin. Danish halvah lemon drops. Halvah cotton candy tootsie roll sweet roll ice cream. Pie cake carrot cake sesame snaps pudding cookie tiramisu dessert unerdwear.com.
	</td>
	</tr>

	<!-- Ejemplo de texto a dos columnas.
	La anchura de 255px sale de 600 - 60 (padding izq y dch) - 30 (columna separadora) / 2columnas = 255px -->
	<tr>
	<td align="justify" valign="top" style="padding:20px 30px 20px 30px; line-height:150%;">
	<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF" style="border-collapse: collapse;font-family:sans-serif; color: #333333;">
	<tr>
	<td align="justify" valign="top" width="255" style="text-align:justify;">
	Donut dessert soufflé. Applicake apple pie topping apple pie liquorice muffin danish. Jelly toffee <a href="http://www.google.es" style="text-decoration:none; color:#2BB874;">gummi bears</a> bear claw macaroon bonbon carrot cake. Oat cake jujubes dragée danish applicake jujubes.
	</td>

	<!-- Así se hace una columna que solo sirve de separación. No olvides el   -->
	<td height="30" width="30" style="font-size:0; line-height:0;"> </td>

	<td align="justify" valign="top" width="255" style="text-align:justify;">
	Croissant candy lollipop fruitcake sesame snaps <a href="http://www.google.es" style="text-decoration:none; color:#2BB874;">candy carrot</a> cake chupa chups. Cake jujubes toffee pastry marshmallow carrot cake. Gingerbread sweet roll croissant sweet roll carrot cake chupa chups jelly beans lemon drops. Sweet roll danish liquorice chocolate bar.
	</td>
	</tr>
	</table>
	</td>
	</tr>
	<tr>
	<td align="center" valign="top" style="padding:20px 20px 20px 20px; color:#707070;">
	<small><i>© Pie del mail. Reservados todos los derechos y tal.</i></small>
	</td>
	</tr>
	</table>

	</td>
	</tr>
	</table>
	</center>

	<!-- Por último:
	1. Pasa los textos por un convertidor http://www.web2generators.com/html/entities para utilizar HTML entities cuando proceda.
	2. Si quieres establecer tamaños para los textos hazlo en px. Lo mejor es no utilizar tamaño para que se ajuste pero si hay que diferenciar tamaños entre textos, no queda otra. Recuerda que hay <small> y <strong>
	3. Es mejor utilizar familias de letra sans-serif (son más claras) y mejor aún utilizar font-family: sans-serif sin especificar ninguna en concreto. Verdana, Arial, Helvetica y "Trebuchet MS" son las más recomendables.
	4. Valida el código en http://validator.w3.org/. Este documento dará los 5 errores de los atributos del body.
	5. Borra todos los comentarios
	6. Haz las pruebas necesarias en los clientes de correo que te pidan.
	7. Una aproximación para Outlook es abrir los HTMLs con Word. Pero no te fies 100%.
	-->
	</body>
	</html>