Un ejemplo típico es cuando quieres mostrar la hora y quieres que el formato sea hh:mm. No hay ningún problema cuando son las 12:40, pero si es la una y cinco, se muestra 1:5 en vez de 01:05. Lo mismo pasa con las fechas y en innumerables situaciones.

Ayer me he encontré una solución que me parece la mejor que he visto hasta la fecha.

Normalmente, tratándose de un cero, uno haría algo como:

h = (h < 10) ? ("0" + h) : h;

Esto no es feo del todo, pero tampoco es elegante. Y que pasa si queremos 3 ceros? Podríamos hacer algo como:

h = (h < 100) ? ( (h >= 10) ? ("0" + h) : ("00" + h) ) : h;

Este código en un if/else seguro que queda más claro, pero aún así esto es una guarrada. Lo normal sería hacerse una función que rellene con ceros (o con cualquier otro caracter), y usar esa función.

Una vez vista la solución más típica y feucha, es el momento de ver la solución mágica:

("0" + h).slice (-2);  // devolverá "01" si h=1; "12" si h=12
("00" + h).slice (-3); // "001" si h=1; "012" si h=12;"123" si h = 123

Lo que hace el código de arriba es concatenar “00″ con el número (por ejemplo “00″ + 12 = “0012″) y luego cogemos los 3 últimos caracteres empezando desde el final (de ahí el -3). Y los 3 últimos caracteres son: “012″

No se a vosotros, pero yo cuando vi esta solución se me iluminó el cielo. ¡¡Que fácil!!

Por cierto, también se puede usar para rellenar con espacios o con lo que se quiera.

Fuentes:

• Padding zero in Javascript
• Little tricks: string padding in Javascript en el blog de Eneko Alonso

Update: Milan Adamovsky ha creado una página web en http://jsperf.com/zero-padding donde se puede ver el rendimiento de distintas funciones para hacer padding

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.

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

Hoy día hay cientos de librerias para cualquier lenguaje que realizan un escalado. La única pregunta es, ¿cuales deben ser el nuevo ancho y largo de la imagen?

A continuación el código mágico que está probado en javascript, pero que debe funcionar en PHP, python, java, perl, C, y lo que le pongas por delate

if (w < h) {
  h = (h * maxWidth) / w;
  w = maxWidth;
}
else {
  w = (w * maxHeight) / h;
  h = maxHeight;
}

w representa el ancho o width de la imagen

h representa el alto o height de la imagen

maxWidth la anchura máxima del área en la que se quiere meter la imagen

maxHeight la altura máxima del área en la que se quiere meter la imagen

Como ejemplo final, aunque es prácticamente copy paste, imaginad que quereis meter una imágen de tamaño (w, h) en un área de 640×480:

var maxWidth = 640, maxHeight = 480;
if (w > maxWidth || h > maxHeight) {
  if (w < h) {
    h = (h * maxWidth) / w;
    w = maxWidth;
  }
  else {
    w = (w * maxHeight) / h;
    h = maxHeight;
  }
}

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

La verdad es que no es algo que a uno le haga falta todos los días, pero a mi me hacía falta y me ha resuelto el problema.

En el ejemplo que hay en dicha página se usan las funciones getSelectionStart y getSelectionEnd. La primera nos dice donde está el cursor, mientras que la segunda nos dice dónde finaliza la selección (siempre y cuando getSelectionEnd devuelva un valor distinto a getSelectionStart).

A continuación teneis estas dos funciones:

function getSelectionStart(o) {
 if (o.createTextRange) {
   var r = document.selection.createRange().duplicate();
   r.moveEnd('character', o.value.length);
   if (r.text == '') return o.value.length;
   return o.value.lastIndexOf(r.text);
 }
 else {
    return o.selectionStart;
 }
}
 
function getSelectionEnd(o) {
 if (o.createTextRange) {
 var r = document.selection.createRange().duplicate();
 r.moveStart('character', -o.value.length);
 return r.text.length;
 } else {
   return o.selectionEnd;
 }
}

Claramente os tomé el pelo ;p

Que noooooooo!! A ver, todo lo que conté ayer es verdad. No se puede obtener el valor de las peticiones cross-domain a no ser que se usen algunos trucos (lo del proxy PHP, …), por lo que estrictamente hablando el código que obtiene el PageRank sigue sin saber cual es el Page Rank, sin embargo, sí puede mostrar ese PageRank adecuadamente, y eso es lo que hace el script.

Por no andarme con rodeos, a continuación teneis un iframe donde podeis poner la web que querais y os mostrará su PageRank. Os prometo que sólo utiliza javascript (mas abajo el código).

Ver la demo en una ventana nueva

Básicamente lo que hace el script es calcular una serie de checksums de la página web introducida, actualizar unos campos en un formulario y enviar ese mismo formulario usando GET, y cargando el resultado devuelto por Google en un iframe. Ese iframe no se puede manipular de ninguna de las maneras, y si en vez de usar lo del iframe, se hace con AJAX, el resultado es el mismo.

El truco, hack, chapuza o como lo querais llamar, es que el PageRank aparece después de una cadena (que por los tests realizados es “Rank_1:1:”). Lo que hace el script es calcular (mas o menos) donde estará el número de PR en esa cadena y mueve el iframe para que sólo salga ese último número.

Debo reconocer que hacer esto con javascript es bastante chapuza, aunque la ventaja es que se sigue viendo el PR de una web, y todas las peticiones a Google corren a cargo de los propios navegadores web. Tampoco descarto que algunas personas puedan tener algún problema al visualizar el PR en su navegador, en tal caso el script necesitaría algunas adaptaciones y sois totalmente libres de hacerlas.

A continuación teneis el código de getpagerank.js, el script que calcula los checksums y obtiene el Page Rank de Google. Podeis echar un vistazo al código de pagerank.html para ver como funciona todo.

Finalmente, por si alguien quiere embeder la página en su web, el código es el siguiente

Bueno, ¿Que os ha parecido? ¿os ha gustado? ¿estais decepcionados? ¿lo veis demasiado chapuza?

Proximamente en CodigoManso explicaré como hacer peticiones cross-domain con javascript y pasar información de unos servidores a otros (esto ya no será en plan chapuza, lo prometo).

Ni corto ni perezoso, aún a sabiendas que habría algun problema me dije:

“tienes que pasar ese código a javascript y poner un enlace en la web. Seguro que atraes más visitas”.

¿Que acabó pasando? Que tengo el código pasado a javascript, hace la petición a Google, Google devuelve el page rank pero oh magia!! la cadena devuelta hay que parsearla un poco, y no puedo ni leerla, ni parsearla ni manipularla de ninguna de las maneras, y he intentado muchas cosas, pero básicamente se trata de políticas de seguridad en los navegadores (que comprendo perfectamente) y no hay nada que hacer  (ohhhhhhhhhhhh).

Y es que se puede hacer una petición para cargar contenidos html de otros dominios en un iframe de nuestra página html, incluso usando AJAX (vease haciendo una petición XMLHttpRequest o usando un ActiveXObject(‘Microsoft.XMLHTTP’), según convenga), sin embargo o puede acceder a ellos de ninguna de las maneras.

La verdad que investigue mucho sobre el tema del cross-domain, y aprendí mucho en el camino, lamentablemente la conclusion fue clara, no intentes nunca con javascript integrar contenidos cross-domain en tu web, porque no vas a poder. Es una putada, pero es así.  Se puede conseguir usando un “proxy” en tu servidor, o bien usando flash, pero no era mi objetivo.

Una vez llegados a esta conclusión, en el próximo post os pongo el código para obtener el PageRank de Google usando sólo javascript. Si señores, se puede decir que “lo he conseguido” (de una forma muy poco elegante, y que dará que hablar, todo sea dicho), pero saca el numerito de PageRank

Acabo de probar el código en Opera/Safari/FF3/IE7 y parece que funciona el truco en todos. Vease el siguiente screenshot:

Ale, ahora que ya se que funciona,  os dejo con la intriga. Mañana más ;p