Hace poco tuve un problema y es que coloqué este menú en una capa posicionada fija (position:fixed) de modo que estuviese constantemente visible aunque se realizase scroll. Claro, esto funciona en prácticamente todos los navegadores menos IE (para variar). Al hacer esto, cuando pasamos por encima del menú para realizar el desplegado, como la capa fija “evita” el scroll, el menú aparece siempre en la parte superior, de modo que si se baja por la página, el menú desaparece.

He hecho un par de cambios en la clase a partir de la última versión disponible, la 0.68.3. Se lo he comunicado al autor para ver si le ayuda en su próxima versión, pero de momento no he obtenido respuesta.

Por esta razón, dejo mi aportación aquí en el blog por si le puede servir a alguien. Las modificaciones que he realizado están bajo las líneas // Mod: Fran Naranjo. El cambio es básicamente detectar si está sobre una capa con position:fixed y si lo está, añadir el scroll a la posición en la que se muestra el menú.

• Descargar mi versión modificada de MenuMatic
• Demo de MenuMatic (web del autor)

En base a esta idea, se me ocurrió desarrollar esta pequeña y sencilla clase en Mootools que realice este comportamiento pero realizando el efecto de un banner rotativo o roller. De esta forma podremos mostrar por ejemplo una serie de mensajes que se irán turnando de forma constante de modo que podamos ver un cierto número a la vez.

Su uso es bastante sencillo. Tan sólo necesitamos un elemento padre que contenga una serie de hijos que son los que mostraremos. El caso más sencillo es tener un <ul> como padre y varios <li> como hijos.

<ul id="roller">
  <li>Mensaje 1</li>
  <li>Mensaje 2</li>
  <li>Mensaje 3</li>
</ul>

Con esta llamada, conseguiremos que se genere el Roller y comience a funcionar.

new Roller($('roller')).startRoll();

Hay más ejemplos en la demo.

• Descargar Roller
• Demo Roller

Ahora, tras enrollarme con la explicación de bookmarklet (que os servirá para tener esta aplicación), os cuenta que con SelectorGadget podremos encontrar fácilmente los selectores CSS para los elementos de la web que nos interesen. Este selector se muestra en formato para jQuery, pero leerlo es muy fácil y puede ayudar para los selectores de otros frameworks.

Podrás pinchar en distintos elementos para seleccionarlos y deseleccionarlos y así intentar obtener el selector que abarca a todos los que elijas. El vídeo de la web es bastante esclarecedor y no hay nada como probarlo.

No hay nada que no se pueda sacar con Firebug, pero hay que decir que SelectorGadget es capaz de ahorrarnos bastante tiempo según el caso.

La última versión estable disponible en la web es del día 10 de Marzo de 2009. Funciona en Firefox y Safari. En IE7 no funciona del todo bien todavía.

Pantalla de ejemplo para Date El Bit de la Navarparty 7

Pues bien, para poder hacerla realicé una pequeña clase en javascript para Mootools que me permitiera poder visualizar la cuenta atrás que se puede ver en la imagen. Como estuve buscando por internet y no encontré nada que me gustase, me lancé a hacerlo, no podían ser muchas líneas.

Y así ha sido. Con tan sólo 98 líneas (incluídos comentarios en inglés), tengo el gusto de presentar la clase Countdown.

Esta clase tiene como objetivo realizar la cuenta atrás visualmente actualizando un elemento DOM que se le indique.

El ejemplo de utilización más sencillo es este, que nos crea una cuenta atrás de 10 a 0 en pasos de hasta 100 milisegundos que actualiza en el elemento con id=”counter”:

new Countdown($('counter')).start();

Podemos completarlo un poco más con el siguiente ejemplo:

new Countdown($('counter'), {
  'decimals' : '3', // para hacer que parezca un tiempo de la fórmula 1 :p
  'onComplete' : function() {alert('finalizado!');}, // muestra un alert cuando acaba la cuenta atrás
  'onStep' : function(target, show) {
    // Si el contador está por debajo de 5, poner en rojo, si no, en negro
    if(show < 5) {
      target.setStyle('color', '#f00');
    }
    else {
      target.setStyle('color', '#000');
    }
  }
});

• Descargar Countdown
• Demo Countdown

El siguiente dibujo extraído de la web de John Resig se muestra la arquitectura:

Arquitectura de TestSwarm

El video la verdad es que impresiona. En él se puede ver cómo ejecuta un test y, poco a poco, van apareciendo resultados.

Pinche aquí para ver el vídeo

Hay que seguir este proyecto de cerca. Las posibilidades que puede darnos a la hora de realizar integración contínua en nuestros proyectos también en javascript (sólo jQuery, al menos en lo que se ve de momento), es enorme. Muy muy muy interesante.

John Resig es conocido por ser Javascript Evangelist en Mozilla Corporation aunque actualmente está en el equipos Javascript Tool Developer. Es conocido también por participar como desarrollador en el proyecto One Laptor Per Child.

Validar un número entero

Esta es realmente sencilla y muy muy útil, sobre todo si trabajar con cadenas de texto o lenguajes de programación no tipados. En PHP hay por ejemplo funciones como is_number() que hacen una función parecida.

Comprueba si todos caracteres del string son dígitos.

/^\d+$/

O, de forma equivalente:

/^[0-9]+$/

Atentos que la cadena vacía no pasa esta expresión, es necesario que haya al menos un dígito. Si quieres permitir que esté vacío, entonces cambia el + por *.

Validar un número decimal

Esta es una extensión la anterior. Acepta tanto número positivos como negativos y que el separador de decimales sea coma o punto:

/^-?[0-9]+([,\.][0-9]*)?$/

Validar opciones de entrada

Aunque no siempre, viene muy bien cuando tenemos unos cuantos parámetros y no queremos usar if($a == ‘a’ || $a == ‘b’ || $a == ‘c’) y todo lo largo que queráis el if.

La siguiente expresión comprueba si la variable es a,  b, c, otro o mas:

/^(a|b|c|otro|mas)$/

En PHP, con un preg_match, la papeleta está solucionada. Por ejemplo:

if(!preg_match('/^(a|b|c|otro|mas)$/', $a) {
  // Si entra es que no hay coincidencias
  return null;
}

Tras estas líneas, $a es sólo una de las opciones indicada y si no, habrá retornado null.

Extraer cierta parte de un texto

Partiendo de que tenemos una cadena de caracteres en $text y sabemos que en alguna parte suya cumple que tiene una cadena de texto (por ejemplo ‘jugador’) y un número separados por un guión (es decir, por ejemplo ‘jugador-15′) y queremos conocer ese número porque es su identificador. Podemos usar:

preg_match('/player-(\d+)/', $text, $matches);
$id = $matches[1];

Tras estas líneas, en $id tenemos nuestro número.

Esta expresión se puede extender todavía un poco más si el texto a buscar lo tenemos en una variable, por ejemplo $buscar.

En PHP podemos hacer:

preg_match('/' . $buscar . '-(\d+)/', $text, $matches);
$id = $matches[1];

Si estás usando javascript, el equivalente para este último caso es:

var buscar = 'player';
var m = texto.match(new RegExp(buscar + '-(\d+)'));
var id = m[1];

Y hasta aquí da mi memoria de momento. Cuando me acuerde de alguna otra, ya las iremos posteando.

Bien es sabido por los que me conocen que considero las expresiones regulares como uno de los mejores método que se han inventado para los programadores (y en general, para cualquier persona que quiera comprobar si una cadena de caracteres cumple ciertas características y posibilidades). Como definió @acidonitrix en su momento: en todas las empresas hay algún loco que le encantan las expresiones regulares; pues bien, ¡ese es mi caso! (Ya me lo haré mirar algún día, pero de momento no molesta)

Pues bien, las 5 expresiones que Mike comenta son las siguientes

Comprobar un nombre de usuario

Esta es la más sencilla de todas. Comprueba si el nombre de usuario está compuesto únicamente por letras, mayúsculas o minúsculas, números de 0 a 9 o el guión bajo (underscore) y cuya longitud total sea entre 3 y 16 caracteres.

/^[a-zA-Z0-9_]{3,16}$/

Buscar una etiqueta HTML/XHTML

Partiendo del ejemplo de querer buscar la etiqueta tag aquí coincido con Mike en que la mejor forma (de las varias y farragosas que existen) es usar lo que se denomina un “cuantificador vago” (lazy quantifier) para obtener todo el contenido de la etiqueta.

/<tag[^>]*>(.*?)<\/tag>/

Existen otras soluciones, pero ninguna tan directa como esta. Podríamos buscar el contenido por [^>]*, pero eso nos obligaría a post-procesar el resultado ya que es posible que dentro de esa etiqueta tengamos otra.

Buscar una etiqueta HTML/XHTML con cierto atributo y valor en su interior

Esta expresión es algo más compleja y usa las referencias (matching backreference) que son los \\1 y \\2 para buscar el tag y la comilla o las dobles comillas que cierran el valor del atributo. Este truco también se podía haber usado antes, pero yo creo que queda más claro así.

Para este ejemplo, supongamos que se quiere buscar la etiqueta tag, el atributo attribute y el valor value:

/<tag[^>]*attribute\s*=\s*(["'])value\\2[^>]*>(.*?)<\/\\1>/

Cuando incluyáis esta regexp en PHP, tened cuidado en escapar una de las dos, según el carácter que uséis para crear la cadena de texto. Por ejemplo:

preg_match('/<tag[^>]*attribute\s*=\s*(["\'])value\\2[^>]*>(.*?)<\/\\1>/', $text, $matches)

Tengo que reconocer que esta expresión como esta no la he usado apenas. Las veces que he tenido que buscar algún atributo, solía ser más de uno o más complejo que una simple asignación y, partiendo del ejemplo anterior, el de buscar una etiqueta HTML/XHTML, procesaba el resultado.

Comprobar una dirección de correo electrónico

Esto ya son palabras mayores. La solución que se plantea, dada por Cal Henderson, cumple con la RFC 822 que define cómo son las direcciones de correo electrónico. Poco más se puede añadir, no hay nada más completo:

function is_valid_email_address($email){
  $qtext = '[^\\x0d\\x22\\x5c\\x80-\\xff]';
  $dtext = '[^\\x0d\\x5b-\\x5d\\x80-\\xff]';
  $atom = '[^\\x00-\\x20\\x22\\x28\\x29\\x2c\\x2e\\x3a-\\x3c'.
                  '\\x3e\\x40\\x5b-\\x5d\\x7f-\\xff]+';
  $quoted_pair = '\\x5c[\\x00-\\x7f]';
  $domain_literal = "\\x5b($dtext|$quoted_pair)*\\x5d";
  $quoted_string = "\\x22($qtext|$quoted_pair)*\\x22";
  $domain_ref = $atom;
  $sub_domain = "($domain_ref|$domain_literal)";
  $word = "($atom|$quoted_string)";
  $domain = "$sub_domain(\\x2e$sub_domain)*";
  $local_part = "$word(\\x2e$word)*";
  $addr_spec = "$local_part\\x40$domain";

  return preg_match("!^$addr_spec$!", $email) ? 1 : 0;
}

Comprabando una URL

En mi sincera opinión, crear una regla genérica para comprobar una URL es un berenjenal horrible. Hace falta realizar alguna particularización. Seguidamente os pongo el código de I’m Mike.

{
  \\b
  # Match the leading part (proto://hostname, or just hostname)
  (
    # http://, or https:// leading part
    (https?)://[-\\w]+(\\.\\w[-\\w]*)+
  |
    # or, try to find a hostname with more specific sub-expression
    (?i: [a-z0-9] (?:[-a-z0-9]*[a-z0-9])? \\. )+ # sub domains
    # Now ending .com, etc. For these, require lowercase
    (?-i: com\\b
        | edu\\b
        | biz\\b
        | gov\\b
        | in(?:t|fo)\\b # .int or .info
        | mil\\b
        | net\\b
        | org\\b
        | [a-z][a-z]\\.[a-z][a-z]\\b # two-letter country code
    )
  )

  # Allow an optional port number
  ( : \\d+ )?

  # The rest of the URL is optional, and begins with /
  (
    /
    # The rest are heuristics for what seems to work well
    [^.!,?;"\\'<>()\[\]\{\}\s\x7F-\\xFF]*
    (
      [.!,?]+ [^.!,?;"\\'<>()\\[\\]\{\\}\s\\x7F-\\xFF]+
    )*
  )?
}ix

Como se puede comprobar es realmente una tarea complicada y, aunque esta regexp funciona bastante bien para la amplia mayoría de casos, hay TLD que se deja como por ejemplo .name, .travel, etc.

Y de momento dejo el post aquí, ya que tengo en marcha otro sobre expresiones regulares que llegará en breve.

Update: ya tengo mi propio post sobre expresiones regulares

La primera forma es ejecutar un comando desde la línea de comandos. Todo lo que necesitas es tener instalado perl en tu sistema. Este es el comando (cambia fichero.js por el nombre de tu fichero javascript):

perl -i -pe 's/([^\$])\$\(/$1document.id(/g;' fichero.js

Quizás prefieras usar -i.old en vez de -i que hará una copia de tu fichero original fichero.js a fichero.js.old. De esta forma, mantienes una copia de tu fichero original.

Por supuesto este comando se puede usar con otros como find de modo que puedas migrar más de un fichero a la vez:

for i in $( find /path/a/tu/directorio/js -iname '*.js' ); do perl -i -pe 's/([^\$])\$\(/$1document.id(/g;' $i; done

Finalmente, para todos aquellos que como yo usen y prefieran vim, voy a mostrar como se hace el cambio con vim. Asegúrate que estas en el modo-comando (presiona varias veces la tecla <Esc>) y escribe:

:%s/\([^\$]\)\$(/\=submatch(1) . "document.id("/g

Y eso es todo! Disfruta de tu nuevo código que cumple con la especificación de compatibilidad entre frameworks javascript.

The first way can be executed from command line. All you need is having perl on your system. This is the command (change your_file.js to the filename that fits your needs):

perl -i -pe 's/([^\$])\$\(/$1document.id(/g;' your_file.js

Perhaps you will prefer to use -i.old instead -i that will copy your original file your_file.js to your_file.js.old. In this way, you get a backup of your original file.

Of course, this command can be used with others like find so you can migrate more files at once:

for i in $( find /path/to/your/js/files -iname '*.js' ); do perl -i -pe 's/([^\$])\$\(/$1document.id(/g;' $i; done

Finally, for those vim lovers like me, I would like to show you how to make this change inside vim. In command-mode (press <Esc> a pair of times) write:

:%s/\([^\$]\)\$(/\=submatch(1) . "document.id("/g

And that’s all! Enjoy your new brand cross-framework compliant code.

El funcionamiento es realmente sencillo, este sería el código:

document.addEvent('keyup', function(e) {
    var bg = e.target.get('tag');
    if(bg == 'html' || bg == 'body') {
        if(e.key == 'a') {
            accion1();
        }
        else if(e.key == 's') {
            accion2();
        }
    }
});

Lo único que le falta a este código son las funciones accion1() y accion2() que son las que se ejecutarán cuando pulsemos las teclas a y s respectivamente.

Este código añade un evento ‘keyup’, es decir, cuando se detecta que se ha pulsado una tecla y estamos levantando el dedo de la tecla. Este evento indaga a ver qué tecla se ha pulsado y en caso de ser una de las de la lista, ejecutará la función correspondiente.

La comprobación de que el objetivo de nuestra pulsación (e.target) sea ‘html’ o ‘body’ sirve para que no se haga esta comprobación cuando estamos en un elemento como un input, un textarea, etc. Es decir, tenemos que tener el foco en el documento. En la mayoría de los navegadores funcionaría simplemente con indicar ‘html’, pero, como siempre, Internet Explorer tiene que dar la nota y necesita que comprobemos sobre ‘body’.

Por último añadir que podemos obtener más información del evento:

e.code: el código de la tecla pulsada
e.control: true si la tecla Ctrl está pulsada
e.shift: true si la tecla Shift está pulsada
e.alt: true si la tecla Alt está pulsada

Y no sólo esto, también podemos trabajar con la rueda del ratón o el botón derecho del ratón

El resultado es realmente espectacular si tienes que trabajar con una aplicación en la que las teclas rápidas te hacen la vida más sencilla