Servicios de desarrollo web, sistemas y usabilidad

En los entornos de desarrollo web es habitual referirse al patrón de diseño Modelo Vista Controlador (MVC) como la “forma correcta” de construir sitios/aplicaciones web. La realidad es que dicho patrón no se puede aplicar a la web tal y como se concibió, aunque su objetivo resulte útil y entronque con un principio general de diseño frecuente en distintos entornos de desarrollo de software: separar claramente las partes de un sistema. Así de sencillo. :)

Modelo-Vista-Controlador

El paradigma MVC, tal como se presentó originalmente, está pensado para aplicaciones estáticas como las que solemos manejar en un entorno de escritorio. Piensa por ejemplo en tu organizador de archivos (en Windows, en Mac o en Linux): te ofrece un buen número de botones, campos de entrada, controles de ventana, filtros, etc., que pueden ser presionados por ti en cualquier momento. Cuando lo haces, estás activando uno de los muchos “controladores”, su consecuente “modelo” para hacer lo que tiene que hacer, y finalmente actualizando una o más “vistas” que reflejarán el nuevo estado del “modelo”. En la implementación original la cosa quedaba descrita del siguiente modo:

The view manages the graphical and/or textual output to the portion of the bitmapped display that is allocated to its application. The controller interprets the mouse and keyboard inputs from the user, commanding the model and/or the view to change as appropriate. Finally, the model manages the behavior and data of the application domain, responds to requests for information about its state (usually from the view), and responds to instructions to change state (usually from the controller).

Es decir, el problema original al que se enfrentaba este “paradigma” era la simultaneidad, en un entorno de múltiples puntos de entrada (en forma de “controladores”) y múltiples puntos de salida (en forma de “vistas”). Lo que nos obliga a preguntarnos: ¿la web es un entorno de ese tipo? Evidentemente no. En la web manejas un sólo punto de entrada (request) y un sólo punto de salida (response), por lo que para empezar te encuentras con un patrón para el cual no dispones de un problema real sobre el que aplicarlo. :(

Pero además te encuentras con que las aplicaciones ideales para MVC son básicamente monousuarias y el modelo se mantiene en memoria mientras la aplicación está siendo ejecutada. Segundo elemento que no encontramos en la web: entorno típicamente multiusuario, donde el modelo para el usuario se regenera en cada request.

Si uno profundiza en las características del paradigma original se irá encontrando con más diferencias, que básicamente son fruto de estas dos básicas que he señalado.

Separa, separa, separa

Si el patrón original no puede ser aplicado realmente a los problemas típicos con los que nos enfrentamos en un entorno web, ¿qué es lo que podemos extraer de él? Sin duda alguna, su vocación por mantener separadas las partes de un sistema: es decir, pon tu código de datos en un lado, tu código de aplicación en otro, y tu código de presentación en otro. No suena a nada del otro mundo, dicho así; parece sentido común, y es al mismo tiempo una forma tradicional de desarrollo de software que encaja muy bien con trabajo en equipo y especializado.

Por lo tanto, no tiene sentido apelar a este patrón como una solución-para-todo, e incluso puede resultar contraproducente, puesto que se van a estar forzando las cosas (las palabras, los conceptos, etc.) y por lo tanto perdiendo perspectiva. Eso en el mejor de los casos; en el peor, se llegará a construir un problema ajustado al patrón y no a la inversa. :(

Cuando uno está montando un nuevo sitio en forma de directorio, suele partir de una base de contenidos a los que espera sumar otros procedentes de los usuarios. Esta acción por parte de los usuarios siempre es algo difícil de conseguir, porque en definitiva se trata de su tiempo y su esfuerzo. Y los procesos de registro/login no suelen ayudar a corregir ese esfuerzo, sino que con frecuencia lo agrandan.

Esto se hace particularmente grave en sitios que consideran que el índice de regreso de sus usuarios es muy bajo. En estos casos se suelen aceptar contenidos, al menos en una fase inicial, sin necesidad de registro. La contrapartida es que los contenidos quedan huérfanos y tienen menos credibilidad. El sitio en definitiva puede llegar a tener más contenidos, pero de menos calidad.

Yo suelo tener una opinión contraria a este tipo de planteamientos, porque: 1) nunca sabes completamente el tipo de usuario que vas a tener (tu índice de regreso no es algo infalible ni está distribuido de forma homogénea en el 100% de tus usuarios, por lo que puedes llegar a perder porcentajes pequeños pero significativos desde el punto de vista de su actividad); y 2) porque acabas aplazando al medio plazo la decisión inicial, y entonces te encuentras con la difícil de decisión de mezclar contenidos (unos huérfanos, los otros ya con autores), o de dejarlos para siempre tal como están. Creo que hay soluciones intermedias.

Una de las más populares es ofrecer el registro a través de terceros, es decir, de alguna herramienta que ya esté utilizando el usuario. La más popular es, sin duda, Facebook, pero podría ser Gmail, Twitter, Yahoo, o cualquier otro servicio en el que sepas que tus usuarios ya tienen una cuenta. De esa forma les evitas el tedioso proceso de crearse una cuenta (otra más) y al mismo tiempo no sacrificas la calidad de los contenidos desde el momento 0.

Si trabajas con Django, cuentas con Django-Socialauth, que ofrece login a través de los servicios mencionados y alguno más, menos frecuente eso sí, como OpenID. Además, permite importar contactos y ver cuáles están ya como usuarios del sitio.Y, por supuesto, junto a ésto siempre puedes ofrecer un registro clásico. No hay necesidad de sacrificar nada. :)

El 18 de marzo se publicó en YUI Theater la charla de Nate Koechley, primer ingeniero front de yahoo! Grosshat ha pensado que sería interesante traducir al español algunas partes con mucha sustancia de la transcripción de la charla, ya que resultan muy esclarecedoras sobre el desconocido papel que desempeña el desarrollador front en las empresas que se dedican a la web (frontend engineer en USA).

Nuestra traducción de la séptima parte de la charla

Ahora vamos a echarle un vistazo a la perspectiva histórica hablando sobre algunas de las creencias y principios. Me gustarÍa profundizar en algunas de las principales partes de la tecnología que tienen que tener en cuenta un ingeniero del interfaz.

Lo primero es el contenido de la capa: la capa HTML. Debe ser lo primero en el día a día de trabajo – queremos conseguir unas base sólida, antes de comenzar con otras partes tecnológicas. Antes de ponerte a escribir HTML tienes que definir en qué tipo de HTML vas a escribir mediante el doctype. ¿Qué es el doctype? El doctype es lo primero que aparece en un documento HTML. El elemento contiene una indicación sobre la definición del tipo de documento – lo cual sirve de indicación definitoria para el lector de la hoja, es decir, es una explicación de la tecnología que estás utilizando. En la práctica esto es importante porque da lugar a que los navegadores se comporten de modos diferentes. A principios de esta década, dado que los más modernos navegadores se estaban desarrollando, existía la preocupación de que si no se fijaban las singularidades de los viejos tiempos, los sitios que no se actualizasen podrían tener dificultades de renderización en los nuevos navegadores. Por lo que se quería ofrecer una forma de apoyar la idea de la compatibilidad con versiones anteriores, de sitios estrafalarios, a pesar de que los desarrolladores estaban empezando a crear más estándares basados en los sitios. Así que los vendedores de los navegadores eligieron el doctype como la forma de que los autores del documento – desarrolladores, fronted – optaran por alguno de los formatos existentes. En Yahoo!, utilizamos el HTML Estricto 4.01 DTD dentro de nuestro doctype, y esto, junto con varios otros doctypes, le dice al navegador el estándar que seguimos.

Una cosa más sobre el modo de los estándares vs al modo de las peculiaridades. Los navegadores realizan un gran trabajo como adivinos – somos capaces de lanzarles código propenso a errores pero los navegadores están diseñados para ser resistentes así que arreglan muchos de los fallos o hacen su mejor aproximación. Ellos hacen un buen trabajo de adivinación pero hacen un mejor trabajo si no tienen que adivinar en nuestro nombre. Así que como ingenieros fronted, nosostros debemos definir exactamente el lenguaje en el que escribimos – en este caso el HTML Estricto 4.01 – y eso nos asegurará obtener la mejor visualización posible.

La segunda cosa que me gustaría comentar sobre el marcado: ¿cuál es la presentación por defecto de los elementos HTML? ¿Cómo se pinta un elemento strong? ¿Y un H1? ¿Y una lista? Y son preguntas con trampa porque el marcado no tiene una presentación visual inherente – no hay nada en el HTML en sí mismo que diga que un elemento H1 tiene que ser grande y destacado y con mucho margen alrededor de él. Eso, en realidad, lo define la css dentro del navegador. Y así, darnos cuenta de que el marcado no tiene una visualización inherente nos libera para usarlo tal y como fue diseñado. El trabajo del marcado mejora el contenido de la página y se envuelve de aquellos elementos que le dan al contenido más significado. Podemos coger una cadena de texto y decir: esta es la cabecera. Podemos coger una serie de frases y decir: esto es una lista. Marcas lo que tienes y lo enriqueces con más significado.

Pero como ya he mencionado, los diferentes navegadores llaman al fichero interno CSS que nos proporciona la presentación de los elementos HTML, incluso de aquellos elementos que no forman parte del HTML en sí mismo. Esta es la razón por la que hemos creado, como parte de la librería YUI de Yahoo!, un fichero que se llama “CSS Reset”. Este fichero normaliza la presentación de los elementos HTML en diferentes navegadores. Si tienes un fichero CSS Reset, ya sea el de YUI o el que hayas desarrollado tú mismo, las páginas se van a ver iguales – hemos hecho que el navegador quiera usar nuestra preesentación inicial – reduciendo así el campo de juego. Así que en este caso ùedes cer que en la primera línea hay una cabecera h3 y, después, un h4, h5 y h6. Aquí obtenemos una lista y aquí otra. Y podríamos esperar que la lista se comportara con puntos o números – nosotros los hemos suprimido, así que sólo tratamos con HTML sin pensar en cómo podría verse en la página. Esto nos libera, realmente, y nos hace ocuparnos de qué elemento utilizar preocupándonos, únicamente, de su significado.

El 18 de marzo se publicó en YUI Theater la charla de Nate Koechley, primer ingeniero front de yahoo! Grosshat ha pensado que sería interesante traducir al español algunas partes con mucha sustancia de la transcripción de la charla, ya que resultan muy esclarecedoras sobre el desconocido papel que desempeña el desarrollador front en las empresas que se dedican a la web (frontend engineer en USA).

Nuestra traducción de la sexta parte de la charla

Así que estas son las tres técnicas básicas que nos ayudan a alcanzar o mantener nuestra mirada hacia las cuatro prioridades que se establecieron al principio. Hay un montón de opciones que deben tenerse en cuenta. Y queremos mostrar todas las opciones que apoyan nuestros principios – pero hay algunas otras cosas a tener en cuenta en función de la elección tecnológica del día a día de trabajo.

En primer lugar, siempre queremos hacer lo correcto. Y lo correcto significa seguir los estándares siempre que sea posible. Si existe un estándar, nuestro trabajo es seguirlo – si funciona, en nuestro caso. En algunos casos, todavía no existe un estándar o está surgiendo, y en esos casos está bien seguir las convenciones. Por lo tanto, si no podemos seguir el estándar – si no hay estándar definido – entonces, echaremos un vistazo a los estándares que están surgiendo o al convenio común que sigue la industria y tratar de hacerlo. Y sólo cuando esas cosas fallan – sólo cuando no podemos seguir un estándar y no puedes apoyarte en un estándar nuevo – entonces, vuelves a la mesa de dibujo y diseñas una técnica nueva para ese caso en particular. Como ingenieros, y diseñadores, existe siempre la tentación de reinventar algo nuevo y más ingenioso – pero para la salud de la Internet, y para la estabilidad de tu proyecto, es aconsejable seguir los estándares y los que van surgiendo siempre que sea posible. Si lo estás haciendo de cualquier forma – si vas por el camino menos visitado – entonces recuerda el principio de apertura y documenta lo que estás haciendo, y exponlo a discusión como posible estándar futuro.

Además de querer hacer lo correcto, siempre queremos ser considerados. Queremos ser considerado con nuestros compañeros desarrolladores, y con nuestros usuarios. Esto significa hacer la cosa lo más simple posible – no recibes puntos de bonificación por encontrar la forma más compleja que hacer algo. Hay por lo general la belleza en la simplicidad. La segunda forma de ser considerado es el ser flexibles. Tenemos diferentes propiedades en Yahoo!, así que cuando somos flexibles en el trabajo que hacemos, beneficia a otras personas de la empresa y del sector. Así que no se trata sólo de pensar en la valoración de los widgets para un sitio web de fotografía, también se trata de imaginar cómo se puede utilizar en un sitio web de cine, o en un blog, o en cualquier otro sitio. Así las cosas que flexibilizamos a través del contexto también se flexibilizan a través de la tecnología – las cosas que vas a trabajar para tu página se abren para todo el mundo. Y, al final, será considerado por estar abierto. Coger lo que hemos aprendido, documentarlo, y subir la API y los procesos que, por definición, están abiertos.

Lo último a tener en cuenta es el cómo tomar decisiones, es mantener el sentido de la empatía. Trabajamos al servicio de nuestros usuarios, y es nuestro trabajo ofrecer una experiencia de usuario fantástica – pero no es nuestro único objetivo. También tenemos que recordar que nuestro trabajo influye en los desarrolladores del sector y de nuestra empresa, y también lo hacen las máquinas que posibilitan estos sitios web. Determinados patrones de JavaScript son más comprensibles que otros, y así si es el mismo para el usuario y para el equipo de desarrolladores, debes elegir el que va a estar más optimizado para las máquinas. Pero recuerda siempre – a pesar de que hemos descrito los tres tipos de público, los usuarios son nuestra principal preocupación. Está bien entre nosotros sufrir un poco si es para dar al usuario una mejor experiencia, que es para lo que estamos aquí.

Hace unos días nos pusimos en contacto con Yusef Hassan que es co-fundador y director editorial No Solo Usabilidad, revista de Diseño Web centrado en el usuario. La idea era comentar un de mis trabajos de investigación para ver si le parecía interesante recogerlo en la revista.

El trabajo plantea la posibilidad de que la Usabilidad de las Nuevas Tecnologías de la Información y de la Comunicación (TIC) sea una variable interviniente en la Satisfacción del Usuario que trabaja con este tipo de herramientas.

El caso es que el equipo de la revista dio el visto bueno al resumen del trabajo y se publicó el 4 de junio de 2009. Puedes leer el artículo en No Solo Usabilidad.

Mi más sincero agradecimiento a todo el equipo de No Solo Usabilidad tanto por el interés mostrado por el trabajo en particular como por el que la Psicología Social y de las Organizaciones pueda abordar también estos temas.

El 18 de marzo se publicó en YUI Theater la charla de Nate Koechley, primer ingeniero front de yahoo! Grosshat ha pensado que sería interesante traducir al español algunas partes con mucha sustancia de la transcripción de la charla, ya que resultan muy esclarecedoras sobre el desconocido papel que desempeña el desarrollador front en las empresas que se dedican a la web (frontend engineer en USA).

Nuestra traducción de la quinta parte de la charla

Vamos a tratar un poco más de este tema ahora – algunos de sus aspectos más destacados. Fundamentalmente, queremos mantener las cosas separadas. No queremos que el código JavaScript estorbe a lo demás, no queremos que sea molesto, así que no ponemos JavaScript en el archivo HTML – lo llamamos más tarde como un recurso externo. Como estamos construyendo nuestra interfaz, no podemos depender de JavaScript – puede que no sea importante, pero tienes que trabajar como si sí lo fuera. Además, no podemos confiar en JavaScript – aunque trabajar del lado del cliente presenta agradables ventajas para la usabilidad, a nivel de servidor, no podemos confiar en que la validación sea correcta. Podemos hacer comprobaciones rápidas del lado del cliente para mantener al usuario feliz, pero siempre debemos recordar que hay que validar esas cosas de nuevo del lado del servidor, donde tenemos más control y confianza. A medida que escribimos JavaScript, e interactuamos con diversos objetos en la página, es una buena práctica testear para asegurarse de que esos objetos existen antes de hacer algo con ellos. Quieres escribir JavaScript de forma segura, que no falle. En cuarto lugar, debido a las características del JavaScript, tenemos que estar seguros de pensar en nuestras costumbres. Esto significa no llevar el espacio de nombres con variables globales y cosas por el estilo, preocupándose por su ámbito, sus funciones y sus objetos. Y luego, finalmente, apoyar actividades paralelas. No todos los usuarios interactuan con el ratón, y no todos los usuarios interactúan con un teclado, por lo que es importante proporcionar puntos de interacción en paralelo. Si algo ocurre cuando pasas el ratón por encima de algo, quizás también debería ocurrir a través de otra opción alternativa.

Uno de mis motivos personales de queja estos días, un ejemplo de JavaScript obstrusiva, es cuando se quita un HREF para sustituirla por una interacción sólo JavaScript. Así que es una de las primeras cosas que busco cuando reviso código estos días. La web está construida mediante enlaces; Los HREF son la base de la web, lo que mantiene la relación entre los sitios. Cada vez que nos saltamos este punto en lugar de poner algo con sentido allí – ya sea un protocolo de JavaScript o un marcador de posición – hemos roto la interacción para algunas personas. Una vez más, no podemos depender de JavaScript – queremos ser capaces de navegar, y enlazar, sin necesidad de código JavaScript en la página. Por lo tanto, no queremos tener protocolos de JavaScript, no queremos tener que hacer clic en el JavaScript. Hablaremos de esto en un poco más en detalle en unos minutos.

La tercera técnica – y de nuevo, la mejora progresiva, JavaScript no obstructivo, el apoyo gradual al navegador – son todas piezas del mismo rompecabezas, son el soporte para la consecución de los mismo objetivos. Antes de la noción del apoyo gradual al navegador, considerábamos el apoyo al navegador de forma binaria. Cuando trabajaba de gestor, antes de incorporarse a Yahoo!, me pregunta a menudo, al comienzo de un proyecto: “¿Qué navegadores tenemos que soportar en este proyecto? ¿Vamos a soportar Explorer 5 en Mac?” Y siempre se preguntaba en un sentido binario, donde la respuesta era sí o no. Con el tiempo nos dimos cuenta de que eso es contrario a nuestro objetivo de máxima disponibilidad – cada vez que elegimos no soportar a un determinado navegador, significa que estamos eligiendo tener menos disponibilidad. Así que esto fue la primero que hemos tenido que entender, que el soporte no es binario. La segunda cosa que hemos tenido que comprender es que el soporte no significa identidad. Obligar a que cada píxel se comporte de la misma forma para cada usuario en el mundo no significa que soporte al usuario. En cambio, soportar un navegador, queremos establecer lo que el navegador puede manejar de la manera más eficiente posible.

Y, por lo tanto, con estas dos cosas en mente, hemos llegado al concepto de soporte gradual al navegador, en lugar de soporte binario. Y hemos definido tres formas de soporte. En el nivel más bajo, una base estable, nuestra red de seguridad, es la experiencia de grado C. Metemos en una lista negra a los navegadores de grado C y son identificados como navegadores incapaces de manejar la tecnología moderna. Si no puede manejar CSS, si no puede manejar Javascript, ni cosas de la misma naturaleza, entonces le ponemos en una lista negra para que se sepa que se trata de un navegador que no puede manejar dichas tecnologías. Cuando un navegador de la lista negra llega a Yahoo!, el código JavaScript se oculta, se oculta el código CSS, y sólo le damos HTML significativa. Así que no tienen la experiencia de diseño visual que se pretende, ni el comportamiento de DHTML, pero tienen acceso a los todos los contenidos – pueden hacer búsquedas web, puede leer las noticias, pueden enviar un mensaje de correo electrónico. Y eso es soportar el navegador.

En un extremo tenemos una lista negra con el grado C de soporte al navegador. En el otro extremo tenemos una lista blanca de grado A de soporte al navegador. Estos son los navegadores que son capaces de comprometerse con un control de calidad riguroso. Estos navegadores pueden interpretar todo el código CSS y JavaScript que se añade al HTML y, básicamente, ofrecen una experiencia perfecta al píxel, tanto en el diseño como en el desarrollo.

Y así – además de tener nuestra lista negra por un lado, y nuestra lista blanca por otro – en el centro están los navegadores de grado X, una especie diferente a los demás. No son capaces, y podrían estar en la lista de grado C, pero no están bien probados así que terminan en la lista de grado X. Y algunas personas se sorprenderán al saber que hay miles y miles y miles de navegadores en esta lista. La mayoría de las personas pueden nombrar Firefox, Internet Explorer, Safari, Opera y – quizás también Camino, Flock, SeaMonkey, Galeon y alguno más. Pero esas son sólo las marcas más comunes – tal vez los 30 más comunes. Pero, en realidad, en un mes determinado en Yahoo! vemos por el barrio más de 10.000 usuario diferentes que solicitan nuestras páginas. Y el grado X es el de alcance general para eso. Si, con el tiempo, nos damos cuenta de que alguno de estos navegadores raros es incapaz de manejar tecnología moderna le damos la experiencia de grado C, pero si no, asumimos que puede manejarlo, somos optimistas para el diseño. Le damos toda la experiencia y esperamos que sirva bien. Y así por haber clasificado de esta manera, en un proceso de soporte continuo, somos capaces de invitar a todos a experimentar nuestro sitio web, manteniendo el 100% de disponibilidad.

Yahoo! publica, periodicamente, una tabla con el soporte gradual a los navegadores de grado A. Esta es la tabla actual: Firefox 2 y 3, IE 6, 7 y 8, Opera y Safari, a través de sistemas operativos comunes. Es importante recordar que el hecho de que un navegador con un determinado sistema operativo no aparezca en la lista, no significa que no esté soportado. Sólo significa que no estamos dedicando toneladas de recursos al control de calidad de dicho informe. Navegadores como Flock comparten Gecko de Firefox como motor y renderiza los sitios de forma idéntica. Así que permite tener una gran experiencia; no sólo son tratados como un navegador con soporte de grado A.

Puedes comprender el concepto pero ¿qué significa en la práctica? Aquí tenemos una captura de la pantalla de Yahoo! Search en la experiencia de grado C, donde todos los JavaScript y CSS están desactivados. Puedes ver que estamos usando marcado significativo – tenemos una lista ordenada de enlaces, estamos usando las cabeceras, mantenemos el mismo cuadro de búsqueda en la parte superior de la página, pero de hecho sólo vemos un diseño lineal, no hay CSS para el control de la disposición. Así que no tienes la segunda columna, no hay DHTML alrededor de la caja y, si haces clic en “imágenes” en lugar de “búsqueda en la Web” lo que realmente va a hacer el servidor es un viaje de ida y vuelta devolviendo una nueva búsqueda vertical. Como contraste, aquí tenemos una experiencia de grado A. Puedes ver que el diseño de multi-columna aparece, la iconografía y un mejor control tipográfico – además, no puedes verlo en esta captura de pantalla estática, pero ahora el cuadro de búsqueda se basa en DHTML y cambia el contexto de la búsqueda cuando haces clic en las pestañas. Así, la experiencia de grado C está ahí y es funcional para todo el mundo – aunque la mayoría de la gente obtiene la experiencia de grado A con todas sus campanas y silbatos.

Aquí tenemos otro ejemplo del sitio para fotos de Yahoo! Aquí, estamos tratando de puntuar un determinado tipo de foto. Y si lo piensas, conceptualmente, estamos en una puntuación interactiva – tengo una lista ordenada de opciones de puntuación, y cuando hago clic en una de ellas se envía mi voto al servidor, y mi puntuación se registra y, a continuación, se muestra en la página. Sin JavaScript y CSS, sólo se muestran los enlaces que permiten respuesta del servidor. Cuando nos fijamos en un grado de experiencia A – vemos CSS para suprimir los enlaces de texto, y en su lugar se remplazó por un widget muy familiar de estrellas, que utiliza Ajax, JavaScript entre bastidores, para registrar la votación sin actualizar la página. Así que incluso para interfaces muy sofisticados es posible este enfoque gradual cuando se están siguiendo este tipo de técnicas de mejora progresiva.