JAVASCRIPT

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

Como crear animaciones con jquery

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

jquery_logoJquery realmente nos da una tremenda ayuda con su function animate para crear diversos efectos y animaciones desde basicas como complejas. Ya el uso de flash es una practica desde ya muchos años atras por motivos que hable ya en un articulo anterior por que no usar flash y eso por eso que tomo mucho peso el uso de javascript para las animaciones que en algun tiempo lo hizo flash.

Jquery es el framework mas usado en proyectos web y personalmente es el framework que uso y este articulo sera basado con jquery y para comenzar debes saber:

Que es un callback?

quiere decir “una devolución de llamada o retrollamada” y nos sirve para correr alguna funcion cuando termine un proceso previo.

animate de jquery tiene un callback que nos servira para el desarrollo en la animacion entonces esta es la estructura.

$("elemento").animate({marginTop:100},1000,function(){
/*colocas tus instrucciones que se ejecutaran al terminar la animacion*/
})

explico el codigo que primero seleccionado a la etiqueta del html con nombre elemento y le pasamos animate con una instruccion que es darle un margin top de 100px con una velocidad de 1 segundo (se trabaja en milisegundos) y esa funcion que vez al final es el llamado callback.

entonces en la parte donde indicamos el margin top es la parte donde podemos agregar todo el css para que se realize la animacion y vamos hacer un ejemplo basico que seria que se mueva un cuadro que creamos con css pero esto sucedera cuando cargue el DOM.

#cuadrado{
 width:200px;
 height:200px;
 background:red;
}
&lt; div id="cuadrado"&gt;&lt; /div&gt;

entonces al darle 100 pixeles a la izquierda y nos da el efecto del movimiento a la derecha

$(document).ready(function(){
 
  $("#cuadrado").animate({marginLeft:100},2000)
 
})

ahora al ejemplo anterior implementamos el callback

$(document).ready(function(){
 
  $("#cuadrado").animate({marginLeft:100},2000,function(){
    console.log('al terminar el movimiento esto se va a imprimir')
  })
 
})

y aprovechamos el callback para que al finalizar realize otro movimiento pero bajando la velocidad y esto va hacer 2 movimientos fluidos

$(document).ready(function(){
 
  $("#cuadrado").animate({marginLeft:100},2000,function(){
     $(this).animate({marginTop:100},1000)
  })
 
})

ahora puedes seguir haciendo el movimiento n veces usando un callback despues de otro

$(document).ready(function(){
 
  $("#cuadrado").animate({marginLeft:100},2000,function(){
     $(this).animate({marginTop:100},1000,function(){
        /*puedes colocar n veces animate*/
     })
  })
 
})

 

hasta aqui es lo tipico y comun que enseñan pero vamos hacer otros ejemplos que nos ayuden a comprender mejor y abra nuestra mente de la potencia.

hace un tiempo me pidieron hacer un efecto en un intro con javascript y que es esta web http://piaverme.com y lo explico paso a paso como lo hice para que tengan mejor idea de como usarlo en un momento real de desarrollo.

tenemos en el html

&lt; a href="inicio.php"&gt;&lt; img src="images/logo-intro.png" id="logo-intro" /&gt;&lt; /a&gt;
&lt; div id="linea1"&gt;&lt; /div&gt;
&lt; div id="linea2"&gt;&lt; /div&gt;
&lt; div id="linea3"&gt;&lt; /div&gt;
&lt; div id="linea4"&gt;&lt; /div&gt;

a las lineas no le damos el ancho aun pero sera necesario por que cuando es position absolute es obligatorio colocarlo pero eso lo capturamos con javascript

img#logo-intro {
  position: absolute;
  bottom: 150px;
  left: 50%;
  margin-left: -256px;
}
div#linea1 {
  width: 3px;
  position: absolute;
  background: #fff;
}
div#linea2 {
  width: 3px;
  position: absolute;
  background: #fff;
}
div#linea3 {
  width: 3px;
  position: absolute;
  background: #fff;
}
div#linea4 {
  width: 3px;
  position: absolute;
  background: #fff;
}

ahora para que pase el efecto que los elementos entren es simple pero debes hacer que esten fuera las lineas pero antes como habia comentado en arriba vamos a dar la medida del ancho que tiene las lineas pero para que sea el efecto que ocupe el 100% del browser lo capturamos por javascript y por que no con css? simple por que esta en posicion absoluta y por defecto no va a ocupar el 100% y por que no colocamos la medidas del ancho por que estarias trabajando con 1 medida pero recuerda que sera visto por varios monitores con distintas medidas.

$(document).ready(function(){
/*primero vamos a obtener la posicion del logo  que nos devuelve el top y el left del elemento*/
posicion=$("#logo-intro").position(); 
/*esta parte ya no la explicare ya que puede llegar extenso y no es el punto realmente pero basicamente esto hace que las 4 lineas esten ubicadas fuera del browser y en la posicion adecuada para entrar luego con animate*/
$("#linea1").css({"width":$(window).width(),"left":-($(window).width()),"top":posicion.top})
$("#linea2").css({"width":$(window).width(),"left":$(window).width()*2,"top":posicion.top-212})
$("#linea3").css({"height":$(window).height(),"left":posicion.left-256,"top":-($(window).height())})
$("#linea4").css({"height":$(window).height(),"left":posicion.left+256,"top":$(window).height()*2})
})

ya teniendo ordenado los elementos hacemos el efcto de las entradas.

/*hacemos que funcione el efecto cuando todo las peticiones este cargadas*/
$(window).load(function(){
    $("#linea1").animate({"left":"0"},2000,"easeInOutCubic",function(){
        $("#linea2").animate({"left":"0"},1000,"easeInOutCubic")
    })
    $("#linea3").animate({"top":"0"},2000,"easeInOutCubic",function(){
        $("#linea4").animate({"top":"0"},1500,"easeInOutCubic")
    })
})

aqui empleamos los callback y ademas podemos ver que juego con las velocidades pero adicionalmente he agregado un atributo a la funcion pero si no lo colocas por defecto ya tiene uno pero jquery tiene unos cuantos tipos de efectos de movimientos entonces para ampliar estos movimientos puedes agregar a tu proyecto un plugins “jQuery Easing” que hace que podamos usar mas movimientos.

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

Crear un autocompletar en jquery

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

En ocasión tenemos mucha data que cargar en un select que nos inclinamos por usar un autocompletar y de hecho podemos encontrar varios pero no siempre se amoldan a nuestras necesidades y modificarlos puede llegar a dar dolor de cabeza.

Para los reacios que no quieren ver las ventajas aquí les dejo unas.

  1. Velocidad para mejorar tu SEO
  2. Facilidad de Búsqueda UX
  3. Diseño más atractivo de UI

A continuación voy hacer un ejemplo paso a paso de cómo se crea uno en jquery y php.

aqui el html con lineas comentadas explicando

 
<!DOCTYPE html> 
<html>
    <head>
        <title>atocompletar</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <!--formulario del autocompletar-->
        <form method="post">
            <!--aqui escribimos el nombre de departamento y activa el autocompletar-->
            <input type="text" name="departamentos" id="departamentos" />
            <!--aqui va el codigo del departamento cuando selecciona-->
            <input type="hidden" name="codigo_departamentos" id="codigo_departamentos" />
        </form> 
        <!--agregamos jquery-->
        <script src="js/jquery.js" type="text/javascript"></script>
        <!--agregamos nuestro script de autocompletar-->
        <script src="js/autocompletar.js" type="text/javascript"></script>
    </body>
</html>

un php que debe mandar un json con la data real pero aqui puse un dato en duro pero en javascript hago que envie un dato en get para que sirva para filtrar una consulta sql que eso seria en casos reales.

solo por demo coloco un json en duro.

$data=array(array("codigo"=>"001","provincia"=>"LIMA"),
            array("codigo"=>"002","provincia"=>"AYACUCHO"),
            array("codigo"=>"003","provincia"=>"JUNIN"),
            array("codigo"=>"004","provincia"=>"PUNO"),
            array("codigo"=>"005","provincia"=>"TRUJILLO"),
            array("codigo"=>"006","provincia"=>"IQUITOS"),
            array("codigo"=>"007","provincia"=>"LORETO")
        );
 
echo json_encode($data);

las siguientes lineas son la base de todo y cada linea tiene explicacion

//cuando tecle en el input se ejecutara
    $("#departamentos").on("keyup",function(){
        //la referencia al input lo metemos en una variable
        var $this=$(this);
        //eliminamos el div si existiera
        $("#autocompletar").remove();  
        //solo si es mayor a 3 envia un ajax
        if ($("#departamentos").val().length >=3)
        {
            //para hacer bonito el efecto agregamos un gif de load en la parte derecha del input 
            //sera un background
            $this.css({"background":"url('chrome-extension://hlngmmdolgbdnnimbmblfhhndibdipaf/images/loader.gif') top right no-repeat"})
           //capturamos el valor de ingreso en el campo
            var departamentos=$this.val();
            //hacemos un ajax en get y enviamos un variable get que es el dato que ingreso en el input
            $.get("data.php",{"departamentos":departamentos},function(data){
                //ahora crearemos un div para mostrar los resultados pero queremos que sea debajo del input 
                //y para eso debemos obtener la posicion del elemento para eso position de jquery
                posicion=$this.position(); 
                //guardamos el top , left y width 
                //
                //el top actual + el alto de la cajita para posicionarlo debajo de la cajita me refiero al input
                //adicionalmente 10 px mas para que no sea tan pegado
                var top=parseInt(posicion.top)+parseInt($this.height())+10; 
                //el left del la cajita
                var left=posicion.left;
                //el ancho de la cajita + 100 px
                var width=parseInt($this.width())+100
                //debemos crear el div pero consultamos si existe para no volver a crearlo
                if (!$("#autocompletar").length)
                {
                    //en caso no exista lo creamos dando las medidas
                    $("body").append("<div id='autocompletar' style='overflow:auto;top:"+top+"px;left:"+left+"px;width:"+width+"px; height:100px;position:absolute; border:1px solid #ebebeb'></div>")
                }
                var html='';
                //ahora creamos el contenido que va dentro del div sera un ul con la respuesta
                html +='<ul id="lista">';
                data=$.parseJSON(data);
                //un recorrido a la respuesta que nos envio el ajax que en este caso se llama data
                $.each(data, function(i, item) {
                        //creamos un li por cada vuelta y con atributos en el li que 
                        //nos serviran para que cuando seleccione guardarlos de alguna forma
                        html +='<li data-codigo="'+item.codigo+'"  data-provincia="'+item.provincia+'"><a href="javascript:;">'+item.provincia+'</a></li>';
                });
                html +='</ul>';
                //cancelamos el efecto del load del gif
                $this.css({"background":""})
                //limpiamos todo lo que pueda tener el div contenedor y agregamos toda nuestra ul que tiene
                //la data obtenida como respuesta del ajax
                $("#autocompletar").empty().append(html)
            });
        }
    })

ahora la funcion que se ejecuta al selecciona un item de la respuesta.

//funcion que se ejecuta cuando hace click en una opcion de la respuesta al escribir
    $(document).on("click","li",function(){
        //aqui tenemos los atributos que creamos en el li
        //jalamos el codigo y el texto del nombre de la provincia
        codigo=$(this).attr("data-codigo");
        provincia=$(this).attr("data-provincia");
        //asignamos los valores
        $("#codigo_departamentos").val(codigo)
        $("#departamentos").val(provincia)
        //y finalmente eliminamos el elementos del autocompletar
        $("#autocompletar").remove();
    })

puede ver en funcionamiento el script

autocompletar jquery demo
y descargarlo aqui
autocompletar jquery

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

Como Empezar con GruntJs

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

Ya desde un año atrás escuche sobre GruntJs pero realmente no me interese mucho pero comencé a ver muchos artículos y bueno me puse a jugar con GruntJs.

Ahora me siento una mejor persona , mas pro, mas bella, mas productiva , etc.

La idea de este articulo es llevarlos por el buen camino de los Front End PRO y que lo bueno de GruntJs no va a introducir a utilizar muchas cosas nuevas si una vez entras veras que ahí muchas utilidades que nos ayudan a trabajar y aumentar nuestra productividad.

Que es GruntJs?
Basicamente es un automatizador de tareas y si buscas mas información de que es tienes mucha información sobre GruntJs.

Por qué Aprender GruntJs?
Porque que ayudara optimizar tus tiempos, desarrollos, mas ordenados,

Como Instalar GruntJs?
Debemos tener instalado el node.js para tener el manejador de dependencias y modulos de node.js.

Cuando tenga lo tengan instalado para confirmar si todo va bien nos vamos a nuestro CMD de Windows y nos debe mandar esto.

Ahora para la instalación es recomendable que vuelvan abrir el CMD pero como administrador

Ahora no importa en que carpeta estemos posicionados desde el DOS y ejecutamos la siguiente linea

Npm install  -g grunt-cli

Ejecutamos con –g para que sea global y con eso ya tenemos listo para trabajar con GruntJs nos dirigimos a nuestra carpeta donde esta nuestro nuevo proyecto.

Casi listos para comenzar pero necesitamos 2 archivos pero ahora solo necesitamos solo el package.json que sirve para agregar la configuración de las dependencias. Entonces creamos un archivo con el nombre package.json e ingresamos el siguiente contenido.

{
 
  "name": "mi proyecto",
 
  "version": "0.1.0",
 
  "description": "",
 
  "devDependencies": { }
 
}

Descargamos los archivos necesario para trabajar con grunt en nuestra carpeta del proyecto quiero decir que debemos estar posicionados desde el DOS en la carpeta del proyecto y ejecutamos la siguiente línea.

Npm install grunt --save-dev

— save nos permite insertar todas las dependencias instaladas al package.json pues ahora si vemos nuestro archivo package.json se habrá agregado una línea.

{
 
  "name": "mi proyecto",
 
  "version": "0.1.0",
 
  "description": "",
 
  "devDependencies": { 
        "grunt": "^0.4.5",
  }
 
}

Ahora también esto se pudo hacer de otra manera donde primero creamos al crear el package.json y agregamos todas las dependencias como nos lo dejo al instalar. Nos dirigimos a DOS y ejecutamos solo

npm install

Y leería el archivo package.json y verificaría si el paquete existe en el proyecto de lo contrario lo va a descargar.

Si todo nos fue bien se nos debio crear una carpeta “node_modules” y dentro una carpeta grunt. Nos falta el ultimo paso de crear el archivo.

module.exports = function (grunt)
 
{
 
    grunt.registerTask('default',function(){
 
         grunt.log.writeln('GRUNJS CORRIENDO!');
 
    });
 
}

Nos dirigimos al DOS e ingresamos.

grunt

ya tenemos nuestro GrunJs corriendo pero en este artículo solo tenemos corriendo y no estamos haciendo ninguna tarea y eso serán los próximos artículos.

Less con GrunJs grunt-contrib-less
Jade con GrunJs grunt-contrib-jade
Actualizacion automáticos con GrunJs grunt-contrib-watch

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