Similar Posts

Nitobi UI: elementos UI para javascript

ByLuis

Impresionante librería para incluir elementos UI en nuestras aplicaciones javascript. Contiene los siguientes elementos:

  • Grid: tabla con celdas estilo hoja de cálculo
  • TreeGrid: igual que el anterior pero permite desplegar filas
  • ComboBox: un combo mas interactivo, como los de auto-sugerencias
  • TabStrip: gestión de pestañas
  • Tree: árbol de datos, tipo directorios/ficheros
  • FishEye: aumentar elementos con efecto “ojo de pez”
  • Callout: mensajes popup en plan bocadillo
  • Spotlight: resaltar elementos DOM, muy útil para realizar guías interactivas
  • Calendar: calendarios
  • Toolkit: herramientas varias para Ajax

Nitobi UI

|

Algo de Javascript avanzado

ByLuis

Algo malo de dedicarse a la informática es que te puedes quedar anticuado con facilidad, algo bueno de ser blogger (al menos para mí) es que al querer dar buenas noticias y buenos scripts, te hace estar al día.
Algún compañero me ha preguntado alguna vez por partes de Javascript que no entendía, incluso me decía si realmente es Javascript. Supongo que a todos nos ha sonado raro el código Javascript cuando incluye JSON.
Lo malo es que cuando buscas por ese tipo de código que desconoces, buscas por términos como “javascript function”, “javascript avanzado”, y otras cosas que no suelen dar los resultados que esperamos. En el caso de “javascript function” nos suele dar cómo crear funciones, pero solo lo más básico, sin embargo, si hubieramos buscado por “javascript funciones anónimas” si hubieramos obtenido resultados deseados. Si buscamos por “javascript avanzado” solemos obtener directorios de efectos hechos en javascript y no las novedades que trae Javascript en sus nuevas versiones.
Por eso, si quieres aprender conceptos más avanzados de Javascript, te va a venir bastante bien este tutorial:
Quick guide to somewhat advanced JavaScript

jQuery Graceful Websocket: plugin jQuery para websockets

ByLuis

jQuery Graceful Websocket es un plugin jQuery que nos permite comunicarnos con el servidor usando websockets de HTML5. El problema es que tan solo Chrome permite los websokets (creo que Firefox los tiene desactivados por defecto por temas de seguridad), además se necesita que el servidor los pueda tratar, por lo que este plugin permite una alternativa mediante Ajax transparente al desarrollador.

// Si el servidor no admite websockets sustituye el ws:// por http://
var ws = $.gracefulWebSocket("ws://127.0.0.1:8080/");
// Envía datos al servidor. 
// Si el servidor no admite websockets lo envía mediante POST
ws.send("message to server");
// Recibe datos del servidor
// Si el servidor no admite websockets hace un polling mediante GET
ws.onmessage = function (event) {
   var messageFromServer = event.data;   
};

WebSocket plugin for jQuery with graceful degradation

Visualizador de imágenes en DHTML con javascript no obstructivo

ByLuis

En Dynamic Drive nos ofrecen una buena utilidad y un magnífico ejemplo de uso de DHTML accesible. Se trata de un sencillo sistema que permite previsualizar o ampliar imágenes desde un enlace poniendo “thumbnail” como valor del atributo rel del enlace. Además el contenido atributo title será mostrado junto a la imagen.
http://sentidoweb.com/img/2007/01/dinamic_drive-thumb.png
Lo mejor es que está hecho de forma no obstructiva, es decir, dado que enlace apunta a la imagen, si el usuario no tiene habilitado el javascript al pulsar en enlace le llevará a la misma. En caso contrario mostrará una capa con ésta.
Vía / Ajaxian

HTML5 Web Workers

ByLuis

HTML5 a parte de añadir nuevas etiquetas, también incluye otras posibilidades javascript, como los Web Workers, los cuales permiten ejecutar scripts en paralelo (background). Por ejemplo, tenemos un proceso costoso en recursos que no es interrumpible, podemos utilizar un Worker y evitar que el navegador se nos colapse.

Su uso es bastante sencillo, se instancia un Worker que estará en un fichero javascript independiente, se indica qué hacer cuando se reciba un mensaje y ya solo queda que el javascript y el Worker se comuniquen mandándose mensajes.

El script que instancia el Worker sería así:

// Crea el Web Worker
var worker = new Worker("worker.js");

// Envía un mensaje al worker
worker.postMessage(0);

// Recibe los mensajes del Worker
worker.onmessage = function (evt) {
	// evt.data es el valor devuelto por el Worker
	alert(evt.data);
}

// Trata los errores
worker.onerror = function (evt) {
	alert(evt.data);
}

Y el worker.js sería el siguiente:

// Ejemplo de Worker
onmessage = function (evt) {
    // evt.data es el valor enviado desde el javascript
    for (var i=evt.data, il=1000001; i

Los Workers también admiten el evento onconnect, aunque tan sólo he visto que funcione en Webkit:

onconnect = function(evt) {
  postMessage('Hola, acabas de conectarte al Worker');
}

Using HTML5 Web Workers to have background computational power