coge la información y corre

Redimensionar en PHP a tamaño fijo

20 de septiembre del 2008 Escrito por Alex Barros

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)

  1. function resizeFit($im,$width,$height) {
  2.     //Original sizes
  3.     $ow = imagesx($im); $oh = imagesy($im);
  4.    
  5.     //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
  6.     if($width/$ow > $height/$oh) {
  7.         $nw = $width;
  8.         $nh = ($oh * $nw) / $ow;
  9.         $px = 0;
  10.         $py = ($height$nh) / 2;
  11.     } else {
  12.         $nh = $height;
  13.         $nw = ($ow * $nh) / $oh;
  14.         $py = 0;
  15.         $px = ($width$nw) / 2;
  16.     }
  17.    
  18.     //Create a new image width requested size
  19.     $new = imagecreatetruecolor($width,$height);
  20.    
  21.     //Copy the image loosing the least space
  22.     imagecopyresampled($new, $im, $px, $py, 0, 0, $nw, $nh, $ow, $oh);
  23.    
  24.     return $new;
  25. }

[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

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

miPagina.html

  1. <p>Esta es mi foto redimensionada a 100 x 150:</p>
  2. <img src="imagen.php">

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.

Categorias: Código, Diseño, Imagen Digital, PHP | 5 comentarios »

Claves de diseño para aplicaciones web

22 de julio del 2008 Escrito por Alex Barros

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).

Tarifas en dos webs homónimas
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.

Categorias: Aplicaciones, CSS, Diseño | 1 comentario »

Imagen promocional de Geo

11 de mayo del 2008 Escrito por Alex Barros

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.

Explicacion visual de Geo

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!

Categorias: Diseño, Imagen Digital | No hay comentarios »

Enlaces interesantes sobre diseño

23 de marzo del 2008 Escrito por Alex Barros

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:

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

Categorias: CSS, Diseño | 3 comentarios »

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

17 de febrero del 2008 Escrito por Alex Barros

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.

  1. * {
  2.         padding:0;
  3.         margin:0;
  4. }
  5. body {
  6.         font-size: 76%;
  7. }
  8. img {
  9.         border-width: 0;
  10. }

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.

  1. a {
  2.         outline-style: none;
  3. }

(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:

  1. [...]<body>
  2.  
  3. <div id="contenedor">
  4.       <h1>Titulo</h1>
  5.       <p>Texto…</p>
  6. </div>
  7.  
  8. </body>

CSS:

  1. body {
  2.         text-align: center;
  3. }
  4. #contenedor{
  5.         text-align: left;
  6.         margin: 10px auto;
  7.         width: 80%;
  8. }

(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:

Usando propiedad Float de CSS Usando propiedad Float de CSS
Usando propiedad Float de CSS Usando propiedad Float de CSS

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:

  1. li {
  2.         width: 100px;
  3.         height: 100px;
  4.         float: left;
  5. }

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 quiero
Lo que ocurre:
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.

Categorias: Código, CSS, Diseño, Estándar, HOWTO/CóMO, HTML, Web | 14 comentarios »

Texto web con formas raras. Adios rectángulos?

20 de diciembre del 2007 Escrito por Alex Barros

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.

csstextwrap_2.png

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.

csstextwrap.png

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.

Categorias: Aplicaciones, Código, Curioso, Diseño | No hay comentarios »

Conseguir comentarios en nuestro Blog

17 de octubre del 2007 Escrito por Alex Barros

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.

Sigue leyendo esta entrada »

Categorias: Código, Diseño, HOWTO/CóMO, PHP, Plugins, Web, Wordpress | 2 comentarios »

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

1 de octubre del 2007 Escrito por José Cabo

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:
originlthumb.jpg

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).

total-thump.jpg

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/)

Categorias: Diseño, HOWTO/CóMO, Imagen Digital, Plugins, Software libre | 2 comentarios »

Solución a dos pesadillas del CSS

30 de septiembre del 2007 Escrito por Alex Barros

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:
float_lo_q_quiero.gif
Y esto lo que obtengo:
float_lo_q_obtengo.gif

(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:

  1. a {
  2.       outline-style: none;
  3. }

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

Ambas soluciones magistrales las he encontrado en el blog PlanSeldon.com.

Categorias: Código, CSS, Diseño, HOWTO/CóMO | 6 comentarios »

50 Plantillas para Blogger

19 de septiembre del 2007 Escrito por Alex Barros

Si usas Blogger como medio de difusión, no dejes de mirarte estas 50 geniales plantillas para Blogger.

Un recurso enorme, y con diseños realmente muy buenos.

Este es el que más me ha gustado. Y a tí, cuál te gusta más? cambiarias tu diseño?

blogger_plantilla.png

Categorias: CSS, Diseño, Pa' gustos colores | No hay comentarios »

del.icio.us meneame.net RSS

Search:

Bicivalencia Localiza las estaciones de Valenbisi, servicio público de bicicletas en Valencia, España. Ver más Gpsia Descubre y comparte rutas por todo el mundo, tomadas con GPS. Ver más Imaset Edita tus imágenes de Wordpress con este sencillo plugin. Ver más

¡Mi música es tuya!

Digo yo que...

Mis fotos de Flickr

Entradas recientes

Meta:

Respeta el copyleft

,