Uninstallme

La técnica “Lazy Load” consiste en detener la carga inicial de imágenes u otros elementos hasta que están en el área visible de la pantalla, momento en que se cargan con un efecto fade in (aparición suave).

Es ideal para páginas con galerías lineales de imágenes, en las que la carga de imágenes a petición (al hacer scroll) puede reducir considerablemente el tiempo inicial de carga de la página.

Existe un plugin para jQuery y también uno para Prototype, pero no acababa de encontrar uno que funcionara exactamente igual para Mootools, aunque existe uno, así que me he decidido a hacerlo basándome en el de Prototype.

Es un script bastante sencillo que no contempla otras opciones como ancho y alto mínimo de las imágenes o extensión (gif, jpg, etc). Su funcionamiento se basa en reemplazar el atributo src de las imágenes que no están en el área visible de la pantalla por el de una imagen de peso muy reducido (43 bytes) y utilizar el atributo src original cuando esta imagen pasa a estar en el área visible de la pantalla. La posición de la imagen se detecta con el evento scroll de la página.

Para saber si la imagen está en el área visible de la pantalla he utilizado el método explicado en otro post para hacer lo mismo con Prototype.

Archivos requeridos

• Mootools Core
• Imagen transparente de 1×1px

Uso

Se inicializa con el evento ‘domready’ del objeto window. En la demo se utilizan todas las imágenes, pero se podría utilizar cualquier selector, sólo las imágenes con una determinada clase, o las imágenes que estén dentro de una capa, etc.

window.addEvent('domready', function(){
   $$('img').each(function(el){
      new Kcmr.MooLazyLoad(el);
   });
});

Como única opción se puede pasar la ruta a la imagen de 1×1px que se utiliza como sustitución de la imagen original. La ruta por defecto es “images/blank.gif”

Ejemplo con otros selectores y ruta personalizada a la imagen de sustitución:

window.addEvent('domready', function(){
   $$('.clase img.clase').each(function(el){
      new Kcmr.MooLazyLoad(el, {
         blank: 'directorio/imagen.gif'
      });
   });
});

Demo y descarga

• Demo
• Descargar lazyload.js (1,61 KB)

En User Agent Man han publicado un script para detectar el suavizado de fuentes en el navegador. Si el suavizado de fuentes está activado, se añade una clase al elemento html que permite usar unas u otras fuentes en la CSS dependiendo de esta característica.

Este script es especialmente útil para utilizar fuentes embebidas mediante @font-face, ya que la calidad del resultado depende muchísimo de si el suavizado de fuentes está o no habilitado en el SO del usuario. También es útil a la hora de decantarse por unas u otras fuentes de sistema, como por ejemplo, la Lucida Sans Unicode, que sin suavizado resulta de mala legibilidad en Windows.

Información relacionada (@font-face)

Bulletproof @font-face syntax

La mejor forma de utilizar @font-face.
Existe una traducción al español en CSSBlog

Font Squirrel

Kits de fuentes para usar mediante @font-face

@font-face generator

Nos permite subir una fuente y descargar el paquete completo para usar mediante @font-face

TTF to EOT Font Converter

Para convertir fuentes TrueType a OpenType (EOT), el formato usado por Internet Explorer

Cuando tenemos un sitio en varios idiomas en el que estamos añadiendo atributos como ALT o TITLE a imágenes o enlaces, lo ideal es proporcionar esos literales en todos los idiomas del sitio y usar los correspondientes al idioma según el valor del atributo xml:lang o lang de la etiqueta HTML.

Para estos casos es útil crear un objeto en el que almacenamos todos los literales según el código del idioma.

Mediante una función que devuelva el valor del atributo xml:lang o lang del tag HTML, estableceremos el idioma del sitio y los literales a usar.

Ejemplo completo usando Mootools:

var MiClase = new Class({
  Implements: Options,
  // literales a usar
  options: {
    literales: {
      ES: {
        titleMostrar: 'Mostrar álbum',
        titleOcultar: 'Ocultar álbum'
      },
      EN: {
        titleMostrar: 'Show album',
        titleOcultar: 'Hide album'
      }
    }
  },
  initialize: function(element, options){
    this.setOptions(options);
    this.element = element;
    ...
    // llamamos a la función encargada de obtener el valor del atributo lang del tag HTML
    this.getDocumentLang();
    // según el valor de this.lang (devuelto por la función anterior) asociamos los literales de uno u otro idioma a una propiedad "literales" de nuestra clase "MiClase"
    this.lang == 'es' ? this.literales = this.options.literales.ES : this.literales = this.options.literales.EN;
  },
  getDocumentLang: function(){
    // obtengo el valor de xml:lang o de lang si xml:lang no se ha usado en el HTML
    this.lang = $$('html')[0].get('xml:lang') || $$('html')[0].get('lang');
    if(!this.lang) this.lang = 'es'; // idioma por defecto si no se ha declarado el idioma principal del documento
    return this.lang;
  },
  // uso de la propiedad literales en otras funciones
  funcionEjemplo: function(){
    var miElemento = ...;
    miElemento.set('title', this.literales.titleMostrar);
  }
});

En el caso de más de dos idiomas, en lugar del condicional usado dentro del método initialize en el ejemplo anterior, podríamos usar una estructura switch case.
Ejemplo:

initialize: function(element, options){
  ...
  this.getDocumentLang();
  switch(this.lang){
    case 'es':
      this.literales = this.options.literales.ES;
      break;
    case 'en':
      this.literales = this.options.literales.EN;
      break;
    case 'fr':
      this.literales = this.options.literales.FR;
      break;
    default:
      this.literales = this.options.literales.ES;
  }
}

La forma más sencilla de acceder a alguna variable de PHP desde Javascript, es colocar el Javascript en el código HTML.

Ejemplo:

<script type="text/javascript">
    var flashvars = {
        file: "<php echo get_settings('home'); ?>/archivo.xml"
    }
</script>

Afortunadamente existe otro método para poder mantener el Javascript en un archivo independiente en el que podamos acceder a variables PHP.

Para poder hacer esto necesitamos servir los archivos Javascript como PHP.

El primer paso es renombrar el archivo Javascript para que su extensión sea .php. Lo podemos dejar como nombrearchivo.js.php para facilitar su identificación.

Dentro del archivo Javascript, al comienzo, necesitamos indicar que el contenido del archivo es de tipo Javascript:

<?php
Header("content-type: application/x-javascript");
?>

Podemos pasar las variables PHP que necesitemos como parámetro en la url:

<script type="text/javascript" src="js/nombrearchivo.js.php?url=<?php get_settings('home'); ?>"></script>

De esta forma podemos acceder a ellas mediante $_GET en el archivo Javascript:

<?php
Header("content-type: aplication/x-javascript");

$variablePHP = $_GET['url'];
echo "var variableJS = '" .$variablePHP. "';\n";
?>

// inicio del código javascript
var flashvars = {
    file: variableJS + "/archivo.xml"
}

Usando este método también podemos reducir un poco el tamaño de los archivos Javascript encerrando los bloques de comentarios entre etiquetas PHP.

Más información: External JavaScript and PHP

Es una buena práctica, sobretodo cuando se usan vídeos o animaciones flash que contengan sonido, el dejar la reproducción de la película en manos del usuario en vez de iniciarla automáticamente.

Las veces que esto se cumple se suele hacer colocando un control en la propia película flash, como un icono de Play o similar semitransparente.

El uso exclusivo de este método puede suponer un problema para usuarios de navegadores que no sean Internet Explorer y no utilicen ratón, ya que los flashes no pueden recibir el foco mediante teclado a no ser que se activen previamente con el ratón.

Incluir además unos enlaces en HTML para iniciar o detener la reproducción de Flash supondría una pequeña mejora de accesibilidad para estos usuarios.

Los pasos que hay que seguir para conseguirlo son:

1. Dar un ID al object que contiene el Flash
2. Detener la reproducción automática de la animación:
   1. Si la animación está en la línea de tiempo principal basta con usar el parámetro play con el valor false en el HTML
   2. Si la animación está en otra línea de tiempo tendremos que detenerla en el propio flash mediante un nombreDeInstancia.stop() en la línea de tiempo principal.
3. Asignar la función de iniciar / detener a los enlaces correspondientes en HTML

Ejemplos de los dos casos

Object película Flash con animación en la línea de tiempo principal

HTML del flash

<object width="155" height="17" id="ejemplo-1" type="application/x-shockwave-flash" data="ejemplo.swf">
    <param name="src" value="ejemplo.swf" />
    <param name="play" value="false" />
</object>

Controles HTML (lo ideal para una degradación elegante sería pintarlos con Javascript, ya que sólo con Javascript habilitado pueden funcionar)

<ul id="controles-1">
    <li><a href="#">Iniciar reproducción</a></li>
    <li><a href="#">Pausar reproducción</a></li>
</ul>

Javascript

var control1 = document.getElementById('controles-1').getElementsByTagName('a');
control1[0].onclick = function(){
    document.getElementById('ejemplo-1').Play();
    return false;
}
control1[1].onclick = function(){
    document.getElementById('ejemplo-1').StopPlay();
    return false;
}

Demo

• Iniciar reproducción
• Pausar reproducción

Object película Flash con animación en una línea de tiempo distinta a la principal

HTML del flash

<object width="165" height="48" id="ejemplo-2" type="application/x-shockwave-flash" data="ejemplo-2.swf">
    <param name="src" value="ejemplo-2.swf" />
</object>

Javascript

En este caso, para iniciar o detener la animación tendremos que usar los métodos TPlay("ruta_a_linea_tiempo") y TStopPlay("ruta_a_linea_tiempo")

var control2 = document.getElementById('controles-2').getElementsByTagName('a');
control2[0].onclick = function(){
    document.getElementById('ejemplo-2').TPlay("_root/mc_barra");
    return false;
}
control2[1].onclick = function(){
document.getElementById('ejemplo-2').TStopPlay("_root/mc_barra");
    return false;
}

Demo

• Iniciar reproducción
• Pausar reproducción

Existen otros métodos predefinidos útiles para controlar la reproducción de una película Flash, como Rewind() o GotoFrame()

Aprovecho este post para recomendar un par de recursos que pueden sernos de gran utilidad a la hora de mejorar la accesibilidad de vídeo Flash (ya que por la página de recursos no se pasa ni GOOGLE):

JW Player Controls

Reproductor de Flash Vídeo que permite controlar la reproducción mediante teclado, añadir subtítulos y descripciónes de audio y además añade los atributos apropiados ARIA. Utiliza JW FLV Player junto con un plugin de accesibilidad. Los controles javascript se proporcionan mediante la librería Dojo.

Ejemplos de control del reproductor JW Player mediante Javascript

Varios ejemplos de control de la reproducción de contenido multimedia mediante Javascript usando JW Player.

Más información

• Flash Interaction with JavaScript
• Flash Tutorial: Web Page Controls Flash Movie

Si algo se echaba en falta en Mootools era la capacidad para poder ser usado sin conflicto junto con otras librerías que también hacen uso del dólar $, como permite jQuery con su jQuery.noConflict().

Desde la versión 1.2.3, lanzada este 19 de junio, Mootools ya implementa esta característica que han llamado Dolar Safe Mode.

A partir de ahora, podremos hacer uso de Mootools junto con otras librerías (cosa realmente no muy recomendable) usando document.id como alias para el acceso por ID ($(id)) y document.search para el acceso por selector CSS ($$(selector))

Hacer los plugins compatibles

Desde el blog de Mootools nos recomiendan simplemente reemplazar los símbolos $ en los plugins por document.id o bien encapsular el plugin en una función anónima. Como comentaba en Javascript Module Pattern, el uso de funciones anónimas nos permite tener variables privadas. De esta forma, podemos asignar document.id a $ y evitar el reemplazo de todas las coincidencias.

Ejemplo de adaptación de un plugin usando una función anónima:

(function(){
    var $ = document.id;
    this.X = new Class({
        ...
    });
})();

Más información sobre Dollar Safe Mode en el blog de Mootools.

Acabo de descubrir varios script que hacen posible, tanto la navegación “normal” mediante el botón volver del navegador, como el añadir páginas a los favoritos o marcadores en aplicaciones AJAX. Una solución a dos de los grandes problemas de usabilidad que presentan este tipo de aplicaciones.

Dejo cuatro enlaces rápidos:

1. HistoryManager. Funciona con Mootools.
   It solves the typical “Back-Button” and “Ajax Bookmarks” problems for accessible browsing and a better usability in Rich Internet applications.
2. Versión de HistoryManager para Prototype.
3. History Keeper. No utiliza ninguna librería.
4. UpdateControls: UpdateHistory and AnimatedUpdatePanel. Para ASP.NET AJAX.

Esta es la sintaxis del operador ternario, que equivale a una estructura de control de flujo if / else:

condicion ? instrucción si se cumple : instrucción si no se cumple;

Usando un ejemplo de código real podría ser así:

hasClassName(capa, clase) ? removeClassName(capa, clase) : addClassName(capa, clase);

Que para mayor legibilidad, si las instrucciones son muy largas, se puede separar en varias líneas:

hasClassName(capa, clase)
? removeClassName(capa, clase)
: addClassName(capa, clase);

Hasta ahora, siempre que había tenido que usar varias instrucciones en una condición, había abandonado el operador ternario en favor de una estructura if / else:

if(condicion){
    hazAlgo();
    yHazOtraCosa();
}
else{
    hazUnaCosa();
    hazOtraCosaMas();
}

Mediante el operador ternario podemos incluir varias instrucciones usando funciones anónimas:

condicion
? (function(){ hazAlgo(); hazOtraCosa();})()
: (function(){ hazUnaCosa(); hazOtraCosaMas();})();

Usando un ejemplo de código real, podría ser así:

hasClassName(capa, clase)
? (function(){ removeClassName(capa, clase); enlace.title = 'Ocultar';})()
: (function(){ addClassName(capa, clase); enlace.title = 'Mostrar';})();

Como los amantes de jQuery sabrán, para acceder a cada uno de los elementos de un HTMLCollection con este framework no necesitamos utilizar un bucle for o un método each(), ya que la iteración se hace de forma implícita.

Ejemplo con jQuery:

$('a.clase').bind('click', function(ev){
   ev.preventDefault();
   alert('Hola mundo');
})

Hoy descubro vía The Blueprint, que Mootools también permite hacer esta iteración implícita característica de jQuery, de manera que podríamos resumir el primer ejemplo de código en el que se usa el método each(), en el segundo ejemplo algo más corto usando la iteración implícita.

Usando each() con Mootools:

$$('a.clase').each(function(el){
   el.addEvent('click', function(ev){
      ev.stop();
      alert('Hola mundo');
  })
})

Usando la iteración implícita:

$$('a.clase').addEvent('click', function(ev){
   ev.stop();
   alert('Hola mundo')
})

Más información

Mootools DOM selector tips

He encontrado este script para detectar si una fuente está disponible en un determinado navegador, que nos puede sacar de más de un apuro, por ejemplo, cuando decidimos correr el riesgo de usar Arial Narrow como fuente “casi de sistema”.

En la web no dejan claro el modo de uso. Para detectar una fuente en concreto, en este caso la Arial Narrow, se podría usar el siguiente código añadido al script:

function testFont(){
   var inst = new Detector();
   if(!(inst.test('Arial Narrow')[3])) // si la fuente no está disponible...
      {
         // añadimos una clase al body
         document.body.className = 'nonarrow';
      }
}

En la CSS tendríamos que añadir las reglas alternativas para los navegadores que no tienen la fuente disponible:

#menu{font-family: "Arial Narrow", arial, tahoma, helvetica, sans-serif; font-size: 1.3em;}
body.nonarrow #menu{font-size: 1.2em; word-spacing: -1px;} /* arréglelo como pueda */

Para los que usen jQuery acabo de descubrir otra solución basada sólo en Javascript.

Información relacionada:

• Fuentes que se instalan con Office
• Lista de fuentes seguras para la Web