Al final, después de cansarme de buscar y buscar, lo he programado yo, y en honor al blog, he decidido llamarlo manso framework. mansofk para los amigos.

Al final he conseguido meter toda esta funcionalidad en tan sólo 1.5KB.

Las funcionalidades principales son:

• Fácil renombrar el framework para evitar colisiones
• Soporta encadenamiento de llamadas
• Soporta la carga de componentes externos de forma dinámica
  • Soporta cargar CSS externos dinámicamente
  • Soporta cargar javascript externos dinámicamente
• Manipulaciones DOM sencillas
  • Seleccionar elementos por ID
  • Añadir elementos
  • Reemplazar elementos
• Manipular el estilo CSS de los elementos
  • Obtener una propiedad del estilo actual de un elemento
  • Cambiar una propiedad del estilo de un elemento
  • Cambiar varias propiedades a la vez
• Animaciones CSS sencillas
  • Soporta varios atributos a la vez
  • Varios parametros, entre ellos la duración e incluso los frames por segundo
  • Es posible seleccionar la función linear y la cúbica
• Soporte de eventos
  • bind
  • unbind
• Llamadas AJAX
  • Con POST
  • Con GET
  • Con soporte XML
  • Con soporte JSON
  • Con soporte texto plano
• Superligero
  • 3.3 KB minified
  • 1.5 KB gzipped!

Sois libres de usar este framework para lo que os venga en gana, pero no me responsabilizo de nada.

A continuación teneis la versión sin comprimir, y la versión reducida con Google Closure Compiler:

• mansofk-1.0.min.js (3.3 KB para usar en producción, si usas gzip ocupa sólo 1.5KB)
• mansofk-1.0.js (11KB para usar durante el desarrollo)

Ale, pues ya está. Lo suyo sería hacer una demo, pero como ahora mismo tengo otras cosas que hacer, me lo dejo para otra ocasión.

Uploadify es un magnífico plugin para jQuery que te permite subir varios archivos a la vez mediante flash, de forma totalmente transparente (podeis ver una demo en este enlace).

Realmente, la gran ventaja que yo le veo no es la de subir varios archivos a la vez,esto ya se puede hacer con javascript a pelo, la gran ventaja es que añade una barra de progreso para que el usuario no se desespere.

Además de subir archivos, también se pueden mandar otros datos a la vez que se suben las imágenes (usando scriptData). Lo cual puede ser muy útil si se quiere por ejemplo, mandar los datos de un formulario a la vez que se sube un archivo.

El gran inconveniente de uploadify, es que manda cada archivo por separado. Es decir, si quieres subir 30 archivos, manda cada archivo en una petición HTTP distinta. El problema no es la velocidad, puesto que se pueden paralelizar las subidas, el problema son las distintas peticiones si tienes que adjuntar datos. El hecho de que sean distintas peticiones complica un poco la lógica en el servidor en según que casos…

En fin, recientemente he usado uploadify en un proyecto donde los usuarios debían estar registrados para poder subir archivos. Claro, registrados y logueados en el sistema. El tema es que tras implementar la subida de archivos, no funcionaba… y no funcionaba… y casi me vuelvo loco, hasta que me di cuenta de que uploadify no envia las cookies, y  lógicamente sin cookies el servidor no tiene forma de cargar las variables de sesión, y por tanto, de saber qué usuario está intentando subir qué, y dado que el servidor no tiene forma de saber si es o no un usuario registrado, devuelve un mensaje de error. Total, que una vez detectado el problema de las cookies la solución ha sido simple.

La solución para mantener la sesión con uploadify (y en general cuando el cliente no tiene cookies), es añadir a la URL de subida el nombre de sesión y el identificador de sesión.

En PHP añadir esto a la URL sería algo, tal que:

$url = $url . '?' . session_name() . '=' . session_id();

Una vez hecho esto, problema resuelto

En fin, lo que estaba intentando hacer es algo como un efecto de click. Me explico. Lo que quería que ocurriera, es que cuando el usuario hiciera click en un enlace, se produjera como una especie de linea de expansión. Pongo un ejemplo. Has visto el tipico anuncio de la Wii, donde al principio aparecen como tres o cuatro círculos concéntricos que se dispersan hasta desaparecer? Pues algo así, pero para cuando el usuario hiciera click con el ratón en una web.

Al final de trastear un rato, hacer unos cuantos experimentos con imágenes, y seguir trasteando con animaciones sencillas, creo que he llegado a una primera aproximación que mas o menos se parece a lo que yo quería.

• Ver el efecto en vivo y en directo (demo)
• Descargar el plugin de jSimulateClick

Básicamente, el ejemplo tiene 2 fragmentos interesantes (tampoco hay más en el html):

El primer fragmento es el que asocia el evento de click a todos los elementos que tienen la clase ‘clickable-round’. Cuando hagas click dentro de un elemento de esa clase, aparecerá un círculo que se irá difuminando.

$('.clickable-round').click (function (event) {
 $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1, 'round');          
});

El segundo fragmento, asocia el evento de click a los elementos de la clase ‘clickable-square’. Cuando hagas click en cualquiera de estos elementos, el efecto será similar al anterior, pero en vez de mostrar un círculo, mostará un rectángulo que va, desde donde hayas hecho click, hasta cubrir el área del elemento en cuestión:

$('.clickable-square').click (function (event) {
  $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1);          
});

Si quieres trastear el plugin, los parámetros con los que se puede trastear son el color del borde, el tamaño inicial del borde, la duración de la animación, …

Este javascript se puede usar para aplicaciones personales, comerciales y para lo que se quiera.

Finalmente, agradecería cualquier comentario para mejorar el efecto.

La nueva versión de jQuery 1.4.1 soluciona algunos bugs e incluye algunas mejoras.

Descárgarte jQuery 1.4.1 y écharle un vistazo a las release notes.

El caso es que últimamente he notado que el código en javascript que estaba escribiendo era un poco caotico, sobretodo cuando en la página había varios eventos, etc… Si comprendes lo que quiero decir, es que es un buen momento de que dejes tu también de hacerlo

Total, que me dije: “tio, puedes hacer dos cosas”

• Puedes buscarte un buen controlador o plugin para jQuery (CorMVC),  o incluso buscar un framework como JavaScriptMVC o Jamal
• O puedes cometer la estupidez de hacer tu propio controlador para javascript

El lector avispado se habrá dado cuenta de lo estúpido que soy.

Pues nada, os presento jcontroller y su versión minificada (con yuicompressor).

Tiene tests (que no incluyo), pero básicamente se pasan en Firefox, Chrome e Internet Explorer. Un segundo que no me cuesta nada… también funciona en Opera. Vale, pues mira por donde que parece que se lleva bien con los browsers (asumo que funciona en Safari).

Entremos en materia:

¿En qué consiste jcontroller?

Básicamente sirve para no tener una maraña de código y controlar un poco las acciones que realizar según los eventos del usuario (normalmente los clicks).

Como contar más cosas es una tontería, os voy a enseñar un ejemplo y ya cada cual que haga lo que le parezca. En este momento es cuando yo paro de escribir el post para hacer el ejemplo en mi ordenador. Este post ha surgido tan repentinamente que no tenía nada preparado…

Vale, el ejemplo chorra ya está preparado, sólo comento lo principal:

• Nada se ejecuta sólo, hay que iniciar el controlador con  la función “init”. Si le das el nombre “controller” pues “controller.init()”
• El controlador ejecutará la función ‘_init’ que hayamos definido en nuestra implementación, al principio.
• Las funciones que empiezan con ‘_’ son privadas y no pueden ser ejecutadas desde fuera (excepto _init, _default y _clear)
• El controlador automáticamente, cuando se carga, mira lo que hay en la parte de hash ‘#’ de la URL, y llama a la función que considere apropiada
• Aunque ahora mismo funciona todo para detectar los enlaces tipo ‘#whatever’, se puede implementar el “trigger controller” que quieras, devolviendo una función en tu implementación de ‘_init’ (ignora este parrafo de momento)
• Se pueden definir tantos controladores como quieras, cada uno es independiente a los demás, aunque si todos usan el mismo “trigger controller” todos se van a ejecutar a la vez (ignora este parrafo de momento)

Aquí os dejo los enlaces principales:

• Ejemplo
• Ejemplo#message-1
• Ejemplo#message-2

Realmente el ejemplo es muy chorra, jcontroller en sí es muy chorra, echadle un vistazo.

Nota: Ahora mismo usa jQuery, pero no creo que lleve más de 10 minutos cambiarlo por otro framework

Finalmente os vuelvo a poner los enlaces, para quien se lo quiera descargar:

• jcontroller.js (6.6 KB)
• jcontroller.min.js (1.2 KB)
• Si lo comprimes con gzip son sólo 552 bytes :p

Pues nada más que contar por el momento.

Las críticas constructivas son bienvenidas y las destructivas ignoradas.

Un saludo

Los cambios más importantes son:

• Elements are now returned in document order.
• .live() can now prevent bubbling.
• :visible/:hidden are now significantly faster.
• As are all the width/height methods.
• Selectors are much faster in Internet Explorer.
• appendTo/etc. have had a slight API tweak.

Así que ya sabeis, hay que actualizarse

Enlaces:

• Descargar jQuery 1.3.2 minified
• Descargar jQuery 1.3.2
• Anuncio del release en el blog oficial

Esta nueva versión parece que es la bomba, porque se han reescrito muchas partes en pro del rendimiento. Las características más importantes de esta versión, como se puede ver en la wiki de jquery, son:

• Sizzle: Un nuevo selector de CSS que funciona muchisimo más rápido para los selectores más utilizados
• Live Events: Eventos que se autoañaden cuando añadimos un nuevo elemento HTML
• jQuery Event Overhaul: Simplificación en los manejadores de eventos (creando una clase Event)
• HTML Injection Rewrite: añadir elementos HTML es ahora mucho más rápido
• Offset Rewrite: calcular la posición es ahora super-rápido
• No More Browser Sniffing: Ya no hay código que diga, si el navegador es X, haz esto. Si no que lo que se hace es directamente mirar si el navegador puede hacer X, y si no pues hace Y, se basa en las capacidades del navegador, no en qué navegador sea. Esto tiene la ventaja que si mañana sale FF3.2 y cambia algo, pues seguirá funcionando la libreria.

Y ahora unas gráficas donde se puede apreciar las nuevas mejoras de rendimiento:

Como se puede ver en todas las gráficas, el nuevo jQuery parece que va mucho más rápido.

Ahora hace falta confirmarlo en la práctica, así que voy a probar a cambiar la versión de jQuery a ver si todo es tan estupendo como parece.

Si a alguien le interesa saber los detalles, puede consultar la página oficial con información sobre el release de jQuery 1.3

Y para terminar, aquí están los enlaces para descargar la última versión de jquery:

• jQuery 1.3 minified
• jQuery 1.3 regular

Por lo general, redondear esquinas no es difícil, el problema es que en definitiva lo que se hace no deja de ser un “hack”, no es lo mismo poder redondear una esquina usando 1 único div, especificando una serie de atributos (como se puede hacer con CSS3), que usando 3 divs, o incluso poner una tabla y usar imágenes de fondo.

En este sentido, la pena, como siempre, es que la mayor parte del mercado sigue estando dominada por Internet Explorer, por lo que en la práctica no es correcto redondear las esquinas como expuse en el artículo anterior.

Una vez dicho esto, y sabiendo que esta es la situación actual, para que las esquinas redondeadas puedan ser visualizadas por todas las personas, sin importar su raza, religión, navegador o sistema operativo, creo que habrá que seguir haciendo uso intensivo de javascript. Por suerte, desde hace ya unos años hay librerías que nos facilitan el tema de una forma brutal:

• Nifty Corners, y su predecesor, Nifty Corners Cube: fue la primera solución y muy aclamada en su momento
• jQuery corner plugin, creado por Dave Methvin: aquí podeis ver una demo con todas las opciones, y que luego fue actualizada por Mike Alsup que incluyó bastantes más tipos de esquinas (merece la pena echarle un vistazo a la demo).
• JRC es otro plugin para jQuery: en este enlace podeis ver una demo
• MochiKit ya viene con soporte nativo para rounded corners, como se puede ver en este ejemplo (aunque no es tan extenso como el plugin de jQuery).
• OpenRico también tiene soporte para esquinas redondeadas

Finalmente, si alquien quiere que sus esquinas estén redondedas, y no tiene intención de usar javascript, bien porque busca algo más sofisticado, bien porque no le gusta usar javascript, que le eche un vistazo a este artículo sobre 25 técnicas CSS para realizar esquilas redondeadas.

Actualización: en la práctica me he encontrado con ShadedBorders que me ha gustado bastante bastante más.

El objetivo que pretende conseguir su autor es asociar un identificador único a un determinado elemento de la página web, de tal forma que no se creen elementos duplicados.

Aunque lo ha complicado un poco (usando la fecha en milisegundos, y luego un número aleatorio), aquí va mi versión del asunto (porque reconozco que a veces esto es útil):

(function($){
 var _next_uid = 0; 
 $.fn.uid = function(prefix) {  
   return this.each(function() {
     this.id = (prefix || 'uid') + (_next_uid++);
     return $;
   });  
 };  
})(jQuery);

De esta forma, se pueden crear o asociar identificadores únicos a cuantos objetos se quiera. He aquí un pequeño ejemplo:

  // crear un elemento nuevo con un identificador único
  $("<div>contenido del div</div>").uid ('prefijo').appendTo ('body');
 
  // crear un elemento nuevo con un identificador único
  $("<div>contenido del div</div>").uid ().appendTo ('body');
 
  // asignar un identificador a todos los elementos 
  $(".className").uid ();

Reconozco que para hacerlo bien bien, habría que mirar si el identificador que se va a crear existe, y si existe incrementar el contador, pero bueno, esta es la versión “bien hecha” programada y testeada en 3 minutos.

El problema es que a mi no me gusta lo que hace el navegador con los “checkboxes”.

Como cualquier otro input, los checkboxes tienen un valor asociado (por defecto “on”, aunque no estoy seguro de si esto varía según el navegador). Lo que uno esperaría de value, es que sea “on” si está checked y “off” si está unchecked. Pero no señores, no se confundan, siempre es “on”, igual que si le dices que value=”pepito”, value siempre será “pepito” independientemente de si el checkbox está checkeado o no.

Entonces (se preguntará el lector avispado que aún no haya tenido el placer de programar en HTML), ¿como sabe el servidor si el checkbox está checked o unchecked? Elemental mi querido Watson. El navegador sólo envia esa información si está checked y no la envia si está unchecked. ¿Que putada, no? Porque hay veces que parece que esto rompe algunos flujos típicos con otros datos.

No es que este comportamiento de los navegadores sea muy problematico, pero a veces a uno le interesa que funcione de otra manera.

Sea como fuere, aquí pongo una extensión para jQuery, que básicamente lo que hace es lo mismo que “serialize” pero pone siempre los checkboxes, de tal forma que pone “nombre=1” cuando el checkbox está activado, y “nombre=0” cuando no está activado.

jQuery.fn.jserialize = function () {
  var serialized = this.serialize();
 
  $(this).find(':checkbox').each (function() {
    var tofind    = $(this).attr('name') + "=" + $(this).val();
    var toreplace = $(this).attr('name') + "=" + (this.checked ? '1' : '0');
 
    if (this.checked)   { serialized = serialized.replace (tofind, toreplace); }
    else                { serialized += "&" + toreplace; }
  });
 
  return serialized;
}

Enlaces de interés:

• Resetear un formulario con jQuery
• Pregunta de Badtant sobre porque serialize no envia los unchecked checkboxes
• Página oficial de jQuery
• Método jQuery.serialize
• Método jQuery.serializeArray