pon css en tu vida!

Hace unos meses, a raíz de un de un artículo de Jakob Nielsen, comentaba la posibilidad de hacer más usables los formularios de login mediante un checkbox para mostrar y ocultar la contraseña.

Y aunque la idea no me parecía descabellada, pasó de largo por mi cabeza como tantas y tantas cosas que vemos al día por Internet.

Sin embargo, después de tener la posibilidad utilizar un móvil para conectarme a Internet, me doy cuenta de cuan engorroso puede llegar a ser meter nuestra contraseña utilizando el teclado del móvil, y lo frustrante que es no saber si lo que has introducido es la contraseña correcta.

El resultado de todo esto es un pequeño script en jQuery que nos permite mostrar y ocultar el valor de un input de tipo password.

DEMO | DESCARGAR EJEMPLO

Más info, después del salto

[Más]

Uno de los primeros posts que escribí en este blog, fue un tutorial para crear un sistema de valoración por css.

Ese sistema nos puede interesar cuando no necesitamos la valoración del usuario, y tan solo queremos mostrar un ranking estático de forma mucho más visual de lo que podría ser el típico numero de 1 a 5.

Hoy, para cerrar el círculo, vamos a ver como crear otro sistema de valoración, esta vez utilizando jQuery.

- VER DEMO - | - DESCARGAR EJEMPLO -

[Más]

Aunque no creo que existan datos oficiales, creo que si no todo el mundo, el 95% de los que nos dedicamos al mundo web utilizamos Firebug.
Personalmente, ¡no soy capaz de imaginar cómo maquetar una web sin utilizarlo!

Una de las funcionalidades que echo en falta es poder ver el CSS en formato plano. Me explico:
Cuando durante la maquetación modificas propiedades de 4 o 5 elementos, después me resulta muy engorroso tener que acordarme de qué he hecho, y dónde.
Y, ¿a que viene todo esto?

Ayer descubrí una extensión para firefox, que si bien no está destinada a reemplazar a firebug, puede ser un gran complemento.

Phoenix permite editar el código CSS y Javascript de cualquier web, y ejecutar esas modificaciones para observar los resultados. También podremos ver el código HTML, tanto el original como el generado después de ejecutar el javascript. Eso sí, no podemos hacer modificaciones en el HTML.

Pero eso no es todo, Phoenix nos muestra los archivos CSS y js que se cargan en la página y su tamaño. Su editor de código, que colorea la sintaxis, es capaz de comprimir y minificar cualquier CSS o javascript, y también hacerlo a la inversa. Cualquier script de javascript comprimido (con packer ) o minificado (minify), Phoenix es capaz de descomprimirlo para que sea perfectamente legible.

Podremos ver en vivo los cambios que realicemos, tanto en CSS como en javascript. No tan “en vivo” como con Firebug, pero sí después de activarlo a través de “Execute CSS” o “Execute JS”.

Por último, Phoenix también permite guardar en nuestro ordenador los archivos.

Recordad que Phoenix está todavía en versión experimiental, por lo que, dicho finamente, tiene licencia para pegar todos los petardazos que quiera Sin embargo, a mí todavía no me ha fallado en los días que llevo utilizándola.

Eso sí, aún tiene un problema con la codificación de caracteres, al menos en los CSS: > que convierte en > , etc…

Sin embargo, es una extensión totalmente recomendable, con la que se pueden hacer grandes cosas si se acompaña con firebug, y alguna que otro add-on interesante.

Animaos a probarla, y contadme que os ha parecido.

Web del proyecto Phoenix.

Descarga la extensión para Firefox Phoenix.

Vía @vladocar

Los chicos de NetTuts nos explican detalladamente, 10 técnicas para optimizar nuestro código javascript creado con jQuery.

Casi todos los navegadores actuales (Firefox, Safari, Chrome, Opera) poseen motores de javascript lo suficientemente potentes como para que en temas de optimización, las mejoras que obtenemos deban medirse en milisegundos, sin embargo, Microsoft con sus Internet Explorer aún sigue siendo el rival a batir, por lo que nunca está de más adoptar estas sugerencias como costumbre habitual.

Además, si algún día nos enfrentamos a un proyecto que haga un uso intensivo de javascript, notaremos la diferencia.

Algunos de los consejos son:

Utiliza siempre la última versión de jQuery.

Google dispone de una API de Bibliotecas AJAX para el acceso a las versiones de los frameworks de javascript más importantes, como son jQuery, Prototype, script.aculo.us, Mootools, etc. Este método nos permite estar siempre actualizados con la última versión de jQuery, sin embargo, debes tener en cuenta que aunque no pase muy a menudo, Google puede estar caído y entonces no podremos acceder a la librería.

Usa FOR en vez de EACH

Los métodos nativos siempre son más rápidos que cualquier helper de un framework. Recorrer un array de n elementos mediante $.each es alrededor de 10 veces más lento que hacerlo mediante un for.

Selecciona por #id y no por .clase

A la hora de seleccionar un elemento con jQuery, encontramos que es mucho más rápido hacerlo por su atributo id que no por su clase. ¿Porqué? jQuery utiliza en caso de utilizar el id, el método getElementByID(), nativo del navegador.

Cuando no sea posible seleccionar un elemento por su id, es recomendable especificar el contenedor más cercano a este que contenga un id.

Es decir:

$(”#contenedor .enlaces a”)

será mucho más rápido que

$(”.enlaces a”)

No olvides el return false

Añade return false; al final de tus funciones, para evitar comportamientos inesperados como el típico “salto” al principio de la web.

Articulo completo | 10 Ways to Instantly Increase Your jQuery Performance

Todo desarrollador/maquetador web que se precie, conoce y usa Firebug.  Una de las mejores cualidades que tiene, es que se pueden “extender” sus características a través de otras extensiones, que se integran a la perfección con él.

Ya vimos el ejemplo de Google Page Speed, y ahora le toca el turno a FireRainbow.

FireRainbow es una extensión para Firefox que se encarga de colorear la sintaxis de Javascript que muestra su “hermano” Firebug. Tras instalarlo, tan solo debemos ir a la pestaña Script de Firebug para ver los resultados.

FireRainbow dispone además, de casi 30 temas diferentes para visualizar nuestro código, que además son fácilmente editables y muy sencillos de crear.

Descarga FireRainbow

Listado de temas para FireRainbow

A menudo, cuando estamos buscando fallos depurando un código javascript, empezamos a colocar alert() a lo largo del código como locos. Comprobar que una función realmente se está ejecutando, el valor de un objecto o variable, etc.

Si usas Firefox, un método para hacer un poco más “elegante” esta depuración, es utilizar la variable console, una variable global que Firebug añade por defecto las páginas abiertas con nuestro navegador favorito.

Su funcionamiento es sencillo. Dentro del código javascript, tan solo tenemos que hacer la siguiente llamada:

// Código Javascript
console.log('Esta cadena se imprimirá en la consola de Firebug');
// Más código Javascript

El primer argumento que debe recibir log es una cadena, que puede contener indicadores de tipo, muy parecido a las funciones printf() y sprintf() de PHP.

console.log("El %s saltó sobre %d edificios", animal, contador);

Sin embargo,console.log() también permite este otro formato:

console.log("El", animal, "saltó sobre", contador, "edificios");

Estos dos formatos, pueden combinarse. Si se utilizan indicadores de tipo, y se proporcionan más argumentos que patrones, el resto de argumentos se añadirán a continuación separados por un espacio:

console.log("Me llamo %s y me gusta hacer:", miNombre, cosa1, cosa2, cosag3);

Si quieres conocer todas las opciones, de esta variable, puedes encontrar más información en la web oficial de firebug.