Muchas personas no conocen Mootools y, como generalmente ven más sitios o ejemplos hechos en jQuery creen que “es mejor”, pero a mi juicio Mootools es mucho mejor que jQuery. De hecho, NUNCA he visto algo que se pueda hacer en jQuery y que no se pueda hacer en Mootools (por favor si alguien sabe de algo que lo publique acá), y en teoría no tendría porqué jQuery ser mejor que Mootools en ese sentido si ambos están basados únicamente en lo que permite hacer javascript.

El gran plus de jQuery: su documentación

Me he encontrado que cuando quiero buscar algo relacionado a jQuery me es bastante fácil encontrar una solución o ejemplos, a diferencia de Mootools, que su documentación es bastante pobre (sólo lo justo y necesario). Además de eso, mootools tiene unos ejemplos online muy antiguos (de la versión 1.1) y para las últimas versiones ofrecen descargar los ejemplos o revisar su funcionalidad en una interfaz llamada jsFiddle, en la cual también se encuentran ejemplos de las demás librerías como YUI o prototype.

Por su parte jQuery ofrece cosas mucho más simples como jQueryUI o su listado de plugins, los cuales ofrecen ejemplos bastante claros, concretos y simples. Quizás por eso es tan popular jQuery, porque es mucho más fácil encontrar una librería que se ajuste a las necesidades de algún proyecto, la cual puedes implementar incluso con poco conocimiento. De todas formas Mootools no se queda atrás y ofrece Mootools Forge (que en la práctica es un repositorio de plugins) y existen sitios como JOURMOLY que tiene muchos ejemplos realmente útilies y que le “salvan el pellejo”.

El gran plus de Mootools: su funcionalidad

Vamos directo con un ejemplo: cuando tengo un link y quiero que al hacer click haga submit a un formulario simplemente pongo lo siguiente en mootools:

$('id_del_formulario').submit();

En jQuery esto no funciona. Es algo complejo de explicarselo a humanos (yo no soy programador de profesión asique tampoco me gusta explicar las cosas como programador), pero en resumidas cuentas, mootools permite seleccionar un objeto con $ y eso al final es lo mismo que decir document.getElementById. En jQuery, al usar el $ el objeto se convierte en un objeto de jQuery y si quiero hacer un submit tengo que usar una función interna que trae jQuery para dichos efectos. Al ser un objeto de jQuery aparentemente no puede interactuar con todas las funciones básicas de javascript, y eso a la larga es confuso.

NOTA: puede ser que en las últimas versiones de jQuery esto ya no suceda. Me tocó hace tiempo hacer algo como esto y últimamente no me ha tocado desarrollar en jQuery, asique si estoy mal avísenme.

Lo importante es que Mootools es más flexible en ese sentido. Es bastante fácil de implementar y tiene métodos muy simples. Como es obvio, también, hay cosas que son más simples en jQuery, asique creo que en ese sentido es mejor que cada uno decida.

Mi opinión personal

Por mi parte recomiendo Mootools. Personalmente no me gusta jQuery (es como escoger entre WordPress o Joomla, entre los cuales prefiero WordPress), y encuentro que es un poco más engorroso de entender y programar.

Personalmente uso un archivo que pesa 213k pero que contiene TODO Mootools (ya que hay un Mootools “básico” y un “core” que tiene más funcionalidades) y con eso puedo hacer todo lo que quiera en cualquier sitio. Como los .js se cargan una sola vez y luego se toman del caché el impacto que esto produce es imperceptible y además de esa manera no se llama a n archivos (como sucede en jQuery, donde se carga la base y luego se van cargando librerías para efectos, desplegables, carruseles, etc.), sino que se carga sólo 1, lo cual optimiza bastante la carga de la página.

Con esto inicio el debate por si alguien se quiere sumar…

Acá les dejo una forma automática de hacerlo, en javascript, por supuesto:

var inputs=$$('#formulario_de_contacto .text','#formulario_de_contacto textarea');
for(i=0;i<inputs.length;i++){
	inputs[i].txtOriginal=inputs[i].value;
	inputs[i].onfocus=function(){
		if(this.value==this.txtOriginal){ this.value=""; }
	}
	inputs[i].onblur=function(){
		if(this.value==""){ this.value=this.txtOriginal; }
	}
}

No hay mucho que explicar de este código: primero selecciona todos los textarea y elementos con la clase “text” (que es la que yo uso para diferenciar los inputs type=”text” de los otros inputs) y luego a cada uno de esos elementos les lee el value original y lo guarda en una variable txtOriginal, para luego decirle que cuando se ponga el cursor sobre ellos revise si tienen el mismo texto que el original o si está vacío para hacer la acción correspondiente.

El código anterior utiliza mootools para optimizar la búsqueda de los inputs de texto y los textarea dentro del código. Si no saben como se utiliza mootools, vean este tutorial.

Hay veces en que llamo a una función pero en la página donde estoy no he cargado el archivo .js correspondiente y por lo tanto el navegador me tira un error. ¿Cómo solucionarlo?: fácil (siempre digo lo mismo). Tenemos que agregar al final del archivo js una variable cualquiera:

var archivoCargado=1;

Y luego, antes de llamar a la funcion que necesitamos le preguntamos si esa variable existe (sin que nos arroje un error). Si la variable existe es porque se cargó el archivo, y si no existe será “undefined“, osea que no ha sido definida, osea que el archivo no se cargó. Algo así:

if(typeof(archivoCargado)!="undefined"){ ejecutarFuncion(); }

…dudas?

Claro, yo se que existe el famoso firebug y alguna que otra alternativa para ayudarnos a encontrar los errores, pero es mejor prevenir que perder tiempo en guevadas, jajaja.

La cosa es simple: “¿cómo saber si existe una variable en javascript sin recibir un error de vuelta si es que no existe?”. Claro, porque si pregunto simplemente:

if(miVariable){ alert("si existe"); }
else{ alert("no existe"); }

claramente voy a recibir un error diciendo que miVariable no está definida. Osea que teóricamente nunca nos vamos a salvar del error (se supone que estamos consultando si la variable existe o no para no recibir un error más adelante).

Asique la solución es simple. Tendremos que consultar lo siguiente:

if(typeof(miVariable) != "undefined"){ alert("si existe"); }
else{ alert("no existe"); }

…y voilá. No tendremos más el tedioso problema.

Suerte!

Generalmente publico artículos y desarrollos míos, pero esta vez es algo así como uns servicio de utilidad pública. Esta vez puedo dar fe de que es la solución definitiva, pues lo probé y funcionó todo a la perfección.

Navegando por ahí encontré el sitio de DillerDesign, donde publican su “experimento” DD_belatedPNG. El tema es que esa librería de JavaScript REALMENTE soluciona el famoso problema de los PNG transparentes.

Anteriormente yo había publicado un artículo al respecto, pero la solución que planteaba, si bien funcionaba, no servía para cuando existían fondos transparentes que se repetían. En fin. Esta librería sirve tanto para imágenes incrustadas directamente en el código a través de la etiqueta IMG, o a través de un fondo de CSS.

Está en inglés, pero acá les dejo el link directo: http://www.dillerdesign.com/experiment/DD_belatedPNG/

Suerte!

Su objetivo principal es el de definir un tiempo para esperar a ejecutar alguna otra función. Por ejemplo, si necesito mostrar una alerta y que desaparezca en 3 segundos más, o si necesito que un reloj vaya actualizándose cada 1 segundo.

setTimeout()

Esta función permite definir un tiempo específico para que se ejecute una tarea una sola vez. Se utiliza de la siguiente manera:

var t = setTimeout(funcion,tiempo);

setInterval()

Este función permite ejecutar una tarea infinitas veces cada una cierta cantidad de tiempo. Se utiliza de la siguiente manera:

var t = setTimeout(funcion,tiempo);

El tiempo de ambas funciones se mide en milisegundos, es decir, que 1000=1 segundo

clearTimeout()

Esta función permite anular alguna llamada específica a setTimeout() o setInterval(). Se utiliza de la siguiente manera:

clearTimeout(t);

Donde t corresponde a la variable que se definió para almacenar la llamada a alguna de las otras dos funciones.

Hay que tener cuidado de saber bien donde se definió la variable t, pues si está definida dentro de otra función o de un movieClip (en el caso de Actionscript), no va a funcionar si no se “rutea” bien la llamada a esa variable.

Vamos a un ejemplo práctico

Javascript

Vamos a realizar un contador como ejemplo. Este es el código que debemos utilizar:

var tiempoInicial=10;
function tiempo(){
    tiempoInicial--;
    document.getElementById('tiempo').innerHTML=tiempoInicial;
    if(tiempoInicial==0){
        clearTimeout(t);
        alert("fin");
    }
}
var t = setInterval(tiempo,1000);

Al principio del script se define la variable “tiempoInicial”, que será la misma que iremos utilizando para ir contando hacia atrás.

La variable no se puede llamar “tiempo”, pues la función que utilizaremos se llama tiempo y si ambas se llamasen igual javascript no sabría si nos estamos refiriendo a la función o a la variable.

El div dentro del cual se mostrarán los segundos restantes se llama tiempo también, y este no generará ningún conflicto con la funcion tiempo, ya que no es un elemento de javascript, sino uno de HTML.

Luego definimos la función tiempo, que lo que hace es restar un segundo a la variable tiempoInicial, mostrarla dentro del DIV cuyo ID es “tiempo”, y luego verificar: si el tiempo es igual a 0, anula el intervalo de tiempo que se define inicialmente, es decir que deja de llamar a la función tiempo() cada un segundo.

Bajo la función se llama a la función setInterval y se define que el tiempo de intervalo sea cada un segundo (1000 ms). Antes de llamarla, se define la variable t, que es la que almacenará el intervalo para luego poder anularlo con clearTimeout desde dentro de la función.

Como este javascript se carga al principio de la página, en la práctica suceden 3 cosas:

1. se define el tiempo inicial
2. se define la función tiempo()
3. se establece el intervalo de tiempo

Estas cosas no vuelven a ejecutarse porque la página ya se cargó, pero el setInterval deja en memoria que se debe llamar a la función tiempo() cada un segundo eternamente, o hasta que se anule con la función clearInterval.

Descargar el archivo de ejemplo

Actionscript

Para actionscript la función es exactamente la misma, solamente que el número de segundos restantes debe mostrarse de otra manera. No voy a profundizar mucho en esta versión pero les dejo el archivo de ejemplo para que lo analicen ustedes mismos.

Descargar el archivo de ejemplo

Al momento de maquetear un sitio Web es necesario fijarse en varios aspectos, que no siempre son atendidos por los desarrolladores. Algunas veces por descuido, otras por no saber.

Acá les dejo este checklist que puede servir de ayudamemoria para los que maquetean. La idea no es hacer una buena maqueta, sino una profesional:

Código HTML

El código debe ser limpio y claro. Debe estar hecho con DIVs y no tablas. La idea es que se usen las etiquetas correctas en los lugares correctos: si vamos a poner un título que no sea div, sino que sea un H1, H2 o H3 (dependiendo de su importancia); si ponemos un input en un formulario, el texto asociado debe ir dentro de una etiqueta LABEL y debe tener el atributo FOR indicando al ID del input; etc.

Además de todo esto, el código debe ser validado por la w3c.

CSS

Los estilos CSS deben estar correctamente ordenados (ordénenlos como quieran, ¡pero ordénenlos!). Deben fijarse en que no hayan atributos innecesarios ni duplicados, ni estilos que no se estén usando. Por supuesto que deben estar bien tabulados y deben ser lo más compacto posible (para ahorrar espacio).

También deben estar validados por la w3c.

Codificación

Este tema es probablemente de los más complejos y desconocidos. En realidad no es tan complejo si se explica claramente, pero siempre cuesta entenderlo. Asique para ahorrarme palabras les dejo esta excelente explicación. En resumen, la idea es siempre utilizar UTF-8 como codificación ya que es más universal, y de esa manera se asegurarán que al momento de integrar la maqueta con algún lenguaje de programación (php, asp, etc.) todo va a funcionar perfecto. Sino, mejor ni les digo el problemita que van a tener con las “ñ”, los acentos y algunos otros caracteres.

Tamaño de texto y deformidades

Generalemente, la maqueta se debe hacer respecto a algún diseño (probablemente un PSD). Lo que digo con respecto al tamaño del texto es que deben asegurarse que los tamaños de texto que aparezcan el los PSD deben ser EXACTAMENTE IGUALES al que se ven en sus maquetas (de hecho la maqueta debe ser EXCATAMENTE igual que el diseño: esa es la idea de un buen maqueteo, sino ¿para qué entregar un diseño?).

Si se fijan también, los navegadores (no todos) hacen crecer el texto de la página al girar la rueda del mouse presionando la tecla CTRL. En esos casos, debemos asegurarnos que los textos que vayan creciendo no se salgan de sus espacios y que no se monten sobre otros textos. Generalemente este problema surge cuando se dan alturas fijas a los DIVs, y la solución se consigue utilizando algunos trucos que ya he mencionado (Divs expandibles).

Png’s transparentes en IE6

El típico problema, que aunque todos los desarrolladores estemos en contra, vamos a tener que solucionar hasta que este famoso navegador (y no por ser bueno) esté fuera del mercado.

Debemos cerciorarnos de que las transparencias se vean bien en IE6.

Correcta visión en todos los navegadores

Antes de comenzar el desarrollo (o durante) debemos tener claro para que navegadores debemos maquetear. Idealmente es para todos, pero por lo menos hay que regirse por los 4 más populares: Firefox, Internet Explorer (6,7 y 8), Safari y Chrome.

Como lo he mencionado varias veces, el objetivo es que se vea EXACTAMENTE IGUAL en todos los navegadores, incluyendo espacios separaciones, fondos, transparencias, tamaños, etc. Se puede, incluso sin usar los típicos hacks de CSS que andan dando vueltas por internet.

Tabulación y eliminación de espacios

Una vez que nuestra maqueta está terminada, tenemos que mirar su código.

Debemos fijarnos que esté correctamente tabulada (con tabs y no con espacios) y que no tenga saltos de linea adicionales. Por ejemplo, si utilizamos Dreamweaver, debemos cerciorarnos que en OPCIONES / FORMATO DE CODIGO esté marcado “indentar con 1 tab”. Si no lo hacemos así, tendremos miles de caracteres adicionales que pueden hacer incluso que una página pese un 25% o 30% adicional (y cuando hablamos de sitios con muchas visitas eso cuenta).

Limpieza de CSS y JS

Lo mismo que comenté antes de los CSS. Debemos realizar una limpieza final a los CSS y JS que hayamos utilizado para que no sobre nada y para que estén correctamente ordenados.

Ortografía

Cae de maduro, pero no para todos. Hay que fijarse en que la ortografía de nuestra maqueta o desarrollo sea correcta. He visto sitios por ahí que llegan a ser vergonzosos, y eso dice mucho de una empresa o persona.

JS y CSS de la cabecera

Debemos fijarnos que los CSS y JS que forman parte de nuestro desarrollo estén incluídos dentro de la etiqueta HEAD. La única excepción que podríamos hacer es en los casos de JS o CSS adicionales, como por ejemplo, los de Google Analytics, que idealmente deberían ir al final (para permitir que la página se cargue primero).

Debemos fijarnos también que no hayan funciones o estilos escritos en el código HTML (¿por qué?).

Links, hover y visted

Otro detallito más que muchas veces pasa desapercibido. Debemos fijarnos que no existan links rotos y también que pasa con nuestros links al momento de ser visitados. Los colores de los :visited y :hover deben estar definidos en nuestros estilos CSS.

Navegación

Una vez que está todo listo, es hora de navegar nuestro sitio, y probar que todo esté en orden. Es mejor que nos demos cuenta de cualquier detalle antes de lanzar un sitio a que se den cuenta nuestros visitantes de los errores.

Como muchos ya deben saber, los textarea no permiten el uso del atributo maxlength, que poseen los inputs de texto. Pero para simular eso vamos a recurrir a la siguiente funcion:

function maxLength(e,obj,num) {
    k = (document.all) ? e.keyCode : e.which;
    if (k==8 || k==0){ return true; }
    else{ return obj.value.length<num; }
}

Para aplicar esta función, es necesario incluir lo siguiente en cualquier textarea:

<textarea onkeypress="return maxLength(event,this,50);"></textarea>

En este ejemplo, le estamos diciendo a la función que limite el ingreso de textos a 50 caracteres.

Junto con la función se le envía la variable event, que corresponde al evento que está en memoria de la tecla presionada. Con esto, permitiremos que todavía se puedan utilizar las teclas de movimiento y borrado una vez que se supera el máximo de caracteres. La variable this corresponde al textarea, para que el javascript sepa sobre quien se está aplicando la función.

Una de las limitaciones de este sistema es precisamente que está hecho en javascript, y como es sabido, el javascript es fácil de engañar, pero aún así sigue siendo una buena alternativa para validar nuestros formularios. En todo caso, recuerden siempre validar los formularios en el php, asp o lo que sea que reciba los datos.

La escencia de la función es simple: recibe un evento; comprueba si es un número y devuelve una respuesta.

Sin  más preámbulo, la función es la siguiente:

function isNumber(e) {
    k = (document.all) ? e.keyCode : e.which;
    if (k==8 || k==0) return true;
    patron = /\d/;
    n = String.fromCharCode(k);
    return patron.test(n);
}

¿Cómo usarla?

Como decía anteriormente, esta función debe recibir un evento. En este caso es necesario llamarla desde la misma casilla de texto, de la siguiente manera:

<input type="text" onkeypress="return isNumber(event);" />

La manera en que estamos llamando a la función es a través del evento onkeypress. A este input se le pueden agregar todos los demás atributos que sean necesarios. Incluso es bueno definir el atributo maxlength para limitar la cantidad de caracteres que puede ingresar el usuario.

Como dato, la línea que consulta si k==8 o si k==0, lo hace para saber si la tecla presionada es el backspace (8) o las flechas, y delete (0), en cuyo caso retorna true, para autorizar que se tecleen.

Como modificar/ampliar esta función

Si se fijan, hay una línea que dice:

patron = /\d/;

Esta línea define el patrón a buscar. Es decir, que si el caracter ingresado (tecla presionada) está dentro de esta gama de caracteres, está autorizada a ser escrita en la casilla de texto. De otra forma, no se puede ingresar el caracter.

Otras posibilidades de patrones son las siguientes:

/\w/ = Permite cualquier caracter alfanumérico, incluyendo el guión bajo (_). Es equivalente a [a-zA-Z0-9_].

/\W/ = Permite cualquier caracter que NO sea alfanumérico. Equivalente a [^a-zA-Z0-9_].

/\D/ = Permite cualquier número que NO sea un número. Equivalente a [^0-9].

[xyz] = permite cualquier caracter x, y o z.

[0-9] = permite cualquier número entre 0 y 9.

[a-z] = permite cualquier letra entre a y z (minúsculas).

[^a-k] = permite cualquier letra que NO esté entre a y k (minúsculas).

Existen muchas otras posibilidades de patrones, que corresponden a expresiones regulares en javascript.

Lo bueno es que con esta librería es posible comenzar a hacer cosas con una simple línea o función, y luego podemos ir detallando y complejizando más nuestra animación. Ahora veremos como.

Otro de los beneficios que ofrece Mootools es la posibilidad de hacer animaciones de una manera muy simple. Este es un ejemplo (suponiendo que tenemos un DIV id=”div_animable”:

$('div_animable').slide('out');

Este tipo de función se puede aplicar a cualquier objeto. Por ejemplo, si tenemos un botón, podríamos decirle que al hacerle click, se esconda un DIV específico:

<input type="button" value="Esconder DIV" onclick="$('div_animable').slide('out');" />

Los efectos más simples que ofrece Mootools son slide() y fade(). Ambos funcionan de la misma manera y son muy fáciles de implementar. La siguiente es la lista de opciones que se puede utilizar (el ejemplo está hecho con slide, pero se puede reemplazar por fade y funciona exactamente igual):

$('div_animable').slide('in');
$('div_animable').slide('out');
$('div_animable').slide('show');
$('div_animable').slide('hide');
$('div_animable').slide('toggle');

Al utilizar este tipo de efectos, se genera una animación con sus propiedades por defecto. Para modificar el comportamiento de cada una de ellas, es necesario primero definir la siguiente línea:

var miEfecto = new Fx.Slide('div_animable', {
duration: 500,
transition: Fx.Transitions.Back.easeOut
});
miEfecto.slideOut();

En este caso, primero se define un nuevo efecto y se almacena en una variable (miEfecto). Para definir este nuevo efecto, es necesario definir el tipo de efecto (Fx.Slide); al efecto definido se le deben pasar dos parámetros (separados por coma): el DIV que será animado a través de este efecto, y las propiedades que tendrá esta animación (también separadas por coma y encerradas entre llaves {propiedad1, propiedad2, etc}).

La línea siguiente ejecuta la función slideOut() a partir del efecto que generamos anteriormente. Esta puede ser ejecutada en la línea siguiente o seguida de Fx.Slide(), separada por un punto (ver siguiente ejemplo).

Las propiedades, que van dentro de los corchetes son opcionales, es decir que se pueden omitir. Una versión más simple de esto, sería algo así (sin definir propiedades):

var miEfecto = new Fx.Slide('div_animable').slideOut();

Es un poco más engorroso hacerlo de esta manera, pero a veces es necesario que podamos modificar los ajustes por defecto.

Ahora: ¿cómo hacer una secuencia de animaciones?. ¡Fácil!…claro…fácil si alguien te lo explica. Lo que se debe hacer es utilizar la función chain().

La función chain() se aplica seguida de algún efecto, y dentro de ella se debe definir el nombre de una función que queramos ejecutar, o escribir function(){ } y escribir dentro de las llaves lo que queramos que pase.

var miEfecto = new Fx.Slide('div_animable', {
duration: 500,
transition: Fx.Transitions.Back.easeOut
}).slideOut().chain(function(){
    alert("hola");
});

En caso de querer hacer varios efectos del mismo tipo, se pueden simplemente poner uno detrás de otro, después de haber definido Fx.Slide.

var miEfecto = new Fx.Slide('div_animable').slideOut().slideIn().slideOut();

La función chain() no puede ser aplicada directamente sobre fade() o slide(), es decir, que no puedes hacer esto:

$('div_animable').fade('out').chain(function(){
 alert("hola");
 });