6 Sep

Manual: Sistema Grid CSS

Últimamente estoy maquetando y he descubierto el sistema Grid de CSS. Me ha parecido tan maravilloso que me he sentido obligadísimo a compartirlo con vosotros. Os comentaría alguna de sus ventajas, fundamentos y peculiaridades, pero -la verdad- el manual que os disponéis a leer lo resume y explica todo con tal claridad que me lo reservo para que lo descubráis por vosotros mismos.

Si queréis maquetar como «Dios» manda, podéis empezar por aquí:

• Manual online Grid – Maquetación CSS

24 Mar

Comic Sans, la Belén Esteban de las tipografías

Comic Sans nació en 1994, su autor, Vincent Connare, era diseñador gráfico de Microsoft y tenía en mente hacer una familia que se pudiera utilizar en Microsoft Bob. Bob era un intento de mejorar la interfaz Windows 3.1, no lo consiguió, fue uno de los mayores desastres de la compañía.

Curiosamente, Connare, se inspiró en los viejos comics de Watchmen. Su idea era que acompañara los infantiles diseños de Bob pero, Microsoft, no la incluyó en este paquete y la relegó a ser una de las fuentes pre-instaladas del sistema Windows 95. La criatura se había liberado.

Es a partir de entonces cuando, su uso, inapropiado en la gran mayoría de los casos, le ha llevado a la fama. Elemento diferenciador entre personas de mal y buen gusto, profesionales y aficionados, etc. Podríamos decir que es la Belén Esteban de las tipografías. La tipografía del pueblo.

¡Se ha usado para todo! Carteles, pancartas, exámenes, notas de prensa, documentos oficiales, presentaciones…

• Ha sido nombrada por la revista Times como uno de los peores 50 inventos de la historia.
• En The Independent: «No está diseñada correctamente, no está pensada para ser impresa pero, sin embargo, es raro pasar un día entero sin verla.».
• La presentación del anuncio del descubrimiento del Bosón De Higgs se hizo en Comic Sans.
• Fue objetivo de Google, en el April Fool’s Day. Al realizar la búsqueda de Helvetica, aparecían todos los resultados en dicha fuente.
• Will Wright tuvo el mal gusto de utilizarla en Los Sims.

Todas las tipografías tienen una finalidad, propósito, personalidad… ¿Qué es entonces lo que esta fuente hace sentir en tantos usuarios para que sea utilizada fuera de contexto? Como diría Risto, Si dices o haces algo y no molesta a nadie, es que no has dicho o hecho nada. Esta fuente otra cosa no sé, pero molestar, ha molestado muchísimo. Quizás sea eso el ingrediente secreto de su éxito.

11 Sep

Enlaces: ¿Botón o Texto?

Cuando poner un botón:

Los botones del sistema se deben utilizar en aquellas «acciones» que queremos que el usuario ejecute.

Por ejemplo:

· Enviar
· Buscar
· Descargar fichero
· Subir fichero
· Confirmar
· Guardar

Ejemplos de uso:

Tenemos una web llena de documentos que el usuario puede descargar.

El formato ideal para una página de este estilo sería:

· Titulo del fichero

Botón para descargar los ficheros fuera un botón del sistema etiquetado correctamente («descarga este fichero»).
Debajo del botón podemos indicar que va a pasar (si el usuario va a una nueva página, cuanto pesa el fichero, formato, etc…).

Cuando poner enlaces:

Los enlaces los debemos utilizar para vincular ficheros HTML. Es decir, el usuario va a ir a otra página web.

El formato de enlaces ha de ser claro y debe indicar que vamos a ver, evitando los «pincha aquí», «más información», etc…

El problema de poner bajo enlaces «acciones» que no son ver otras páginas web es que pueden confundir al usuario.

Si tenemos el formato anterior:

· Titulo del fichero

· Descarga fichero.

Debajo podemos indicar que va a pasar (si el usuario va a una nueva página, cuanto pesa el fichero, formato, etc…).

Uno podría adivinar que se va a bajar el fichero, pero se podría pensar que uno va a ir a la página de descargas.

Los botones no crean confusión frente a los enlaces para lo que hemos denominado como «acciones».