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.

No todo lo 'Fake' es malo

No Todo lo 'Fake' es malo

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.

Instalación y Configuración

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).

Pruebas de Funcionamiento y Uso

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.

  • Formulario HTML.
  • Un servidor web con php.

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.

Actualización 21/06/2016

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

Descargar

[download id=”879″]

Referencias

Paleta de Colores
Método .click() jQuery
Método mail PHP
jQuery.ajax()
filter_var PHP
filter_sanitize PHP

18 Essential Plugins to Get More Out Of Sublime Text – Hongkiat

Even though SublimeText comes with a bunch of great features that help our work as web developers, like any other tool, there will always be a room for enhancements. This is when plugins can be real useful (and we are huge fans of plugins). Before we proceed, maybe

Origen: 18 Essential Plugins to Get More Out Of Sublime Text – Hongkiat

5 de los mejores plugins para crear Formularios de Contacto para WordPress | GeeksRoom

Una parte importante del blog para que los lectores se puedan comunicar con ustedes los webmasters o editores es la página de contacto. En esa página de contacto en su blog pueden tener una dirección de email para que el usuario haga clic y con su cliente de email les envíe directamente un email o algo más profesional y mucho más cómodo para el lector, un formulario de contacto. En WordPress hay muchos plugins que permiten agregar un formulario de contacto y 5 de los mejores son los siguientes, Contact Form 7 Es el que utilizamos en este blog.  Ofrece muchas características y permite al usuario crear un formulario personalizado.  Si no quieren personalizar, viene con un formulario preestablecido que solicita al lector escribir su nombre (obligatorio), dirección de email (obligatorio), página web (opcional) y la caja de texto para escribir el mensaje.  Ahora no es algo fácil de personalizar intuitivamente, pero muestran varios ejemplos como para en poco tiempo poder crear uno formulario

Origen: 5 de los mejores plugins para crear Formularios de Contacto para WordPress | GeeksRoom

Cómo usar Dashicons en WordPress

Desde WordPress 3.8 tenemos a nuestra disposición los maravillosos Dashicons pero ¿sabes cómo utilizarlos?

Los Dashicons son iconos a partir de fuentes que se pueden utilizar en publicaciones, temas, plugins o incluso la interfaz de administración de WordPress para sustituir a imágenes, mucho más pesadas. Además, los Dashicons son totalmente escalables en tamaño al ser vectores, por lo que se adaptan de maravilla a todo tipo de resoluciones de pantalla sin perder calidad.

Ahora bien, usarlos no es tan fácil como contarlo.

Añadir soporte de Dashicons

Antes de nada debes hacer que tu tema soporte Dashicons, para lo que debes ir al fichero functions.php del mismo y añadir lo siguiente:

WordPress ya soporta Dashicons así que para otros usos no necesitas nada más. Esto es necesario para que el tema muestre Dashicons.

Cómo añadir Dashicons en temas y plugins

Si vas a añadir, por  ejemplo, tipos de entrada personalizadas en un tema de tu creación lo ideal es que las distingas mediante un icono específico que las distinga del resto.

El primer paso es ir a la página oficial de Dashicons de WordPress, donde elegirás el icono a utilizar haciendo clic sobre el mismo para, a continuación copiar el código que necesitas para incorporarlo en tu tema, normalmente en CSS, aunque también ofrece obtener el HTML o incluso el glifo.

Apuntas el nombre del icono y lo añades a la función de tu tipo de entrada personalizada, así:

La etiqueta o descripción es la que tu quieras, solo tienes que definir la variable menu_icon con el nombre del Dashicon elegir, en el ejemplo “dashicons-book-alt”.

Lo que conseguimos es que nuestro tipo de entrada personalizada se identifique en el escritorio de WordPress con un bonito icono de un libro.

Si lo que queremos es añadir un icono distintivo a una página de ajustes de un plugin el proceso es parecido. Lo primero es elegir el icono, como antes, y a continuación añadimos el nombre del mismo a nuestra función del plugin que añada la página de ajustes, por ejemplo. Algo así:

 Cómo usar Dashicons en un menú personalizado de WordPress

Pero no solo para desarrolladores están hechos los Dashicons, sino que podemos usarlos donde queramos. Un uso muy interesante sería en un menú personalizado, que quedará mucho más chulo si lo acompañamos de  un bonito icono.

Una vez elegido el icono a utilizar, de nuevo de la página de Dashicons vista al principio de este artículo, en esta ocasión copiamos el código HTML.

Lo siguiente es aplicar la segunda variante del truco que ya vimos para usar imágenes en los menús personalizados de WordPress, solo que en este caso el código a utilizar será el que nos facilita la página de Dashicons, así de simple.

A modo de recordatorio, el proceso es este:

  1. Crea un elemento nuevo de menú en el que en la denominada Etiqueta de navegación, en vez de poner el típico texto, simplemente pega el código HTML del Dashicon.
  2. La URL del elemento del menú será el que tu quieras, por supuesto.
  3. Guarda los cambios.

Cómo usar Dashicons en cualquier otro sitio

Creo que es bastante obvio que puedes usar Dashicons en cualquier parte. Copiando el código HTML puedes añadirlos para ilustrar tus publicaciones, como elementos meta en tu tema mediante CSS o HTML, lo que quieras.

Si vas a utilizarlos como elemento común en tu tema simplemente crea una clase CSS para su uso posterior en el tema, y si los usas puntualmente simplemente utiliza el HTML donde quieras mostrarlos.

Para incorporar un Dashicon en tu CSS podría ser algo así:

Para tus publicaciones, puedes copiar y pegar el HTML del icono a usar o, si los usas mucho, incluso instalar un plugin como JM Dashicons Shortcode que te facilita la inserción de iconos en tus entradas o páginas.

desde Ayuda WordPress http://ift.tt/1E2ZIy3
via IFTTT

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

Crea tu propio plugin SEO

Siempre estamos con la discusión de cuál es el mejor plugin de SEO, que si el de Yoast porque tiene más cosas, que si el All in one SEO pack porque no falla nunca, que si Fernando está loco, que si meto las tags manualmente, etc. Pero ¿y si creas el tuyo propio? Así que basta de debates estériles y discusiones inútiles de a ver quién la tiene más larga y manos a la obra a crear un plugin SEO básico que añada las descripciones meta y un título para Open Graph con su descripción a la cabecera de las … Sigue leyendo que hay más

desde Ayuda WordPress http://ift.tt/1iO0oZo
via IFTTT

Las tablas de la base de datos de WordPress ¿cuáles son? ¿para qué sirve cada una?

Hace algún tiempo atrás, necesitaba hacer un Query SQL directa a la base de datos de wordpress y como era muy novel en términos de bases de datos y sobre todo en la estructura de wordpress me di mil vueltas buscando la información que necesitaba, hasta que por fin en la encontré en el codex de wordpress y en una imagen que describe la relación entre cada tabla, me pareció tan útil que se convirtió en un enlace favorito dentro de mi navegador para tener a disposición esta información cuando la requiera, es de este modo que comparto con ustedes dicho link.

A continuación una descripción de cada tabla, para acercarnos un poco mas a la filosofía de wordpress.

[table caption=”TABLAS DE WORDPRESS 3.8/3.9 (11)” colwidth=”20|100|50″ colalign=”left|left|center|left|right”] NOMBRE DE TABLA,DESCRIPCIÓN
wp_commentmeta,Cada comentario incorpora datos llamados meta data que se almacenan en wp_commentmeta.
wp_comments,Los comentarios de WordPress se almacenan en la tabla wp_comments
wp_links,En la tabla wp_links se guarda la información relativa a los enlaces añadidos en la funcionalidad de Enlaces de WordPress obsoleta actualmente aunque puede volver a usarse con el plugin Links Manager.
wp_options,Los ajustes que se configuran en la página de Ajustes de la administración de WordPress se almacenan en la tabla wp_options.
wp_postmeta,Cada entrada contiene información denominada data que se almacena en la tabla wp_postmeta. Hay plugins que también añaden su propia información a esta tabla.
wp_posts,Las entradas páginas y elementos de menú se guardan en la tabla wp_posts.
wp_terms,Las categorías tanto de las entradas como de los enlaces y las  etiquetas de las entradas se almacenan en la tabla wp_terms.
wp_term_relationships,Las entradas y enlaces están asociadas a categorías y/o etiquetas de la tabla wp_terms y esta asociación se guarda en la tabla wp_term_relationships.
wp_term_taxonomy,Esta tabla describe la taxonomía (categoría enlace o etiqueta) de cada línea de la tabla wp_terms.
wp_usermeta,Cada usuario contiene información denominada data y se almacena en la tabla wp_usermeta.
wp_users,La lista de usuarios se guarda en la tabla wp_users.
[/table]

 

WP3.8-ERD

 

Para mas detalles les recuerdo que toda esta información (descripción de las tablas e imagen de las tablas) están disponibles en el codex de wordpress relativo a la base de datos.