aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Por norma general, siempre debemos de pensar, a la hora de desarrollar nuestros scripts, en ofrecer al usuario una alternativa, ya sea para realizar una opción o para interactuar con la página. Conocer los eventos que tenemos disponibles en el navegador del usuario que nos está visitando es una idea realmente interesante y en Perfection kills han desarrollado un sistema muy interesante con el que conocer de antemano las capacidades de las que podemos hacer uso.

var isEventSupported = (function(){
    var TAGNAMES = {
      'select':'input','change':'input',
      'submit':'form','reset':'form',
      'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName) {
      var el = document.createElement(TAGNAMES[eventName] || 'div');
      eventName = 'on' + eventName;
      var isSupported = (eventName in el);
      if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
      }
      el = null;
      return isSupported;
    }
    return isEventSupported;
  })();

Como podemos ver, la función resultante nos permitirá conocer si un evento está disponible en el navegador. Para ello define una serie de TAGNAMES a los que les asocia un evento. La idea es generar dinámicamente un elemento, relacionado con el evento solicitado (en caso de no estar relacionado usará <div />) y testear si el evento está disponible.

De esta forma únicamente tendremos que llamar a la función solicitando el evento a testear:

isEventSupported('click'); // Evento onclick
isEventSupported('dblclick'); // Evento ondblclick
isEventSupported('mousedown'); // Evento onmousedown

Si únicamente te interesan los eventos de ratón, esta versión más reducida te irá de perlas.

function isMouseEventSupported(eventName) {
  var el = document.createElement('div');
  eventName = 'on' + eventName;
  var isSupported = (eventName in el);
  if (!isSupported) {
    el.setAttribute(eventName, 'return;');
    isSupported = typeof el[eventName] == 'function';
  }
  el = null;
  return isSupported;
}
// Modo de uso
isMouseEventSupported("mouseenter");

Para verlo funcionando y las capacidades de tu navegador, puedes usar esta página de test con esta funcionalidad.

Ajaxline, hace una impresionante comparariva entre los principales navegadores a los que dependiendo del HTML que han de tratar arrojan unos resultados cuanto menos interesantes.

(Ver Imagen)

Las pruebas realizadas desde un Macbook Pro Intel Core 2 Duo y 2GB de RAM con Parallels para los navegadores basados en Windows.

Pruebas como recorrer en profundidad el arbol DOM del HTML, aplicar el posicionamiento (relativo o absoluto), aplicar opacidad a los elementos o usar <img /> frente a background-url: arrojan unas conclusiones bastante interesantes.

1. Es mejor usar position:absolute en elementos interactivos.
2. Una gran cantidad de elementos en una página puede reducir el rendimiento, pero no vale la pena reducir y perder fiabilidad funcionalidad.
3. No es recomendado  hacer estructuras muy profundas.
4. No dejes que los estándares te paralicen. Solo los desarrolladores necesitan la semántica y la validación (no estoy muy de acuerdo con esto)
5. No estires las imagenes por que si. Pero si lo necesitas, usa <canvas />
6. <img /> trabaja más rápido que la propiedad CSS background-url.

Si ayer vimos que Dojo era el framework JS más rápido trabajando con DOM, hoy Kyle Hayes hace un análisis más extenso y completo en el que dictamina que jQuery es el mejor framework JS.

(Ver Imagen)

Para el artículo, se han tenido en cuenta cosas menos técnicas aunque más funcionales como la documentación, la comunidad y facilidad de implementación, entre otras cosas.
En mi caso, me decanté por jQuery, por su facilidad de uso. El desarrollo es muy rápido y es muy sencillo conseguir una funcionalidad potente y funcional en pocos minutos. La documentación era otro de los factores cruciales y a la hora de iniciarte en el desarrollo en un nuevo lenguaje, una nueva herramienta,.. es algo realmente interesante.
Y por supuesto, la clave de jQuery es la comunidad, que al igual que WordPress hacen que aunque no sea técnicamente la mejor herramienta, es la herramienta más interesante.
¿Que es lo que tienes en cuenta tu a la hora de elegir un framework JS? ¿Con cual te quedas? ¿Por que?

En Dezinerfolio recogen todas (o casi) las opciones de las que disponemos para emular la propiedad font-face de CSS3 que nos permitirá usar fuentes descargables y no depender de las que el usuario tenga instaladas en su máquina.

Ejemplo

<div class="myclass typeface-js" style="font-family: Helvetiker">
	Text here in Helvetiker font...
</div>

Listado de opciones

1. sIFR 2.0
2. cufón
3. P+C DTR
4. FLIR
5. SIIR
6. DTR
7. sIFR 3
8. Typeface.js
9. IFR
10. PHP+CSS DTR
11. CSS Image Replacement [static]
12. swfir

FullSize es un plugin jQuery que esconde una propuesta muy interesante. Este plugin se apoya en la idea de implementar un nuevo atributo HTML para los elementos IMG.

<img src="imagen.png" alt="Imagen de prueba" fullsize="imagen-grande.png" />

La idea es muy interesante por que de llegar a buen puerto, este atributo podría pasar a formar parte de la especificación HTML y delegar esta tarea al navegador (algo que siempre es mucho más recomendable que implementarlo mediante un plugin).

Hasta el momento, esto lo podíamos hacer embebiendo la imagen en un enlace haciendo que al hacer click sobre ella esta se abriera en una página nueva (o no) mostrando la imagen grande.

<a href="imagen-grande.png" title="Imagen grande">
	<img src="imagen.png" alt="Imagen de prueba" />
</a>

Esta opción actualmente es la más accesible para conseguir que todo el mundo pueda ver la imagen grande, y es la principal técnica usada por todas (o casi todas) las implementaciones de Lightbox.

El plugin

En solo 8kb, podemos disponer de un lightbox que se apoya en el atributo longdesc (me parece horrible) y que podemos usar de la siguiente forma:

Declaración

<link href="your_path_here/fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="your_path_here/fullsize/jquery.fullsize.js"></script>
// Javascript
$("img").fullsize();

Despues nuestras imagenes deberán indicar la imagen grande en el atributo longdesc que será de donde sacará el plugin la dirección para mostrarla.

<img src="me.jpg" alt="me" longdesc="me-big.jpg" />