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

Thumbnail.js es una librería que se aprovecha de la interactividad de PageGlimpse.com para mostrar miniaturas de páginas web mediante Javascript. Realmente es muy sencillo de usar y con una pocas líneas de código podrás mostrar una serie de miniaturas de páginas web mediante Javascript. El código de tan solo 1.2kb (versión minificada) podemos verlo directamente aqui.

// Callback
function append( url, img ) {
    var link = document.createElement('a');
    link.href = url;
    link.appendChild(img);
    container.appendChild(link);
}

var container = document.getElementById('container'),
    thumbs = Thumbnails({ devkey:'XXXX' });
// Una petición
thumbs.get('http://google.com', append); 

// Multiples peticiones.
thumbs.get([
    'http://www.anieto2k.com/',
    'http://www.imeneame.net/'
], append);

Como podemos ver, no tiene ninguna complicación. Declaramos una función, en este caso append() que será la que se encargue de recibir los datos de la miniatura y procesarla para pintarla en la página, esta función será llamada a modo de callback en las peticiones. Necesitaremos una clave para desarrolladores que podemos conseguir dándonos de alta en PageGlimpse.com, es gratuito(sino pasas de los 300GB/mes), y nos proporcionarán una clave de desarrollador que deberá ir en lugar de las XXXX. Además podemos indicar el tamaño de la miniatura, mediante el parámetro size, indicar que la miniatura debe ser del root del dominio e incluso hacer que en caso de no existir la miniatura no muestre nada mediante el parámetro nothumb.

El método get() nos permite solicitar una o varias url’s dependiendo del tipo del primer parámetro que le pasamos, siendo el segundo siempre, la función callback que procesará la respuesta. Podeis ver un ejemplo de como funciona la librería.

FireDiff, es un complemento para Firebug que nos permite ver claramente los cambios realizados en el DOM y el CSS. A modo de log gráfico nos muestra cuando se inserta un elemento o cuando se le cambia una propiedad CSS a un elemento. Una gran herramienta para controlar mejor, aún, nuestras aplicaciones.

(Ver Imagen)

[Descargar]

JSHTML, es una propuesta de James Padolsey para generar HTML mediante Javascript de una forma dinámica y no obstructiva.

<div id="content">
    <!-- JSHTML {{
        <ul id="controls">
            <li><a href="#add">Add content</a></li>
            <li><a href="#print">Print this</a></li>
        </ul>
    }} -->
    <p>Lorem ipsum dolor...</p>
</div>
// Javascript
JSHTML.parse();

De esta forma conseguimos ocultar el contenido del comentario a los usuarios que no disponen de Javascript. Sin provocar que la aplicación deje de funcionar.

Se trata de un <noscript /> inverso desarrollado en Javascript. Que seguro que alguna utilidad encontraremos para él

Podéis ver un ejemplo aquí y revisar el código que se encarga de convertir el comentario en HTML.

CSS-Trick, nos muestra un interesante artículo sobre las cualidades de los diferentes sistemas que tenemos para indicar el tamaño de las fuentes de nuestras aplicaciones.

• px: Ofrece el máximo de precisión a la hora de indicar un tamaño. Aunque se olvidan del usuario, no hacen caso a la configuración del visitante.
• em: Los más difíciles de cuadrar debido al concepto tan abstracto que los envuelve, pero ofrece una forma de ofrecer al usuario mayor control sobre el texto.
• %: Sin duda la opción más limpia y clara de enteder.
• pt: Los pensados para ser usados únicamente para impresión. Están basados en puntos reales de tinta en un papel.
• palabras clave: Sorprendentemente se trata de una de las técnicas más consistente en todos los navegadores.

Conociendo las técnicas y las peculiaridades de cada uno podremos ajustar más nuestro CSS a nuestras necesidades.

Actualización

Las palabras clave o keywords son los que conocemos como xx-small, x-small, small, medium, large, x-large, xx-large. Dependen completamente de la configuración del cliente, que al igual que % y em, permiten que sea la configuración del visitante defina el tamaño ideal.

Ejemplos

Esto es una fuente a tamaño large

Esto es una fuente a 125% del tamaño. (Usa el tamaño del elemento padre como referencia)

Esto es una fuente a 1.3em.

Esto es una fuente a 24px.

Esto es una fuente a 24pt.

Javascript Image Combobox es un plugin jQuery que permite que nuestros elementos <select/> tenga una vida que hasta ahora no podían tener.

(Ver Imagen)

Se trata de una extensión que permite que los items de los <select /> tengan una imagen para facilitar la selección de items dentro de un listado de opciones.

Para ello hacen uso de un atributo (no estandar) del elemento <option /> llamado icon, que indicará de donde coger la imagen que mostraremos junto al <option />.

 <select name="webmenu" id="webmenu" onchange="showValue(this.value)">
    <option value="calendar" icon="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" icon="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" icon="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" icon="icons/icon_email.gif">Email</option>
    <option value="faq" icon="icons/icon_faq.gif">FAQ</option>
    <option value="games" icon="icons/icon_games.gif">Games</option>
    <option value="music" icon="icons/icon_music.gif">Music</option>
    <option value="phone" icon="icons/icon_phone.gif">Phone</option>
    <option value="graph" icon="icons/icon_sales.gif">Graph</option>
    <option value="secured" icon="icons/icon_secure.gif">Secured</option>
    <option value="video" icon="icons/icon_video.gif">Video</option>
  </select>

Despues con una línea de Javascript este atributo se convertirá en una imagen alojada dentro del <select />.

MSDropDown.init();

Si quieres ver una demo de como quedaría, puedes echarle un vistazo aqui.