Timthumb es un script PHP, desarrollado por Darren Hoyt, que resulta muy útil para redimensionar imágenes usando PHP. Se utiliza bastante en templates para Wordpress, para crear los thumbnails de los posts. Además permite hacer crop de las imágenes para que no pierdan las proporciones al ser redimensionadas. Necesita que la librería GD esté cargada, cosa que casi todos los hostings tienen.

Para empezar a usar el script solo tienes que bajartelo desde el SVN de Google Code. Una vez descargado, muévelo a tu servidor web. La primera vez que lo uses, el script creará un subdirectorio con el nombre “cache”. En este subdirectorio se almacenarán los thumbnails realizados para no tener que redimensionar las imágenes cada vez que se realiza una petición. El subdirectorio “cache” tiene que tener permisos de escritura y ejecución para que todo funcione bien (por supuesto, de lectura también). Una vez todo esté en sus sitio puedes empezar a usar el script de esta manera tan sencilla:

<img src="/scripts/timthumb.php?src=/images/imagen_grande.jpg&h=150&w=150&zc=1" alt="thumb" >

Las opciones que tiene el script son las siguientes:

• w: anchura del thumbnail
• h: altura del thumbnail
• zc: zoom crop (0 o 1)
• q: quality (por defecto es 75, y lo máximo es 100)

Ejemplos de Timthumb

He realizado algunos ejemplos usando una imagen de un balón de futbol. El tamaño original de la imagen es de 1280×1024. Vamos a ver el efecto del script sobre la imagen:
Redimensión a 150×150 sin zoom crop

<img src="/scripts/timthumb.php?src=/images/balon_grande.jpg&h=150&w=150" alt="thumb" >

Redimensión a 150×150 con zoom crop

<img src="/scripts/timthumb.php?src=/images/balon_grande.jpg&h=150&w=150&zc=1" alt="thumb" >

Como se puede observar, el zoom crop hace su faena y evita que la imagen se distorsione, aunque sea a costa de perder un trozo de imagen en el lateral. Si quieres que la imagen ocupe menos espacio puedes jugar con el parametro “q”, que por defecto se establece a 75, pero lo puedes reducir para bajar la calidad del thumbnail y que ocupe menos espacio.
Redimensionar solo la altura

<img src="/scripts/timthumb.php?src=/images/balon_grande.jpg&h=150" alt="thumb" >

Indicando solo la altura, se redimensiona la imagen manteniendo las proporciones.

Posición del crop

El crop, por defecto se hace en la parte central de la imagen, pero en imágenes grandes puede ser que al hacer crop se elimine la parte de la imagen menos apropiada. Para evitar esto Studio-XL ha desarrollado una modificación del script. Se puede descargar desde su sitio. Su script funciona exactamente igual, pero añade la opción de especificar el parámetro “cropfrom”. Cropfrom puede tener los siguientes valores:

1. middle
2. middleleft
3. middleright
4. topleft
5. topright
6. topcenter
7. bottomleft
8. bottomright
9. bottomcenter

El resultado de aplicar estos parámetros es el siguiente:

Cropfrom topleft

<img src="/scripts/timthumb.php?src=/images/balon_grande.jpg&h=150&w=150&zc=1&cropfrom=topleft" alt="thumb" >

Cropfrom topright

<img src="/scripts/timthumb.php?src=/images/balon_grande.jpg&h=150&w=150&zc=1&cropfrom=topright" alt="thumb" >

Un script muy fácil de usar que sin duda nos puede ayudar a crear plantillas más creativas.

La productividad personal es un tema que me preocupa bastante y que quiero mejorar. A lo largo del día se me van ocurriendo cosas que hacer, tareas pendientes, ideas, proyectos, cosas que muchas veces no materializo por que no llevo a cabo una metodología de trabajo lo suficientemente eficiente (no tengo tanto tiempo como me gustaría). He oido hablar bastante sobre el método GTD (Getting Things Done) y parece que funciona bastante bien.

Berto, blogger de ThinkWasabi, un blog sobre productividad personal y más cosas, nos explica en un video, de una forma bastante entendible, el funcionamiento de GTD.
Un buen lugar de partida hacia una productividad personal más eficiente que nos permita alcanzar todas las metas que nos propongamos.

Vía Undermedia

JoomlaFox es una extensión de Firefox que se incrusta en Firebug y que pretende ayudar a los desarrolladores de Joomla a hacer su trabajo. Para ello se necesita instalar además un plugin en el sitio Joomla y estar logeado como SuperAdministrador. Toma la idea del plugin Drupal for Firebug .
El funcionamiento de JoomlaFox es muy simple; va añadiendo divs ocultos, que luego los recoje y los muestra en la ventana de Firebug.

Lo he instalado y la verdad es que no me ha funcionado, además el plugin de Joomla se ha cargao la hoja de estilos del sitio y todo se veía mal, supongo que será algún bug que corregirán. Aunque aún se encuentra en un estado muy temprano y no lo encuentro útil, la idea es muy buena y habrá que seguirle la pista durante una temporada para ver como evoluciona. Sería interesante implementar algunas cosas como listar las consultas a la BBDD, permitir debug al estilo de FirePHP, obtener tiempos de carga de la página, controlar los tiempos de las consultas a la BBDD para optimización… sería interesante ver algo así para Joomla.
Podéis ver una captura a continuación.

Más información: www.alltogetherasawhole.org
Sitio: www.fititnt.org/joomlafox.html

Hace un tiempo descubrí en Cristalab una serie de videotutoriales donde se abordaba el proceso de maquetar un diseño, realizado con Photoshop en formato PSD, a XHTML/CSS. Esta es una tarea que todo buen maquetador debe dominar a la perfección si quiere que sus plantillas se visualicen correctamente en todos los navegadores.

En los vídeos se tratan algunos conceptos básicos de CSS, como el modelo de cajas (box model) de CSS, el proceso de “slice”, donde se cortan trocitos del diseño para maquetarlos más tarde. También se tratan temas como la inclusión de efectos con Javascript o fuentes personalizadas con Cufon. Si te interesa el tema no puedes perdértelos. Recientemente, la autora (Raymicha) ha finalizado la serie de videos y los ha colgado todos en Vimeo. Si te interesa el tema te recomiendo que le eches un vistazo por que puedes aprender bastante sobre el proceso de maquetación de un PSD.

Los vídeos aparecen al pinchar sobre “Seguir leyendo”.

Seguir leyendo para ver los vídeotutoriales de maquetación CSS

Navegando por Videotutoriales.com me he encontrado con esta videoreview bastante bien hecha sobre la nueva versión de Ubuntu, que saldrá el próximo 29 de Octubre y que tiene muy buena pinta. Algunas de las nuevas características son Ubuntu One, un disco duro online con 2 gigas de capacidad gratis. Se ha creado un nuevo theme principal y también parece que se ha trabajado mucho en el rendimiento y consumo de memoria de esta nueva versión de Ubuntu.

No he encontrado el nombre del creador del vídeo, de todas formas lo felicito desde aquí.