Animaciones con Javascript: Tweens con GreenSock (GSAP)

animaciones con javascript

Hola a todos, estoy intentando no descuidar el blog, manteniendo mis actividades lo más organizadas posibles. Siguiendo la pauta que marqué con la entrada anterior intentaré que esta entrada sea lo más explicativa posible. Y bien, para no dar tantas vueltas sin sentido, en esta ocasión aprenderemos a crear animaciones con Javascript, para ello utilizaremos la librería GreenSock (GSAP).

animaciones con javascriptSeguro que en alguna página lo has visto en acción, o hayas escuchado sobre esta librería y ahora quieras meterte de lleno y comenzar a aprender su funcionamiento desde cero, ¿cierto? Si es tu caso, e incluso si no, deberías continuar leyendo, tal vez llegue a interesarte al final. 😉

Continuar leyendo

Código CSS Eficiente: Cuida el uso de IDs

código css eficiente

Hola a todos, esta ocasión también voy a escribir este post un poco corto, pero intentaré que sea lo más explicativo posible al problema. Planeo que se convierta en una serie de varias entradas que serán englobadas bajo el tema “Código CSS Eficiente“.

código css eficiente

Esta primera entrada hablaré sobre los IDs en los elementos HTML, y una situación “curiosa” con la que me encontré hace poco, siendo esta la premisa a mi recomendación de evitar en lo posible utilizarlos.

Continuar leyendo

Trabajando con WebSockets

Programación Python

Hola a todos, debido al trabajo he descuidado el blog estás últimas semanas, así que hoy decidí esforzarme en sacar tiempo y escribir este pequeño ejemplo de un tema qué alguien me preguntó hace unos días mediante Twitter.. En esta entrada llamada “Trabajando con WebSockets”, explicaré de forma breve pero concisa como trabajar con Web Sockets y JS.

A modo de ejemplo, crearemos lo más conocido para este tipo de “features”, un chat. Tal vez eres un dev que ha experimentado en el pasado con Socket.io y buscas saber un poco más sobre lo que hay por detrás, o simplemente estás intentando añadir carácteristicas “real-time” a tu app y no sabes por donde empezar, este post fue hecho pensando en ti. La aplicación final tendrá una apariencia como la siguiente:

Trabajando con WebSocketsLuce bien, ¿cierto? 😀 No sean tan duros, deben recordar que esto fue hecho en unos minutos, solo para poder ejemplificar la teoría, y poder centrarnos en lo realmente importante de este post.

¿Qué es un Web Socket?

Intentando ser simple, WebSocket es un protocolo nuevo para la web que funciona bajo TCP, por el cual, a diferencia de las conexiones HTTP (las que se utilizan normalmente en internet), este es bi-direccional, ¿que significa esto? Como te menciono, hoy por hoy en internet estamos usando una conexión en una sola dirección, solicitamos un recurso al servidor y esperamos la respuesta (o viceversa con ServerEvents, de los cuales planeo escribir pronto). Pero con web sockets el servidor te habla también, te puede llamar y mandar un mensaje en cualquier momento, cool ¿cierto?

Esto nos permite realizar cosas tan “mágicas” en nuestro sitios web, como podamos imaginar, siempre y cuando tengamos en cuenta algunos puntos importantes:

  • La comunicación se inicia con un handshake HTTP, por lo que si la conexión HTTP no se puede establecer, tampoco habrán WebSockets.
  • El soporte debe existir tanto en el cliente como en el servidor. (Tenemos HTML5 en el cliente y Socket.io o WS en el servidor 😀 )
  • A diferencia de los protocolos convensionales de TCP, donde podemos transmitir streams de bytes, en WebSockets solo se pueden transmitir texto/JSON.
  • Al igual que ocurre con HTTP, donde tenemos su versión segura (HTTPS), en los WebSockets contamos con la versión segura WSS, aunque debemos estar en el entendido que no todos los navegadores que soportan los WebSockets, soportarán WSS.

Lo interesante de los WebSockets es que nos dan este comportamiento “real-time”, que nos da la posibilidad de crear aplicaciones complejas de forma sencilla, ¿has querido hacer un juego multijugador? con los WS esto será algo “sencillo”.

Bien, muy interesante todo pero, ¿cómo funciona?

Trabajando con WebSocketsComo mencionaba anteriormente, para iniciar una conexión con el protocolo WS primero el cliente (el browser) le pide al servidor que quiere iniciar esta conexión (handshake: aquí se pasan unos datos secretos), si este proceso es satisfactorio, el servidor responde un “todo en orden, prosigue” y a partir de ahí dejan de utilizar HTTP y pasan a WS.

Además de darnos la posibilidad de una comunicación bi-direccional, también nos ahorramos el “payload”, es decir, esos bytes que se envían en las transmisiones que hacemos por HTTP, que contienen la información para que tanto el cliente, como el servidor sepan que estan recibiendo, qué tipo de conexión utilizamos, etc. Este “payload” es mejor conocido como “cabeceras HTTP”. Esto ya que recordemos que únicamente podemos transmitir texto y nos quedamos “conectados” al servidor hasta que nosotros (los clientes) decidamos que no queremos seguir conectados.

Pequeño ejemplo: Trabajando con WebSockets

Bien, tal vez tanta teoría te abruma, así que aquí te dejo el código del ejemplo para que puedas reproducirlo. y ver un poco de que se trata. Como el código cuenta con comentarios, voy a dejar implicita la explicación del mismo por esta ocasión (es un post express) 🙂

Primeramente y ya teniendo un proyecto creado, instalamos el paquete wsdesde NPM.

yarn add ws

Teniendo el siguiente index.html:


<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, maximum-scale=1.0">
    <title>Simple Chat App - VueJS and Web Sockets</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/lumen/bootstrap.min.css">
    <style>
        .container {margin-top: 40px;}
        #messages { height: auto; min-height: 150px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="col-xs-12 col-md-offset-3 col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading">Join the conversation!</div>
                <div class="panel-body">
                    <div class="form-group">
                        <label for="messages" class="form-control-label">Messages</label>
                        <div id="messages" class="form-control"></div>
                    </div>
                    <div class="form-inline">
                        <div class="form-group form-group-sm">
                            <label for="message_text" class="form-control-label">Write your message:</label>
                            <input type="text" class="form-control" id="message_text" />
                        </div>
                        <button class="btn btn-primary">Send</button>
                    </div>
                </div>
            </div>
            <p id="username-label"></p>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

Vemos que llama un script, cuyo contenido es el siguiente:


// app.js
// URL dónde se encuentra ejecutando nuestro servidor de WS
const wsUri = "ws://localhost:5001"
// Creamos un nuevo "cliente" de WS
let socket = new WebSocket(wsUri)
// Ya que la aplicación de ejemplo es una sala de chat
// al iniciar nos pide un nombre de usuario para utilizarlo
const name = prompt("What is your username?")
document.getElementById('username-label').innerText = `You are: ${name}`

// Controla la conexión al WS
socket.onopen = event => {
  // Descomentar para ver que recibimos por parte del WS
  //console.log(event)
  socket.send(JSON.stringify({
    type: "name",
    data: name
  }))
  console.log("Socket connected successfully...")
}

let messages = document.getElementById("messages")

// Nos suscribimos a los eventos de transferencia de mensajes
// por parte del servidor, si tuvieramos mensajes de diferentes tipos
// podríamos llevar a cabo una validación
socket.onmessage = event => {
  // Descomentar para ver que recibimos por parte del WS
  //console.log(event)
  const data = JSON.parse(event.data)
  messages.innerHTML += `<span class="text-success">${data.name}:</\span> ${data.data}<br /\>`
}

document.querySelector(".btn").onclick = event => {
  const text = document.getElementById("message_text").value
  socket.send(JSON.stringify({
    type: "message",
    data: text
  }))
  messages.innerHTML += `<span class="text-warning">You:</\span> ${text}<br /\>`
}

Creamos nuestro archivo server.js, que será el encargado de ejecutar el servidor con soporte para WS.


// server.js
// Referenciamos las librerías a utilizar

// Para manejar los WebSockets utilizaremos la librería 'ws'
// que nos facilita bastante el trabajo con estos.
const WS = require("ws").Server
// Puerto a donde escuchará nuestro servidor WS
const port = 5001
// Creamos nuestro servidor de WS
const server = new WS({ port })

// Nos suscribimos al evento de conexión
// el cual es llamado cuando un cliente se conecta
server.on("connection", ws => {
  // El método callback es llamado cuando
  // se conecta un nuevo cliente y en el argumento "ws"
  // vamos a tener un "enlace" a este cliente

  // Podemos enviar un mensaje al cliente
  // de bienvenida apenas se conecte
  // los parámetros son el nombre del mensaje y un json con los datos
  //ws.send('welcome', { greeting: 'Welcome WS client!' })

  // Los WebSockets se comunican en base a mensajes
  // por lo que debemos suscribirnos a cada uno de los
  // posibles mensajes que los clientes puedan enviar
  ws.on("message", message => {
    console.log(`Received: ${message}`)
    message = JSON.parse(message)
    // Ya que el cliente puede enviar mensajes de diferentes tipos
    // Validamos que el mensaje recibido sea del tipo "name"
    if(message.type === "name") {
      // Store the username that send the email
      ws.userName = message.data
      return
    }

    for(let client of server.clients) {
      // Cómo está será una aplicación de chat
      // enviamos el mensaje a todos los clientes
      // evitando enviarlo a "nosotros"
      if(client !== ws)
        client.send(JSON.stringify({
          type: "message",
          name: ws.userName,
          data: message.data
        }))
    }
  })

  // Nos suscribirnos también al evento
  // que se ejcuta cuando un cliente decide terminar la conexión
  ws.on("close", event => {
    console.log("A client was disconnected...")
  })

  // Todos los llamados a console.log son del servidor
  // con própositos de depuración
  console.log("New client connected...")
})

Ahora únicamente debemos ejecutar el servidor

node server.js

Tan sólo abrimos nuestro index.html en cualquier navegador que soporte WS (Chrome, Firefox, etc) y podremos ver nuestra aplicación funcionando.

Al principio expliqué que tanto el cliente como el servidor deben soportar web sockets, tenemos que tener en cuenta que es necesario HTML5 con web sockets, te dejo este enlace a Caniuse.com con el detalle de los navegadores que lo soportan.

Opciones como SocketIO se encargan de que la conexión funcione sin importar el navegador, esto lo hace intentando con otros mecanismos de transporte (XHR Pooling, Flash Sockets, etc.). No va a ser con web sockets pero va a funcionar como si lo fuera.

Creo que es todo por ahora, si gustan saber más al respecto de “ws”, pueden visitar su documentación, que siendo honestos es bastante clara. Recuerda que todo el código fuente puedes encontrarlo en el siguiente repositorio.

Espero la explicación haya sido clara y cualquier comentario no dudes en dejarlo aquí abajo, o con confianza mencionalo por Twitter o en la Fanpage de Facebook, y aprovecho a invitarte para que me sigas en las redes y compartas el contenido del blog, con lo cual me harías un gran favor.

Creando aplicaciones web con Sinatra y Ruby: más allá de los Rieles.

Hola y bienvenido. En esta entrada voy a dar una breve introducción a Sinatra y Ruby, el cual es posiblemente el segundo framework más utilizado del lenguaje.

Sinatra y Ruby

En la actualidad, cuando se escucha o se lee acerca del lenguaje de programación Ruby, suele interpretarse erróneamente como Ruby on Rails, esto gracias a la falta de conocimiento de muchos pseudo-programadores que piensan que son una misma cosa. Así que definamos conceptos, Rails  es un marco de trabajo (framework para los puristas), del lenguaje Ruby, el cual nos permite desarrollar aplicaciones web. Fue usado en sus inicios por Twitter, así que debe ser bueno ¿cierto?

Rails nos brinda todo para que podamos desarrollar aplicaciones robustas, proporcionándonos desde un inicio una estructura siguiendo la arquitectura MVC (Modelo-Vista-Controlador), y muchas otras cosas, pueden visitar su documentación si es que aún no lo conocían para ver más detalladamente sus bondades, yo aquí los espero…

¿Listos? Bien, continuemos…a estas alturas podrás estarte preguntando, ¿por qué utilizar otro framework cuando Rails nos proporciona tanto? La respuesta es sencilla, Porque Rails nos proporciona tanto. ¿No quedó claro? Dejame explicarte un poco más.

Sinatra y Ruby

Sinatra se define a si mismo como un DSL para crear aplicaciones web en Ruby con un mínimo esfuerzo. Esto lo logra quitándonos características las cuales según nuestro proyecto, no necesitamos, pero es mejor que veamos código cierto.

Lo primero que debemos hacer es instalar la gema de Sinatra.

Sinatra y RubyUna vez que termina de instalarse, vamos a ver lo sencillo que es de utilizar,

Cuando utilizamos Rails, debemos generar un proyecto, hacer un par de configuraciones y ponernos a codificar, con Sinatra y Ruby nos olvidamos de esto y vamos directo al código, en mi caso crearé un archivo llamado test-sinatra.rb.

Lo primero que haremos para probar la sencillez y poder de Sinatra es crear una ruta.

# test-sinatra.rb
require 'sinatra'

get '/' do
  '&amp;lt;h1&amp;gt;Mi primer Ruta definida con Sinatra :D!&amp;lt;h1&amp;gt;'
end
Sinatra y Ruby

Sinatra y Ruby

Y al ejecutar esto desde la consola, debemos tener una salida similar a esto:
Sinatra y RubyLo cual significa que nuestro servidor Sinatra está funcionando. Ahora, si desde tu navegador accedes a http://localhost:4567/ deberías tener una salida similar a esta:
Sencillo cierto, en Sinatra, una ruta no es más que un método HTTP
junto a un patrón de coincidencia de URL, donde cada ruta debe estar asociada a su bloque.
Por lo tanto, las siguientes rutas son validas:

get '/' do
  # bloque de código
end

post '/' do
  # bloque de código
end

put '/' do
  # bloque de código
end

patch '/' do
  # bloque de código
end

delete '/' do
  # bloque de código
end

options '/' do
  # bloque de código
end

link '/' do
  # bloque de código
end

unlink '/' do
  # bloque de código
end

Un punto que hay que cuidar con Sinatra, es que las rutas coinciden en el orden en que
son definidas, esto quiere decir que la primer ruta que coincida con la solicitud
del cliente es la que será invocada.

De igual forma, podemos tener rutas dinámicas, las cuales nos permiten definir parámetros
con nombre, los cuales serán accesibles desde el hash params.

get '/hola/:nombre' do
 # http://localhost:4567/hola/Mushr00m
 # params['nombre'] es 'Mushr00m'
 "<h1>Hola, #{params['nombre']}!</h1>"
end

Ahora, para realizar la prueba de esto, debemos detener nuestro
servidor y volver a ejecutarlo. Al hacer esto podemos probarlo ingresando a
http://localhost:4567/hola/:nombre dónde, debemos sustituir :nombre, con
la cadena que deseemos. Debes tener una salida similar a:

Sinatra y Ruby

Nota como en la URL sustituí :name por Programadores, y esto es lo que imprimió el mensaje,
genial ¿cierto? 😀

Eso no es todo, Sinatra nos permite crear las rutas de distintas maneras,
utilizando parámetros de bloque, condiciones, expresiones regulares, además de otras
peculiares formas que Sinatra nos permite.

Como espero poder haber mostrado, Sinatra es una muy buena opción para
crear aplicaciones web rápidamente y de una forma sencilla. Además de esto,
podemos servir archivos de plantillas, les recomiendo lean la documentación oficial,
o si gustan, escribiré otra entrada para profundizar un poco más en este excelente framework.

Y bien, Sinatra es una excelente opción y alternativa a Rails, como framework para desarrollar
aplicaciones web utilizando Ruby, y no se crean, con Sinatra podemos tener las caracteristicas
que nos brinda Rails con a penas un poco de esfuerzo extra.

Espero te sirva esta entrada, cualquier comentario, sugerencia o punto de mejora que encuentres
te estaré agradecido si lo dejas en los comentarios.
Saludos 😀

Nueva versión del navegador “Firefox” nos permite desarrollar aplicaciones para “Firefox OS” fácilmente.

No cabe duda que últimamente todas las noticias que están saliendo entorno a “Firefox OS” son alentadoras, y nos demuestran, que este proyecto va por un excelente camino. Y como la gente de Mozilla nos tiene acostumbrados, la nueva versión de su navegador el mejor en mi opinión Firefox, así como la que ya tenemos disponible en su versión de prueba disponible en Firefox Nightly (versión de Firefox que prueba las funcionalidades antes de su lanzamiento en la versión oficial) nos permitirá desarrollar aplicaciones para Firefox OS directamente desde el navegador, algo que al leer me emociono mucho. 😀

El Web IDE como fue llamado, nos permitirá conectar dispositivos vía “USB” para desarrollar aplicaciones usando las características típicas de los móviles modernos (acelerómetro, brújula, etc.)

La idea de incluir un entorno de desarrollo integrado (IDE) para Firefox OS en las próximas versiones del navegador Firefox tiene sentido, ya que dejará de ser necesario instalar software adicional y facilitará el acceso a los programadores que quieran aventurarse en el mundo HTML5 y JS, sin necesidad de que tengan que aprender el uso de un ambiente de programación nuevo. El WebIDE estará disponible en la versión 31 del navegador Firefox, y esperan que en el futuro sea posible crear aplicaciones no solo para Firefox OS, sino también para iOS y Android.

Una vez creada la aplicación, podremos simular su funcionamiento desde el navegador, ejecutando un sistema de simulación incluido dentro del propio Firefox. En Mozilla Hacks  tienes más información sobre esta forma de programar aplicaciones, donde informan que ya hay varias plantillas disponibles.

También les dejo el video que la gente de Mozilla que publicó, donde nos dan una pequeña introducción:

Eso es todo por ahora, pero antes de irme, me gustaría saber que opinan de este gran proyecto de Mozilla, dejen sus comentarios.

Saludos.