Image map y diseño responsive

Si alguna vez habeís estado intentando pasar una web diseñada y desarrollada hace unos años a diseño multipantalla (responsive) seguramente uno de los problemas que os habréis encontrado es el de los image maps.

Al pasar la web a responsive, las coordenadas para los links en los image maps dejan de funcionar cuando se cambia el tamaño de la pantalla.

¡Oh no! ¿Y ahora qué hago? Tengo que rehacer, recortar, reescribir…
Afortunadamente existe una solución más sencilla y que nos puede sacar del paso simplemente con modificar unas líneas del código.

Se trata de un Plugin para JQuery que hace que las coordenadas de los image maps se vayan recalculando automáticamente según va cambiando el tamaño de la ventana. Su instalación es muy sencilla:

  1. Descargamos de la página en GitHub del plugin el archivo jquery.rwdImageMaps.min.js
    stowball jQuery rwdImageMaps
  2. Guarda el archivo en la carpeta de scripts de tu proyecto web.
  3. Añade el código para activar el plugin en la cabecera de tu HTML (preferiblemente antes del </body>):
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.rwdImageMaps.min.js"></script>
    <script>
    $(document).ready(function(e) {
    	$('img[usemap]').rwdImageMaps();
    });
    </script>
  4. Y listo. Sube tu página al servidor y recarga. ¡Gracias Matt!

 

Aplicando estilos a un input file

Para aquellos a los que les gusta personalizar hasta el más mínimo detalle en sus creaciones web, siempre ha sido una piedra en el zapato el hecho de no poder aplicar un estilo a los campos de tipo “file” en los formularios.

Hace tiempo que ya algunos han dado con soluciones parciales al problema, como por ejemplo:

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs...

Pero desde ayer, tenemos la que a mi juicio es la más completa y sencilla de ellas. Filament Group, comparte el código de uno de los ejemplos de su libro en:

http://filamentgroup.com/lab/jquery_custom_file_input_...

El sistema te permite personalizar usando CSS el aspecto completo del campo.

Y el código para hacerlo es realmente simple:

HTML:
<input id="file" name="file" type="file" />

JavaScript (jQuery):
$('#file').customFileInput();

Lo malo será que ahora ya no tendré excusas cuando los diseñadores me pidan que aplique un estilo distinto al estándar a este tipo de controles ;)
Espero que os sirva.

jQuery 1.4

El equipo de JQuery ha liberado la versión 1.4 de su librería Javascript, incorporando numerosas correcciones de errores, mejoras en el rendimiento y nuevas funcionalidades.
Según lo poco que aún me ha dado tiempo a ver, estas son las cosas que yo destaco:

  • AJAX: acceso a las etags, soporte nativo para interpretar JSON.
  • Importantes mejoras en las funciones .css y .attr.
  • Mejoras en los efectos visuales (p.ej. easing personalizable para cada propiedad en la función effects).
  • Nuevos eventos: focusin y focusout
  • Aumento de hasta el triple en la velocidad de la función .html().
  • Soporte para la creación de nuevos elementos al estilo del dojo.create:
    jQuery("<div />", {
    id: "miid",
    css: {
    height: "70px",
    width: "70px",
    color: "blue",
    backgroundColor: "#eee"
    },
    click: function() {
    $(this).css("backgroundColor", "green");
    }
    }).appendTo("body");

Alguna desventaja: pasa a pesar unos 70KB comprimida.

Podeis encontrar más información en la web del lanzamiento.

Javascript toma el control del sonido en HTML5

Con la nueva etiqueta <audio> incluída en HTML5, los navegadores (empezando por Firefox), están poniendo en las manos de los programadores Javascript la posibilidad de crear aplicaciones web hasta ahora impensables.

En el siguiente vídeo podemos ver lo que los programadores Alistair MacDonald, David Humphrey, Thomas Saunders y Corban Brook han conseguido hacer usando sólamente Javascript en Firefox (versión 3.7).

Podeis encontrar más información en el blog de Alistair MacDonald.

Sin duda, el futuro del desarrollo web se presenta apasionante :)