Web Application Design Patterns

Una librería de referencias de patrones de usabilidad

Bueno, son las 4 AM y no puedo dormir. Acabo de terminar de leer el libro que venia leyendo lentamente desde hace tiempo ya, llamado Web Application Design Patterns, de Pawan Vora.

El libro en sí tiene el título muy bien puesto, porque realmente de eso se trata. Es una colección de patrones de diseño orientados a la usabilidad y la interfaz gráfica de las aplicaciones web. Para los que ya lo sabemos, recordaremos que los patrones son, como su palabra lo indica patrones. Son características en común y no soluciones definitivas ni detalladas de como aproximarse a una situación en particular.

Hablando de patrones en software, generalmente se los identifica de una forma muy común y muy particular. Cada patrón tiene un nombre que lo identifica, un problema particular que resuelve y una descripción de la solución básica a la que aproxima. La compilación de patrones que Vora hizo en este caso hace muy buen tributo de ese esquema y lo mejora en varios aspectos.

El libro se divide en varios capítulos que atacan temas comunes que merecen la atención en el desarrollo y la usabilidad de aplicaciones web, los cuales son:

• Formularios
• Autenticación de usuarios
• Página principal de la aplicación
• Navegación
• Búsqueda y filtrado
• Listas
• Rich Internet Aplications
• Aplicaciones Sociales
• Internacionalización
• Accesibilidad
• Diseño visual
• Librerías de patrones

Le doy crédito especial por la inclusión de esa última sección, en donde se definen las características que una librería de patrones (como este propio libro) debería tener, y se basa en varias librerías actuales en uso y recopiladas anteriormente por estudios al respecto.

En todas las secciones se muestran ejemplos, tanto de implementación como de uso real de esas características. Una gran mayoría de las veces se fundamentan los beneficios de estos patrones con estudios (las referencias están todas incluidas y detalladas al final del libro). Al mismo tiempo, están todos los conceptos explicados de una forma lo suficientemente detallada como para ser comprensible, lo suficientemente abstracta como para ser reusable y lo suficientemente clara como para ser entendida por no-programadores o diseñadores.

Una distinción que en este libro no se hace y me gustaría agregar como apreciación propia es que los patrones, como ya comenté, son soluciones a problemas determinados. No hay que confundirlo con buenas prácticas que, aunque cercanas, siempre conviene aplicarlas. El caso de los patrones es distinto, y de hecho, parecería ser imposible aplicar la totalidad de los patrones a cualquier sitio web. Ni siquiera los que están entre los ejemplos (Google, Apple, Mint, Facebook, Yahoo!, Basecamp, eBay, Amazon, y una larga lista de etcéteras) cumplen con la mitad de los patrones mencionados.

Volviendo al libro, lo recomiendo mucho como un libro de referencia. Está redactado como tal y no es una lectura ligera, pero vale la pena. 4 zorrinitos.

UPDATE 22/02: Tras pensarlo un poco más me dí cuenta que este libro no cubre una característica que si bien no está muy relacionada con la usabilidad, sí está relacionada con la experiencia del usuario, y ciertamente son patrones aplicados en web applications. Lo encerraría bajo la categoría de Performance, e incluiría cosas como caching de nivel aplicación, caching de nivel usuario, AJAX, conexiones persistentes, preprocesamiento de resultados. Son todas cosas que aplican como patrón a resolver un problema en particular en una situación en particular, siendo lo suficientemente abstractos como para ser aplicados en una variedad de casos. Posiblemente sería más difícil encontrar ejemplos (porque muchos sistemas no cuentan cómo es que funcionan por dentro), pero creo que sería bueno haberlos cubierto.

Soy un zorrinito usable.

(Read more →)

Schema.org

Repositorio público de esquemas de markup

En el punto intermedio entre estándares y SEO está Schema.org, un sitio que haciendo uso de los estándares de microdata permitiría mejorar la meta-información que un sitio está aportando, específicamente para hacerlo más apropiado a los motores de búsqueda. La página de Getting Started nos da una buena idea de qué trata esto.

Según cuentan, Google y otros proveedores de búsqueda están teniendo mucho en cuenta estos formatos de metadatos, llamados micro-formatos, y justamente podemos apreciar muchos de ellos y su estado de aprobación en Microformats.org.

Soy un zorrinito micro-formateado.

(Read more →)

¡Volvieron los comentarios!

...y volvieron para quedarse!

Eso, ya pude habilitar los comentarios (y quedarom medianamente arreglados), hagansé un festín de feedback para decirme qué piensan. Acuerdensé de comentar en todo lo demás, toda opinión es bienvenida (no por eso aceptada, jeje).

Soy un zorrinito comentado.

(Read more →)

¿Qué loggear de los usuarios?

Orientado a mejorar la experiencia del usuario

Un problema común en cuanto a mejorar la experiencia del usuario es que muchas veces no se sabe cuál es el problema, o cómo los usuarios interactúan con la aplicación. Si bien algo de eso mencionamos cuando hablamos de 22 herramientas para mejorar la usabilidad, hoy el problema es interno de la aplicación, y se trata de loggear las acciones de los usuarios para identificar qué necesita mejora.

Entonces, ante la pregunta: ¿Qué vale la pena loggear de los usuarios para ganar perspectiva de su comportamiento? la respuesta es, como muchas veces, depende. La razón es que loggear es caro, loggear todo es imposible y solo resultaría en un montón de datos sin correlación a nada. Los detalles de qué aproximaciones se pueden tomar están también entre las respuestas a esa pregunta.

Soy un zorrinito loggeado.

(Read more →)

22 herramientas para probar usabilidad

Compendio de herramientas para mejor usabilidad

En mashable tienen un artículo muy interesante llamado 22 Essential Tools for Testing Your Website’s Usability. Cane destacar que el artículo no sólo expone las herramientas sino que además las categoriza y da una pequeña explicación de cada categoría, para que sepamos exactamente qué queremos medir en cada caso. Las categorías son: Análisis de tareas de usuario, legibilidad, navegabilidad, accesibilidad, velocidad y experiencia de usuario.

Soy un zorrinito usable.

(Read more →)

DotLess

Precompilación de CSS para .NET

Sé que esto no es ninguna novedad, pero lo explico para el que no lo conozca: less es un componente JavaScript que nos permite tener más flexibilidad en el tipo de cosas que podemos escribir en nuestros archivos CSS. Estos archivos pasan luego a llamarse archivos less, con una sintaxis muy parecida a CSS, pero con algunas mejoras, como la definición de variables, mixins (“funciones”) y anidamiento (namespacing?) de declaraciones. Como bien dicen entonces, less is more.

Ahora, uno de los grandes problemas con esto es que less es JavaScript, y por tanto, no está bueno que cada navegador tenga el trabajo de pre-compilar el CSS y aplicarlo a cada página. Es un poco trabajoso (dependiendo de la complejidad de nuestros estilos y nuestras páginas), pero está claro que es demasiado trabajo. Alguien preguntó si había una forma de compilar los archivos less a CSS para que cada navegador no tenga que hacerlo, y obtuvo una buena cantidad de alternativas.

Yo encontré una no mencionada, y sacada directamente de NuGet, dotless es la portación de esto mismo a .NET, con la diferencia de que está implementado en forma de HTTP Handler, lo que significa que el browser se encarga de resolver los pedidos de archivos .less y devolverlos como CSS. Mejor aún, ya puede devolverlos minimizados y cachearlos. Dije que es un paquete Nuget? La instalación en sí son 4 clicks. Muy adecuado.

Soy un zorrinito cómodo.

(Read more →)

ELMAH

Error Logging Modules and Handlers for ASP.NET

ELMAH es un proyecto hosteado en Google Code bajo la licencia Apache 2.0, que automáticamente se inserta en nuestro código para darnos un tratamiento mucho más complejo de errores, incluso de aquellos que surgen de forma inesperada (que, filosóficamente hablando, debería ser la mayoría de ellos).

Cabe aclarar que las características que ELMAH provee out-of-the-box son:

• Loggeo de todas las excepciones no atrapadas
• Una página para remotamente ver un log de las excepciones
• Una página para remotamente ver los detalles de las excepciones
• Ver el yellow screen of death original
• Notificaciones por email
• Notificaciones por RSS

Cabe destacar que se sabe que ELMAH tiene ciertos problemitas en integrarse a aplicaciones ASP.NET MVC, específicamente por la forma en que se tratan algunos errores, pero tienen una solución aceptable, como explican en What are the definitive guidelines for custom error handling in ASP.NET MVC 3? (Lástima que la pregunta original nunca se respondió de forma completa.)

Si les interesa una respuesta más apropiada a esa pregunta (cómo deben tratarse las excepciones), les recomiendo un link compartido por JM, 15 Best Practices for Exception Handling, muy recomendable.

Soy un zorrinito excepcional.

(Read more →)

ASP.NET: Transfiriendo información entre páginas

8 formas comunes, en ASP.NET

Este es un problema común y por eso me pareció apropiado hacer un poquito de difusión a este link en particular que encontré entre los Enlaces interesantes número 66 de VariableNotFound. Muy apropiado, el artículo se titula Eight Different Ways to Transfer Data from One Page to Another Page (por Dios, son feas las páginas de EggheadCafe). Como bien aclara el mismo artículo, hay más formas de hacer eso, pero creo que estas primeras ocho son las aproximaciones más comunes, e incluso muchas independientes del lenguaje. Cada una de ellas tiene consideraciones que no se mencionan en el artículo, pero aún así es bueno como referencia rápida.

Soy un zorrinito transferido.

(Read more →)

Selectores CSS4

No está el 3, vamos por el 4!

Síp, los selectores CSS4 ya hicieron su apareción en uno de los primeros drafts de la W3c en septiembre del 2011. Sin embargo, les falta un buen camino para que siquiera vayan a implementarse en cualquier navegador, por lo que no están listos para ser usados, ni siquiera para ser probados.

Hay muchos pseudo-selectores y unos cuantos selectores en sí, y si prefieren una versión resumida, pueden visitar el artículo de Meet the CSS4 selectors, pero en el fondo les recomiendo leer el draft de la W3C y hacerse agua la boca con lo fácil que va a ser aplicar estilos.

(vía los Enlaces interesantes número 65 de VariableNotFound)

Soy un zorrinito estilizado.

(Read more →)

Backbone.js

Hace un tiempo ya que en nuestro equipo estamos integrando Backbone.js a nuestros proyectos. La idea tras backbone.js es, como su nombre lo indica, ser la columna vertebral del código javascript frontend, de forma que todo trabaje sobre una estructura centralizada y permita al código no ser un desastre auto-destructivo o conflictivo cuando los proyectos crecen. Esto se da mucho en aplicaciones con mucha interacción de usuario, y es importante para una aplicación compleja poder tener el código organizado. Backbone le da una estructura al código del tipo MVC en donde podemos diferenciar datos, de presentación de los mismos y de elementos que controlan la interacción entre ambos.

Ahora, el problema con backbone es que es un poco difícil de aprender. Tiene mucha estructura, poca documentación y no todo es obvio. Gracias a AM y a SC que me han compartido estos documentos útiles: Backbone Fundamentals y Backbone Patterns.

Toda esta temática queda muy acorde a The Seven Deadly Sins of JavaScript Implementation, en donde backbone.js se encarga de un par de pecadillos.

Soy un zorrinito frontend.

**UPDATE: **For English readers, you may check out this Backbone.js Introduction and Resources.

(Read more →)