Desarrollo web

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

Que es ser un Front End?

Nadie logra lo que quiere rindiendose
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Que es ser un Front End?, Como ser un Ninja Front End? Y como llegar a ser el mejor Front End?

Son preguntas que al inicio de todo nos hemos preguntamos en algún punto. Si tú al igual que yo te apasiona la web quédate a leer esto te interesará.

La pasión nos conlleva a realizar muchas cosas como por ejemplo dejar de lado unas para hacer otras quizás nuevas o centrarse en una. Esto nos trae la búsqueda de la perfección y la dualidad cognitiva pues como empezó muchos terminan, rápido y fugaz. Ya que luego de un tiempo te pasara que has aprendido mucho y aun te falta mucho más, aunque tratas y pasa el tiempo sigue ocurriendo el mismo escenario pues cuando piensas alcanzar la meta esta se aleja hasta dejarte a una distancia aproximada al punto inicial. La dualidad cognitiva nos llevara a la decepción, percepción equivoca de que perdimos el tiempo y debimos hacer otra cosa, renegaremos, algunos lloraran y otro más locos se reirán de ya no saber qué hacer.

En todos estos escenarios el individuo ha perdido el porqué de que iniciara esto “La Pasión”.

Al parecer la pasión como todo se acaba y ellos perdieron el punto de enfoque y se estancaran, pero tú no, porque? Pues simple, estás leyendo esto.

 

Un Front End apasionado nunca vera un reto como reto sino como una nueva forma de andar, nunca caerá solo tropezará y nada será tan alto pues con algunos trucos y funciones se creara una cascada de ideas que juntas aran el escalón para pasar tal altitud.

Tu que estas desarrollando nunca olvides que esto al igual que tu primer amor inició con pasión y ella no te dejara sino tu a ella a la medidas que la cosa se ponga difícil.

Recuerda la adversidad no está para que te rindas sino para medir tu fortaleza y tus ganas de superarlas, Murieron las tablas y pasamos a div con floats, pues genial; Murió el float paso a display, pues grandioso; muere display empezamos las grillas, valla valla se mesclaron y salió mejor aún; se modifica y nace Flex, nunca te rindas pues a la medida que lo hagas serás uno de los que perdieron o vivieron seguir viviendo con su pasión.

 

Nunca dejes de leer lo que te gusta, no dejes de informarte y recuerda nunca se sabe todo.

Te dejo unos links de ayuda para tu evolución a un Front End o un Ninja Front End o mejor aún el Mejor Front End.

 

http://tympanus.net/codrops/css_reference/

http://tympanus.net/codrops/collective/

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

Documentar Código fuente PHP con ApiGen

Documentar código fuente PHP con ApiGen
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Documentar con ApiGen

Hoy en día, la gran mayoría de la comunidad de programadores consideran como una buena práctica el hecho de comentar el código fuente, siempre y cuando estos comentarios estén estructurados y escritos de forma correcta; para que algún programa pueda ayúdanos a generar rápidamente nuestra documentación.

El principal objetivo de documentar el código fuente es básicamente es para facilitar la identificación y comprensión del funcionamiento o uso de las clases y sus métodos por todos los integrantes de un equipo de desarrolladores.

Hay muchas herramientas que nos pueden ayudar a documentar nuestro código fuente pero esta vez nos encargaremos de ApiGen.

1.- Documentar correctamente las clases y métodos.

ApiGen

2.- Descargar ApiGen desde su página web http://www.apigen.org/ y guardarlo en alguna ubicación del disco duro, en mi caso por ejemplo lo puse en C:/apigen/apigen.phar

3.- Verificar si ApiGen se ejecuta correctamente. Desde la consola de Windows nos ubicamos en el directorio donde guardamos el apigen.phar y ejecutamos la siguiente línea de comandos.

Documentar código Fuente con ApiGen

Si les aparece algo parecido a lo siguiente quiere decir que ya estamos listos para generar nuestra documentación de código fuente.

Documentar código Fuente con ApiGen

4.- Generamos nuestra documentación de código fuente; para ello es necesario tener identificado el directorio donde se encuentra nuestro código fuente PHP, y crear un directorio donde guardaremos los archivos generados por el ApiGen.

Ejecutar las siguientes líneas de comando en la consola de Windows.

Documentar código Fuente con ApiGen

5.- Revisar la documentación en el directorio asignado.

Referencias:

http://www.apigen.org/

https://www.sitepoint.com/generate-documentation-with-apigen/

http://code-epicenter.com/apigen-generate-documentation-for-your-php-project/

 

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

Obtener el ancho y el alto del navegador con jquery

jquery-logo
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

how-to-find-browser-window-width-or-browser-window-height-jqueryLas tendencias en diseño hace que cada vez los desarrolladores (nosotros) deben crear capas que ocupen el 100% del ancho y el 100% del alto que se te pude volver un drama pero en este articulo te enseño lo facil que resulta hacer esto.

Jquery sin duda alguna nos facilita la vida y esta vez con una 2 funciones basicas de dicha libreria nos brindara las la medida del alto y ancho del navegador .width() y .height()    pero ahora de que sacamos el alto y el ancho? del document o window?  llego a este punto y  pueda que lo tengan claro pero quiero dejar esto claro para que no quede duda alguna. document nos brindara la medida de todo el contenido del html entonces no es lo que necesitamos y window nos da la medida que tiene el navegador/ browser y a fin de cuenta es toda la pantalla que muestra al abrir la pagina asi q esto si calza a nuestro requerimiento que tenemos.

listo!! entonces obtenemos el alto y ancho del navegador

width=$(window).width();
height=$(window).height();

ahora que hago?… ok ya tenemos el alto y ancho entonces asumimos que nuestra web tendra varias secciones para abajo y estaran en la etiqueta section. las medidas que obtuvimos debemos darle al section. ya teniendo en claro el caso crearemos una funcion que le de la medida al section.

function section()
{
    width=$(window).width();
    height=$(window).height();
    $("section").width(width).height(height);
}
$(document).ready(function(){
    section(); 
})

Con esto ya tienes todo listo para tener tu section con el alto y ancho del navegador Pero que sucede si comienzan a cambiar de tamaño? todo se veria mal y la solucion es simple pero eficaz.

$(window).resize(function(){
    section(); 
})

Y es asi como tienes un codigo simple y limpio para tus desarrollos espero que te sirva este articulo.

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