Autor: Luis Rodriguez

luis rodriguez Desarrollador web / webdeveloper / programador web / Front end / Back End. Mi nombre es Luis Rodriguez con experiencia de 7 años en negocios por internet y un apasionante del mundo de las tecnologias web. Twitter Facebook Google +

Generar Token de Seguridad Php Mysql

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Los token nos sirve para agregar un nivel mas de seguridad a nuestras aplicaciones web que se pueden llegar a utilizar en varios procesos donde el usuario interactúa.

pero para ser mas prácticos brindare un ejemplo y es de la típica sección de olvide mi contraseña que tiene cualquier sistema de ecommerce, blog, intranet, etc.

olvidecontrasena

el proceso de esta sección ya es muy conocida ingresamos nuestro correo y nos debería llegar un correo que puede ser que nos envié una contraseña aleatoria que es de mal gusto por cualquiera podría ingresar tu correo y ya te cambiaron la contraseña por eso un proceso idóneo es que te llegue un link desde donde podrías cambiar la contraseña y en ese proceso nos enfocaremos.

¿por que deberíamos usar entonces un token?

Pero para entender bien el motivo de utilizar entendamos el problema y es muchas web hacen la sección enviando URL parecidas a esta:

www.dominio.com/olvido-password.php?email=pepito@dominio.com

 

y te manda a la pagina para colocar una nueva contraseña y claramente así cualquiera que vea la URL y  sepa algo de informática se dará cuenta que la web tiene un tremendo agujero de seguridad.

Screenshot_1

¿que podemos hacer?

realmente si nos podemos a pensar un poco mas esto no debería ser un drama ya que con un simple token podemos zafar de este bug de seguridad.
entonces es simple esto ya que al momento de enviar el correo con el aviso al usuario creas una variable aleatoria que puede estar encriptado en md5, base64, etc.

www.dominio.com/olvido-password.php?email=NDUzNTM0NTM0NTM0NTM0NTM0NTc2NDY=

al tener el token lo guardas en un campo de la base de datos por ejemplo en la tabla usuarios en un campo token y enviamos por correo al usuario un link con el token,  cuando abra el usuario el link validamos de que si el token que enviado por GET existe o no.

Estas pequeñas cosas pueden mejorar la seguridad de tus aplicaciones espero que te ayude y si tienes dudas me puedes escribir.

 

 

 

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Crear un chat basico con pubnub

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Buen tiempo que deje de publicar articulos por un tema de tiempos pero ya que andaba metido en varios proyectos y en uno de ellos que aun lo llevo en marchar me toco realizar un chat y bueno con el ajax esto deje de ser un drama hace mucho tiempo. Pero si lo intentaste hacer en algun proyecto mediano o grande te habras topado con unos problemas por ejemplo: saturar el servidor con muchas peticiones, limite de conexiones a la base de datos si fuera el caso que estes guardando los chat, etc.

este problema se soluciono definitivamente con node.js que evita el problema de saturar el servidor por peticiones ya que siempre mantienen un puente donde escribe y lee y se mantiene abierto para esta conversacion.

pero podras instalarlo en tu servidor? probablemente no ya que no ocupa una caracteristica tecnica en tu proyecto  y usas una infraestructura LAMP  y es aqui donde PUBNUB viene a ayudarnos y solucionarnos la vida nos enfoca en programar y dejar del lado el lado tecnico del servidor.

se que siempre en mis articulos voy directo al codigo pero era necesario un poco de contexto para que entiendan bien para que viene el PUBNUB al mercado y no se milita a solo hacer chat de hecho puede ser usado para infinidades de cosas.

Entonces a programar!

chat-vista

tenemos esta estructura del chat que es muy similar al de facebook el codigo para esta ventana es (se usa bootstrap y jquery):

<div class="conversacion" style="display: block;">
<div class="ventana-cabecera"><i class="fa fa-circle" aria-hidden="true"></i> Luis Miguel Rodriguez Blas</div>
	<div class="ventana-cuerpo">
 
	   <div class="col-xs-12 el"><span>Broder, vao a pichangear!</span></div>
	   <div class="col-xs-12 yo"><span>sale y vale pero a las 10pm de lo contrario no la hago</span></div>
	   <div class="col-xs-12 el"><span>Broder, vao a pichangear!</span></div>
	   <div class="col-xs-12 yo"><span>sale y vale pero a las 10pm de lo contrario no la hago</span></div>
           <div class="col-xs-12 yo"><span>hola</span></div>
       </div>
       <div class="ventana-escribir">
	<form id="frm-chat">
	   <input type="text" class="form-control" name="" placeholder="Escribe tu mensaje...">
	</form> 
       </div>
</div>

y tenemos un input donde el usuario escribira y es desde donde se desencadenara todo el script pero primero realizamos la conexion del pubnub

/*conexion al servidor del pubnub*/
var pubnub = PUBNUB.init({
        publish_key: 'xxxxxxxxxxxx',
        subscribe_key: 'xxxxxxxxxxxxx'
    });

estos datos de publish_key y subscribe_key te los brindara al registrarse y crear un proyecto dentro de la web de pubnub.com
crear-pubnub

el siguiente paso es crear un canal que servira para la conversacion (puedes crear n cantidad de canales)

/*abrimos el canal*/
pubnub.subscribe({
          channel: 'chat-1',
          message: function(m){escribir_chat(m)} 
    });

ya tenemos el canal abiero de este medio y en message le pasamos una funcion que la llamamos escribir_chat() que lleva una variable donde enviaremos lo que nos pasa el usuario al chatear pero para tener mas claro vemos como procede el script desde el momento del enter en el input del chat.

/*aqui creamos el evento que cuando de ENTER en la input se dispare y llame a la funcion publish */
$("#frm-chat input[type='text']" ).keypress(function(e) {
        mensaje=$( "#frm-chat input[type='text']" ).val();
        if(e.which == 13) {
            publish(mensaje);
            return false;
     }
});

la funcion publish enviamos el dato escrito

/*el fin de la funcion es para decir al pubnub a que canal y que mensaje envia */
function publish(mensaje=null,input) {
        pubnub.publish({
            channel: 'chat-1',
            message: {"text":mensaje}
        });
    }

ahora insertamos al canal los datos enviados para que el usuario del otro lado del chat lo vea.

/*mandamos al canal y ejecutamos una funcion que escribira en el html */
pubnub.subscribe({
          channel: 'chat-1',
          message: function(m){escribir_chat(m)} 
 });

la funcion escribir_chat basicamente creara la linea de conversacion en el html del chat y se vera una fluidez de conversacion

function escribir_chat(m)
    {   
        console.log(m)
 
        if (m.text!="")
        { 
            var html='<div class="col-xs-12 yo">';
            html+='    <span>'+m.text+'</span>';
            html+='</div>';
            $(".ventana-cuerpo").append(html);
            $("#frm-chat input[type='text']").val(''); 
            /*esta linea es para que siempre la ventana div se mantenga en el bottom 0*/
            $(".ventana-cuerpo").scrollTop($(".ventana-cuerpo")[0].scrollHeight);
        }
 
    }

ya con esto tendras el chat funcionando y seguro te preguntas pero si solo creamos 1 venta de la conversacion como hacemos para el otro usuario que estara del otro lado?.
ejecuta su chat en 2 tabs del navegador al mismo tiempo y comienza escribir y veras que lo tienes todo.

realizare otro post mejorando este chat que estamos armando, espero que te ayude o te de mejor idea del pubnub y estoy abierto a sugerencias y mejoras de este chat que como menciono esta en una primera version basica.

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Experiencia de compra online en ripley.com.pe

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

nike-zapatillas-air-max-819474-01Ripley como suele hacer mando ofertas por 48 horas que en su pagina web y realmente encontre un producto que me gusto mucho que ya lo habia visto por tienda pero el precio no me animaba mucho pero al ver que realmente en la web si era un descuento llamativo me anime a comprarlo.

Experiencia de compra online en ripley.com.pe

Proceso de compra

Al seleccionar y tener mi producto ya en el carrito de compras procedi a comprarlo que es a lo que venimos! ya por experiencia se que puede que el delivery tome mucho tiempo asi que decidi recoger el producto en la tienda seleccionando esta opcion. screenshot_1 y cuando procedi a continuar me mando un mensaje “No se pudo consolidar las tiendas”  que realmente no entendi nunca el problema ya que pense que era por cosas raras del diablo y actualice la pagina pero nunca pude proceder con la compra por ese medio de retiro y tuve que selecciona despacho a domicilio que y me di con la sorpresa que tiene un costo estandar para enviar a cualquier distrito a 10 soles y  lo genial que era de un dia para otro y sin dudarlo mucho realice el pago en linea y finalizada la compra.

Me llegaron 2 correos:

  • Orden de compra
  • Comprobante electronico

en la orden de compra me llego con este texto que copio:

¡Gracias por preferir Ripley.com! Te enviamos los detalles de tu orden de compra. Recuerda que durante el día de la entrega podrás hacer SEGUIMIENTO A TU PEDIDO EN www.ripley.com.pe/seguimiento. Te recordamos que debes de estar presente para la entrega en el día y hora que indicaste durante tu compra. Si tienes alguna duda o inconveniente, por favor llámanos al 611-5959.

lo genial de todo el texto es que nos dan una forma de seguimiento a nuestro producto que se activa el mismo dia que te enviaran el producto y en tiempo real te muestra donde esta el producto.

solo el detalle que no es solo en ripley es mucho tiendas online que siempre te dan un rango mi largo de horarios para esperar el producto que esto te hace encerrarte en casa a esperar el producto.

Conclusión

Fue una experiencia gratificante pero podria mejorar en horarios de envio y reparar errores que tiene en la parte de entrega o pueda ser que sea algo que hice mal para habilitar la opcion entonces que sea mas facil de entenderlo.

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Como crear alertas en google analytics

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Por tiempo pueda que no estes siempre atendo a revisar lo que esta sucediendo con tu web pero  google analytics nos tiene una funcionalidad que nos mantendra actualizados por medio de correos,  estamos hablando de las alertas personalizadas que nos brinda muchas opciones para su configuracion y explicare como se configuran unas reglas basicas que deberias tenerlo activado.

Debes ingresar a tu cuenta google analytics en la pestaña administrador

screenshot_1

tendro tendras que seleccionar

  • cuenta
  • propiedad
  • vista 

ya dentro de vista tendra que busca una opcion de alertas personalizables.

screenshot_1

Listo! apartir de aqui ya podremos crear las alertas y crearemos 3 alertas

  • Alerta si en la web hay un error 404
  • Alerta si cae un 50% nuestras visitas
  • Alerta si  no hay trafico al dia.

Alerta si en la web hay un error 404

como sabemos google considerar este tipo de error para rankearnos y no deberiamos permitirnos este tipo de errores y con esta alerta podremos controlarlo cuando suceda.

Datos basicos

Configuración Valor
Nombre de la alerta errores 404 (puedes colocar cualquier nombre que te guie)
Aplicar a: dominio pre seleccionado
Periodo Dia
Enviarme un correo electrónico
cuando la alerta se active Incluir también
marcarlo (importante para recibir la alerta en nuestro correo)

Condiciones de alerta

Configuración Valor
Esto corresponde a Título de la página
condicion contiene
valor Pagina no encontrada 🙁   (debe ser el valor que tiene tu etiqueta <title></title>)
Configuración Valor
Alertarme cuando Número de visitas a páginas
condicion es mayor que
valor 1

Alerta si cae un 50% nuestras visitas

importante saber el momento que las visitan estan en caida y pueda ser por algun error de programacion, algun error al rediseñar y afectar la usabilidad, problemas con el servidor, etc.

Datos basicos

Configuración Valor
Nombre de la alerta cae 50% visitas(puedes colocar cualquier nombre que te guie)
Aplicar a: dominio pre seleccionado
Periodo Dia
Enviarme un correo electrónico
cuando la alerta se active Incluir también
marcarlo (importante para recibir la alerta en nuestro correo)

Condiciones de alerta

Configuración Valor
Esto corresponde a Todo el trafico
Configuración Valor
Alertarme cuando sessiones
condicion el porcentaje se reduce mas de
valor 50%
En comparación con
El mismo día de la semana anterior
el mismo dia de la semana pasada

Alerta si no hay trafico al dia

Esto te mantendra alerta si es que tu servidor web a caido ,una mala configuracion  o conflicto del script del analytics.

Datos basicos

Configuración Valor
Nombre de la alerta cae 50% visitas(puedes colocar cualquier nombre que te guie)
Aplicar a: dominio pre seleccionado
Periodo Dia
Enviarme un correo electrónico
cuando la alerta se active Incluir también
marcarlo (importante para recibir la alerta en nuestro correo)

Condiciones de alerta

Configuración Valor
Esto corresponde a Todo el trafico
Configuración Valor
Alertarme cuando sessiones
condicion es menor que
valor 1

se puede configurar muchas alertas dependiente de lo que se requiera puntualmente si necesitas ayuda en tener configurado alertas en tu pagina web puedes escribirme para brindarte mis servicios.

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Crear objetivos de google analytics

pic3
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

En estos tiempos todos queremos y podemos tener mejor control de lo que nuestros usuarios hacen en nuestra web con google analytic pero nuestra cita aqui puntualmente es para poder crear objetivos en dicha herramienta. Los objetivos de google analytic nos sirven para medir mejor nuestro metas como formulario, ecommerce, etc.

para poder explicar mejor realizare un ejemplo sobre un caso tipico del formulario al dar click en el boton de enviar al registro ya teniendo el caso, que debemos hacer primero?

Crear objetivo en google analytics

debemos primero ingresar en administrador de la parte superior

pic1

seleccionamos la cuenta > propiedad > cuenta  ya seleccionada la cuenta es donde se creara el objetivo y una recomendacion deja la vista que siempre viene por defecto crea una nueva vista y sobre ella crea el objetivo.

pic2

 

como ven en mi ejemplo ya cuento con 2 vistas y sobre ella podemos crear objetivos al entrar en las opciones de la parte inferior del seleccionable.

pic3

ya identificamos desde donde crear un objetivo asi que comencemos a crear nuestro objetivo.  al ya ingresar a la seccion vemos en la parte superior izquierda un boton “+ NUEVO OBJETIVO” que clickeamos.

dentro nos encontraremos que esta secciones esta dividido en 3 partes:

  1. Configuración del objetivo
  2. Descripción del objetivo
  3. Información del objetivo

CONFIGURACION

  1. Configuración del objetivo
    en este articulo realizaremos el ejemplo con la opcion “Personalizar” lo que usan los PRO
  2. Descripción del objetivo
    Ingresamos el Nombre que le asignaremos al evento en ID de espacio de objetivo  lo dejemos con el valor por default y en  Tipo marcamos “Evento”
  3. Información del objetivo
    Tiene 4 valores que debemos ingresar   que tenemos informacion detalla de estos parametros en https://support.google.com/analytics/answer/1033068 pero igual les hago una pequeña descripcion de cada una.
    Categoría   es el nombre que agrupa todo el evento como por ejemplo formularios, descargar, videos,etc
    Acción     es el nombre de la accion que se realiza para activar el evento como por ejemplo: click, hover,detener, reproducir, etc
    Etiqueta      un nombre que identifique el elemento u objeto
    Valor      se asigna un valor numerico a este campo si fuera necesario.
    Screenshot_1
    en nuestro ejemplo ingresaremos los siguientes valores:
    Categoría  :   registro
    Acción        :   click
    Etiqueta    :   registro_formulario
    Valor         :
    Simplemente ahora “GUARDAR” el evento.

Listo! ya tienes configurado tu evento pero asi nunca google analytics tendra resultados que figuren en nuestra informes asi que es necesario insertar el siguiente javascript en cualquier evento que tenga javascript como por ejemplo: onclick, onblur, onkeypress, onmouseover, etc. aqui tienes mas informacion de eventos javascript.  debemos implementar el siguiente script en el evento.

“ga(‘send’, ‘event’, ‘category’, ‘action’, ‘label’);”

pero debemos personalizar con datos del evento que previamente creamos

Screenshot_1

 

los valores que creamos fueron:

Categoría  :   registro
Acción        :   click
Etiqueta    :   registro_formulario

entonces nuestro script debe quedar asi e ingresarlo en un evento:

“ga(‘send’, ‘event’, ‘registro’, ‘click’, ‘registro_formulario’);”

asi deberia quedar.

Screenshot_2

 

espero que con este articulo te ayude a despejar tus dudas con este tema igual cualquier duda puedes escribir y ayudarte en tu proyecto.

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more