Código Konami en Javascript

El Código Konami (Konami Code) es un truco que la gente de Konami integraba en muchos de sus juegos y que generalmente ofrecía acceso a una sección secreta.

↑ ↑ ↓ ↓ ← → ← → B A

Muchas son las aplicaciones web que integran este código, implementar este código en cualquier página web mediante Javascript es algo tan sencillo como esto:

<head>
 <script type="text/javascript">
   var $ = {
      enabled: false,
      tmp: Array(),
      _konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
      init: function() {
        this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
      },
      konamiCode: function(e) {
        if(!this.enabled) {
          var t = this.tmp.pop();
          if((e.keyCode-t) == 0) {
            if(this.tmp.length == 0) {
              this.enabled = true;
            }
          }
          else {
            this.init();
          }
        }
        else {
          this.action();
        }
      },
      // Cambiamos por nuestra funcionalidad.
      action: function() {
        alert("Konami Code Activated");
      }
    }
 </script>
</head>
<body onload="$.init()" onkeydown="$.konamiCode(event)">
</body>

Simplemente tendremos que añadir este código modificando el valor de action por el de la funcionalidad que deseemos ejecutar al completar el Konami Code.

Si queréis una lista con algunos de los sitios con Código Konami, aquí la tenéis. Como era de esperar, para que aparezca necesitarás insertar el código.

Fuente

Plugin JQuery para mostrar listas

Vía Ajax Rain descubro este atractivo plugin para mostrar listas de características. Una utilidad que le veo a este plugin es la posibilidad de ponerlo en la portada de una tienda virtual para poner artículos en oferta. Ver un ejemplo.

jQuery Plugin – Feature List

Las principales ventajas que tiene este plugin son:

  1. No necesita Flash
  2. Sólo 2k
  3. Nos permite utilizarlo en varias zonas de la Web
  4. Opción de transición entre diapositivas
  5. Personalizable mediante HTML y CSS
$.featureList(
	$("#tabs li a"),
	$("#output li"), {
		start_item : 1
	}
);

// Alternative

$('#tabs li a').featureList({
	output		: '#output li',
	start_item	: 1
});

Opciones

  • start_item: Elemento por el que debe empezar la transición (por defecto/omisión 0).
  • pause_on_hover: Pausar la transición al situar el ratón sobre un elemento. Por defecto true
  • transition_interval: Tiempo entre transiciones. Por defecto 5000.

Descargar código

El tamaño sí importa

¡Qué no te engañen! Por mucho que digan, el tamaño sí que importa. Así que os dejo algunos trucos y consejos. Vistos en Mundo geek:

El tamaño es muy importante, al menos a la hora de crear una página web: cuanto menos ocupen los archivos que componen nuestra web, menos tiempo tardará en descargarlos el usuario y menos ancho de banda consumiremos. Veamos algunos métodos para ahorrar algunos kilobytes en nuestras imágenes, hojas de estilo o scripts.

Reducir el tamaño de los PNG

Últimamente, y para imágenes muy vistas, como el logo de la página, suelo utilizar este método que descubrí en su día en las recomendaciones sobre imágenes de la Wikipedia. Necesitarás las herramientas PNGOUT, OptiPNG, DeflOpt y AdvDef:

optipng -o7 imagen.png
advdef -z4 imagen.png
pngout /ks imagen.png
deflopt imagen.png

Para imágenes que no van a verse tantas veces, me basta con el plugin Save for web para GIMP.

Reducir el tamaño de los JPEG

Para reducir el tamaño de las imágenes jpg podemos utilizar, por ejemplo, jpegtran (binarios para Windows):

jpegtran -optimize -outfile optimizada.jpg imagen.jpg

Este comando no provoca pérdidas respecto de la imagen original.

Reducir el tamaño de los CSS

El primer paso debería ser, evidentemente, eliminar las reglas obsoletas que ya no se utilizan, pero que se han mantenido en la hoja de estilo, bien por despiste o bien por dejadez. Para ello puede ser útil, por ejemplo, Dust-Me Selectors, una extensión para Firefox que nos informará de los selectores no utilizados en la página actual. También puede comprobar una serie de páginas listadas en un sitemap (aún no está actualizado para Firefox 3.6, así que si lo queréis usar en esta versión, podéis actualizarlo usando la aplicación Update XPI, por ejemplo).

Más »

Caída del servidor

Click en la imagen para ver la tira a tamaño completo

Click en la imagen para ver la tira a tamaño completo

La verdad que el ruido de un ordenador hay veces que llega a ser muy molesto… :-D

Ver tira a tamaño completo.

Fuente

Extensiones de Firefox fundamentales en el Diseño

Os dejo un par de extensiones fundamentales de Firefox para todo aquel que se dedique al diseño en la web.

  • ¿Quieres calcular cuánto debe de medir una imagen para que quepa en el hueco que te queda? ¿Dudas sobre qué tamaño ponerle a un div? Con esta extensión podrás calcular el tamaño de cualquier objeto (en pixeles) o de cualquier parte del navegador.

    Instalar extensión MeasureIt

  • ¿Quieres saber el color de la letra de alguna web? ¿El color de fondo de algún div o de cualquier otro elemento? ClorZilla se integra perfectamente en tu navegador web favorito (Firefox) y te dice el valor de cualquier color dentro del navegador, tanto en RGB como el valor HTML. Además te indica a qué elemento HTML pertenece.

    Instalar extensión ColorZilla

Pestaña de inicio ganadora del desafío de Firefox

La comunidad de Mozilla eligió al ganador del Home Tab Design Challenge, un desafío de Mozilla que invitó a los usuarios a crear conceptos para una pestaña de inicio en el navegador. El concepto ganador pertenece a Yatrik Solanki, y su idea y diseño podrían considerarse para futuras versiones de Firefox.

Esta pestaña de inicio es sencilla pero funcional, y busca facilitarnos el acceso a las tareas que realizamos a diario (con accesos rápidos a nuestros sitios elegidos, con especial atención a las “identidades” de aquellos que requieren que nos registremos), tener perfiles de navegación (por ejemplo, tener separado un perfil con las redes sociales, y otro con los sitios que usamos para el trabajo) y hasta integración con Mozilla Weave, la extensión que permite mantener sincronizado Firefox a través de diferentes equipos y plataformas.

Pueden ver este modelo de pestaña en acción en el vídeo a continuación:

¿Qué os parece? ¿Cambiarías o añadirías algo?

Fuente

CSS Compresor

En otra ocasión ya os hablé de un optimizador de CSS, pues hoy me gustaría presentaros otro. En este caso se trata de CSS Compresor.

Este comprime más que Clean CSS, citado en la otra ocasión. De todas maneras, y es una opinión personal, me gusta más Clean CSS, ya que la optimización que realiza es más legible que la de CSS Compresor.

¿Y vosotros? ¿Usáis alguna herramienta de este estilo para aligerar un poco vuestra web? ¿Cuál es vuestra preferencia?

El programa PADRE de la Agencia Tributaria disponible para Linux y Mac

Después de muchos años manteniendo una estructura muy similar, el programa PADRE, que ayuda a realizar la declaración de la renta, va a sufrir un buen lavado de cara.

El programa estará escrito completamente en Java. Esto puede parecer un detalle muy técnico, pero la consecuencia es que el programa será completamente multi-plataforma. Es decir, a partir de ahora se podrá hacer la declaración de la renta no sólo en Windows, sino también en Linux y en Mac.

Ordenador con Linux

Esto significa que por fin se pone al día la administración al menos en este apartado. No es de recibo, por muy mayoritario que sea el sistema operativo Windows, que la Agencia obligue a comprar los productos de una única empresa para realizar la declaración. Es cierto que había una alternativa, que era conectarse a unos servidores remotos de la Agencia donde había ordenadores con Windows donde se podía hacer la declaración, pero desde luego que esa era una solución muy farragosa.

Esperemos que otras partes de la administración se pongan también al día y que no sea un requerimiento hacer las cosas en Windows.

Fuente

Grungy Asphalt set de iconos

Hoy os presento otro magnifico set de iconos con un estilo muy original, propiedad de dryIconos. Este set se llama Grungy Asphalt y consta de 28 iconos.

Recursividad recursiva

Me encuentro en Mundo geek una teoría anónima recursiva sobre la recursividad:

Para entender la recursividad, uno debe primero entender la recursividad

–Anónimo

¿Has probado alguna vez a buscar la palabra recursividad en Google? :-D