Grafismo

Colors on the Web: ayuda para diseñadores

ByLuis September 25, 2006

Visitando una entrada de Vecindad GrÃ¡fica, he encontrado una pÃ¡gina que nos puede ser muy Ãºtil a los que diseÃ±amos sin llegar a ser grandes diseÃ±adores. Se trata de Colors on the Web, una pÃ¡gina centrada en los colores y el diseÃ±o web. En ella encontraremos informaciÃ³n sobre los colores (colores primarios, saturaciÃ³n, …), el significado de los colores (por ahora solo el rojo), el uso de colores en la web, combinaciÃ³n de colores (rueda de colores, colores anÃ¡logos, …) y tres utilidades bastante interesantes: un selector de colores similar a las que ya existen, una rueda de color que selecciona aleatoriamente colores y nos muestra sus resultados en un diseÃ±o y una colecciÃ³n de esquemas organizada por categorÃas.
Colors on the Web
VÃa / Vecindad GrÃ¡fica

Grafismo | How to | Javascript | Laboratorio | PHP

Laboratorio: Recorta imágenes dinámicamente con PHP y HTML

ByLuis April 11, 2006

En muchos sitios web de almacenamiento de imágenes se nos permite retocar las imágenes. Hoy vamos a explicar como recortar una imagen directamente desde una página web.

Para ello tenemos que crearnos una página web que nos permita seleccionar la zona de la imagen que queremos recortar y de un script PHP que usando la librería GD recortará la imagen y la devolverá en formato PNG.

Sentido Web

Nuevo diseño

ByLuis August 24, 2010August 24, 2010

Lo mio no es el diseño, por eso mismo no me acababa de convencer el diseño anterior, supongo que dentro de unos meses me pasará lo mismo con el disño actual.

Mientras tanto, espero que no os desagrade mucho lo que he hecho, de todas formas, la mayoría de vosotros me visitáis por feed, así que no notaréis mucha diferencia.

Toda crítica es bienvenida, otra cosa es que le haga caso, me da una pereza enorme volver a tocar el css.

Apache | Grafismo | How to | PHP

Ponle copyright a tus imágenes mediante PHP

ByLuis April 4, 2006

Muchas veces queremos que las personas se descarguen las imágenes que tenemos en nuestras páginas web, pero también queremos que quede bien claro quién es el autor. Para ello podemos editar todas las imágenes que tengamos, o bien que el propio entorno se encargue de poner el copyright por nosotros.

El método es sencillo, modificamos las opciones del Apache para que cuando se acceda a una imagen, lo redireccionemos a un script que se encargará de escribir el texto que queramos.

Desarrollo web

Cómo realizar un diseño web 2.0

ByLuis December 21, 2006

Un buen artÃculo en el que nos explican cÃ³mo pasar nuestro diseÃ±o a diseÃ±o web 2.0. Claro, cada cual tiene sus gustos y sus conceptos de diseÃ±o y puede que no estÃ© de acuerdo con todo lo que se dice, pero aÃºn asÃ es un artÃculo a tener en cuenta.

Resumiendo un poco el post, nos encontramos con los siguientes consejos:

Simplicidad: cuanto mÃ¡s sencillo mejor, es necesario tener en cuenta que todos los sitios webs tienen sus metas y que cada pÃ¡gina tiene su propÃ³sito. Es necesario obtener la atenciÃ³n del usuario, pero cuidado que su atenciÃ³n es algo que se acaba. La simplicidad es algo que siempre deberÃamos tener en cuenta, elimininando contenido innecesario pero sin quitar funcionalidad.
Layout centrado: muy caracterÃstico de la web 2.0 es tener en contenido centrado en la pÃ¡gina.
Menos columnas: mientras que antes lo normal era un diseÃ±o en 4 columnas, ahora lo mÃ¡s utilizado son las dos columnas, evitando asÃ llenar completamente la pantalla y reforzando el primer punto, la simplicidad.
NavegaciÃ³n arriba: separar la navegaciÃ³n del contenido principal no es nada nuevo, pero en este caso se resalta que se situe arriba.
Diferenciar distintas Ã¡reas: que a simple vista, cada Ã¡rea con diferente funcionalidad sea claramente diferenciable, incluso sin ser resaltadas con diferentes colores.
NavegaciÃ³n sencilla: debemos conseguir que el usuario sepa dÃ³nde estÃ¡ y a quÃ© contenidos puede acceder desde donde estÃ¡.
Logos en negrita: limpios, en negrita y fuertemente marcados.
TamaÃ±o de texto grande: haciendo el texto grande se consigue mayor atenciÃ³n que con el texto pequeÃ±o.
Introducciones en negrita: consiguiendo asÃ mayor impacto visual sobre las cosas mÃ¡s importantes.
Colores fuertes: usando colores brillantes y fuertes se consigue una separaciÃ³n de contenidos mÃ¡s sencilla.
Superficies con detalle: ya sea mediante sombras, resaltados, difuminados, que las superficies no sean simples, sino mÃ¡s realistas.
Gradientes
Reflejos
Iconos atractivos: es necesario que sean fÃ¡cilmente reconocibles, que no provoquen confusiÃ³n.
Contornos estrellados: sobre todo con el beta dentro.

Web 2.0 how-to design style guide

VÃa / dzone

API | Google | Grafismo

Usar la API de Google para obtener bordes redondeados

ByLuis December 15, 2006

Para aquellos que necesiten crear grÃ¡ficos con bordes redondeados y no sepan de editores grÃ¡ficos, la API de Google roundedcorners le puede venir muy bien para obtener las imÃ¡genes necesarias.

Tan solo es necesario llamar a un URL para obtener la imagen. Teniendo en cuenta que el parÃ¡metro c de la url indica el color de la esquina (RGB o RRGGBB), bc el color de fondo, h la altura, w el ancho y a el tipo de esquina que debe generar (tl para arriba a la izquierda, tr para arriba a la derecha, bl para abajo a la izquierda, br para abajo a la derecha).
Google’s own cornershop
VÃa / Ajaxian

css | XHTML

Paso a paso de un diseño web

ByLuis May 25, 2007

La gente de SitePoint han publicado un gran artÃculo en el que explican cÃ³mo hacer un diseÃ±o (layout) mediante XHTML y CSS.
Hace tiempo alguien nos preguntaba por un comentario en un artÃculo cÃ³mo podÃa pasar de su forma de diseÃ±ar por tablas a diseÃ±ar sin tablas. Creo que con este artÃculo podrÃ¡ aprender la transiciÃ³n de forma muy sencilla y rÃ¡pida.
Empieza explicÃ¡ndonos los pasos que hay que llevar a cabo para la fase inicial de nuestro diseÃ±o. Dibujar los contenidos (cabecera, panel, contenido, pie de pÃ¡gina) y cÃ³mo crear la estructura de capas y sus estilos.
DespuÃ©s nos indica como aÃ±adir fondos y contenidos a las distintas partes de nuestra pÃ¡gina, como por ejemplo las imÃ¡genes con float. No solo se centra en lo estrictamente desarrollo, sino tambiÃ©n un poco en diseÃ±o. AÃ±ade imÃ¡genes de fondo al pie y a la cabecera que realmente quedan bastante bien.
Y por Ãºltimo nos indica como dividir el contenido en rejillas para darle un aspecto mÃ¡s uniforme.
Breaking Out of the Box

Similar Posts