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.

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.

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.

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.

dnndev.me → 127.0.0.1

Dominio para desarrollos locales

En geeks.ms (via los enlaces interesantes de VariableNotFound) publicaron un artículo/tip/huevo de pascua (no lo considero un huevo de pascua) sobre dnndev.me, un dominio registrado y apuntando sus entradas DNS a 127.0.0.1. La idea detrás de esto es que los desarrolladores puedan utilizarlo para no modificar sus entradas en el archivo hosts. El nombre del dominio viene realmente de DotNetNuke Development, que es la razón que llevó a registrar este dominio. Yo me hubiera conformado con un localhost.com, o loopback.me, o algo así.

Realmente no es tan útil si uno sabe cómo editar los archivos de host, pero  – y acá lo interesante — muchas veces no tenemos accesos de administrador para lograrlo, y en ese caso es en donde necesitamos un DNS que nos devuelva 127.0.0.1 para estas cosas. Ahí es donde esto se vuelve realmente útil.

A ver quién tiene una idea similar y registra dominios para apuntarlos a direcciones de redes C. No les gustaría ir a 192-168-0-1.my.net y que tengan acceso a su router? Mejor aún, podrían usarse alias en subdominios para IPs conocidas dentro de las redes. linksysrouter.my.net, broadcast.my.net, etc. ¿Quién será el valiente?

Soy un zorrinito cobarde.

Link del día: UI Layout Plugin

Del mundo de jQuery nos vuelve a caer un plugin de buena utilidad, bajo el nombre de UI Layout Plugin. Este plugin nos permite manejar dinámicamente el layout de nuestra página, permitiendo interacciones complejas o pantallas con mucha información para ser mostradas de forma dinámica.

Está claro que no siempre esto es deseable, pero para esos momentos en donde la interfaz debería complicarse para permitir variadas acciones sin interrumpir el curso normal de lo que estaba pasando, quizás hasta permitiendo una interacción rica y compleja antes de continuar con el intento original, incluso sin perderlo de vista, imagino que ese es el uso más interesante que este plugin nos puede ofrecer.

Soy un zorrinito modificable.

Link del día: debugCSS

Como todo elemento del desarrollo web, los CSS también pueden tener errores, y nuestra forma de utilizarlo puede no ser la óptima. Hay muchas herramientas que nos permiten ver cómo podríamos mejorarlo, pero hasta ahora no había visto ninguna que se enfocara directamente en corregir las buenas prácticas (junto con los errores, claro).

Entonces me crucé on debugCSS, un proyecto en forma de bookmarklet que nos da feedback sobre la página que estamos viendo. Al ser un bookmarklet, no toma más que un click y una arrastrada para instalarlo, y lo podemos usar tanto en páginas web como locales. Estuve probando varias páginas y de verdad que aunque no tenga errores graves, siempre estará dando sugerencias de como hacer el CSS y el HTML, más acorde, y no mancharlo con JavaScript inline.

En fin, otra de las herramientas útiles al momento de hacer desarrollo web.

Soy un zorrinito criticón.

Link del día: Qué debería saber todo programador JavaScript

Aquellos que están en el mundo web, y más que nada en el mundo de las RIA (Rich Internet Applications), no dudarán en decirme que JavaScript es sin duda una de las herramientas más potentes que tenemos disponibles. Otros sabrán de muchas de las mejoras que se vienen en este área, pero no es lo que quería comentar hoy.

Lo que quería contar es sobre una pregunta en StackOverflow llamada What should every JavaScript programmer know?, con puntos muy interesantes, referencias muy completas y hasta un quiz, y yo creía que sabía y no respondí correctamente ni la mitad de las preguntas.

Leer esas respuestas llaman la atención y sacan a la luz muchos puntos curiosos que quizá no habíamos considerado.

Soy un zorrinito JavaScript.

Link del día: Notificon

La gente de Github no me deja de sorprender, parece que siempre tuvieran algo nuevo. En este caso, me crucé con algo que no es demasiado funcional, pero sí muy interesante para lograr buenas interfaces de usuario.

Han notado cómo GMail utiliza el título de la página/tab para avisarnos de cuando tenemos un mail nuevo, incluso si estamos en otro tab? Bueno, algo muy parecido se puede hacer con los favicons, cambiandolos para dar una notificación al usuario. Algo parecido hace Google Calendar, poniendo un favicon distinto cada día con la fecha actual.

El código fuente de este proyecto se puede encontrar en este sitio de Github: Notificon.

Recuerdo haber leído unas pruebas cross-browser del soporte de favicons y su posible utilización. El único caso en donde no funcionaban era en Safari, ya que en lugar de mostrarse los iconos, se mostraba un ícono propio de Safari, y dependiendo de la cantidad de tabs, directamente no se mostraba nada. Desafortunadamente, olvidé en dónde leí eso (y mis búsquedas no dieron resultados). El estudio concluía que Safari debería ponerse al tanto con el resto de los navegadores.

Soy un zorrinito visible.

Link del día: Documentación jQuery extra-oficial

Me encontré con dos fuentes de documentación extra-oficial de jQuery, con lo cual, por supuesto, pueden estar desactualizados y hasta incorrectos. Pero lo interesante de ellos es que nos ofrecen una navegación un poco distinta que la que la documentación original nos ofrece.

Es el caso, por ejemplo, de Visual jQuery (actualmente en 1.2.6), que nos permite navegar la documentación de forma jerárquica, sin perder el nivel de dónde estábamos. Además, encontré que es muy orientado a ejemplos, con lo que es fácil llegar al punto de lo que hace cada cosa y cómo se utiliza.

jQAPI es un caso parecido, y parecería que la navegación es aún más fácil en este caso, incluyendo búsqueda HTML5 y todo. Me pareció que este tiene explicaciones más detalladas y ejemplos más completos.

Soy un zorrinito javascript.