Archivo de la categoría ‘Diseño’

Tips para diseñadores gráficos

Viernes, 7 de agosto de 2009

Este post va dirigido a aquellos diseñadores gráficos que deben hacer un original para una web. Me refiero a alguno que deba ser armado en HTML (los originales para flash son otra cosa… allí el diseñador gráfico tiene más libertad y puede seguir tranquilamente los cánones del diseño en papel). Si vos diseñador gráfico querés que tu amigo el diseñador web goce de salud, por favor tené en cuenta estos pequeños tips!!

Tamaño del original

Cuando diseñes una web a 800x600px, por favor hacé el original a 800x600px… una hoja A4 apaisada en el illustrator tiene aproximadamente 800×600 px. Entonces porqué no hacerlo en una A4 apaisada en vez de hacerlo por ejemplo a una resolución extraña como 1400x600px?
Explico el porqué de este pedido:

  • el cuerpo del texto no puede ser menor a 9px y cuando se manejan en un tamaño de pantalla grande (lo que mencionaba arriba… 1600×700 px) tienden a usar los espacios como si fuera una hoja de papel y pones muchos textos a 6px que despues en una web ni Dios lo puede leer. Pero claro en el papel se ve bien…. Por eso cuando diseñenen una web tengan en cuenta esto: el tamaño mínimo de una tipografía es de 9px, más chico que eso, la tipo se destruye!!
  • En el uso de backgrounds o formas libres, tengan en cuenta no sólo el tamaño de un monitor de 800×600 de resolucion, sino que deben pensar que también se debe ver bien en todo tipo de monitores, de la resolucion que sea. Uno de los principales objetivos de comunicación para un diseñador web es justamente ese: que el diseño se vea lo mejor posible en todas las resoluciones posibles. Muchas veces, el diseñador gráfico no tiene en cuenta este aspecto y su diseño queda bien para una resolución, pero sucede que ese diseño que se veia perfecto, en otras resoluciones pierde muchisimo porque queda como un cuadrado. Espero ser claro. Mi consejo es: cuando diseñes una web, oh diseñador gráfico de mi alma, imagines cómo va a ser el resto del entorno (imaginátela cómo sería poniendo tu monitor en distintas resoluciones), no sólo la página en sí.

Colores

Ver algo en papel no es lo mismo que verlo en una pantalla. Por eso mismo, DG, cuando diseñes una web tené en cuenta que los contrastes no se aprecian de igual manera. Puede que quede chetazo un fondo naranja con tipo blanca en un papel, pero el usuario web se va a defecar para leer eso. Te va a denunciar por haberlo dejado ciego despues de haber leido un par de párrafos!

Texto

  • Rodear una imagen con texto se puede, pero solamente se puede con una alineación recta hacia alguno de los lados, no se puede contornear una imagen con texto.
  • Yo personalemente no recomiendo los justificados (en el cuerpo del texto), en el quark te divide las palabras y no te quedan espacios en blanco en el cuerpo del texto, pero en HTML esto no ocurre asi. A tenerlo en cuenta. el HTML no te hace hyphenation.
  • A menos que esté en una imagen, el texto no se puedo poner inclinado!

Bueno, espero que sirva este pequeño aporte a la salud mental de los que la luchamos en la web.

¿HTML o XHTML?

Viernes, 7 de agosto de 2009

Versión original del artículo por Robert Nyman (autorizado por él mismo vía e-mail)

Esto parece ser la eterna cuestión entre los desarrolladores web: ¿HTML or XHTML? En muchos lados aparece planteada la pregunta en foros y blogs, los desarrolladores web le preguntan a Robert o a otra gente que escribe sobre este tema: qué es lo que ellos piensan acerca de cuál es la mejor opción a seguir. Robert no escribió este post para decir cuál es la última opción, sino más bien para que nos enteremos cuáles son las consecuencias del camino que elegimos. Entonces, empecemos desde el principio:

¿Estricto o Transicional? (strict | transitional)

|leer post completo

Un plugin impresionante para Illustrator

Viernes, 7 de agosto de 2009

Post publicado en el 2006

Scriptographer

Navegando por unos de mis sitios favoritos, encontré este plugin excelente…su nombre: Scriptographer.Se trata de un plugin para Adobe Illustrator CS y CS2, que utiliza la potencia del javascript dentro de illustrator. Todaví­a no lo entiendo muy bien, pero las poquitas cosas que logré hasta ahora me han impresionado. Supongo que incluso uno mismo podrí­a hacer un javascript para aplicar a los vectores con este plugin. También se pueden vectorizar imágenes usando efectos muy buenos.

Imágenes transparentes, una vuelta de tuerca

Viernes, 7 de agosto de 2009

Post publicado en el 2006

Muchas veces, al armar un sitio, necesitamos imagenes con transparencia para para determinados diseños que así­ lo requieren. Siempre que pasa esto tenemos que pensar cuál es la alternativa más adecuada para lograr que el diseño se vea tal cual lo pensamos. Las altenativas que tenemos disponibles, al menos en principio, son:

  1. Usar GIF transparente
  2. Usar un JPEG con el fondo incorporado en la imagen
  3. Usar un PNG

Pero cuando empezamos a trabajar nos damos cuenta que estas opciones tienen muchos contratiempos que paso a detallar:

  1. GIF: la calidad de la imagen es muy reducida (como saben sólo permite hasta 256 colores), por lo que no podemos usar imagenes muy complejas en cuanto a colores. Y otro gran, e insalvable, problema es el del antialias… el GIF transparente siempre nos pide que le definamos un color de fondo para los bordes de las imagenes, ni hablar de un gradiente.
  2. Usar un JPEG con el fondo incorporado en la imagen: esto en realidad es mucho más limitado, porque lo que justamente buscamos es poder variar el fondo sobre el que está la imagen.
  3. El PNG, por su no pérdida de calidad, por la posibilidad de distintos niveles de opacidad, parece la mejor opción. Sin embargo, tiene algunas desventajas: pesa una tonelada y el maldito IE6 (y anteriores) no soporta las transparencias, si bien se puede hacer uso de filters agregados en la hoja de estilo que solucionan el problema, pero es poco versatil y bastante complicado hacer que funcione como uno quiera (el IE7 si va a aceptar transparencias… era hora!)

Entonces se me ocurrió algo… hacer un PNG con sus transparencias, pero en vez de montarlo directamente sobre el HTML lo meto dentro de un SWF (del mismo tamaño de la imagen) y luego a este SWF resultante, en el HTML le pongo el wmode=transparent y ahí­, además de haber logrado la imagen transparente sin perdida de calidad, le puedo reducir el peso al mismo nivel que un JPG normal!!!! Cuando hice este sitio, se me ocurrió hacer esto que acabo de explicar y me dio resultado!!El único problema que tiene este método, es que no sirve para hacer imágenes de background dado que los SWF no son soportados para cumplir esta función. Si se me ocurre como solucionar esto último, prometo postearlo.

Consejos para desarrollar CSS

Viernes, 7 de agosto de 2009

Post publicado en el 2006

A la hora de crear un sitio con CSS, seguramente te has encontrado con un montón de asuntos que más de una vez te han hecho dar ganas de golpearte la cabeza contra la pared. Dave Shea, ha escrito este artículo, que es un intento de hacer el proceso de diseño más fácil y una referencia rápida para ver cuando estás en algún problema.

Si tienes algún ítem para agregar, por favor siéntete libre de hacerlo aquí.

Hay traducciones disponibles en: inglés (el artículo original), francés, alemán, holandés, italiano, húngaro, finlandés, ruso, portugués, japonés y chino simplificado. Siéntete libre de proveer más.

|leer todo

JS: reflejando imágenes

Viernes, 7 de agosto de 2009

Es un método excelente para reflejar imágenes vía javascript sin necesidad de tener que editar de usar imágenes adicionales o editar la imagen en photoshop (o el programa que sea). Es muy simple de aplicar. reflection.js fue desarrollado por Cow”s Blog. En este link está el post de Cow y en este otro, la explicación de cómo funciona y de cómo se aplica (en inglés).

Reflection.js 1.0 allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it”ll degrade and your visitors won”t notice a thing. Best of all, it”s under 4KB.

Y la verdad es que es muy simple de aplicar, consiste en guardar el archivo reflection.js en tu carpeta de scripts (o donde sea que uno los guarde) y después aplicar a la imagen que se quiera reflejar class="reflect" en el mismo tag de la imagen. También se le pueden especificar color de background. Acá va un ejemplo:

Y acá va el código que usé para que sea vea lo de arriba:

<table summary="ejemplos de reflection" align="center">
<tr>
<td>
<img src="/images/astronaut.png" class="reflect" alt="" /></td>
<td style="
background:#000000"><img src="/images/astronaut.png" class="reflect" alt="" /></td>
<td style="
background:#ff0000"><img src="/images/astronaut.png" class="reflect" alt="" /></td>
</tr>
</table>

Menú horizontal al 100% de ancho

Viernes, 7 de agosto de 2009

Post publicado en el 2006

El problema:

El cliente querí­a que el menú de su sitio web (por cierto un diseño minimalista bastante bueno, hecho por Gabriel) ocupe la totalidad del ancho de la página. Esto implicaba que debia ajustarse a todas las resoluciones. Y por supuesto, debí­a funcionar bien en todos los browsers. Entonces lo primero que se nos ocurre probar con las listas, el clásico ul. No funcionó. Estuvimos buscando en bocha de lugares, pero no hubo caso. Sólo encontramos soluciones parciales al problema. Cuando lográbamos hacerlo andar en firefox, no andaba en IE y viceversa. Asi que, bueno… tuvimos que pensar en otra solución…

La solución

Es realmente simple: primero hacer un div que englobe los elementos. Cada ítem que lleva el menú no lo haremos usando el tag ul, sino que deberán ser puestos en un div por cada uno. Así debería quedar el HTML:

<div id="nav">
  <div><a href="
#">item1</a></div>
  <div><a href="
#">item2</a></div>
  <div><a href="
#">item3</a></div>
  <div><a href="
#">item4</a></div>
  <div><a href="
#">item5</a></div>
</div>

Se ve fácil, no? Muajajajaja… no, en serio, la parte del CSS es también muy simple: al div que contiene los ítems, al que nosotros llamamos nav, debemos especificarle mediante la propiedad width que ocupe el 100%. Luego debemos definir los divs que están dentro del div nav: debemos aplicar el float:left para que los elementos se alinéen a la izquierda uno al lado del otro y acá viene lo más importante y a la vez la gran falencia de este método: a la propiedad width debemos ponerla en el porcentaje relativo a la cantidad de ítems de la lista, esto hace por ejemplo, que no se pueda usar para generar ítems dinámicamente. Para que se entienda mejor: si tenemos 5 ítems en la lista, entonces el width para cada uno será de 20%. Otra falla que tiene es que si a ese ítem le queremos añadir margin, padding o border, debemos también ajustar el width para que no se nos desacomode.
Énigüei, es algo simple y sirve si ya está definida la cantidad de ítems y sea un sitio estático. Aunque ahora que me pongo a pensar sí se puede hacerlo de manera dinámica! Y ahi una cosita más: como siempre el fáquin IE necesita un poquito de hacks!!! Acá va el código CSS:

#nav {
width:auto;
}
#nav div {
float:left;
text-align:center;
width:19%;
background:#f1f1f1;
margin-right:1%;!important
}
#nav div {
/*para IE */
float:left;
text-align:center;
width:19%;
background:#f1f1f1;
margin-right:0.9%;
}

Bueno, espero que sirva, si alguien conoce una solución mejor, por favor que me la haga saber.

Top 10 de tutoriales CSS

Viernes, 7 de agosto de 2009

Post publicado en el 2006

Cameron Olthuis en su blog hace un top 10 de tutoriales CSS. Coincido casi al 100%. Por supuesto, por ahi uno haría algunos cambios de orden o aparecerían otros sitios, pero quería respetar la decisión del autor y dejé la lista tal como está en el post original. Bueno, acá va la lista:

  1. Hoverbox Image Gallery: Linda galería de imágenes hechas solamente con CSS.
  2. CSS Bar graphic: Si para mostrar los resultados de una encuesta te enredabas con imágenes en distintas proporciones, ahora con un poco de CSS ya lo tenés resuelto muy fácil.
  3. CSS Vertical Menus: Una lista con muchos menúes verticales libres para usar.
  4. Listamatic: colección de menúes tanto verticales, horizontales o experimentales. Muy recomendable, me ha sacado de apuros en más de una ocasión.
  5. Floatutorial: Excelente colección de modos de uso de la propiedad float
  6. Rounded Corners:
  7. 40 CSS Layouts: como su nombre lo indica, un compendio de 40 layouts.
  8. CSS Photo gallery: otro tutorial como el que está en el primer lugar de este top 10, pero un poco más complicado
  9. CSS Drop Shadows: sombras tras las imágenes muy bien logrado
  10. Style Sheet Switcher: para cambiar el estilo de una página
hover box image gallery

Y bueno, no pude dejar de caer en la tentación de poner algunos a los que yo considero que deben estar en el top 10:

Las 20 reglas para un desarrollo web

Viernes, 7 de agosto de 2009

Post publicado hace muuuucho

Mi admirado Vitaly Friedman, que ya dio un inmensísimo aporte a la comunidad de los webdevelopers con su manual para el derrollador web y sus bookmarks esenciales para el desarrollador web, escribió un artículo bastante interesante sobre cuáles son las reglas a tener en cuenta para desarrollar una web exitosa. Ojo, esto no significa que sea algo absoluto y único que si no lo cumplís te puede causar el mismo efecto que comer una sandía y tomar vino y esas cosas, pero es una muy buena guía para tener en cuenta. Como pequeño aporte que hago, traduzco los tí­tulos de estas reglas… a la explicación de cada uno se la van a tener que bancar en el idioma de Shakespeare, que está aquí. La lista es la siguiente (y la traducción no es del todo literal, pero ayuda):

  1. Respetá a tus visitantes. No les obligues a leer determinado contenido, dejá que naveguen libremente.
  2. La mala publicidad (es decir mal diseñada o fuera de lugar) es pésima. Capaz que con un banner chillón captás la atención, pero después te van a odiar por eso.
  3. Informá y enseñá a tus visitantes. Compartí tus ideas, experiencias, etc. de esa manera vas a obtener a la larga que mucha gente se entere de quién sos y qué ofrecés
  4. Desarrollá tu propio estilo. Desarrollá tus propias ideas. Navegá mucho, inspirate, pero no copies, porque eso es una bosta!
  5. \r\n

  6. Respetá los estándares. Pensá en la gente que visita tu sitio.
  7. Sé claro (aka no compliqués las cosas al pedo). Si es ambiguo lo que decís/mostrás va a ser muy dificil que te tengan en cuenta.
  8. Odiá al Internet Explorer si querés, pero no ignorés a la gente que lo usa. Sí, el Internet Explorer es un invento de satán, pero lamentablemente mucha gente lo usa (muchisima). Y lo mejor que se puede hacer es que el sitio sea accesible para todos sin importar el browser que use.
  9. Preocupate por el contenido de tu sitio.
  10. No te preocupes por los web-crawlers ni por la SEO. Ni tampoco te preocupes por el PageRank o cosas por estilo… si tu sitio esta bien hecho, esas cosas vienen solas.
  11. Hacé contactos, publicitá tu sitio, pero no llegues a hacer spam. El spam es una mierda, que seguro se vuelve en tu contra).
  12. Escribí, publicá, sentite libre de preguntar. Participá en todo lo que puedas, una cosa maravillosa que tienen los blogs es la posibilidad de hacer comentarios y opinar y preguntar y funciona!!!
  13. Respondé tus e-mails immediatamente!!! (algo que debo aprender, no puedo ser tan fáquin colgado)
  14. Usá las ventajas de la Semántica Web.
  15. Conectáte con tus colegas, sean bloggers, galerías CSS… lo que sea.
  16. Pensá en términos globales.
  17. Nunca compromentas tus principios. Eso quiere decir que no dejes llevar por las pelotudeces que diga alguien (sea cliente, jefe, etc), si está equivocado, corregilo. no le digas si a todo
  18. Está siempre actualizado. Siempre es bueno saber qué está pasando en la red.
  19. Aprendé a manejarte en el bloque creativo. Buscá info en foros, blogs para poder llevar tus ideas a cabo.
  20. Hacé más linda la Web. Con tu aporte podés hacer que la internet sea un poco más agradable.
  21. Conocé el Poder de la Web. Tenés la palabra! podés ayudar a mucha gente.

Bueno, espero que sirva… sé que mi traducción no es la mejor, pero ayuda como guía, el texto original en inglés tiene su link arriba, pero lo repito por las dudas: http://www.alvit.de/blog/article/20-rules-of-…

Y repito, estas reglas no van a traer el éxito si no creés en lo que estás haciendo ni explorás tu creatividad. cada idea puede ser la idea.

Get Firefox!
Miembro de panic|(o)|zoo