miércoles, 19 de octubre de 2011

PHP - Enviar un mail con archivos adjuntos

LLevo un día peleándo con este tema!
No quería utilizar librerías y no tengo demasiado experiencia en este tema. Así que, después de investigar por la red, he conseguido confeccionar un código que funciona bastante bien. Y lo más importante, es que he entendido que hace cada línea de código.
A veces, con las prisas nos dedicamos a copiar y pegar, pero al final siempre es un atraso pq. funciona pero no sabemos lo que hemos hecho ... es mucho mejor perder un poco de tiempo (si se dispone de él claro) y comprender.

HTML:

<form accept-charset="utf-8" action="GME__trabaja_con_nosotros.php" class="trabaja" enctype="multipart/form-data" id="formulario" method="post">

<input type="text" id="nombre" name="nombre" value="Nombre" />
<input type="text" id="apellido" name="apellido" value="Apellidos" />
<input type="text" id="email" name="email" value="e-mail" />
<input type="text" id="telefono" name="telefono" value="Telefono" />
<input type="file id="filead" name="filead" />
<input type="checkbox" id="condiciones" name="condiciones" />
<input type="submit" value="Enviar Formulario />

</form>

En la parte del HTML lo más importante es el "enctype" del form:
Para que podamos adjuntar archivos tiene que ser:
enctype="multipart/form-data"

Encontramos una excelente explicación en:
http://w3schools.com/tags/att_form_enctype.asp



PHP:

<?php

if ($_POST){

$num = md5(time());

//MAIL BODY
$body = “
<html>
<head>
<title>Formulario Trabaja con nosotros</title>
</head>
<body style='background:#EEE; padding:30px;'>
<h2 style='color:#767676;'>Trabaja con nosotros</h2>";

$body .= "
<strong style='color:#0090C6;'>Nombre: </strong>
<span style='color:#767676;'>" . $_POST["nombre"] . "</span>";

$body .= "
<strong style='color:#0090C6;'>Apellidos: </strong>
<span style='color:#767676;'>" . $_POST["apellido"] . "</span>";

$body .= "
<strong style='color:#0090C6;'>Email: </strong>
<span style='color:#767676;'>" . $_POST["email"] . "</span>";

$body .= "
<strong style='color:#0090C6;'>Teléfono: </strong>
<span style='color:#767676;'>" . $_POST["telefono"] . "</span>";

$body .= "</body></html>";

$_name=$_FILES["filead"]["name"];
$_type=$_FILES["filead"]["type"];
$_size=$_FILES["filead"]["size"];
$_temp=$_FILES["filead"]["tmp_name"];

if( strcmp($_name, "") ) //FILES EXISTS
{
$fp = fopen($_temp, "rb");
$file = fread($fp, $_size);
$file = chunk_split(base64_encode($file));

// MULTI-HEADERS Content-Type: multipart/mixed and Boundary is mandatory.
$headers = "From: GME <gme@garciamunte.com>\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: multipart/mixed; ";
$headers .= "boundary=".$num."\r\n";
$headers .= "--".$num."\n";

// HTML HEADERS
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
$headers .= "Content-Transfer-Encoding: 8bit\r\n";
$headers .= "".$body."\n";
$headers .= "--".$num."\n";

// FILES HEADERS
$headers .= "Content-Type:application/octet-stream ";
$headers .= "name=\"".$_name."\"r\n";
$headers .= "Content-Transfer-Encoding: base64\r\n";
$headers .= "Content-Disposition: attachment; ";
$headers .= "filename=\"".$_name."\"\r\n\n";
$headers .= "".$file."\r\n";
$headers .= "--".$num."--";

}else { //FILES NO EXISTS

// HTML HEADERS
$headers = "From: GME \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
$headers .= "Content-Transfer-Encoding: 8bit\r\n";
}

// SEND MAIL
mail("laroca73@gmail.com", "WEB - Trabaja con nosotros" , $body, $headers);

echo "<div class='ok'>
<strong>El formulario se ha enviado correctamente.</strong></div>";

}
?>

Aunque visto así, tan ordenadito parece muy fácil ... me costó mucho encontrar un ejemplo que funcionara y que explicara un poco qué estaba haciendo.

El principal problema que encontré es que era capaz de enviar un mail con texto, y un mail con archivo adjunto pero no encontraba la manera de enviar texto+archivo adjunto en el mismo mail.

La clave está en las cabeceras.
El Content Type tiene que ser: multipart/mixed.
Y tenemos que definir un "boundary", es un separador único que nos permite utilizar diferentes cabeceras dentro del mismo mail.
Podemos encontrar una buena explicación en: http://www.w3.org/Protocols/rfc1341/7_2_Multipart.html

Este código es la base o el patrón, a partir de él podemos customizar el envío de mails controlando el peso de los archivos que permitimos subir (Ej/5Mb) o bien el tipo de archivos (Ej/.zip, .pdf ..etc)



Podemos ampliar esta en información en:
http://www.w3schools.com/php/php_file.asp
http://www.w3schools.com/php/php_file_upload.asp

Espero que os sirva de ayuda!




miércoles, 12 de octubre de 2011

Estándares web

¿Porqué los navegadores visualizan las mismas páginas de diferente manera? 
Por los motores de renderizado.
Los motores de renderizado toman el contenido de marcado HTML o XML y lo interpretan de manera visual.
Los más famosos son:

- Gecko: de Mozilla Firefox.
- Webkit:  de Safari y Chrome.
- Trident:  de Internet Explorer.
- Presto:  de Opera.


¿Cúal es el valor de crear estándares?
La lucha por el posicionamiento de los navegadores web en internet ha tenido por muchos años un solo vencedor: Microsoft Internet Explorer.
El principal exponente de este hecho es que internet explorer venía instalado con windows de manera gratuita.
En la carrera de los navegadores (como en todas) se priorizó la búsqueda de nuevas funcionalidades sobe la reparación de errores, dando lugar a navegadores inestables, estándares de desarrollo web "movedizos", agujeros de seguridad y un sinfín de dolores de cabeza para los usuarios y programadores.
Estas formas quizás eran soportables hace varios años atrás, pero hoy en día el acceso a la web es cada vez más masivo y por diferentes grupos sociales, por este motivo se hace imprescindible para los desarrolladores apegarse a ciertas normativas que definan el cómo poder realizar los contenidos web mucho más accesibles a los usuarios finales.
Es aquí donde el W3C juega un papel fundamental definiendo ciertas recomendaciones (estándares) al momento de desarrollar sitios web para, de esta forma, asegurar el acceso equitativo a la información.


¿Hacía dónde va el desarrollo Frontend?
Desde el punto de vista tecnológico,
en cuanto nuestro querido internet explorer ponga al día su motor de renderizado (parece ser que será con ie9) podremos empezar a implementar código que ejecuta efectos 2D y 3D (sin javascript).

Pero el principal problema es que tenemos que concienciar al usuario y a las grandes empresas que tienen que dejar de utilizar ie7 e incluso ie6 (Microsoft ya ha anunciado que deja de dar soporte a esta versión de su navegador y anima a los desarrolladores para que ayuden en esta difícil tarea) !!!
Cómo? Cuando un cliente viene a pedir una web con un dragón rojo que despliega las alas y echa fuego por la boca y que se visualice correctamente en todos los navegadores y en todos los dispositivos (escritorio y móviles)  ... y le preguntas: Pero qué navegador utilizáis en vuestra empresa ?  ie7.
Nuestros clientes no son programadores web y por tanto, no saben las límitaciones tecnológicas que existen, tenemos que ayudarles y educarlos.

viernes, 7 de octubre de 2011

Intercambiar la hoja de estilos mediante eventos con JQuery

Para qué lo voy a explicar yo,  si en www.desarrolloweb.com ya lo hacen de manera sencilla y genial.

En esta entrega del Taller de jQuery Desarrolloweb nos presenta una aplicación sencilla para cambiar la hoja de estilos que una página está leyendo. Con ello cambiará totalmente la presentación de una web para que pase a mostrar unos estilos diferentes, definidos por otro archivo CSS. Como veréis, se trata de un truco bien sencillo pero que tendrá unos resultados radicales en el navegador del usuario.
La idea que utilizamos en este script, para implementar el objetivo de enlazar con otra hoja de estilos, se basa simplemente en acceder a la etiqueta LINK y cambiar el atributo href, para colocarla la ruta de la hoja de estilo nueva que se desea aplicar a la página.
http://bit.ly/pOdB4I

Una idea muy interesante que pienso aplicar en mi trabajo!