Desarrollo web

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

Tag para compartir en facebook

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

Todo sitio web en estos tiempos ya se deben desarrollar pensando que se podra compartir en redes sociales y en este articulo hablare de open graph que son tag que debes tener en cuenta para poder tener un buen articulo compartido en facebook.

Screenshot_3
< meta name="Author" content="Luis Rodriguez" />
< meta content="Luis Rodriguez" property="og:title">
< meta content="website" property="og:type">
< meta content="http://luisrodriguez.pe" property="og:url">
< meta content="http://luisrodriguez.pe/images/luis-rodriguez.png" property="og:image">
< meta content="Luis Rodriguez" property="og:site_name">
< meta content="Portafolio Luis Rodriguez  - Freelance WebDeveloper / Desarrollador web / Freelance Web Developer / Diseño Web /  Front end / Back end / Programador PHP" property="og:description">

estos tag deben ir en el head de tu html lo descrivo brevemente pero si deseas mas informacion lo puedes ver directamente desde la pagina para desarrolladores de facebook

Tag Descripción
og:url Es la url que llevara el post al compartir la pagina web
og:type Para saber que tipo de aplicación es.
og:title Table
og:image Titulo al compartir
og:description Descripcion corta
og:site_name Nombre del sitio

Aqui pueden ver el resultado de los tag que coloque en la parte superior.

Screenshot_1

 

 

 

 

una recomendacion es que cuando configuras tus tag en tu html puedes subirlo y probarlo en el debug de facebook para saber como va quedando o que vas a modificar y debes tener en cuanta que cuando lo pruebas 1 vez ya se cachea en facebook pero la herramienta tiene un boton para eliminar ese cache.

Screenshot_2

 

 

 

este corto articulo espero que pueda ayudar a tus desarrollos.

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