Capítulo 6: Los pasos

“Diseña siempre una cosa considerándola en su contexto más próximo”, dijo el arquitecto Eliel Saarinen. “Una silla en una habitación, una habitación en una casa, una casa en un ambiente, un ambiente en una ciudad”.

Los pasos

A primera vista, el diseño web parece ser un tipo de diseño gráfico. El utilizar herramientas de diseño gráfico como Photoshop para diseñar sitios web refuerza esta idea. Pero para tomar el corazón del propósito de un sitio web, debemos considerar el interface en su contexto: ¿qué esta intentando realizar la gente?

Al diseñar para la web, es tentador pensar en términos de interacciones como deslizar, tocar, hacer clic, desplazarse, arrastrar y soltar. Pero muy poca gente se levanta por la mañana pensando en desplazarse y clicar. Ellos están pensando más en términos de leer, escribir, compartir, comprar y vender. Los diseñadores web necesitan ver más allá de las acciones a nivel de superficie para encontrar los verbos más significativos debajo.

En su libro Designing With Progressive Enhancement, el Filament Group describe una técnica que denominan “la perspectiva de rayos X”:

Tomar una perspectiva de rayos X significa buscar “a través” de los complejos widgets y estilos visuales de un diseño, identificando el contenido principal y las piezas funcionales que componen la página, y encontrar un equivalente HTML simple, para cada uno, que funcione universalmente.

Si no estás acostumbrado a este enfoque del diseño web, te puede tomar algún tiempo acostumbrarte. Pero después de un tiempo se convierte en un hábito y luego es difícil no examinar las interfaces de esta manera. Es como intentar no observar un mal kerning (interletraje, espacio que se añade entre las letras), o intentar no ver la flecha en el espacio en blanco del logo de FedEx, o intentar no recordar que todos los patos actualmente llevan máscara de perro 88.

Este es el enfoque en tres pasos que hago en el diseño web:

  1. Identificar la funcionalidad del núcleo.
  2. Hacer esta funcionalidad accesible utilizando la tecnología más simple posible.
  3. Mejorar!

Identificar la funcionalidad del núcleo puede sonar como muy claro, y después de un poco de práctica, lo es. Pero puede ser difícil al principio separar lo que es realmente necesario de lo que es bueno tener.

 

Información

Digamos que eres un proveedor de noticias. Esa es la correcta funcionalidad básica – proveer noticias. Hay otros, otros muchos servicios que también puedes proveer; puzzles interactivos, notificaciones en tiempo real, y más. Valorables como son esos servicios, probablemente no son tan importantes como asegurar que la gente tiene acceso a las noticias.

Con esa funcionalidad básica identificada, es el momento de pasar al paso dos: ¿Cómo puedes hacer accesible esa funcionalidad básica utilizando la tecnología más simple posible?

Teóricamente, un fichero de texto plano (sin estilos) sería la forma más simple posible de proveer las noticias. Pero así como estamos hablando específicamente acerca de la web, vamos a advertir este paso: ¿cómo podemos hacer accesible la funcionalidad básica utilizando la tecnología web más simple posible? Sería con un fichero HTML servido desde una URL.

Incluso desde este punto inicial es posible complicar las cosas. El código HTML puede ser hinchado innecesariamente. La URL puede ser innecesariamente complicada; difícil de compartir o rellamar.

Ahora que las noticias han sido marcadas con los elementos HTML apropiados – articles, headings, paragraphs, lists, e images – es el momento para el paso tres: mejorar!.

Por defecto, las noticias se presentarán utilizando la propia hoja de estilos del navegador. Es legible, pero no exactamente agradable. Al aplicar tu propio CSS, puedes moldear el contenido de una forma más agradable. Tienes a tu disposición espacios en blanco, destacados, colores y contrastes. Además puedes utilizar fuentes web personales – una mejora imposible en la web hace varios años.

No hay garantía de que cada navegador sea capaz de ejecutar cada declaración CSS que tú indiques. Es lo correcto. Esos navegadores ignorarán lo que no entiendan. Crucialmente, las noticias siguen disponibles para todo el mundo, al margen de las posibilidades CSS de su navegador.

Para navegadores en dispositivos de pantalla grande, puedes indicar un diseño. Puede parecer extraño al principio pensar en el diseño como una mejora, pero esa es la lección del diseño adaptativo del mobile-first 52. Primero consideramos el contenido, luego lo marcamos adecuadamente, y entonces aplicamos declaraciones de diseño dentro de las media queries.

Gracias a la naturaleza envolvente de CSS, hay múltiples formas de aplicar el diseño. Como dijo Andy Tannenbaum 89:

Lo bueno de los estándares es que tienes tantos para elegir.

 

Comunicación

Aplicar el proceso de tres pasos a un sitio de noticias es relativamente sencillo. Ponerse al día con las noticias es un acto bastante pasivo. Para comprobar realmente este proceso, necesitamos aplicarlo a algo más interactivo.

Supongamos que estamos creando una red social. La gente que la utiliza necesita ser capaz de comunicarse con otros, al margen de en qué lugar del mundo se encuentren. La funcionalidad básica es enviar y recibir mensajes.

Mostrar mensajes en un navegador web no es difícil. Hay mucha complejidad en las bases de datos de los servidores, sincronización, consultas, y balanceos de carga, pero el HTML necesario para estructurar un lista cronológicamente inversa no es muy diferente al HTML preciso para un sitio de noticias.

Enviar un mensaje desde el navegador al servidor web requiere un HTML interactivo. Aquí es dónde aparecen los formularios. En este caso, un formulario con un campo de texto y un botón de envío será suficiente, como mínimo para la funcionalidad básica.

La gente puede ahora recibir y responder a los mensajes en nuestra red social, sin importar qué tipo de dispositivo o navegador estén utilizando. Ahora, el truco es mejorar la experiencia sin afectar la actividad fundamental.

Si nosotros dejamos el sitio únicamente en este estado HTML, no creo que celebremos un auge de nuestra empresa más adelante. Para distinguir realmente nuestro servicio del de la competencia, necesitamos el tercer paso del proceso: mejorar!

Por lo menos, podemos aplicar la misma lógica que con el sitio de noticias y aplicarle un estilo. Utilizando CSS podemos proveer color, textura, contraste, fuentes, y, para pantallas grandes, diseño. Pero no nos paremos con la presentación. Añadamos también la interacción.

Justo ahora esta red social tiene el mismo tipo de interacción basada en página que un sitio de noticias. Cada vez que alguien envía un mensaje al servidor, el servidor devuelve una nueva página entera al navegador. Esto lo podemos mejorar. Es el momento de AJAX 72.

Podemos interceptar el envío del formulario y enviar los datos al servidor mediante AJAX – a mí me gusta la palabra Hijax 90 para describir este tipo de interceptación de AJAX. Si hay una respuesta del servidor, también podemos actualizar parte de la página actual en lugar de actualizar toda la página entera. Este sería también un buen momento para introducir alguna animación adecuada.

Podemos ir más lejos. Los navegadores que soportan WebSockets 91 pueden recibir mensajes del servidor. Las personas que utilizan estos navegadores pueden tener actualizaciones tan pronto como han sido enviadas. También es posible utilizar conexiones punto-a-punto entre navegadores para permitir a la gente comunicarse directamente.

No todos los navegadores soportan esta funcionalidad avanzada. Esto es correcto. La funcionalidad básica – enviar y recibir mensajes – está disponible para todo el mundo.

 

Creación

¿Qué tal si nuestra red social fuera más especializada? Hagámosla un servicio para compartir fotografías. Esto aumenta el nivel un poco. En lugar de enviar y recibir mensajes, la funcionalidad básica ahora es enviar y recibir imágenes.

La interface necesita mostrar una lista de imágenes cronológicamente inversa. Otra vez necesitamos un formulario para enviar datos al servidor, pero esta vez necesita ser un fichero subido en lugar de un campo de texto.

Con estos cambios, la funcionalidad básica está localizada. Es momento de mejorar.

Tan bien como todas las mejoras existentes – CSS, fuentes web, AJAX, WebSockets – podemos hacer uso de la API File introducida en HTML 5. Esta permite manipular la imagen directamente en el navegador. Podemos aplicar efectos a la imagen antes de enviarla al servidor. Utilizando filtros CSS, podemos ofrecer un rango de mejoras de imagen desde tonos sepia hasta viñetas. Pero si un navegador no soporta la API Files 92 o los filtros CSS 93, la gente aún puede subir sus imágenes.

 

Colaboración

Hubo un tiempo en el que utilizar software significaba instalar diferentes programas en el ordenador. Hoy es posible tener una máquina sin nada más que un navegador instalado. Escribir correos electrónicos, mirar detalles de contactos, hacer apuntes en el calendario, tener libros y otras tareas financieras se pueden hacer sin tener que instalar aplicaciones hechas a medida. En su lugar, el acto de visitar una URL puede proporcionarte la herramienta que tú necesitas cuando tú la necesitas.

Ejecutar software en la web no reemplaza la manera de trabajar centrada en el ordenador de sobremesa. La presencia de una conexión de internet abre posibilidades a todos los tipos de colaboración. Toma, por ejemplo, los tipos de aplicaciones denominados “procesadores de texto”. Mientras esos programas estaban atados a máquinas individuales, intentar colaborar en la edición de un documento era una ardua tarea que requería una plena coordinación, enviando ficheros atrás y adelante. Al utilizar la web, el hecho de compartir una sola URL puede permitir a mucha gente trabajar en el mismo documento.

Apliquemos el proceso de tres pasos a un procesador de textos de la web:

Identificar la funcionalidad básica.

La respuesta tautológica sería “procesar textos”. No muy útil. ¿Qué hace la gente actualmente con este software?. Escriben. Comparten. Editan.

Haz posible esta funcionalidad utilizando la tecnología más simple posible.

Mirando a nuestros tres verbos – escribir, compartir y editar – tenemos uno de éllos automáticamente, al utilizar URLs: compartir. Los otros dos – escribir y editar- requieren el uso de un formulario. Un elemento básico TEXTAREA puede actuar como el receptáculo para las palabras, sentencias y párrafos que conformarán todo, desde informes técnicos hasta la gran novela norteamericana. Enviando dicho contenido a un servidor web significa que se guardará para más tarde.

Técnicamente, esto es un procesador de textos basado en la web, accesible a todo el mundo con un navegador web y una conexión a internet. Pero la experiencia es torpe y aburrida. Sería un error no aprovechar las ventajas de algunas opciones disponibles en los navegadores modernos.

Mejorar!

Utilizando JavaScript, el humilde TEXTAREA puede ser substituido por una interface de edición enriquecida, que detecte cada pulsación de tecla y aplique los estilos al vuelo. Las fuentes web pueden hacer la experiencia de escribir muy gratificante. AJAX permitirá guardar el trabajo en el servidor más constantemente, sin la necesidad de un envío de formulario. Los WebSockets proporcionarán el significado para muchas personas de trabajar en el mismo documento a la vez.

Ambos AJAX y WebSockets requieren de una conexión a internet para trabajar. No hay garantía de una conexión a internet estable, especialmente si estás intentando trabajar en un tren o en un hotel. Los navegadores modernos proveen características con las cuales, una vez se carga la página inicial, puede convertir la propia red en una mejora.

Si un navegador soporta alguna forma de almacenamiento local, entonces los datos se pueden guardar en una base de datos del lado cliente. Conexiones de red flojas o inesperadas interrupciones de energía no obstaculizarán el guardado de ese documento importante. Al utilizar servicios de la red, los desarrolladores web pueden proporcionar instrucciones de qué hacer cuando el navegador (o el servidor) está fuera de línea.

Estas son características de los navegadores modernos de las cuales debemos tomar ventaja… una vez nos hemos asegurado que estamos proporcionando una experiencia básica a todo el mundo.

 

Escalar

Ward Cunningham 94, el creador de la wiki, acuñó el término “deuda tecnológica” para describir un problema común en el mundo del software. Las decisiones tomadas deprisa en el inicio de un proyecto conllevan a una cascada de errores hacia abajo. Quiero pensar en el enfoque por capas de tres pasos como una manera de “crédito tecnológico”. Tomar el tiempo para proveer la funcionalidad básica al principio te da la libertad de ir salvaje con experimentación entonces.

Algunas personas han entendido mal la mejora progresiva para significar la precedente de las últimas y mejores tecnologías de navegación, pero de hecho lo contrario es cierto. Tomar un enfoque por capas para construir en la web te permite innovar con las APIs JavaScript, independientemente de cuantos navegadores actualmente las implementan.

Hemos visto algunos ejemplos de aplicación del enfoque de los tres pasos para unos pocos productos y servicios – noticias, redes sociales, compartir fotos y proceso de textos. Puedes aplicar este enfoque a varios servicios más: crear y actualizar items en una lista de tareas, gestionar apuntes de calendario, búsqueda de direcciones, reservas y restaurantes próximos. Cada uno se puede hacer con el mismo proceso:

  1. Identificar la funcionalidad básica.
  2. Hacer disponible dicha funcionalidad con la tecnología más simple posible.
  3. Mejorar!

Este enfoque trabaja a diferentes escalas. No sólo trabaja en el nivel más alto del servicio; también se puede aplicar en el nivel de dentro de URLs individuales.

Pregunta “¿cuál es la funcionalidad básica de esta URL?”, haz esta funcionalidad disponible utilizando la tecnología más simple posible; y entonces mejórala desde ahí. Esto realmente puede clarificar qué contenido es más importante, algo que es importante en el flujo de trabajo adaptativo mobile-first. Una vez has establecido eso, asegúrate que el contenido se envía desde el servidor como HTML (la tecnología más simple posible). Entonces, utilizando cargas condicionales, podrás decidir realizar requerimientos AJAX para adecuar el contenido si el estado real de la pantalla está disponible. Para la URL de una historia individual de noticias, la historia misma puede ser enviada en la respuesta inicial, pero las historias relacionadas o los comentarios pueden enviarse desde el servidor sólo si son precisos.

Podemos ir más adentro. Podemos aplicar el proceso de tres pasos en la escala de componentes individuales dentro de una página. “¿Cuál es la funcionalidad básica de este componente?¿Cómo puedo hacer esta funcionalidad disponible utilizando la tecnología más simple posible?¿Luego, como puedo mejorarla?”.

Un componente podría haberse diseñado para ser un mapa interactivo. Con gafas de protección a los rayos X, la funcionalidad básica se revela a si misma ser mucho más simple: mostrar una ubicación. Proveer la dirección de dicha ubicación en texto: la tecnología más simple posible. Ahora puedes mejorarla.

Es erróneo recordar que las mejoras se pueden proveer en una escala fluida. La primera mejora para una dirección de texto podría ser una imagen estática. El siguiente nivel superior podría ser intercambiar la imagen estática con un mapa interactivo proporcionado con Ajax. Si un navegador soporta la API de geolocalización, puedes mostrar la distancia hasta la ubicación. Capas con animaciones y transiciones para ayudar a transmitir mejor las direcciones.

La barra de navegación en el sitio es otro componente discreto que se presta bien a una escala de mejoras. La funcionalidad principal de la barra de navegacióon es proporcionar vínculos a recursos. La más simple – y todavía la mejor – tecnología para habilitar esto es el humilde hiperenlace. Una lista de enlaces haría el truco. Con ello, ahora eres libre para mejorarlo en algo realmente irresistible. Navegación off-canvas, apariciones progresivas, deslizamiento,  desvanecimiento, expansión… el cielo es el límite.

Porque las mejoras se pueden disponer en capas según las capacidades de cada navegador, rápidamente queda claro que este enfoque no reduce simplemente a tener dos versiones de todo (la básica y la mejorada). En su lugar, el servicio, las URLs, y los componentes que estás diseñando se pueden experimentar de varias maneras. Y esto es perfecto.

Los sitios web no necesitan verse exactamente de la misma manera en cada navegador.

 

REFERENCIAS


Notas de traducción

(52) Mobile First. Este concepto lo vimos en el capítulo 3.

(72) AJAX. Este concepto lo vimos en el capítulo 4.

(88) Ducks wearing dog masks. Patos llevando máscaras de perro. Una imagen vale más que mil palabras:

(89) Andy Tanenbaum. Profesor de ciencias de la computación.

(90) Hijax. Aplicación de una mejora progresiva a nuestro sitio web usando la tecnología AJAX.

(91) WebSocket. Tecnología avanzada que hace posible abrir una sesión de comunicación interactiva entre el navegador del usuario y un servidor.

(92) File API. API para representar objetos de archivo en aplicaciones web, así como su selección mediante programación y el acceso a sus datos.

(93) Filtros CSS.

(94). Howard Cunningham. Más conocido como Ward Cunningham.

Derechos

Este libro ( Resilient Web Design ) ha sido escrito y producido por Jeremy Keith. Bajo licencia Creative Commons Attribution-ShareAlike 4.0 International License. Yo me he limitado a traducirlo, y, en todo caso, añadirle unas notas de traducción para enriquecerlo ( aunque no fuera necesario enriquecerlo ). Esta traducción, a su vez, también está bajo la licencia Creative Commons Attribution-ShareAlike 4.0 International License.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *