Boozox » Diseño

Redimensionar en PHP a tamaño fijo

Alex Barros — Sat, 20 Sep 2008 15:02:55 +0000

Ver también Guía básica para editar imágenes en php con GD

Esta es una técnica para redimensionar imágenes a un tamaño fijo (aunque no guarde proporción), sin distorsionar la imágen.

No, no se trata del escalado líquido. Esa técnica es demasiado compleja. Se trata de recortar la imágen para adaptarla a la nueva resolución, perdiendo el mínimo espacio posible.

Foto de Basajaun en Flickr Licencia CC(by-nc-sa)

Para hacer esto, he desarrollado este algoritmo, que paso a compartir con todos para que lo uséis como os de la gana (requiere Biblioteca GD)

function resizeFit($im,$width,$height) {
//Original sizes
$ow = imagesx($im); $oh = imagesy($im);
//To fit the image in the new box by cropping data from the image, i have to check the biggest prop. in height and width
if($width/$ow > $height/$oh) {
$nw = $width;
$nh = ($oh * $nw) / $ow;
$px = 0;
$py = ($height – $nh) / 2;
} else {
$nh = $height;
$nw = ($ow * $nh) / $oh;
$py = 0;
$px = ($width – $nw) / 2;
}
//Create a new image width requested size
$new = imagecreatetruecolor($width,$height);
//Copy the image loosing the least space
imagecopyresampled($new, $im, $px, $py, 0, 0, $nw, $nh, $ow, $oh);
return $new;
}

[Descargar código]

Cómo utilizar

Si no estás familiarizado con la edición de imágenes en PHP, no te preocupes. Para utilizar la función de arriba, tenemos que pasarle como parámetro una imágen tipo resource de GD y dos números indicando el ancho y alto que queréis forzar a la foto.

Para que se vea, hay que editar las cabeceras HTTP indicando que el contenido es una imágen. Y a este archivo de imágen (aunque sea un PHP) se le puede llamar desde la etiqueta img de HTML. Dejemos que hable el código:

imagen.php

//Primero creo el resource de la imagen desde el original en JPEG
$im = imagecreatefromjpeg(‘original.jpg’);
//Ahora uso la función antes definida, con unos parámetros de ancho y alto que yo quiera
$resized = resizeFit($im, 100, 150);
//Indico en la cabecera HTTP que es una imagen
header("Content-type: image/png");
//Por último exporto la nueva imagen
imagepng($resized);

miPagina.html

Esta es mi foto redimensionada a 100 x 150:

Puedes ver un ejemplo en …

Esta técnica la uso en Gpsia para mostrar las imágenes al tamaño que yo le diga, sin que se vean distorsionadas. Échale un ojo, y de paso ves las rutas tan increíbles que está subiendo la gente.

Claves de diseño para aplicaciones web

Alex Barros — Tue, 22 Jul 2008 18:08:04 +0000

En la mayoría de los casos, la intuición y la experiencia son la mejor arma para el éxito en nuestras aplicaciones. Sin embargo, tener claras unas ciertas directrices puede ayudarnos mucho durante el proceso.

Antes que nada, dos cosas básicas: papel y boli, y sobretodo paciencia. Nada sale a la primera, es muy importante el proceso de preparación, y el de prueba y error. Un replanteamiento radical a veces puede ser necesario, no creas que has perdido el tiempo, todo lo contrario.

Simplicidad

Yo diría que es el pilar fundamental del diseño. Deberemos esforzarnos al máximo por que nuestra aplicación resulte sencilla para el usuario al que va destinado.

Usaremos estructuras uniformes y con rejilla (niveles de información a la misma altura). Lo ideal es que haya un foco principal, que atraiga la atención en una primera mirada. Si uniformizamos el contenido resultaría imposible detectar lo importante, y el usuario se asusta, aburre y huye (en ese orden).

Sección de tarifas en las webs de Yoigo y la de Movistar

Usaremos una misma paleta de colores en todo el diseño. Preferiblemente un color blanco de fondo, un color principal, y otro secundario. Hay que tener siempre presente la psicología del color (rojo altera, pasión; verde relaja, naturaleza; azul calma, informa, cielo o mar; amarillo excita, alerta, no se distingue bien; naranja extraño, curioso, diferente ….)

También buscaremos simplicidad en la estructura de las secciones, haremos que sea clara, pocas secciones bien diferenciadas, substituyendo subsecciones por rutas de contenido en cada seccion.

Originalidad

Nos podemos ganar la confianza del usuario si le conseguimos sorprender. A fin de cuentas sorprender es estimular, crear reacción en la persona. Esto da fuerza y identidad a nuestra página. Mi recomendación es dejarse llevar, con mucho cuidado de no perturbar el orden lógico de las cosas.

Pueden ser guiños sutiles, alteración del lenguaje, huevos de pascua, imágenes curiosas o llamativas… imaginación al poder!

Guardar un artista como favorito, en nvivo pulsas sobre “soy fan”, y te contesta con un desenfadado “yeah”

Modelizar usuarios

Este trabajo resulta fundamental e imprescindible. Consiste en analizar todos los usuarios tipo que van a utilizar nuestra aplicación (o que pueden estar potencialmente interesados).

Tendremos que reflexionar profundamente, quién y por qué querrá usar nuestra herramienta, para tenerles preparado lo que esperan, apelando a sus necesidades. Para esto tenemos que emplear ganchos fáciles de identificar (sin mucho texto, llamativos, interesantes)

Es muy importante llamar la atención de todos y cada uno de estos modelos en nuestra portada, y en menor medida en el resto de secciones. Hay que conseguir que cada usuario siga una ruta natural, previamente establecida.

En Flickr tienen muy claro lo que ofrecen, y te lo exponen en la portada para que elijas

Diferénciate

Si haces lo mismo que otro, sobras. Deja claro a tus usuarios que tienes algo distinto que los demás, que te lo has currado, que destacas sobre el resto que se te parecen. Pero sin timar a nadie, que sea verdad!

Trata de conseguir una identidad, que se te reconozca con una palabra, un logo, una tipografía, unos colores… Si consigues que el usuario se quede con tu cara, y le gusta lo que le das, da por seguro que volverá y traerá más gente consigo.

Consejo final

Pero ante todo, disfruta haciéndolo. Porque te gusta.

Te recomiendo leer “Profesional CSS Hojas de estilo en cascada para el diseño Web. Ed. ANAYA Col.De Programadores, para Programadores“; sobretodo primeros capítulos.

Imagen promocional de Geo

Alex Barros — Sun, 11 May 2008 02:24:58 +0000

Hoy he realizado esta imagen promocional de la herramienta GeoGPS. Refleja bastante bien lo que creo que es Geo en su totalidad, y además creo que me ha quedado currado.

Lo he hecho enteramente con Gimp, usando fuentes de Dafont. Ha salido al segundo intento, y he necesitado hacer antes varios bocetos en papel.

Este tipo de gráficos que muestran una herramienta de un vistazo pueden ser muy útiles durante la promoción, y creo que voy a empezar con la promoción de Geo dentro de muy poquito.

Por cierto, guardo una sorpresa muy importante para esta semana próxima. Estad atentos!

Enlaces interesantes sobre diseño

Alex Barros — Sun, 23 Mar 2008 00:34:54 +0000

Estos días he estado algo inactivo, por estar desarrollando un proyecto bastante ambicioso (~~pronto os comentaré sobre él~~) GeoGPS.

Hoy quería compartir algunos enlaces sobre diseño que he acumulado hoy mismo:

Equidistant Objects with CSS – Truco para hacer cajas equidistantes en CSS
Formularios usables: 60 Directrices de Usabilidad – Muy interesante, para crear buenos formularios
Navigation Menus: Trends and Examples – Muestra de menús de navegación, algunos realmente asombrosos
47+ Excellent Ajax CSS Forms – Plantillas ya hechas para formularios, tiene ideas muy buenas
CSS for bar graphs – Por último, gráficos de barras con CSS

Muy pronto regresaré a hablaros de este proyecto que me traigo entre manos. Hasta la próxima!

Trucos para hacer diseños en CSS más rápido y mejor

Alex Barros — Sun, 17 Feb 2008 20:46:56 +0000

Enfrentarse a crear una plantilla de diseño desde cero puede ser muy duro y desmoralizante. Por eso he reunido una serie de trucos que conviene tener a mano, para agilizar el proceso, y hacerlo algo más agradable.

Las tres reglas de oro

Lo primero y principal antes de empezar a escribir la plantilla, es definir estas tres reglas de oro del CSS. Se colocan al principio del archivo CSS, y sirven para evitar las discrepancias principales entre navegadores. Así nos evitamos más de un susto al comprobar si se ve igual en todos los navegadores.

* {
padding:0;
margin:0;
}
body {
font-size: 76%;
}
img {
border-width: 0;
}

Lo que hacen es inicializar todos los márgenes internos y externos a cero (de TODOS los elementos), prefijar un tamaño de letra uniforme para todos los navegadores, y eliminar el borde de las imágenes.

Conocer más sobre las tres reglas de oro del CSS.

Suelo añadir esta cuarta regla, que evita que salga un recuadro alrrededor de los enlaces al pulsarlos.

a {
outline-style: none;
}

(más info)

Centrar contenedores (elementos div) en CSS

Para centrar un contenedor en CSS, además de definir un ancho determinado, debemos asignar el valor auto al margen izquierdo y derecho del contenedor. Esto no da resultado en Internet Explorer, que requiere de la propiedad text-align: center. Si usamos las dos, nos aseguramos la victoria.
HTML:

[...]
Titulo
Texto…

CSS:

body {
text-align: center;
}
#contenedor{
text-align: left;
margin: 10px auto;
width: 80%;
}

(más info)

Hacer columnas con CSS

Para crear varias columnas en un skin, debemos colocar elementos de bloque (div, ul, form…) que las representen, de forma contigua (uno al lado de otro) en nuestro HTML. A continuación, en el CSS usaremos la propiedad float, que “flota” un elemento a la izquierda o a la derecha, sacándolo del flujo de contenido.

Hay varias formas de aprovechar la propiedad float para crear columnas, algunos ejemplos:

Las flechas indican si se ha flotado a izquierda o a derecha, aúnque resulta bastante obvio.

Ejemplo, el código CSS para hacer que todos los elementos li de una lista, esté flotados a la izquierda, con un tamaño de 100×100 px:

li {
width: 100px;
height: 100px;
float: left;
}

Evitar solapamiento en la propiedad Float

Da definicion en el estándar de CSS, hace que la propiedad float saque al elemento del flujo, y provoca que el resto de elementos “lo ignoren” en muchos aspectos, como que el elemento que lo contiene no adapta su ancho para incluirlo.

Lo que quiero:

Lo que ocurre:

Esto lo podemos solventar muy fácilmente.

Si queremos que un elemento que va a continuación de un float, no se vea afectado, le podemos dar la propiedad clear: both

Pero si el problema es que tenemos elementos “flotados”, y queremos que el contenedor los envuelva, nada más fácil que aplicar al contenedor la propiedad overflow: hidden. La explicación la encontraréis aquí

Todas las propiedades a mano

Es muy importante tener siempre las propiedades a mano, y sobretodo conocer las 95 propiedades del CSS 2.1 para conocer las herramientas de que disponemos. Podéis encontrar un agradable listado, muy bien explicado (en inglés) en CulturedCode CSS 2.1 Reference (es un recurso alucinante, muy muy útil)

Usar estructuras prefabricadas

Podremos ahorrarnos tiempo, si partimos de estructuras prefabricadas en CSS y HTML.

Layout Gala contiene muchas estructuras combinando tres elementos principales, cabecera y pié de página.
Css Easy te ofrece las principales configuraciones para skins, listas para descargar y manipular.
En Listmatic encontraréis muchos tipos de lista, para aplicar a menús, o a lo que queráis.
En CSS Showcase podréis encontrar muchos ejemplos de barras de navegación.

Plantillas ya elaboradas

Otro recurso es acudir a skins completamente elaborados, y extraer lo que nos interese de ellos. Algunos enlaces:
OpenSourceWebDesigns, FreeCssTemplates, Free-css-templates, TheStyleArchive, TemplateWorld

O recurrir a sitios donde muestran plantillas únicamente para inspirarte:
Inspirational CSS, CSSBeauty, Elegant Desighns

Por último, en del.icio.us (tag: css) podéis encontrar muchos recursos interesantes de CSS, y en Webéame (categoria diseño) otros tantos.

Texto web con formas raras. Adios rectángulos?

Alex Barros — Wed, 19 Dec 2007 23:55:23 +0000

Acaba de lanzarse una herramienta del todo curiosa y particular.

Se trata de un generador de un código especial, para que en tu web el texto se acople a determinada forma o figura.

Símplemente tienes que dar la forma que quieres con dos líneas (el márgen izquierdo y el derecho) y dejar que genere el código necesario.

Aúnque no muy ortodoxa, la técnica es perfectamente accesible en términos web. Ahora, que esto desemboque en una buena idea, o en la horterada 2.0 premio a la usabilidad nula del 2007, ya no depende del sistema.

Conseguir comentarios en nuestro Blog

Alex Barros — Wed, 17 Oct 2007 18:25:24 +0000

Todos los que tenemos un blog sabemos lo importante que son los comentarios. Te ayudan a continuar con tu labor, a corregir errores, a completar información, a conocer a tus lectrores, y sobre todo pasar un buen rato.

Por eso es muy importante potenciar los comentarios, y darles el valor que se merecen. Voy a explicar una serie de estrategias que pueden hacer que se comente más en tu blog, o por lo menos que sea más agradable hacerlo.

Incitar textualmente

Una buena forma de que te comenten es incitando a tus usuarios a que comenten. Esto puedes hacerlo tanto en los posts como en el propio theme.

En el post:
Una idea es finalizar el post lanzando preguntas al aire, del tipo:

Y vosotros, qué pensáis? Qué versión usaríais? Cuál os parece más (…)?

Intenta implicar a los lectores en tu post. Olvida los formalismos (si tu blog te lo permite) y no dudes en nombrar a usuarios en tus posts, por ejemplo si se ha hecho una aporatción de información.

En el theme:
También puedes llamar la atención a tus usuarios usando determinados textos en tu theme.

Por ejemplo, plantéate cambiar el clásico “Dejar un comentario” por algo más llamativo como “Aporta tu sabiduría” / “Dinos algo” / “Queremos oirte” / “Nos interesa lo que tengas que decir” / etc…

Lo fundamental es que sientan que realmente quieres oirles, que su comentario tiene un valor para el blog.

Cuidar el Diseño

Todos sabemos que el diseño es fundamental para el éxito de un blog. Hay que equilibrar siempre la estética con la usabilidad, y todo esto respetando estándares…

El theme de nuestro blog puede ser decisivo para obtener comentarios, o quedarnos en la más absoluta soledad. Algunas recomendaciones para conseguir comentarios pueden ser:

No ocultarlos
Dejar un comentario ha de ser la tarea más fácil del mundo para el usuario. No tiene que encontrar trabas, y cuantos menos campos rellene mejor. Lo fundamental es que los comentarios sean como una prolongación del post, la reacción natural a haber acabado de leer.

Facilitar lectura de comentarios
Los usuarios van a gastar parte de su tiempo en escribir un texto en tu blog, lo justo es que su mensaje quede claro, visible, y bien colocado. Una buena referencia al comentarista, con su web bien accesible, una fuente y unos colores que hagan fácil la lectura, y evitar recargar mucho esta zona.

Distinguir lo uno de lo otro
Algo que facilita mucho la lectura es el sistema de “uno sí uno no” en la lista de comentarios. Es decir, distinguir los comentarios pares de los impares.

Así conseguimos facilitar la lectura, y además dar un toque un poco más personal a cada comentario. No es lo mismo que tu comentario sea igual que el resto, a que se diferencie de sus adyacentes.

También resulta interesante diferenciar pingbacks y trackbacks, dándoles un poco menos de importancia (pero manteniéndolos presentes)

Para hacer estas dos últimas cosas en wordpress, aquí tienes un script para el archivo comments.php del theme que estés usando. (Si no conoces algo de PHP y HTML, haz copias de seguridad, no vaya a ser que montes un estropicio)

$oddcomment = "odd"; ?>
foreach ($comments as $comment) : ?>
if($comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)){?>
class="ping">
} else {?>
class="">
/* Changes every other comment to a different class */
if("odd" == $oddcomment) {$oddcomment="even";}
else { $oddcomment="odd"; }
?>
} ?>
"comment-">class="author">() ?> comment_date(‘j \d\e F’) ?> a las comment_time() ?> edit_comment_link(‘Editar’,”,”); ?> Ha dicho:
comment_text() ?>

endforeach; /* end for each comment */ ?>

Ahora puedes dar el estilo que quieras en el archivo style.css a las clases .ping (para pingbacks y trackbacks), .odd (impares) y .even (pares).

Hasta el último detalle

Si quieres conseguir más posibilidades de fomentar comentarios, puedes recurrir por último a plugins.

Hay multitud de plugins orientados a los comentarios de nuestro blog. Yo destacaré dos, con enlaces para wordpress, pero puedes buscar tú mismo los que más te convenzan, y se adapten a tu blog.

Últimos comentarios
Con este plugin puedes motivar a tus comentaristas, porque verán su texto expuesto en lugares muy visibles de la web. También puede servir para enganchar a un lector ocasional a algun hilo interesante que se haya generado en los comentarios.
[Descargar plugin]

Premiar por comentarios
Otra forma de motivar a los usuarios a comentar, es premiándoles por sus comentarios. Para esto existe el plugin RPG WordPress creado por nuestro amigo Miquel Camps. Con este plugin puedes recompensar a tus usuarios cada x comentarios, con enlaces en un lugar importante de tu blog, a lo que el usuario en cuestión decida. Una buena idea para crear comunidad.
[Descargar plugin]

Por supuesto que la mejor forma de que se comente en tu blog es crear un contenido de calidad, implicarte diariamente, conseguir enlaces, etc.

Por descontado, si este artículo os ha gustado, no dudéis en comentarlo!

“Escalado Líquido” para Gimp 2.2+ ya disponible como plugin

José Cabo — Mon, 01 Oct 2007 13:09:28 +0000

Estoy seguro de que muchos de vosotros ya conoceréis un algoritmo para escalar imágenes casi sin deformar las figuras (personas, arboles, suelo…). Para los que no lo conozcáis, aquí un vídeo demostrativo:

Pues para los usuarios de Gimp ya tenemos a nuestra disposición el algoritmo en forma de Plugin para poder usarlo a nuestro antojo. Aquí tenéis algunos binarios para instalar en Ubuntu así como el código fuente para compilar en nuestra distribución de Linux favorita (./configure && make && sudo make install o sudo checkinstall).

El manejo es muy fácil. Una vez instalado el plugin abrimos en Gimp nuestra imagen que queremos retocar y nos vamos a la pestaña “Capas/Liquid Rescale”. En la nueva ventana simplemente ponemos la nueva resolución (podemos mirar en Advanced Options que hay más opciones, pero el “modo” que mejor me ha ido ha sido el que viene por defecto [transversal Absolute Value], así que mejor no tocar nada excepto si queremos probar los resultados) y le damos a “Aceptar”. Si la imagen es muy grande…. tardará un rato bastante (un minuto en hacer todos los procesos…), pero si es, por ejemplo, 1024 de anchura no creo que haya que esperar mucho tampoco.

Funciona bastante bien, un poco lento, pero cumple con su trabajo. Aunque no es perfecto el acabado está muy conseguido y mantiene prácticamente iguales las formas y figuras. Un ejemplo:

Original:

En esta siguiente tenemos la imagen de arriba retocada. La primera es escalada tal cual; la segunda usando el plugin Liquid Rescale con las mismas medidas que la 1ª y con las opciones predefinidas; la tercera se ha hecho usando capas (creadas previamente y seleccionando que es lo que queremos que se escale y que es lo que “nos daría igual”, todo gestionado desde el plugin).

En definitiva, una verdadera maravilla.

Añadido a las 18:33 por Alex Barros
Al respecto también hay una web que aplica este filtro de forma online, aúnque con bastante lentitud, y problemas con archivos grandes (http://rsizr.com/)

Solución a dos pesadillas del CSS

Alex Barros — Sun, 30 Sep 2007 16:12:58 +0000

Hoy he encontrado del tirón, en un mismo blog, la solución a dos de mis mayores pesadillas en la maquetación CSS.

#1: Float y Clear
Cuando queremos desplazar un elemento a la izquierda o a la derecha, solemos usar la propiedad float, que saca al elemento del flujo de contenido y lo desplaza a donde queramos.

El problema viene cuando este elemento tiene un elemento padre (que lo contiene) y queremos que lo envuelva.

Esto es lo que yo quiero:

Y esto lo que obtengo:

(He de aclarar que no se trata de ningún error, sinó que el estándar CSS especifica su comportamiento de esta forma)

La solución tradicional es incluir un tercer div a continuación de los dos flotantes, y aplicarle la propiedad clear:both, pero esto nos hace meter un div sin razón de ser, y nos hace la página un poco menos semántica.

La solución que he encontrado ahora, mucho mejor, es aplicar al elemento padre la propiedad overflow:hidden. De esta forma evitamos tener que meter elementos y toquetear el flujo (que a veces trae problemas) y obtenemos el resultado deseado.

[para profundizar un poco más en este tema...]

#2: El marquito de los enlaces
Otro problema que encontraba, aúnque menos grave, era el marquito que aparece en los enlaces cuando pulsas en ellos, símplemente me parece antiestético.

Clica aquí para verlo

Esta propiedad es outline, y podemos bloquearla simplemente introduciendo en nuestra hoja de estilos el siguiente código:

a {
outline-style: none;
}