Abel Sutilo - Creatividad Interactiva

Screenshot de premassagar

Aunque parezca extraño, una de las cosas que más me ha costado diseñar en este sitio personal han sido los comentarios. Muchas son las preguntas que debes hacerte antes de ponerte manos a la obra.

Lo bueno de un sistema de gestión de contenidos como Wordpress es que te facilita muchísimo esta labor. Ya sabes que la mayoría de las plantillas (templates) que están a tu disposición cuentan con la integración de comentarios con avatares (leídos desde Gravatar) o el cebreado de color para los mismos (comentarios par, comentarios impar y comentarios del autor). Solventados estos problemas las principales cuestiones que has de plantearte a la hora de diseñar tus comentarios son:

Uso y tamaño de los avatares

Aunque por defecto los avatares se presentan en la mayoría de los sitios con unas medidas “estándar” (unos 48×48 pixel), nunca descartes la posibilidad de presentarlos a un tamaño mayor o, incluso, no presentarlos. Por ejemplo:

• En un sitio web dedicado al diseño pueden participar diseñadores que tendrán, supongamos, bonitos avatares. Si aumentas el tamaño se verán más atractivos y complementarán el diseño de tu sitio con toques de diseño, color y creatividad.
• Sin embargo, en un sitio web con formato blog que genere comentarios largos (debates), los avatares podrían robarle mucho espacio al principal protagonista de tu sitio: el texto. En casos extremos no es descabellado prescindir de ellos.

Estructura visual del comentario

En resumen, los comentarios de tu sitio contienen tres partes:

• Autor (nick, sitio web y avatar)
• Metadatos (enlace, hora y fecha de la publicación)
• Comentario (el comentario en sí)

No necesariamente los metadatos tienen que presentarse junto al nombre del autor. Recuerda que tu intención es maquetar con la ayuda de tu hoja de estilos una presentación mejorada y usable de los comentarios. Concibe los datos a presentar como las capas que dispones para crear en tu modelo y juega un poco con ellas. Te propongo algunos ejemplos de wireframes para comentarios:

Seguro que con un poco de imaginación puedes sacar decenas de modelos.

Diseño gráfico de los comentarios

Una vez decidas el boceto (wireframe) de tus comentarios, te será mucho más fácil diseñarlos y posteriormente maquetarlos. Para la labor de diseño debes empaparte de los blogs que más te gustan para anotar acabados y tener en cuenta varios factores además de todo lo señalado:

• Tipografía
  
  Si sueles obtener comentarios cortos, considera la opción de ofrecer una tipografía de mayor tamaño para que luzca mejor. Si sueles obtener comentarios extensos, trabaja las propiedades de interlineado (line-height) y espacio entre letras (letter-spacing) para que la lectura no resulte agotadora. En cualquier caso siempre procura que sean legibles y que la tipografía contraste lo suficiente con el color de fondo.
• Formato
  
  Procura que tu formulario de comentario permita el uso de etiquetas HTML para enriquecer los textos: los usuarios con más experiencia sabrán valorarlo. Testea y prepara todas estas etiquetas desde tu hoja de estilos para evitar sorpresas posteriores.
• Mensajes
  
  Enriquece la estructura de tus mensajes en los comentarios (error, moderación) con hoja de estilos.

Cuando manejas un lenguaje específico o técnico y, además, trabajas con gente con un grandísimo sentido del humor, salen propuestas que te sacan una sonrisa. Una de ella es float:center; como nueva propiedad a CSS.

Muchos nos hemos preguntado alguna vez por qué estas propiedades no existen en CSS (quizás tras algunas tediosas horas de maquetación en las que no sale el resultado deseado). Pero si lo pensamos fríamente, son valores redundantes. Flotas algo (o grupo de algos) a la derecha o a la izquierda. Y centras con mágenes laterales. Sin prentender entrar en un debate técnico, prosigo con el humor de este post que es a lo que yo venía. Float:center; es algo que soltamos con humor en nuestras conversaciones. Otra nueva opción que queremos proponeros sería:

#selector{display:poco;}

#menu{display:poco 60%;}

Agregar la propiedad “poco” a opciones de disposición para ocultar o transparentar cajas. Sería confuso al principio porque aquí hablamos del 60% de poco (transparencia). Es decir, un 40% de mucho (opacidad). Pero si le cogiste el rollo a las flotaciones, esto está hecho.

En castellano

#menu{
ancho:300px;
alto:130px;
margen: 10 auto;
fuente: Arial, Helvetica, sin-serifa 0.7em gorda;
texto-adornado:subrayado;
flotacion:izquierda;
interlineado:0.9em;
espacio-entre-letritas:0,3em;
disponer:poco 60%;
}

Aunque CSS se cimenta en un inglés básico de las montañas, nosotros queremos apostar por la comunidad hispana en el mundo del diseño web. Así que queremos que os unáis para proponer CSS en castellano:

Seguro que a vosotros se os ocurren algunas más ¿Alguna propuesta? :)

Smashing Magazine nos deleita con galerias de blogs de excelente diseño eventualmente. En la última, nos muestra 50 blogs cuyo diseño son una delicia (algunos de ellos ya conocidos por todos nosotros).

Hoy se celebra el CSS Naked Day, un evento inventado y propuesto por Dustin Díaz (uno de esos semidioses que trabajan en Google) que consiste en mostrar las páginas, los portales, los blogs, etc… sin hoja de estilos. Una diversión como cualquier otra. La gente que trabaja en Internet es así de resalá :)

Hace algo más de un año se me ocurrió esta camiseta. Desconozco si la idea ha surgido en algún otro lugar del Mundo por algún otro diseñador - maquetador y, aún peor, ¡la ha llevado a cabo! Sólo para verdaderos amantes de las CSS algo presumidos:

#me{display:sexy;}