EnigmaTres: Diseño Web

!Inspírate¡, algunas ayudas al diseño web

The Dude — 2007-03-13T22:37:00+01:00

Estas diseñando y ¿no se te ocurre nada?. La solución la encontraras en sitios como estos:

http://www.webcreme.com
http://styleboost.com
http://www.beautifully-webdesign.net
http://www.smashingmagazine.com
http://bestwebgallery.com
http://www.dzone.com

Y en español:

http://www.webeame.net
http://rudeworks.com
http://engelplanet.blogia.com

Iconos: Tu aplicación, mas atractiva.

The Dude — 2007-03-02T13:34:00+01:00

Los iconos son una parte fundamental del diseño web, y harán la interfaz mucho más atractiva para el usuario. Como no todos somos buenos con el diseño grafico de iconos, o no tenemos el tiempo necesario, hay gente que los hace por nosotros:

iconwerk.de y dzialifornia.de: mis favoritos, no tienen muchos iconos para descargar, pero sus diseños siempre me dan ideas de que tipo de iconos usar para que pagina. Su portfolio es simplemente espectacular.
5lineas.com: gran post en este blog, donde encontraras 10 sets o bibliotecas de iconos gratuitos y muy vistosos.
FAM FAM FAM, Sweetie, nDesign-Studio: Ofrecen pequeños iconos ideales para nuestras aplicaciones web.

Además, también podrás encontrar los iconos que necesitas en páginas como:

MouseRunner.com, Yellowicon.com, FastIcon.com, afterGlow.com, iconkits.com, IconBuffet, IconArchive.com, PixelgirlPresents.com, Iconfactory.com y un largo etcétera.

Muchos son gratuitos, y algunos gratuitos y libres. Si los vas a utilizar en un proyecto serio, comprueba que tipo de licencia tienen.

Esquinas Redondeadas: Recursos

The Dude — 2007-02-20T12:26:00+01:00

    ¿Quien dijo que los diseños con CSS debían ser estrictamente cuadrados? Aquí presento una colección de recursos para redondear las esquinas de los "divs", tanto con CSS como con JavaScript.
    SmileyCat.com: Nos ofrece 50 formas de hacerlo, especificando el numero de imágenes, si usa o no JavaScript, o si esta indicado para diseños líquidos o fijos.
    Nifty Corners Cube: Es la última versión de, probablemente, el método más usado por los diseñadores web para conseguir esquinas redondeadas, y además esta su manual esta traducido al castellano.
    Spiffy Corners: Es un generador, donde tu especificas lo que quieres gráficamente, y el te devuelve el código CSS y HTML a introducir en tu pagina.
    Por otra parte, si quieres generar las esquinas redondeadas de forma dinamica, es decir, sobre la marcha, te resultara muy interesante la utilidad que Google utiliza para generar esquinas redondeadas. Para saber como funciona: SigT.
    Para terminar, si lo que realmente necesitas es generar botones con las esquinas redondeadas, lo puedes hacer mediante photoshop. Existen dos métodos, puedes usar la herramienta Rectángulo Redondeado, o bien seguir este buen tutorial

Tipografias, fuentes y estilo

The Dude — 2007-01-10T13:48:00+01:00

    El proceso de diseño de una página web es una tarea ardua y harto compleja, y uno de sus pilares fundamentales es la elección correcta de una fuente, su tamaño, y demás parámetros para los diferentes tipos de texto.
    La primera norma/regla a seguir en la elección de una fuente, es obvia, el texto debe ser fácilmente legible, es decir, cuanto más le cueste al lector entender lo que pone, menos interés mostrara por el texto y lo abandonará mas fácilmente. Varios factores influyen en la legibilidad, los más importantes son el tipo de letra con serif o sans-serif, y el tamaño. Otros son el espaciado entre líneas, y entre caracteres, el contraste etc.
    Otra regla a seguir, esta relacionada con la compatibilidad entre sistemas y fuentes. No todas las fuentes instaladas en tu ordenador son compatibles con los exploradores de otros ordenadores, aunque utilicen el mismo S.O. Por esto es recomendable que uses, siempre que sea posible, las fuentes Arial, Verdana, Helvetica, que tienen la mayor compatibilidad.
Una vez elegida la fuente, puedes comprobar como quedaría con diferentes configuraciones gracias a Typetester, o comprobar tu web en diferentes exploradores gracias a BrowserShots.

Demasiado cool para IE

The Dude — 2006-12-13T01:31:00+01:00

   Como habréis podido observar, hemos realizado algunos cambios en el diseño web, y en general en la pagina. Para empezar, hemos cambiado la cabecera, por runa un poquito mas 2.0, aunque, visto el resultado, no es mas que una cabecera provisional un poco menos fea que la anterior.
    La he realizado siguiendo un par de tutoriales que encontré vía anthony.es. El primero de ellos, es un tutorial para crear un fondo con degradado y lineas oblicuas. Y el segundo es para el típico efecto reflejo.
Por otra parte hemos cambiado los estilos. Y como, magnifico error nos da IE. En definitiva, que esta pagina es demasiado cool para IE. Esperemos corregirlo en el fin de semana, todos nuestros lectores son importantes.
    Otra cosa que hemos cambiado, es el feed principal. Ahora es gestionado por FeedBurner, una herramienta gratuita y muy potente, con la es posible generar feeds y conocer sus estadísticas. Podéis seguir usando el feed rss anterior, aunque lo mejor será que os paséis a este. Funciona mejor y nos ayudara a conocer a la gente que nos lee.

Ajax (II)

The Dude — 2006-11-12T19:42:00+01:00

Ultimamente esta en boca de todos la palabra Ajax, que ya introdujimos hace algún tiempo. Pues bien, he encontrado algunos links que te ayudaran a conocer mejor en funcionamiento del objeto XMLHttpRequest.
Para empezar un ejemplo práctico del blog marciobarrios.com. Muy simple, muy bien explicado, y con muy poquitas lineas de código.
Para continuar, vamos la parte realmente practica: "Los Frameworks". El mas popular, es Prototype (wiki), y combinandolo con Ruby on Rails (wiki), es una de las herramientas mas potentes. De hecho existen otros frameworks, basados en el propio Prototype, como es Script.acul.us.
Script.acul.us es un conjunto de efectos en ajax listos para ser usados en tu propia pagina web. Tiene efectos tan sorprendentes como el "drag and drop", o "shake"(este último muy usado en sitios como digg o meneame)
Y esto es todo por hoy.

10 trucos para Technorati (I)

The Dude — 2006-09-29T10:17:00+01:00

Todos lo linkan directamente, yo además lo traduzco un poco...
1.- Suscríbete a los feeds de tus etiquetas preferidas. Busca tus tags preferidos, y añade su feed a Firefox. Así cuando no tengas nada en la cabeza sobre lo que escribir, tendrás a golpe de vista un montón de ideas relacionadas con tus preferencias.
2.- Usa Technorati para hacer búsquedas en blogs determinados. Sabemos que hay algunos blogs que visitas mas frecuentemente que otros, ya sea porque es un buen blog, o porque dan grandes ideas. Utiliza technorati para hacer búsquedas dentro de esos blogs, para obtener toda la información disponible en ese blog con respecto a una etiqueta.

3.-"Watchlists", básicamente es un historial de tus búsquedas, que podrás repetir cada cierto tiempo y que quedaran guardadas. Además cada "Watchlist", genera su propio Rss feed.
4.- Integra Technorati con tu navegador web. Puedes añadir Technorati a la barra de busqueda de Firefox, hay varias opciones, techorati normal, la version española, o bien el buscador de tags, todos aqui.
5.- También existen widgets, para Mac Os X, y si instalas Konfabulator... también para windows. También existe un Widget para Goowy.

Y como no me gustan los posts excesivamente largos, los 5 siguientes trucos vendrán cuando tenga ganas de seguir traduciendo. Y confío que sea pronto

PD: Esta traducción es totalmente libre... vamos... que si quieres una información realmente veraz, consulta el original.