Ajuste para jQuery.validationEngine

Uno de mis plugins favoritos de jQuery, es el jQuery.validationEngine. Un muy completo plugin para validación de formularios, muy customizable, desde el tipo de validación, hasta dónde debe aparecer el warning de error.

Pero hoy me pidieron algo que si lo trae por defecto, no lo encontré. El plugin ejecuta la validación de cada campo no sólo cuando el usuario hace el submit del formulario, también lo hace cuando el usuario termina de completar un campo y pasa al siguiente. De esta manera, permite corregir  lo erróneo en el momento.

Si se desea evitar esa validación al pasar de un campo al otro y dejarla activa sólo al hacer submit, uno debe hacer lo siguiente:


$(".registerform").validationEngine({
   bind: false
});

Hoy me pidieron que la validación al pasar de un campo a otro se haga sólo si el usuario empezó a escribir algo en el campo. Por defecto, si un campo es requerido, el usuario hace foco, no lo completa, pasa al siguiente, y se le muestra un error, ya que el campo es obligatorio y lo dejó sin completar.

Pero el pedido tiene sentido. No hace falta ejecutar esa validación del campo antes de siquiera empezar a completarlo. Y además, no debo perder la validación de campo requerido al hacer submit.

La mejor manera que encontré de hacer esta excepción fue editar jquery.validationEngine.js. Viendo el código, llegué a donde necesitaba editar:

_onFieldEvent: function(event) {
   var field = $(this);
   var form = field.closest('form');
   var options = form.data('jqv');
   options.eventTrigger = "field";
   // validate the current field

   window.setTimeout(function() {
      methods._validateField(field, options);
      if (options.InvalidFields.length == 0 && options.onSuccess) {
         options.onSuccess();
      } else if (options.InvalidFields.length > 0 && options.onFailure) {
         options.onFailure();
      }
   }, (event.data) ? event.data.delay : 0);
},

Aquí veo que se ejecuta la validación ante un evento del input (el cual se puede configurar mediante las opciones del plugin). Entonces, sólo debo ejecutar una verificación antes de validar:

_onFieldEvent: function(event) {
   var field = $(this);
   var form = field.closest('form');
   var options = form.data('jqv');
   options.eventTrigger = "field";
   // validate the current field

   if(field.val().length > 0){

      window.setTimeout(function() {
      methods._validateField(field, options);
      if (options.InvalidFields.length == 0 && options.onSuccess) {
         options.onSuccess();
      } else if (options.InvalidFields.length > 0 && options.onFailure) {
         options.onFailure();
      }
      }, (event.data) ? event.data.delay : 0);

   }
},

Y listo. De esta manera, primero chequeo que haya en verdad algo que verificar antes de entrar al proceso de validación. Y como esto está atado sólo a eventos del input, al hacer submit del formulario se ejecutan siempre las reglas de validación.

UPDATE: subí estos cambios a GitHub, más detalles acá.

setInterval error en Chrome y Firefox

Hace unos días encontré un error en una animación que hice en jQuery, que hace uso de setInterval.  SetInterval existe para ejecutar una función cada determinada cantidad de tiempo. Supongamos que estoy en un sitio que hace uso de esta función, pero después voy a otro tab del browser, y me quedo navegando allí durante unos minutos, eso quiere decir que en otro tab (que no estoy viendo…) se debería estar ejecutando una función.

Firefox y Chrome evitan que las funciones con setInterval se ejecuten si uno está viendo otro tab. Tiene sentido, intentan ahorrar memoria para ponerla, justamente, donde el usuario esté mirando. El único problema es que en vez de hacer un “pause”, lo que hacen es ir guardando todas las veces que se deberían ejecutar. Lo que provoca que cuando finalmente volvemos a hacer foco, se ejecutan una detrás de la otra!

La solución es increiblemente fácil cuando las funciones con setInterval involucran animaciones, como en mi caso.

Primero les muestro el código sin la corrección:

function magic(elemento){
	$(elemento).animate({
		left: '-=1',
		bottom: '+=2'
	}, 70, function() {
		// Animation complete.
		$(this).animate({
		left: '+=3'
		}, 70, function(){
			$(this).animate({
				left:'-=2',
				bottom:'-=2'
			}, 70)
		});
	});
}

Este código lo que hace es mover un div hacia la izquierda y abajo, y luego hacia la posición original, provocando un ligero temblor. Para ejecutarlo, uso por ejemplo:

setInterval("magic('.banner')",5000);

Lo que hace que cada 5 segundos, el div banner tiemble. Al perder el foco y luego volver al tab, la ejecuciòn en cadena hacia que el banner se fuera no 1, sino por ejemplo 200 pixeles hacia la izquierda (y hacia abajo…). Quedaba horrible por el hecho de quedar en cola de ejecución la función de temblor.

La solución es borrar lo que haya en memoria:

function magic(elemento){
	$(elemento).stop(true,true).animate({
		left: '-=1',
		bottom: '+=2'
	}, 70, function() {
		// Animation complete.
		$(this).animate({
		left: '+=3'
		}, 70, function(){
			$(this).animate({
				left:'-=2',
				bottom:'-=2'
			}, 70)
		});
	});
}

Así de simple…

Samsung Galaxy I5500L

Hace dos meses más o menos perdí mi celular, aquel Sony Ericcson K310 que tanto tiempo me acompañó y que por algún motivo el que lo encontró no quiso devolver, por más que estaba hecho mierda. Admito que quería el Galaxy S i9000, pero como Claro no tenía stock, me llevé el modelo un poco más viejo, menos top, pero que no por eso deja de ser un smartphone.

En este tiempo de uso, estoy muy conforme. Lo único malo del equipo es que viene con Android 2.1 preinstalado, cuando hoy en día la versión 2.2 es la común. Por qué no le instalé el 2.2 ni bien lo compré? Bueno, primero porque lo tengo que hacer yo, segundo, porque no tenía tiempo, tercero, porque cuando tenés algo que funciona, hace falta arreglarlo? (if it ain’t broke, don’t fix it).

Genial, hasta que dejó de andar…. desde hace unos días (bastantes) no podía enviar SMSs ni recibirlos, y cualquiera que me llamase, por más que el número esté agendado, siempre figuraba como “Desconocido”. Me decidí entonces a actualizar el firmware y el Android.

Dónde podría encontrar todo lo necesario para hacer el update? No, Google no… Taringa. Primero encontré un post donde podía hacer el update a través de Kies (software oficial de Samsung). Como ya venía leyendo sobre el tema, tenía instalado el Kies con la sorpresa de que mi desktop no detectaba el teléfono.

En un momento de iluminación, instalé el Kies en mi netbook, y como vengo comprobando desde hace un tiempo, tener un Windows original tiene sus ventajas… probablemente este diciendo una boludez, pero mi realidad es que cuando algo no anda como es de esperarse, la netbook me salva.

Entonces, Kies leyó mi teléfono, se propuso a bajar todo lo necesario (sólo dije que sí a una o dos cosas) y me quedé esperando a que Kies haga todo, como dice en el tutorial. Llegó el momento de la verdad, donde ya está todo bajado, y el teléfono se empieza a prender y a apagar, y aparece la pantallita “downloading…”:

Como nadie se queda con lo primero que encuentra, ya estaba leyendo este otro post donde se explica el mismo update pero con más pasos y sin usar el Kies. De allí no sólo obtuve la imagen que muestro arriba, sino que supe que el tiempo de esa pantalla debe durar de 3 a 10 minutos. Por eso es que cuando llevaba dos horas de “downloading”, sabía que algo andaba mal…

A esta altura, ya me había bajado todos los archivos para hacer el update manual. Luego de mucho meditarlo, opté por reiniciar Kies. El primer mensaje de reinicio de Kies me dijo que había ocurrido un error durante una actualización. Ok, clic en restaurar, y por supuesto, no funcionó, diciéndome que no reconoce ningún teléfono conectado.

Hasta ahora no me había animado al proceso manual porque el firmware nombrado en el tutorial dice Europa, y uno nunca sabe como funcionan estas cosas. Investigando un poco más, no soy el único con este problema, y acá responden a mi duda, asi que Europa esta bien para Argentina.

Decido encarar el tutorial de instalación manual, pero llegué al mismo problema, ODIN no reconce ningún teléfono conectado a la netbook.

Ya notoriamente nervioso, decidí desconectarlo, abrirlo, quitar la batería, tarjeta SIM y memoria SD. Volví a poner la batería, y lo encendí con la combinación “volumen bajo + tecla central + encendido”. Obtuve exactamente la misma pantalla y no reconocimiento del teléfono. Releyendo el tutorial del instalación manual, me di cuenta de que esta pantalla nos dice que el teléfono esta en “modo” de copiado de archivos, sólo necesita recibirlos.

En un nuevo momento de iluminación, antes de seguir probando cualquier cosa, reinicié la netbook. Y ahora sí, al conectar el teléfono ya lo reconocìa el sistema, por lo que empiezo a tranquilizarme un poco. Descarté por completo seguir con Kies, y seguí con ODIN.

Entre 5 y 10 minutos tardó en instalarse todo, y salió bárbaro. Ya con mi Android 2.2 pruebo el SMS…. y no anda. Bueno, ok, entonces, despues de todo, puede ser un problema de Claro… *610, opción 3, le describo mi problema a la operadora, y resulta que mi lìnea no tenía todo activado. Dos minutos después ya estaba enviando y recibiendo SMSs.

Conclusiones: tengo que llamar a servicio técnico más seguido. Y Kies es una CAGADA. Sirve para hacer backups, pero si tu vida ya está en Gmail, entonces no lo necesitas.

Parecen ser más pasos, y definitivamente más intimidante, pero el segundo tutorial fue el camino a seguir.

A propòsito, Android 2.2, está MUY bueno.

Consejos para freelance – Entrega 1

Hace un poquito más de un año que estoy trabajando en casa, y ya me animo a dar consejos a quienes se preguntan qué se necesita para trabajar freelance. Esta no es ninguna guía definitiva, son sólo algunos tips aprendidos en este tiempo, es totalmente extensible (por eso lo de “entrega 1”), y más importante aún, es lo que a mí me funcionó, quizás otros no pueden aplicar estos punteos, o lo hicieron sin resultados… para eso están los comentarios:

Necesitás equipo

Ya escribí un post sobre esto anteriormente, básicamente  la idea es que para responderle a un cliente, necesitás una oficina completa. Si hace falta contratar a alguien de sistemas, hacelo. Si hace falta aprender algo de sistemas, es mejor si llamás al que sabe de verdad antes de ponerte ahorrativo en algo con lo que vas a trabajar todos los días. En fin, preparate en todos los sentidos.

Un lápiz es más preciso que la memoria

Soy de aquellos que tiene muy buena memoria. Suelo recordar muchos detalles de cada una de mis charlas, inclusive de aquellas que fueron hace ya un par de años. Sin embargo, no puedo recordar todos los detalles todo el tiempo, obvio. Si bien siempre llevo mi anotador, durante el transcurso de una reunión no estoy tomando nota constante de todo lo que se está hablando, ni siquiera la punteo. Para mí, siempre fue más efectivo prestar muchísima atención a lo que se está hablando, inclusive cuando era estudiante. A mí siempre me sirvió pensar sobre lo que se está hablando en el momento. Pero algo que aprendí a fuerza de olvidos, es que cuando salgo de la reunión tengo que anotar todo lo que se dijo. No hay manera de que tu memoria le gane al lápiz y papel en esa situación, ni siquiera lo intentes de otra manera.

Evitar bocetar con “lorem ipsum”

Todo diseñador conoce las bondades de “lorem ipsum”, cuando se necesita empezar a diseñar y no hay ningún copy definido por el cliente o redactor de turno, aparece aquella mágica oración en latín al rescate. Lo cierto es que si pasás más de un día trabajando en un diseño con esa frase en latín, tu diseño se va a ver espectacular. Esto es tan cierto como que el diseño final no va a llevar ninguna de esas palabras en latín. A partir del segundo día, hay que poner mayor énfasis en que el cliente/redactor nos entrege algo que se parezca, aunque remotamente, a los copys finales. Tu diseño siempre se va ver bien, balanceado, con cuerpos de texto perfectos, legibles, familias tipográficas armónicas, colores adecuados, y un sin fin de etc. usando “lorem ipsum”, pero se verá horrible con “el texto que va”.

Hay dos tipos de clientes: el que escucha tu opinión y capacidades, y el que quiere que hagas lo que él dice

Lamentablemente, hay más del segundo tipo de clientes. Es algo con lo que se tiene que lidiar. No entiendo bien por qué esto suele darse en la profesión del diseñador, constantemente nuestro criterio es dejado de lado, llevándonos a la posición de aquél que sabe usar el programa de diseño. Un diseñador es mucho más que un ejecutador de programas, ya hablé sobre esto antes.

Mi abuelo y mi madre son odontólogos, y ellos cuentan que algunos pacientes acuden a ellos diciendo: “doctor/a, vine a que me arranque la muela”. Suena gracioso, y lo es en verdad. Por más que mi abuelo o mi madre se esfuercen en hacerle entender que hay caminos alternativos a “arrancar la muela”, es una batalla perdida. Podrán decirle que la muela se puede curar, que tiene arreglo… quizás hasta lo convencen y hacen el arreglo. Pero es seguro que ese paciente saldrá del consultorio, irá a otro lugar (no necesariamente un consultorio odontológico), y logrará que le arranquen la muela.

Eso es todo para esta primer entrega, agreguen sus propias experiencias.

Facebook Share

Un tip rápido para aquellos que añaden cosas de Facebook a sus blogs, en este caso el Share con el globito que cuenta la cantidad de veces que fue compartido un enlace.

Si lo intentaste hacer, ya sabés que el tutorial oficial es muy simple de seguir, un copy/paste y sale con fritas…

Pero si todo fuese taaaaaan facil, entonces no habrías llegado a esta web, ya que existe un problema por el que necesitás hacer click en el share para que te aparezca el globito. Los programadores de Facebook implementaron el hecho de que muestre el globito con la cantidad de shares sólo cuando se haya compartido, como mínimo, tres veces.

Eso quiere decir que hasta que alguien no haga click y lo comparta con sus amigos (y esto, tres veces…) no se va a ver ese diseño tan lindo que querías poner. Entonces, tenés que hacer trampa, y te digo cómo:

1) Parche facil, pero no elegante: el javascript de Facebook hace la cuenta de cuántas veces compartieron tu enlace, y si el resultado es menor a tres, entonces añade la siguiente class al span que hará al gobito:

.fb_share_no_count{
display:none;
}

Entonces la solución es sobreescribir el display none. Si al botón lo colocamos dentro de un div con id share, entonces:

#share .fb_share_no_count{
display:block;
}

Esto sólo mostrará el globito, dentro de él no habrá ningún número, aunque se haya compartido una o dos veces, eso no se mostrará.

2) Parche copado, pero de tiempo limitado: para implementar esta utilidad, copiaste un código javascript, el cual es:

<a name=”fb_share”></a>
<script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share”
type=”text/javascript”>
</script>

Si en vez de llamar externamente a ese javascript, hay que bajarlo y editarlo, más específicamente hay que buscar la siguiente línea:

this.displayBox(a,3);

¿Ya se imaginan que quiere decir ese 3? Entonces, hay que cambiar al 3 por un 0, guardar, subir el .js a nuestro servidor, y hacer la llamada localmente. Esta solución está publicada en Patrick M. Kelly’s Bulletin Board.

Cuál es el problema de esto? que la semana que viene, o dentro de un mes, o cuando sea, Facebook va a cambiar la programación del Share. Cuando eso suceda, tu programación editada puede llegar a no funcionar.

Estará en cada uno evaluar qué camino seguir.

Presupuestar siendo freelance

Esta etapa de trabajo freelance en la que me embarqué ya se ha extendido por 9 meses. Tiempo durante el cual la vengo pasando muy bien. Sin moverme demasiado, trabajo no me está faltando, lo que es muy bueno. Es por la no falta de trabajo que en este sitio aún no figura mi portfolio con mis últimos trabajos. Esto no quiere decir que si pongo el portfolio online es porque no tengo trabajo, no sean literales. Sólo quiere decir que pude tomarme todo este tiempo para pensar bien cómo quiero que se muestre todo.

Hablando exclusivamente de trabajo freelance, me voy a permitir escribir unas líneas sobre el armado de presupuestos. Tal como dije en el post anterior, guías para ser freelance hay muchisimas, estos posteos no pretenden ser otra cosa que mi visión sobre temas muy puntuales.

Un trabajo freelance empieza por el contacto con el cliente, donde se transmitió una necesidad, y uno puede satisfacerla. Uno empieza entonces a bosquejar en mente varias ideas, de diseño, desarrollo, usabilidad, publicidad, etc. Pero más importante aún, tiempos, costos y equipo de trabajo. Estas obligado a presupuestar, no interesa si sos estudiante y estas leyendo esto porque tenés curiosidad sobre el trabajo freelance, necesitas hacer un presupuesto. Con el correr de los trabajos, los documentos que hago con presupuestos empiezan a ocupar más y más carillas. Los primeros fueron de tres, ahora son 4 o 5… por supuesto que depende del trabajo en sí, ya me van a entender.

Qué items cubro en mis documentos?

Órden de trabajo: suelen ser uno o dos renglones. Muy simple, “Se requiere hacer un sitio web” es perfectamente viable.

Breve detalle: sirve para explayarse en el trabajo. Por ejemplo, si el sitio tendrá administrador, usuarios, carritos, blog, etc. Se intenta nombrar los ítems que habrá (si existe ya un árbol de navegación, va acá), pero no cómo van a funcionar.

Detalle técnico: En este espacio sí se dice como va a funcionar todo lo que se mencionó antes. No hace falta decir detalles de cómo se va a programar o maquetar, pero sí que hará en x lenguaje, o siguiendo estándares, que validará en tales navegadores, etc.

Requerimientos: fácil, que necesitamos que nos dé el cliente para poder hacer todo lo que dijimos que sabemos hacer.

Alcance: es el espacio donde se pone en claro dónde termina mi responsabilidad y empieza la del cliente o la de terceros. Por ejemplo, si preveo que puede existir un problema legal porque el cliente insiste en copiar, este es el espacio en donde pongo de preaviso al cliente. Si el trabajo requiere SEO, suelo aclarar que mi servicio es (precisamente) SEO y no posicionamiento, ya que para primeras posiciones se requiere otro tipo de trabajo.

Tiempo de trabajo: cuánto me va a llevar. Esto va de la mano con algunos puntos de requerimientos y alcances. Entonces, siempre vale la aclaración de que si el cliente no entrega el material, uno también lo hace.

Valor: cuánto cuesta, porcentajes a cobrar, y formas de pago.

Documentación: para hacer un presupuesto, seguro que el cliente nos mostró una web (o lo hicimos nosotros para graficar algo), o nos pasó algún .doc o .jpg, etc. Todo lo que nos haya pasado y que se usó para presupuestar, va acá.

Otras cosas que se pueden añadir pueden las relativas al contrato de terceros, desde fotografías hasta el servidor. Otro punto puede ser sobre la propiedad intelectual.

El que estoy evaluando agregar, pero depende muchísimo del cliente y proyecto, es qué sucede cuando se extiende el período de bocetos de diseño, lo cual va de la mano con que se supone que alguien te contrata no para ejecutar el diseño que él tiene en la cabeza, sino para que uno pueda traducir una necesidad en la mejor resolución visual.

Es un poco más complicado, porque básicamente se trata de decir que la persona idónea soy yo, y no el cliente. Y al menos por ahora, no se me ocurre una forma de decirlo sin que lleve a un malentendido.

Escucho sugerencias…

Imagen en el submit de un form

Adlatina es un portal de comunicación. Tiene unos cuantos años online, si trabajan en publicidad lo conocen por obligación (si trabajan y no lo conocen, que esperan?). Algo que me molesta, y mucho, es que en su formulario de login no funciona el “enter”. O sea, pongo mi email, mi password, toco enter……… y muevo el mouse hasta el boton “Ingresar” para hacer click y loguearme. Horrible…

El otro día me puse a pensar en esto, porque simplemente no puede ser que suceda. Pensé un poco más, y la conclusión es que si está hecho de esa forma (y hace años), es porque no saben hacerlo bien. Alguno dirá “pero es un botón de submit, cómo no van a saber hacerlo?”. Corrección, es un botón de submit con una imagen, es otra cosa.

Veamos el código que usaron para este botón sin usabilidad:

<div class="box">
	<div class="content2">
		<a tabindex="7" class="boton" title="ingresar" onclick="document.formulario.submit();" href="#"><span>ingresar</span></a>
		<div class="clear"> </div>
	</div>
</div>

Como se puede ver, no hay ningún elemento de formulario que haga el submit. En vez de un <input type=”submit”>, hay un <a><span>, donde el atributo onclick del <a> es un javascript que hace el submit de un form. Espantoso.

Según mi teoría, el que hizo este formulario no supo cómo resolver el poner una imagen en el submit del formulario. El problema con los input, es que cuando se trata del <input type=”submit” /> el css empieza a comportarse extraño con todos los navegadores. Mientras en Firefox funciona, Explorer falla siempre. Entonces, en su lugar hay que usar un elemento que no lo usa nadie, el <button>.

El código quedaría así:

<div class="box">
	<div class="content2">
		<button tabindex="7" type="submit" class="boton_usable"><div><span>ingresar<span></div></button>
		<div class="clear"> </div>
	</div>
</div>

A la etiqueta button se le puede poner como contenido un <div> o un <span>, si son maquetadores y no conocían <button>, se acaban de dar cuenta que es su nuevo mejor amigo.

Les dejo el link con el formulario tal cuál como está hoy, y mi propuesta. Chusmeen el CSS.

Firmas con imágenes en Thunderbird

Thunderbird es el cliente de email compañero de aventuras de Firefox. Thunderbird tiene cosas que claramente debe mejorar en cuanto a usabilidad, especialmente el lector de blogs, dar de alta un feed es muy complicado. Más allá de esto, les doy una guía de pasos para crear una firma con imagen embebida, cosa que si bien no es dificil, tampoco está facil.

Lo importante a entender, es que una firma en Thunderbird siempre es un archivo aparte, que el programa lee y añade al final de nuestro email. O sea, si yo hago un archivo llamado firma.txt, cuyo contenido es “Nicolás Flores”, ya tengo mi firma. Entonces, para setear este archivo como firma, Herramientas/Configuración de cuentas:

thunderbird11

Si yo quiero poner en mi firma una imagen, entonces no me sirve setear un archivo .txt como firma. Para hacer esto necesito un archivo .html, y configurar una etiqueta de imagen, con la ruta correspondiente al archivo. No es necesario que el archivo se encuentre en un servidor web, puede estar en una carpeta en mi PC.

Para hacer un archivo html necesitamos un notepad común y corriente, en donde ponemos:

<img moz-do-not-send="false" src="file:///C:/turu.jpg" alt="Turu">

Editamos la ruta con el nombre del archivo correcto, y listo!

Es importante utilizar el parámetro alt, ya que si el receptor del email tiene bloqueado el codigo html que hace posible ver una imagen, en su lugar colocará el texto que pongamos allí.

Cuando enviemos un email, es probable que nos pregunte si deseamos enviar el email en formato html o texto. Elegir html por razones obvias…

Truco CSS para escalar imágenes

Hace unas semanas me encontraba leyendo sobre este truco de css para escalar imágenes en Internet Explorer sin que se vean pixeladas. Quedó como una curiosidad, pero no le ví un uso práctico.

Hoy se lo encontré. Estas semana estuve arreglando un back office y un front, y hoy notaron que las imágenes de los productos subidos por BO tienen un tamaño distinto al utilizado en el front. Como las subidas eran más grandes, bastó con esa simple línea de css:

img{
-ms-interpolation-mode: bicubic;
}

y listo.

SEO y SEM

En los últimos meses me preguntaron en distintas ocaciones sobre SEO y SEM. No es precisamente algo en lo que me especializo, o sobre lo que esté leyendo constantemente. Lo que sí me interesa en relación a SEO es la web semántica, escribir bien para que se guarde un sitio correctamente.

Luego de esta introducción, les cuento brevemente de qué se tratan. Entonces, qué es SEO y SEM?
Seguir leyendo