Abel Sutilo - Creatividad Interactiva

Ocasionalmente he tenido la suerte de recibir éste calificativo. Así que, para estar a la altura de la circunstancias y tras ver que en un blog cuya temática es el diseño puede ser muy recomendable, me he apuntado el plugin Sociable para Wordpress para añadir marcadores a los pies de cada uno de los artículos que escribo en este sitio.

Sociable is a plugin which adds social media buttons to your posts, and does so easily, and beautifully. While originally developed and maintained by Peter Harkins, it had seen no updates for 8 months, and it wasn’t rolled into the WordPress plugin repository, so I’ve decided to give it a new life, after being request by my friend Mel Carson to “get him some social media buttons”.

Por mucho que nos peleemos con el inglés parece que queda bastante claro. Éste plugin es fácil de instalar y de personalizar en Wordpress. Si nos da miedo lidiar con PHP, las opciones de configuración nos lo ponen realmente fácil para que aparezca en nuestros artículos, páginas, portada… En fin, donde queramos. Y con un poco de dedicación, podemos hacer una personalización completa (página donde aparece, iconos y marcadores sociales concretos). De momento yo os lo ofrezco como opción en los artículos de mi blog. El portafolio no comercial queda libre de las zarpas de las redes sociales, ya que no tendría mucho sentido esas opciones en dicha sección ;)

Poco a poco voy corrigiendo y mejorando algunas cosas de este sitio. Quiero aprovechar a los que habéis usado el formulario de contacto para anotarme errores de presentación en diferentes navegadores sobre varios sistemas operativos. En concreto a Gruncho y a Xavi, muchas gracias ¡Lo tengo presente para seguir trabajando! :)

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.

¡Por fin! Me alegra poder decir en voz alta que po fin he finalizado el diseño, maquetación e implementación de mi sitio web personal. Éste que estás viendo es el resultado.

Para no hacer un artículo demasiado extenso sobre el tema, me he molestado en crear una sección donde os detallo a los más curiosos cómo se ha creado éste sitio web personal que tenéis ante vosotros. No dejéis de echarle un ojo para ver algunos detalles del trabajo y mis agradecimientos especiales.

Debo aclarar que queda todavía mucho trabajo por hacer. Pero las labores pendientes no me impiden volver ha arrancar el proyecto que lleva ya demasiado tiempo parado. Entre las labores pendientes podríamos anotar:

• El banner de la cabecera será animado (flash) y aleatorio (cambiará según la sección que visitas).
• Aplicar una botonera de marcadores sociales (Bitácoras, especialmente)
• Revisar y sincronizar el funcionamiento de feeds
• Testear el sitio a fondo (varios dispositivos, navegadores, etc)

Por lo demás, estoy de vuelta. Por cierto, sé bienvenid@ ;-)

El proyecto

En mayo de 2008, mi colega Daniel Calderón (alias Astracán) y Óliver Díaz (alias Caracol) me propusieron participar en la creación de un portal de humor para la blogosfera hispano-parlante. Encantado con el proyecto, durante los meses de mayo a septiembre de 2008 participé en la redacción de algunos de los textos para las creatividades del portal, viñetas y especialmente —codo con codo con la ayuda de Daniel Calderón (maquetación) y Jose Antonio Pérez (ilustraciones)— en el diseño del mismo. Mis principales labores fueron crear la imagen corporativa y diseño web para el tema de Wordpress.

Conceptos y producción

Mi propuesta de diseño para la plantilla del tema de Wordpress flapa.es incidió en dejar de lado algunas prácticas aburridas de las que se nutren la mayoría de blogs de éste sector. Así fue como se nos ocurrió la idea de trabajar la columna derecha de una manera más productiva para el portal. En vez de mostrar infinitas lista de enlaces de amigos, flapa.es pone a disposición del usuario una grata experiencia de navegación donde encontrar todo de un sólo vistazo con especial incapié en el contenido audiovisual que produce el propio equipo del portal.

Por otro lado, los artículos fueron concebidos para que visualmente se dispusieran como “cápsulas de humor“. A priori sólo mostrando el título del artículo y el nombre del autor. Finalmente la dirección del blog consideró que era más apropiado mostrar el contenido desplegado.

Aplicación

Tras un mes de intensivo trabajo, el equipo de flapa.es ha sacado a la luz la plantilla (6 de noviembre de 2008 ). Con un trabajo que respeta de manera digna el diseño y concepto anteriormente presentado por un servidor. Es innegable que quedan algunas cosas por limar, pero no pasará mucho tiempo para que toda la plantilla del tema esté 100% lista.

Actualización (19 de febrero de 2009): La plantilla lleva un tiempo totalmente lista y con importantes mejoras a nivel interno.

Y qué mejor, mientras uno va pensando qué caminos recorrer por esos espacios siderales que usar el tema de la nave Vostok como base para despegar. Le iré dando unas vueltas a ver cómo lo tuneo. O lo mismo vuelvo a cambiar: esto es lo malo y lo bueno de Wordpress.

Actualización (marzo, 2009): Publico oficilamente el nuevo diseño de éste sitio web basado en un diseño propio :-)