Como probar envios de email en servidor local

En varias ocasiones he programado aplicaciones y paginas web que notifican mediante un correo electrónico ciertas acciones o sucesos (envíos de formularios de contactos, inicios de procesos automáticos, etc.), esto con el tiempo se ha vuelto común para mi, pero en algún momento debí realizar las pruebas necesarias para verificar el correcto funcionamiento es ahí cuando me surgió una necesidad, como probar el envío de email desde mi servidor local.

Como muchos sabrán, para poder enviar email mediante una pagina web, por ejemplo, requerimos que el servidor en cuestión cuente con un servidor de email correctamente configurado, esto es un hecho en la mayoría de Web Hosting, pero si desarrollamos en ambientes locales, como podría ser nuestro propio computador, ejecutando un simple servidor web, esto se vuelve un poco mas complejo. A primera vista necesitamos instalar y configurar un servidor de email, pero esto no es una tarea simple a pesar de existir mucha literatura disponible en internet.

[symple_heading style=”dashed-line” title=”No todo lo ‘Fake’ es malo” type=”h2″ font_size=”” text_align=”left” margin_top=”30″ margin_bottom=”30″ color=”undefined” icon_left=”fa-exclamation” icon_right=””]

Teniendo claro lo anterior, sabemos que intentar instalar un servidor de email “solo para realizar pruebas locales”, no es sensato, entonces ¿Como podemos realizar las pruebas?, y pare responder esto les presento una sencilla, simple y extremadamente útil aplicación llamada FakeSMTP, con ella podremos “emular” un servidor de email y ver como se envían nuestras pruebas.

[symple_heading style=”dashed-line” title=”Instalación y Configuración” type=”h2″ font_size=”” text_align=”left” margin_top=”30″ margin_bottom=”30″ color=”undefined” icon_left=”fa-cogs” icon_right=””]

Por suerte es una aplicación realmente fácil de empezar a utilizar, esta escrita en java, por tanto su uso en distintos Sistemas Operativos esta garantizada, obviamente el requisito mínimo es tener instalada la alguna versión de java.

Vamos a su pagina web disponible aquí y procedemos a descargar la aplicación (es un archivo con extensión .jar comprimido). Al momento de escribir este post se encuentra disponible la versión 2.0, lo descomprimimos en una carpeta fácil de encontrar y ejecutamos la aplicación, si no les reconoce de inmediato pueden usar la opción de abrir con y seleccionar java.

Abrir como

Cuando la aplicación este cargada deberán ver algo similar a lo siguiente:

FakeSMTPLo único a configurar seria la ubicación donde se guardaran los mensajes haciendo clic en la caja de texto llamada Save message(s) to, seleccionamos un lugar (yo elijo el mismo lugar donde esta el programa), y luego presionamos Start Server, por defecto el puerto es 25 y no es necesario cambiarlo, a menos que les de algún problema o tengan otro servicio en ese puerto, si cambian el puerto del programa deberán cambiarlo en la configuración del servidor web, que por defecto se configura en el puerto 25, autorizan la petición de excepción del firewall si se trata de windows y ya estamos listos para realizar las pruebas.

Por si no lo leyeron en la pagina principal del programa o no lo intuyen por el nombre, les digo, esto no es un servidor de email como tal, lo que hace es interceptar la comunicación del puerto del servidor de email (por defecto 25 para servidores SMTP).

[symple_heading style=”dashed-line” title=”Pruebas de Funcionamiento y Uso” type=”h2″ font_size=”” text_align=”left” margin_top=”30″ margin_bottom=”30″ color=”undefined” icon_left=”fa-flask” icon_right=””]

Ahora que tenemos nuestro servidor falso de email, podremos realizar cuantas pruebas queramos, y para demostrar su eficacia lo usare con este post y veremos que sucede.

Completamos el formulario y lo enviamos

screenshot.2

screenshot.3

Una vez realizado el envío del formulario podemos ver nuestro “FakeSMTP” y podremos ver como ya registro el envío y nos da claras señas de ello.

screenshot.4

Si contamos con un cliente de email como Microsoft Outlook o Thunderbird instalado bastara con hacer doble clic en el registro de nuestro interés y el mensaje se desplegara en el cliente de correo.

screenshot.6

Y como pueden observar todo ah funcionado perfectamente y ya contamos con un medio para verificar nuestros envíos por email en entornos locales sin necesidad de complicarnos la existencia. Si no contamos con un cliente de email instalado el programa nos permite ver el fuente de los email “enviados” tan solo presionando la pestaña llamada Last message y podrán visualizar la estructura básica del mail.

screenshot.7

Si desean presentar las pruebas del envió a otra persona, como podría ser un cliente (para que apruebe la estructura), o un Jefe de Proyecto (siempre molestan xD), recuerden que en los primeros pasos configuramos donde guardar los mensajes y si navegamos a ese directorio, encontraran un archivo con extensión eml por cada prueba realizada que pueden adjuntar por correo de ser necesario.

screenshot.5

Espero les pueda servir o ayudar de algo la información presentada aquí, si desean compartir su experiencia, aportar o incluso reclamar, no duden en comentar mas abajo, saludos cordiales.

Envío de formularios web por email con PHP y jQuery AJAX

Hace algún tiempo publique una entrada para crear un formulario multi pasos con html, jquery y css3. Pero nunca explique cómo enviar ese formulario y he recibido varias consultas preguntando eso, así que por fin le dedique un poco de tiempo y crearemos un sencillo script php para el envío de formularios web por email con PHP y jQuery AJAX.

Que necesitamos?

Un formulario (obvio) incluso podría usarse el formulario multipasos ya explicado en esta entrada, pero para fines practico crearemos uno mas simple, pero el método es aplicable a cualquier formulario.

[symple_bullets style=”check”]

  • Formulario HTML.
  • Un servidor web con php.

[/symple_bullets]

Nuestro formulario

Los mas suspicaces notaran que no existe la etiqueta form y esto no es un error del todo, semanticamente no seria correcto si lo validamos con el w3c, pero lo podemos resolver eligiendo el doctype mas adecuado, en este caso html5, así que lo agregamos a nuestro documento html.

Bien y el resultado seria mas menos lo siguiente:

screenshot.1Mmmm, realmente es un formulario muy básico xD, pongamos un poco de color ayudados por css.

Creamos un nuevo documento con extensión .css yo lo llamare style.css (que original).

Ahora nuestro formulario si luce bien.

screenshot.1

Pero un momento, si el formulario no tiene la etiqueta <form></form>  como enviaremos el formulario sin el atributo action?. La respuesta es bien simple… Con Jquery Ajax por supuesto. Podemos crear un Archivo independiente para el script Jquery o integrarlo en la cabecera de nuestro documento html dentro de una etiqueta  <script type="text/javascript">  , yo lo incluiré dentro del documento.

Primero  declaramos un document ready $(document).ready(function(){});  y dentro programamos las validaciones básicas.

El código esta fuertemente comentado, por tanto no lo explicaré detalladamente (si existen dudas o incluso pueden aportar mejoras, comentarlas).

Debemos realizar las validaciones del lado del cliente antes que se envíe el formulario y presentar los errores si es que existen, para ello activamos nuestras validaciones con el método .click de jQuery, en términos mas simples, nuestro código jQuery se activara una vez realicemos un clic al botón enviar.

Usando los selectores de jQuery, vigilamos la acción .click()

La primera parte ya esta hecha, pero al probar el formulario nos daremos cuenta que no realiza ninguna acción, si vemos la consola del navegador observaremos este error:

Error jQueryEsto se produce por no haber agregado la llamada a la librería de jQuery, asi que procedemos a incluirla en la cabecera de nuestra pagina  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">  ahora al volver a probar nuestro formulario e intentar enviarlo sin completar los campo se iluminan los bordes con un color rojo indicando un error y si completamos los campos iluminados estos se restablecen.

validacíon jQueryBien ahora ya validamos correctamente, pero cuando realizamos el envío no sucede nada, pues bien ahora lo resolveremos.

Para enviar los datos por email, usaremos el método mail() de PHP, este método de php es lo mas básico que podríamos implementar y mas sencillo.

Desde nuestro script jQuery mediante ajax enviaremos los datos del formulario a nuestro nuevo archivo php (contact_me.php) para procesarlos y enviar el mail (al fin).

Agregamos los siguiente a nuestro script después  del método .eatch().

Ahora crearemos el archivo contact_me.php  y agregamos el siguiente código.

Ahora ya podemos realizar un prueba del envío. No olviden cambiar la dirección de email donde llegaran los mensajes en la linea 4 del archivo contact_me.php.

Otra cosa importante es el hecho que si prueban el formulario en un servidor local no les llegara el mensaje al correo configurado y si miran la consola del navegador verán un mensaje similar al siguiente.

Esto es por que nuestros computadores hogareños no cuentan con un servidor de email configurado para poder enviar los email a otros servidores (gmail,yahoo, etc), pero en un hosting publico no deberíamos tener problema.

[symple_heading style=”dashed-line” title=”Actualización 21/06/2016″ type=”h1″ font_size=”” text_align=”left” margin_top=”30″ margin_bottom=”30″ color=”undefined” icon_left=”fa-pencil-square-o” icon_right=””]

Para realizar pruebas en ambientes locales leer el siguiente post Como probar envios de eamil en servidor local

[symple_heading style=”dashed-line” title=”Descargar” type=”h3″ font_size=”” text_align=”left” margin_top=”30″ margin_bottom=”30″ color=”undefined” icon_left=”fa-download” icon_right=”fa-download”]

[download id=”879″]

Referencias

[symple_callout fade_in=”false” button_text=”Ver Referencia” button_url=”http://www.colourlovers.com/palette/132637/Odd_but_trendy” button_color=”blue” button_size=”small” button_border_radius=”3px” button_target=”blank” button_rel=”” button_icon_left=”” button_icon_right=””]Paleta de Colores[/symple_callout]

[symple_callout fade_in=”false” button_text=”Ver Referencia” button_url=”http://api.jquery.com/click/” button_color=”blue” button_size=”small” button_border_radius=”3px” button_target=”blank” button_rel=”” button_icon_left=”” button_icon_right=””]Método .click() jQuery[/symple_callout]

[symple_callout fade_in=”false” button_text=”Ver Referencia” button_url=”http://php.net/manual/es/function.mail.php” button_color=”blue” button_size=”small” button_border_radius=”3px” button_target=”blank” button_rel=”” button_icon_left=”” button_icon_right=””]Método mail PHP[/symple_callout]

[symple_callout fade_in=”false” button_text=”Ver Referencia” button_url=”http://api.jquery.com/jquery.ajax/” button_color=”blue” button_size=”small” button_border_radius=”3px” button_target=”blank” button_rel=”” button_icon_left=”” button_icon_right=””]jQuery.ajax()[/symple_callout]

[symple_callout fade_in=”false” button_text=”Ver Referencia” button_url=”http://php.net/manual/es/function.filter-var.php” button_color=”blue” button_size=”small” button_border_radius=”3px” button_target=”blank” button_rel=”” button_icon_left=”” button_icon_right=””]filter_var PHP[/symple_callout]

[symple_callout fade_in=”false” button_text=”Ver Referencia” button_url=”http://php.net/manual/es/filter.filters.sanitize.php” button_color=”blue” button_size=”small” button_border_radius=”3px” button_target=”blank” button_rel=”” button_icon_left=”” button_icon_right=””]filter_sanitize PHP[/symple_callout]

[symple_callout fade_in=”false” button_text=”Ver Referencia” button_url=”https://www.w3.org/” button_color=”blue” button_size=”small” button_border_radius=”3px” button_target=”blank” button_rel=”” button_icon_left=”” button_icon_right=””]W3C[/symple_callout]

HTML Inspector, define tus propias reglas para validar código HTML

HTML Inspector

HTML Inspector es un herramienta orientada a mejorar la calidad del código que tanto tú como tu equipo escribís en la parte front. Una de las principales ventajas es su simplicidad de uso y customización para definir las reglas que más os interesen “validar” del código. Se puede ejecutar directamente en navegador.

Con el validador del W3C guarda pocas similitudes. Son herramientas muy diferentes. Mientras que el del W3C es completamente estricto con sus advertencia y validaciones, con HTML Inspector podemos customizarlo para que cumpla una serie de reglas propias (guía de estilo del equipo, como por ejemplo, usar camelCase u otra notación). Por supuesto, mantiene toda la convecciones sintácticas que las recomendaciones W3C marcan (actualmente con HTML 5.1): elementos deprecated o atributos, así como los nuevos componentes.

Es totalmente extensible y más que un último proceso de validación sirve como guía de desarrollo. Escribir un código coherente entre todos los miembros del equipo es complicado, por eso HTML Inspector ayuda a tomar convenciones comunes.

HTML Inspector es un complemento ideal para usar con JSLint y CSSLint, todos ellos totalmente extensibles.

Para poder instalar HTML Inspector tenéis distintas alternativas: simplemente importar el JS sobre vuestro HTML y probarlo; o usar npm o bower para descargar e importar; también se puede hacer uso de grunt para utilizar su implementación el código.

Github | HTML Inspector


La noticia HTML Inspector, define tus propias reglas para validar código HTML fue publicada originalmente en Genbeta Dev por Txema Rodríguez .



desde Genbeta Dev http://ift.tt/13IOm2w
via IFTTT

bWAPP, Aprende y Practica Seguridad Web Con Esta Aplicación

bWAPP ayuda a entusiastas de la seguridad, desarrolladores y estudiantes a descubrir y prevenir vulnerabilidades web. bWAPP prepara para llevar a cabo pruebas de intrusión y proyectos de hacking ético con éxito.

Pero ¿qué hace bWAPP tan único? Bueno, tiene más de 60 bugs web! Cubre todas las principales vulnerabilidades web conocidas, incluyendo todos los riesgos del proyecto OWASP Top 10.

bWAPP es una aplicación PHP que utiliza una base de datos MySQL. Puede ser alojada en Linux y Windows utilizando Apache/IIS y MySQL. Se puede instalar con WAMP o XAMPP.

Otra posibilidad es descargar bee-box, una VM personalizada pre-instalada con bWAPP.

Este proyecto es parte del proyecto ITSEC GAMES. ITSEC GAMES es un enfoque divertido para la educación de TI de seguridad. Seguridad informática, hacking ético, la formación y la diversión … todo mezclado.

Algunas características de esta suite:

  • Injection vulnerabilities like SQL, XML/XPath, SSI, LDAP, HTML, CMD and SMTP injection
  • Cross-Site Scripting (XSS), Cross-Site Tracing (XST) and Cross-Site Request Forgery (CSRF)
  • Unrestricted file uploads and backdoor files
  • Authentication, authorization and session management issues
  • Arbitrary file access and directory traversals
  • Local and remote file inclusions (LFI/RFI)
  • Configuration issues: Man-in-the-Middle, Cross-domain policy file, information disclosures,…
  • HTTP parameter pollution and HTTP response splitting
  • Denial-of-Service (DoS) attacks
  • HTML5 ClickJacking, Cross-Origin Resource Sharing (CORS) and web storage issues
  • Unvalidated redirects and forwards
  • Parameter tampering
  • Insecure cryptographic storage
  • Server Side Request Forgery (SSRF)
  • HTTP verb tampering
  • AJAX and Web Services issues (JSON/XML/SOAP)
  • Local privilege escalation
  • Cookie poisoning
  • PHP CGI remote code execution
  • Insecure WebDAV and FTP configurations
  • XML External Entity Attacks (XXE)
  • Fuzzing possibilities
  • Form-based authentication and No-authentication modes
  • and much more…

[symple_box color=”yellow” fade_in=”false” float=”center” text_align=”left” width=””]
Web Oficial – bWAPP
[/symple_box]

[symple_box color=”yellow” fade_in=”false” float=”center” text_align=”left” width=””]
Web del proyecto – Sourceforce
[/symple_box]

 

Detectar el país de origen del visitante web con JQuery

Un método bastante sencillo para detectar el país (sin necesidad de utilizar alguna clase php o similares) del usuario que esta entrando en nuestra web, es usando la API de wipmania. Este es un servicio web gratuito de Geolocalizacion ip (ademas cuenta con un plugin para firefox por si a alguien le interesa xD), por medio de jQuery realizaremos una consulta a este servicio y obtendremos unos cuantos parámetros como son: latitud, longitud, zoom, dirección, ciudad, país, código del país, región.

Si copiamos y pegamos en nuestro navegador directamente la url “http://api.wipmania.com/jsonp?callback=?” notaremos de inmediato como retorna información utilizable para cumplir con el objetivo de geo referenciación. Ya solo hace falta utilizar JSON para recuperar los con jQuery de la siguiente forma:

Para conocer mas parámetro deben visitar la pagina del api de wipmania, deben recordar que es un servicio gratuito por lo que tendrá mas de algunas limitación, específicamente la cantidad de consultas que podemos realizar, pero para pequeños proyectos no esta nada mal y si les interesa el servicio pueden adquirir una membresía profesional o corporate.

Obtener dirección IP con jQuery

Si queremos conocer nuestra dirección IP mediante jQuery podemos utilizar la función getJSON, esta hace una petición de datos al servidor que retorna la información con notación JSON.

Para llevar a cabo esto utilizaremos un servicio gratutio disponible en http://getjsonip.com

Función para mostrar ip con jQuery:

Pueden probar ingresando directamente la dirección http://jsonip.com?callback=? en su navegador y veran como retorna la ip en notación json, asi con la función descrita arriba podrán usarla en sus aplicaciones web, mobile o para probar en ambientes de desarrollo.

espero les sea útil.

Formulario multi pasos con CSS y Jquery

Vamos a ver la forma de crear una sencillo formulario  del tipo multipaso, muy útil cuando tenemos formularios muy extensos o con demasiados campos, utilizaremos Jquery easing para animar la transición de las diferentes etapas o partes de las que se compondrá y le daremos el toque artístico con un poco de CSS (no esperen mucho, no soy bueno para el CSS).

Bueno lo primero sera confeccionar nuestro formulario, para ello utilizaré el siguiente código, el cual no presenta secretos.

En primer lugar definimos la cantidad de pasos para confeccionar una barra de progreso, para mantener informado al usuario y evitar que deje el formulario abandonado y perdamos trafico,  en este ejemplo serán 3 (Configurar tu cuenta, Perfil Social y Detalles Personales).

La barra de progreso sera una simple etiqueta ul  con un id llamado progreso, con sus correspondientes etiquetas li (tantas como pasos tenga el formulario) [highlight color=yellow]no olvidar asignar la clase active al primer li[/highlight] que mediante jQuery y CSS posteriormente la dotaremos de vida.

Luego de definir los step o pasos del formulario, creamos diferentes campos fieldsets para contener cada paso y dentro todo lo que se requiera (inputs, h2, h3, p, label, etc).

En cada fieldset, adicional a los campos que requiramos, debemos agregar un input tipo button para avanzar de paso en paso y otro para retroceder (según corresponda), por tanto en este ejemplo necesito agregar uno el primer fieldset para avanzar, dos al segundo y uno para retroceder en el ultimo junto a uno tipo submit.
Si probamos el código obtendremos una simple pagina de fondo blanco con un formulario donde veremos todos los campos así.

formulario_sin_estilo

Un toque de sensibilidad

Ahora lo principal es hacer mas vistoso nuestro formulario, para ello sacamos nuestros dotes artísticos (mas de alguien fumara algo para encontrar su inspiración xD) y nos zambullimos en CSS, yo no tengo estudios formales en CSS, pero la web es basta y repleta de información al respecto, al final de este articulo les dejare algunos link relacionados para el que desee profundizar alguno de los temas tratados en este post.

Primero importaremos una fuente tipografica desde el CDN de fuentes de google, yo usare la fuente Montcerrat, pero pueden usar la que estimen, desde google fonts podran navegar, buscar y elegir la que mas les agrade.

Un pequeño reset de estilos al documento,  sera muy básico.

Altura del documento html y aplicamos un combo de imagen como patern + gradient, cave señalar que la mayoría de CSS que usaremos, no aplica en internet explorer, esto debido a su incompatibilidad con esta versión de CSS 3 (pero bueno a quien le importa esos dinosaurio xD).

A pesar que mencione que no funcionaba bien en internet explorer  debemos asegurarnos que los otros navegadores entiendan nuestra codificación de estilos y para ello utilizaremos los prefijos para sus respectivos motores de render:

[checklist]

  • -webkit- : Para la familia Chrome / Chromium y Safari
  • -moz- : Para Mozilla Firefox y derivados
  • -o- : Para Opera (o si, aun existe)
  • -ms-: Para internet explorer 9 (pero linear-gradient no funciona bien en ie)

[/checklist]

Aplicamos la fuente importada

Ahora el formulario y su contenido

Solo resta la parte superior del formulario, donde se marcan los pasos:

Con esto hemos terminado la parte “artistica” de nuestro formulario. Si probamos nuestro formulario notaran que se ve bien esteticamente, que solo vemos la primera parte del formulario, pero al darle click al boton Next, no pasa nada, ahora le daremos vida con un poco de JQuery.

Crearemo un nuevo archivo con extension js, llamenlo como quieran, yo lo llamare funciones.js

Ahora si hemos terminado, si desean que su formulario envié deben editar la ultima función del script.

Adicionalmente deben refererciar al plugin easing porque ocuparemos uno de sus metodos para animar nuestro formulario.

A continuacion les dejare un enlace con una demo de este formulario y un link donde podrán descargar el ejemplo completo listo para usar o editar a su conveniencia.

Referencias

[box type=mojo size=large]

w3schools.com: http://www.w3schools.com/css/css3_gradients.asp

Google Fonts: https://www.google.com/fonts

la imagen que use de gradient : http://www.colourlovers.com/

[/box]

Demo

Ver Demostración

Descargar ejemplo

[download id="609"]

Efecto Loading mientras carga nuestra pagina web

Crear un efecto de “cargar página” o “loading” en JQuery mientras se van cargando todos los elementos de la página web es realmente sencillo (aunque cuando me toco por primera vez hacerlo, no me lo parecía xD) gracias a la función load() de jQuery.

Ahora un ejemplo sencillo y básico que puedes customizar con css de mil formas.

  • Insertamos un div con id “cargando” al principio o final de la etiqueta body de nuestra página web:

 


Y desde aquí ya va todo el contenido (divs, imágenes, etc…) de tu pagina …

  • Un poco de CSS al div que aparecerá primero por encima del resto de los elementos (con posición absoluta obviamente) hasta que se carguen todos los elementos del documento, que es cuando este div desaparecerá.

  • Escribimos un pequeño script dentro del “head” de nuestro documento, generalmente:

Este es un ejemplo sencillo de como hacer un cargador usando jquery, pero con un poco de imaginación y destreza con CSS puedes hacer un cargador de página mucho más original (Puedes crear diferentes imágenes de loading en http://www.ajaxload.info/).

[symple_highlight color=”blue”]Importante: La parte crucial de este sencillo loading es el uso de $(window).load() en lugar del clasico $(Document).ready()[/symple_highlight]

para que lo tengan mas claro pueden crear un documento html con imágenes y ver como se comportan ambas.

Descargar ejemplo completo:

[download id="602"]

Como saber cuando google bot visita nuestro sitio web

Sí deseas saber el momento exacto y por cuales páginas ha pasado el robot de google (Googlebot) en su o sus sitios web. Solo debes utilizar el siguiente código en el header del sitio y cuando el bot de google aparesca recibiran un email con la IP, navegador y url destino de la araña o robot de google.

Deben cambiar la dirección de email por la suya (obvio), si no les funciona puede ser que su hosting o servidor tengan la funcion mail de php truncada, en ese caso pueden usar la libreria phpmailer ampliamente documentada en internet:

y el correo que recibiremos sera parecido a la siguiente captura:

Paso de Googlebot