Posts Tagged ‘javascript’

  • WebSockets en HTML5

    0

    WebSockets es una tecnología que está surgiendo de la mano de HTML5 y estará pronto disponible en todos nuestros browsers en poco tiempo. Pero que son los WebSockets ? WebSockets es una tecnología que nos da canales de comunicación bidireccional, full-duplex a través de un sencillo socket TCP. Traducido ésto a nuestro ámbito más cotidiano, es simplemente server push. Vamos a poder comunicarnos real-time con nuestros clientes conectados cosas que trataba de emular la tecnica Comet la cual hacía vivir un request http durante X tiempo y donde el server escribia en ese response emulando ser un push.

    Hoy no son muchas las versiones estables de browsers que lo soportan. No es el caso de Google Chrome el cual viene con soporte para WebSockets desde su versión 4.

    • Google Chrome 4 +
    • Internet Explorer 9 beta +
    • Firefox 4 beta +
    • Safari 5 +
    • Opera 10.70 +

    Ahora veamos un poco de código. Lo primero que tenemos que saber es si el browser conectado soporta WebSockets, lo cual podemos comprobarlo de manera sencilla.

    var support = window.WebSocket != null;

    Ahora que sabemos que nuestro browser soporta WebSockets podemos empezar creando uno.

    var socket = new WebSocket("/mysocket");

    Una vez creado el objeto WebSocket vamos a agregarle una serie de listeners para poder manipular los eventos que ocurran en el mismo.

    socket.onopen = function(e) {
      alert("Socket is connected");
    };
    
    socket.onclose = function(e) {
      alert("Socket is closed :(");
    }
    
    // y finalmente el que mas nos interesa, el push del server
    socket.onmessage = function(e) {
      alert("Server sent a message: " + e.data);
    }

    Sin dudas que el evento más importante aca es el onmessage. El parámetro e.data puede ser texto plano, json, xml o cualquier formato que estén acostumbrados a utilizar a diario.

    Ahora vamos a ver un ejemplo de cuando el cliente quiere comunicarse con el server enviándole un sencillo mensaje.

    socket.send("data goes here");

    De ésta manera podemos tener una comunicación bidireccional de manera sencilla.

    Ahora veamos algunos escenarios donde aplica la utilización de WebSockets

    • Es aplicacble donde un servicio TCP debe ser llevado a una arquitectura web (como por ejemplo el servicio de mensajeria XMPP)
    • Donde una aplicación web necesita comunicar datos en real-time a sus clientes (por ejemplo una aplicación de stocks online)

    WebSockets es un avance significativo para la web donde las aplicaciones en browsers se parecen cada vez más a las de escritorio pero a su vez hiper conectadas entre sí.

    Algunos recursos para leer

  • Primeras Impresiones Sobre Internet Explorer 9

    0

    Acabo de terminar de instalar Internet explorer 9 beta y realmente las primeras impresiones que tengo son bastante buenas.

    • Cuando abre muestra secciones con los sitios mas visitados. Es una lástima que IE tenga ciclos de desarrollos tan largos y no haya hecho esto 4 años antes, pero finalmente ya esta acá.
    • Finalmente funciona el CTRL + L ! que va a la barra de direcciones. Chrome, Safari y Firefox siempre lo tuvieron, en cambio IE siempre tuvo F6.
    • Se nota realmente la diferencia de velocidad de renderización de HTML y ejecución de Javascript, es muy rápido.
    • El startup time es casi como el de chrome de rápido, pero una vez que ingresamos la url se ve que hace algunas maniobras por detras para seguir cargando el browser y tarda un par de segundos hasta que la pantalla se ve utilizable.
    • Por default hace antialiasing de las fonts igual que Safari (cosa que particularmente no me gusta)
    • El developer tools, la herramienta para hacer debugging de IE, tiene modo IE7, IE8 y IE9 como adicional a la versión anterior, el resto a primera vista parece todo similar.
    • La creación de un nuevo TAB con CTRL + T es realmente muy rápida, cosa que en IE8 tardaba su buen rato.
    • El área de navegación es tan grande como la de Chrome, cosa que esta haciendo tambien  Firefox con su versión 4. Es realmente muy buena.
    • No me gusta el address bar que esta en la misma linea que los tabs y eso le quita espacio, soy de los que le gusta ver en que URL están.
    • El historial, favoritos y demas estan todos integrados en un sidebar desplegable con buscador y en forma de arbol. Parece muy práctico.
    • Ni hablemos de que este es un full compliant browser con las normativas del WC3 y tiene muchisimas capacidades para HTML5, lo cual lo hace mucho mejor aún.
    • Finalmente alguien les avisó e hicieron el borrado del historial rápido, o al menos en background y eso te permite estar navegando al instante. Desde IE6 borrar el historial siempre fue un dolor de cabeza.
    • Esta versión beta debe tener aún algunos problemas con ECMA script ya que el editor de wordpress no funciona muy bien, en GMail los shortcuts de teclas reaccionan a veces y otras no.
    • Unos de los features más publicitados es el tema de hardware rendering, en este link podemos ver una demo de speed reading a 26 fps o lo que tu placa esté capacitada.

    En líneas generales puedo decir que mi impresión es más que buena. IE9 es un digno competidor de Chrome ( mi favorito ) lo cual no significa que voy a cambiar de browser ni por casualidad.
    Creo que en lo que respecta a PC, hoy puedo decir que no importa que browser utilizas, siempre vas a ver y experimentar lo mismo en cualquiera de ellos. Este es un dia que he soñado hace años, desde el 95 quizá que fue cuando comencé mi experiencia en la web.

    Aqui dejo el link de descarga para Microsoft Internet Explorer 9

    Aquí están las demos oficiales de HTML5 y hardware acceleration para IE9

  • Geolocacion en Javascript

    0

    Hoy en dia es super importante localizar a nuestros visitors, por eso hay varias APIs que nos permiten a partir de la IP saber desde donde estan haciendo el request. MaxMind es una base de datos con una version open source la cual nos permite hacer llamados a sus funciones para poder determinar los datos de locación del request. Maxmind.

    Primero debemos referenciar al js file de Maxmind

    <script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
    

    Ahora debajo de la inclusion de este script escribimos la llamada.

      var lat = geoip_latitude();
      var lon = geoip_longitude();
      var city = geoip_city();
      var country = geoip_country_name();
      var countryCode = geoip_country_code();
    // now you got the info, do whatever you want
    

    Geolocación en el client side es util relativamente, ya que de esta manera el contenido generado es probablemente que sea llamado usando ajax. Yo prefiero concretamente una solucion server side, que permita ya brindarle al usuario en el primer request contenido para su locación.

    En poco tiempo estamos implementando en Memudoya.com una base de Maxmind offline (local, actualizable) para poder brindar a los visitantes destacados de su zona.

    Have a good one.

  • Mas JQuery parte V

    0

    Unwrap elementos

    El método “.wrap()” existe hace rato, pero ahora John Resig ha agregado “.unwrap()” el cual remueve todos los tags exteriores al nodo JQuery seleccionado. Como funciona ?

    Supongamos el siguiente HTML:

    <div>
      <p>Some text here</p>
    </div>

    Queremos extraer el tag <p>, entonces usamos “.unwrap()”.

    $("p").unwrap();

    Este metodo quita el tag <div> que contiene a <p>. Elimina fácilmente el parent tag.

  • Mas JQuery 1.4 Parte IV

    0

    Este feature esta muy bueno ya que podes agregar un delay al animation queue. Permite pausar los ciclos entre las animaciones sin estar llamando a setTimeout entre medio. Aca el ejemplo:

    $("#mydiv")
        .slideDown() // slide down
        .delay(200) // just wait 200 milliseconds, this is the delay
        .fadeIn(); // fade in effect
    
Page 1 of 3123»