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.

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

Hay una sencilla forma de saber si Firebug está o no activo e incluso ver cual es la versión que el cliente tiene instalada. Se trata básicamente de mirar si hay un DIV cuyo identificador es _firebugConsole y luego mirar el atributo FirebugVersion.

El siguiente código en jquery muestra una alerta indicando que firebug está activo junto a la versión del cliente:

if ($("#_firebugConsole").length) {
alert ("Firebug version " + $("#_firebugConsole").attr ("FirebugVersion") + " is active");
}

Pasar este código a cualquier otro framework es trivial, incluso se puede usar document.getElementById sin problemas.

También hay otro modo de saber si firebug está activo, que es mirando si window.console.firebug está definido:

if (window.console && window.console.firebug) {
alert ("Firebug is active");
}

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

El problema viene cuando preguntamos por el div X y el padre está oculto, entonces jQuery nos dirá que X no está oculto, pero realmente el usuario no lo estará viendo en la pantalla, por lo que sí estará oculto.

Como siempre, lo mejor son los ejemplos.

Ejemplo 1:

Empecemos por el principio. Si yo tengo el siguiente código HTML:

<div id="DivBlock">Element</div>

Al ejecutar el siguiente código, tendremos dos alerts, el primero diciendo “Visible!” y el segundo “Not Hidden”.

if ($('#DivBlock').is (':visible')) alert ("Visible!");
if (!$('#DivBlock').is (':hidden')) alert ("Not Hidden");

Como veis, hasta aquí todo funciona a la perfección, y podeis ver que preguntar si un objeto está visible o oculto en jquery no tiene demasiada dificultad.

Ejemplo 2:

Ahora bien, veamos que ocurre si el padre está oculto:

  <div style="display: none;">
   <div id="DivBlock">Element</div>
  </div>

Ahora si ejecutamos el siguiente código, en todos los navegadores menos Safari volverán a saltar los alerts, y sin embargo el elemento está oculto!!.

if ($('#DivBlock').is (':visible')) alert ("Visible!");
if (!$('#DivBlock').is (':hidden')) alert ("Not Hidden");

Oh my god! ¡¡jQuery lo está haciendo mal!!

Afortunadamente, la solución a este problema es muy sencilla. Para preguntar si el elemento X es realmente visible, hay que preguntar ¿son X y todos sus padres visibles?, o lo que es lo mismo ¿es X visible y ningún padre de X ha sido ocultado? que en jQuery viene a expresarse de la siguiente manera:

if ($('#DivBlock').is (':visible') && $('#DivBlock').parents (':hidden').length == 0)
  alert ("Visible!");

Finalmente, como solución alternativa, se puede crear un selector para preguntarle directamente:

jQuery.extend(
  jQuery.expr[ ":" ], 
  { reallyvisible : "(jQuery(a).is(':visible') && jQuery(a).parents(':hidden').length == 0)" }
);

Con lo que el código javascript del ejemplo anterior quedaría:

if ($('#DivBlock').is (':reallyvisible'))  alert ("Visible!");

Para más información:

• jquery *really* visible
• jQuery Traversing: parents method
• jQuery Traversing: is method
• jQuery Visible Selector
• jQuery Hidden Selector

Hay que tener en cuenta, que normalmente lo que se quiere es que una persona ponga la hora y los minutos, y si a caso, si es AM o PM (cuando no se usa un formato de 24 horas). Por lo general, y en mi opinión, un text input de los de toda la vida junto con una función en javascript que valide que lo que ha metido el usuario es un tiempo correcto (p.ej: hh:mm), en general, es más que suficiente.

Bueno, vayamos a ver los distintos time pickers que me he encontrado:

NoGray Time Picker

En el número 1, bonito donde los haya, y el único que realmente me ha gustado, situo a NoGray Time Picker. Debo reconocer que es de los pocos que me he encontrado que mejora el diseño de la web sin empeorar la usabilidad. Como datos de interés, diré que este time-picker utiliza mooTools por debajo.

Como cabe esperar, al hacer click en las manecillas del reloj, éstas se mueven, permitiéndonos así seleccionar la hora

Aquí podeis ver un ejemplo de este time-picker funcionando

Time Picker jQuery plugin

Time Picker es un plugin de jQuery, que básicamente está formado por tres select, uno para la hora, otro para los minutos y otro para saber si es por la mañana o por la tarde. Recomiendo el uso de este plugin, siempre y cuando se quiera que el usuario introduzca una hora en intervalos de 10 o 15 minutos, con el fin de no degradar la usabilidad.

Podeis ver que es el plugin no tiene mucho misterio

Fancy Time Picker

Por otra parte tenemos a Fancy Time Picker, que si bien no es de los que más me desagradan, muy usable muy usable no es, porque sale una tabla con muchos números y creo que al final en vez de ayudar al usuario, lo que hace es colapsarlo.

La demo de Fancy Time Picker la podeis ver en este enlace.

Clock Pick

Clock Pick es otro time picker de los que aparece a poco que se indague en vuestro buscador de confianza. Se trata de una extensión de jQuery, y la verdad es que a mi parecer, también empeora la usabilidad, incluso más que en el caso anterior.

A continuación teneis una captura de pantalla:

De todos modos, creo que hasta que no se prueba un ejemplo real, no se aprecia hasta que punto se degrada la usabilidad. Os animo a ir a esta página de ejemplo, y que valoreis vosotros mismos.

jQuery.ptTimeSelect

ptTimeSelect es otro plugin de jQuery que trata de realizar un seleccionador de horas. El problema que yo le veo es lo de siempre, demasiado lío visual para simplemente seleccionar horas y minutos.

Seguro que alguno pensará:

- “Oye, que si que tienen sentido los números. ¿No ves que estan agrupados por horas y minutos, y puedes seleccionar AM o PM?”

- ” Sí, tienes razon, tienen sentido” – contestaré yo – “¿Pero no es verdad que has tardado como 3 segundos en encontrárselo? Enseñaselo a tu madre y preguntale si entiende algo…”

Pues eso, que demasiado  lio para seleccionar una hora.

jQuery TimePickr

Finalmente, para terminar con la lista, tenemos otro plugin de jQuery llamado Time Pickr. Reconozco que el plugin es ingenioso, en el sentido de usar un menú de navegación para seleccionar la hora, sin embargo, me parece liar demasiado las cosas, y no se hasta que punto puede ayudar a un usuario a poner una hora. Creo que es complicarlo un poco, en cualquier caso, cada cual que se forme su opinión.

Conclusión

Yo en el caso de elegir algún time-picker para cualquiera de mis proyectos, creo que me quedo con los dos primeros ejemplos  (No Gray Time Picker ó bien jQuery Time Picker), el resto los descarto. La reflexión que yo hago es, ¿realmente son necesarios sistemas tán “sofisticados” para permitirle al usuario seleccionar una hora? La idea de usar uno de estos pickers debe ser la de ayudar al usuario, facilitarle su trabajo, y creo que algunos de ellos lo complican aún más.

Yo creo que la clave para saber si el nivel de usabilidad es o no bueno, es preguntarte a ti mismo:

¿Entendería mi madre/padre/abuelo/abuela a la primera cómo funciona esto?

• Si la respuesta es, sí, inmediatamente, ahí lo tienes
• Si la respuesta es que sí, después de unos segundos… no acaba de ser usable.
• Si la respuesta es no, obviamente no es usable.

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.