May 30

Hace unos días descubría My Cool Button gracias a Digital Inspiration y me hizo recordar algunas herramientas relacionadas que de vez en cuando he usado. Si eres programador PHP y no muy diseñador te irán de perlas:

Googleando encuentras cientos de webs con herramientas similares, lo anterior sólo es una selección de las que me he ido guardando en mi delicious… ¿conoces más q consideras “imprescindibles”?

Tagged with:
Mar 15

GD es una librería de código abierto para la creación dinámica de imágenes. GD está escrita en C aunque puede ser usada desde varios lenguajes de programación entre ellos, como no, nuestro querido PHP.

A continuación describo como generar imágenes GIF “on the fly” usando PHP. Se puede usar este código para generar botones bajo demanda lo que resulta muy útil en distintas ocasiones, por ejemplo en webs que pretender ser traducidas a varios idiomas.

[php] function genera_boton($text) {
header(“Content-type: image/gif”);
$font = ‘../fonts/ARIALNB.TTF’;
$fontsize = 11;
$ycoord = 17;
$imgheight = 22;
$xpad = 40;
$details = imageftbbox($fontsize, 0, $font, $text);
$imgwidth = abs($details[2] – $details[0]) + $xpad;
$xcoord = ($imgwidth – $details[4]) / 2;
$im = @imagecreate($imgwidth, $imgheight)
or die(‘error generando la imagen’);
$background_color = imagecolorallocate($im, 0, 0, 128);
$text_color = imagecolorallocate($im, 255, 255, 255);
imagettftext($im,$fontsize,0,$xcoord,$ycoord,$text_color,$font,$text);
imagegif($im);
imagedestroy($im);
}
genera_boton(‘HOLA MUNDO’); [/php]

La imagen generada es muy simple y sólo debería servir de ejemplo, aunque con pocos retoques se puede conseguir algo mucho más bonito. La función genera un rectángulo azul con el texto $text centrado, se usa la fuente TrueType ARIALNB.TTF (disponible en cualquier Güindows).

Mediante la información devuelta por imageftbbox() se centra el texto automáticamente pero la altura de la imagen y la posición vertical del texto se fijan manualmente. Esto es así ya que si calculamos estos valores ($imgheight y $ycoord) pueden variar de forma no deseada dependiendo de la fuente usada y del texto que queremos mostrar, por ejemplo con el uso de acentos, mayúsculas o eñes obtendríamos imágenes con una altura mayor… y normalmente uno quiere que todos los botones tengan la misma altura :)

Si usas otra fuente o tamaño de fuente tendrás que ajustar los valores $ycoord e $imgheight. Probablemente también quieras ajustar $xpad que es lo que fija los márgenes izquierdo y derecho entre el texto y el borde de la imagen.

Paso a tratar un tema habitual en este blog, el rendimiento. Es muy interesante utilizar algún tipo de cache de los botones generados, a continuación propongo un par de ideas de cache (cliente y servidor):

[1] Usando el segundo parámetro de imagegif() guardar en disco el archivo GIF. Entonces podemos tirar de is_file() para comprobar si ya disponemos del GIF generado que con un simple file_get_contents() podremos recuperar. Aunque es mucho más óptimo configurar reglas de mod_rewrite del Apache para devolver el GIF directamente en caso de que exista el archivo.

[2] Enviar las headers de cache apropiadas al navegador del usuario. Por ejemplo tendremos cache de una semana añadiendo lo siguiente al inicio del código anterior:

[php] header(“Expires: “.gmdate(“D, d M Y H:i:s”, mktime(date(“H”),date(“i”),date(“s”),date(“m”),date(“d”)+7,date(“Y”))).”GMT”);
header(“Last-Modified: “.gmdate(“D, d M Y H:i:s”).”GMT”); [/php]

Para finalizar añadir que puedes generar botones más bonitos usando imagecreatefrompng() para cargar imágenes que sirvan de plantilla. Otra opción es con funciones como imagepolygon() y imagerectangle() dedicar un buen rato a diseñar pero con PHP :)

Como no soy muy de diseño (ni con las GD), si alguien se ha currado botones más bonitos usando sólo funciones GD o sabe sitios donde encontrarlos… q no se corte!

Tagged with:
preload preload preload