Category Archives: javascript

Google NO escanea tus plugins de firefox

Hace poco vi un post de un “Blogger, Entrepreneur, Senior Consultant, IT Architect, IT Specialist, Father, Indo, Bright” en el que gritaba alarmado que google analizaba tu firefox y que sabia que plugins estan instalados y que habia que quemarlo con leña verde.

Esto es completamente falso. Lo que hace google es simplemente detectar si el plugin esta instalado. Google no puede analizar tu instalacion de firefox (a menos que tu se lo permitieras :)).

Para ejemplo basta un boton. El siguiente parrafo te dira si tienes o no instalado firebug y peor aun! te dira que version tienes (solo es visible en la pagina, no en el RSS, a menos que tu feed reader sea muy muy malo)

[inline]

[script type=’text/javascript’]

[/script]

[/inline]

Quieres saber como lo hice? Ve el codigo fuente de esta pagina :). Esto es posible porque firebug expone una propiedad publica accesible por todos. Google no esta haciendo nada extraño. No es posible con otras extensiones a menos que se vuelvan intencionalmente detectables, como firebug.

Quieres saber como es posible que esto sea posible en javascript , y que ademas, hace que javascript sea un lenguaje inherentemente inseguro para algunas cosas? Dejame un mensaje y escribire un articulo sobre eso :)

No suelo contestar estas cosas, pero al leerlo me senti como el siguiente comic de dilbert

dilbert2007101222227.gif

Click para agrandar

Y no pude evitar escribir este post.

P.D. Que complicado es insertar javascript en una entrada de wordpres… sigh…

Como no dar consejos

Hoy leo en en digg un articulo de Harry Maugans sobre como crear un div colapsable con Javascript. Es un articulo enoorme para algo que se puede hacer en dos lineas y que se viene haciendo desde el inicio de los tiempos.

El problema con esto es que recibio una cantidad muy considerable de votos (al momento de escribir esto, arriba de 1300) para un articulo taaan sencillo. Y esto es "sorprendente" por dos situaciones

  1. Parece haber una gran cantidad de personas que no tienen la mas remota idea de los basicos de la programacion web.
  2. El articulo tiene una pesima calidad tecnica. Al darle una revisada por encima puedo ver de menos 3 o 4 errores que tambien son basicos.

Esto es preocupante porque estamos recreando errores que ya se creian superados y estamos enseñando estos problemas a los que no saben.

Por ejemplo, su "solucion" es esta:

<div id="mydiv" style="display:none"><h3>This is a test!<br>Can you see me?</h3></div>
<a href="javascript:;" onmousedown="toggleDiv(’mydiv’);">Toggle Div Visibility</a>

  • Pone una liga que no es una liga. Grr..
  • Usa onmousedown. Si el usuario hace click y se arrepiente antes de soltar el mouse, de cualquier manera se lanzara el evento. Usa onclick en su lugar.
  • Agrega comportamientos al codigo, para cosas rapidas esta bien, pero a la larga se vuelve una pesadilla de mantenimiento
  • Es obtrusivo, si Javascript esta deshabilitado, el contenido no se podra ver nunca.

Me parece un poco triste que este tipo de articulos sean "noticia". Es muy notorio que hay tres grupos profesionales en el area. Los que estan generando los cambios en la industria, por ejemplo los que crearon prototype, scriptaculous, moo.fx, etc, los que les siguen los pasos y los que no tienen la menor idea.

Ser del primer grupo no es facil, requiere talento y dedicación, eso a veces es mucho pedir, pero ser del segundo grupo no es tan dificil, lo requiere un poco de esfuerzo y de ganas de ser mejor. Como ya dije en este post, hay maneras muy sencillas de estar informado de los últimos acontecimientos en el area. Solo falta dedicarle un poco de tiempo a nuestro desarrollo profesional, pues las herramientas estan ahi, al alcance de todos.

Por favor, no volvamos a discutir si es mejor usar tablas o css… ya es tiempo de dar el salto.

Validacion de formas no obtrusiva

Una de las cosas mas tediosas en el desarrollo web son las validaciones de formas en javascript. Son odiosas, aburridas y repetitivas.

Para hacer ese trabajo un poco mas sencillo me di a la tarea de crear una clase usando la libreria prototype.

Caracteristicas

  • Facil de usar
  • Funciona en multiples navegadores (por ahora funciona en explorer y firefox, pero debe funcionar en mas)
  • Basada en expresiones regulares
  • Extendible

Forma de uso

  1. Agregar las siguientes lineas en la cabecera de la pagina
    <script type="text/javascript" xsrc="prototype.js" mce_src="prototype.js" > </script>
    <script type="text/javascript" xsrc="validation.js" mce_src="validation.js" > </script>
    <script type="text/javascript">
    Event.observe(window,"load",function (){ new Validation('forma'); } ,true);
    </script>

    Sustituyendo las rutas para los archivos javascript en donde sea necesario.
  2. Agregar el atributo id a la forma igual al parametro que se le pasa al constructor de validacion (en este caso, ‘forma’)
    <form id='forma' action="" method="Post">
  3. Agregar class y alt para los campos que se quieran validar. Class definira la regla de validacion que se usara y alt el mensaje que se le presentara al usuario. Si no se incluye el atributo class, el elemento no se validar� y si no se incluye el atributo alt se presentar� un mensaje por default para esa regla (P. ej. “El campo x es requerido”)<input type='text' class='required' alt='Este campo es obligatorio' value=" " />

Y listo, eso es todo :)

Reglas de validacion incluidas

  1. required: El campo tiene que tener al menos un caracter
  2. digits: Permite solo numeros
  3. nonzero: Permite solo numeros diferentes de cero
  4. chars: Permite solamente caracteres entre a y z
  5. alpha: Es una combinacion entre digits y chars
  6. email: Permite emails validos (Si si, lo se, la validacion no es perfecta, conozco el regexp)
  7. date: Permite solo fechas en el formato “YYYY-MM-DD”
  8. empty: Si se pone como clase de un campo, este solo sera validado si se encuentra lleno, de lo contrario no se validara. Puede usarse en conjuncion de otra regla para hacer un campo opcional (ver ejemplos)
  9. dupe: Esta regla es un poco especial. Requiere que ademas se llene la propiedad title. Despues buscar� el campo cuyo ID sea igual al title. Comparara ambos campos y si son diferentes mandara error. Util por ejemplo para validar campos contrase�a.

Agregar nueva reglas

Para agregar nuevas reglas de validacion, basta con modificar el archivo validation.js, en la funcion initRules, agregando una nueva linea por cada regla. El formato de las reglas es:

a.push( new Rule(“NOMBRE”, REGEXP , “texto de alerta)” ) );

  • NOMBRE es el nombre de la regla
  • REGEXP es una expresion regular contra la que se validara el campo
  • Texto de alerta es el texto por default para esa regla. Para insertar el nombre del campo se puede escribir XXXX y esto sera sustituido por el nombre del campo, por ejemplo: “El campo XXXX debe tener 5 caracteres de longitud”

Ejemplos:

Haz click aqui (abre en ventana nueva)

Bajar codigo fuente y ejemplo

validation.zip

Se aceptan sugerencias y comentarios