Reseña del libro "Designing with progressive enhancement"

Portada del libro 'Designing with progressive enhancement. Building the web that works for everyone.' de Todd Parker

Autores: Todd Parker, Patty Toland, Scott Jehl, Maggie Costello Wachs

Nº páginas: 428

Idioma: inglés

Formato: digital e impreso

Fecha de publicación: 2010

Podéis consultar más reseñas de libros en: "Libros y reseñas"

Recomiendo este libro a cualquier desarrollador front-end, de hecho les animaría a todos a que lo leyeran. El libro tiene 10 años, pero sigue plenamente vigente.

Es una guía práctica que enseña a implementar páginas con una gran interactividad, de manera que el mismo código funciona correctamente en cualquier navegador antiguo o moderno, sea cual sea la configuración del usuario, e independientemente de su contexto de acceso o los productos de apoyo que utilice.

Para lograrlo, el libro enseña a desarrollar mediante el enfoque de "progressive enhancemente" (mejora progresiva) que supone dejar atrás malos hábitos y adoptar una perspectiva diferente de diseño y desarrollo.

Hay muchos contextos de acceso en los que nos vamos a beneficiar de una implementación que siga un enfoque de mejora progresiva:

acceso con un dispositivo o un navegador antiguo, a veces impuesto por la empresa;
acceso con dispositivos o navegadores actuales pero con capacidades limitadas, como el navegador de Kindle;
situacionales, por ejemplo, si desactivamos ciertas capacidades por:
- seguridad: plugins, JS...
- por conectividad: imágenes, vídeos...;
si hay un problema en la conexión o en el servidor que provoque que se cargue la página sin ficheros CSS, JS, etc.
personas con menor experiencia tecnológica, por ejemplo, si se requiere la instalación o actualización manual de plugins (Flash, Silverlight, Sun Java...), que además pueden no ser compatibles con todas las plataformas o navegadores;
las personas que acceden con productos de apoyo también se van a beneficiar de que las páginas se implementen con el enfoque que voy a resumir.

La metodología es sencilla y la explican con mucho detalle. Uno de los puntos fuertes del libro es que incluye numerosos ejemplos de maquetación y programación, paso a paso, de diferentes widgets.

Partimos de un código HTML correcto y semántico, formado por elementos estáticos estándar y controles de formulario, al que aplicamos una CSS de estilos básicos que trabajan correctamente en todos los navegadores. Esto nos proporciona una página completamente funcional, usable y accesible desde el principio, que funciona en cualquier dispositivo, navegador o contexto de acceso.

Una vez que tenemos la experiencia básica, la página llama al framework EnhancedJS, un JS gratuito que testea las capacidades del navegador. Si pasa todos los test, se cargan los ficheros CSS y JS que añaden una capa de diseño e interacción que mejoran la experiencia para los navegadores que la soportan, haciéndola más rica e interactiva.

Esta capa de mejora se implementa de manera que sea accesible por teclado y accesible con un lector de pantalla. Además, EnhancedJS incluye un enlace en la página para que el usuario pueda intercambiar de forma manual entre la versión básica y la versión avanzada.

Hay una serie de aspectos claves que subyacen a este enfoque, entre los que destacaría:

la separación entre el contenido, la presentación y el comportamiento;
el uso de JavaScript no intrusivo;
la maquetación HTML semántica;
el uso de WAI-ARIA.

No hay que confundir la "mejora progresiva" con la "degradación elegante" (graceful degradation).

Un ejemplo de degradación elegante sería el uso de la etiqueta <noscript>. En este enfoque se implementa la solución teniendo en cuenta a los usuarios con los dispositivos y navegadores más modernos, y luego se da una solución alternativa a los usuarios con navegadores más antiguos.

Por el contrario, en la mejora progresiva, siempre más recomendable, no sería necesario el uso de una etiqueta <noscript>, porque tendremos una página que trabaja sin JS y sin CSS, que es soportada por todos los navegadores y dispositivos, pero que ofrece una experiencia avanzada y accesible para los dispositivos y navegadores que la soportan.

Árbol desplegable con iconos de carpetas. La versión sencilla es una lista anidada desplegada.

Mejora progresiva. Ejemplo de un árbol desplegable en la versión mejorada y en la versión básica.

El libro de divide en dos partes:

En la primera parte repasa la metodología, esta manera diferente de pensar la planificación de los diseños. Tiene capítulos específicos sobre las buenas prácticas para implementar HTML semántico; aplicar CSS de forma adecuada; añadir JavaScript no intrusivo; y usar el framework EnhancedJS, que testea la capacidad del navegador antes de aplicar la capa avanzada de mejoras.
En la segunda parte hay doce capítulos, cada uno tiene el ejemplo de la implementación de un widget diferente mediante mejora progresiva.

Primera parte. Mejora Progresiva

Capítulo 1. Nuestro enfoque

En este capítulo explican el enfoque de mejora progresiva, tal y como lo he resumido previamente.

Como he indicado, se tienen dos experiencias, pero una única página y un único código. Hay una experiencia básica que funciona universalmente en todos los dispositivos, y una mejorada que se entrega a los navegadores con más funciones.

Las claves son:

Todos los componentes están basados en HTML semántico y bien estructurado, de tal manera que la funcionalidad para una experiencia básica está disponible sin CSS y sin JS. Sobre esta experiencia básica se construye lo demás.
Habrá una estricta separación entre contenido, presentación y comportamiento.
Se testea las capacidades CSS y JS del navegador antes de aplicar las mejoras o mantener la experiencia básica.
En los navegadores que admiten la experiencia mejorada, se añadirá la capa no intrusiva de estilos y comportamiento, que será accesible por teclado y por los lectores de pantalla.

Introducen el concepto "the x-ray perpective" que desarrollan en el siguiente capítulo y que hace referencia a cómo analizar el diseño de una interfaz compleja, por ejemplo, una aplicación web para organizar fotos.

La "perspectiva de rayos X" toma el diseño de una interfaz web compleja y lo descompone en sus diferentes partes, para encontrar el elemento HTML nativo adecuado para la experiencia básica. Por ejemplo, en un árbol desplegable, sería una lista UL anidada.

Consiste por tanto en pensar de forma creativa cómo deconstruir esos widget e interacciones en elementos HTML nativos estándar que puedan hacer la misma tarea. Mapear el HTML semántico que soportará la experiencia con la funcionalidad básica, y planear cómo se desarrollará la capa avanzada, con CSS y JS, para crear la experiencia mejorada, accesible además en el acceso por teclado y con el lector de pantalla.

Capítulo 2. X-ray perspective

Este capítulo incluye diversos ejemplos de la "perspectiva de rayos X", es decir, de la descomposición de una interfaz con una interacción y un diseño complejo, en componentes básicos y estándares de HTML a partir de los cuales poder construir la experiencia mejorada.

Partimos de la base de que hasta el diseño dinámico más complejo se puede descomponer en contenidos y funcionalidades esenciales expresados en elementos de HTML simples y semánticos, que proporcionarán una experiencia usable y accesible para todos los visitantes. Es un ejercicio muy divertido y creativo que todos deberían probar.

Si queremos tener, por ejemplo, una aplicación web para organizar fotos, pensamos en su versión más avanzada y seguimos un proceso que explican a lo largo del capítulo:

Definimos la jerarquía y la prioridad del contenido.
Mapeamos los componentes en sus equivalentes en HTML básico y semántico.
Construimos el marcado base que proporciona todo el contenido y toda la funcionalidad esencial, con una CSS básica y sin JS.
Escribimos la capa de mejora visual y funcional con CSS y JS en los navegadores que la soporten.

Una vez hecho esto, pasamos la siguiente checklist de verificaciones:

¿La experiencia básica es totalmente funcional y usable solo con HTML?
¿El marcado de base codifica toda la información, incluido el diseño y la estructura, que necesita la experiencia mejorada?
¿Tanto en la experiencia básica como en la experiencia avanzada, la pagina se lee y trabaja en un orden lógico y promueve el contenido y la funcionalidad más importante?
¿Son todas las páginas navegables y todos los elementos de formulario accesibles usando solo el teclado?
¿Las paginas tienen sentido al navegar con el lector de pantalla? ¿puede el usuario navegar por la estructura de encabezados?
¿Hay un opción clara para todos los usuarios (incluidos dispositivos móviles y lector de pantalla) para cambiar entre la experiencia básica y la experiencia avanzada? Por ejemplo, podemos querer acceder a la versión básica en función de la conexión, las preferencias o si por alguna razón la versión mejorada falla?

Capítulo 3. Escribir código HTML semántico

Este capítulo es un repaso de cómo implementar correctamente HTML de forma semántica. Trata los encabezados, párrafos y listas; el uso de BR y el abuso de DIV y SPAN; las citas, el texto enfatizado y las abreviaturas; las tablas, las imágenes y los elementos interactivos (enlaces y formularios); las zonas semánticas de la página (cabecera, pie, zonas de navegación...); o el contenido del head.

Por último, hace una enumeración básica de los requisitos de accesibilidad de las WCAG relacionados.

Capítulo 4. Aplicar estilos de forma efectiva

Se revisan las buenas prácticas relativas a las técnicas que comúnmente se emplean para aplicar CSS en el enfoque de mejora progresiva:

la importancia de usar ficheros CSS y en el menor número posible, salvo excepciones muy concretas en que sí puede ser mejor usar el atributo style;
los inconvencientes de usar @import;
los diferentes tipos de CSS;
las recomendaciones para usar convenciones en el nombre de las CSS;
sobre los comentarios condicionales;
etc.

Como ya he explicado previamente, habrá una CSS básica con estilos "seguros" (basic.css) y una CSS avanzada (enhacenced.css), por lo que hay que decidir qué estilos son básicos y cualés avanzados para saber en cuál de estas CSS incluirlos.

Por ejemplo, serán seguros para todos los navegadores los estilos que hacen referencia a la fuente o al estilo del texto; pero los relacionados con la posición, las cajas flotantes, las dimensiones o los márgenes, deberían estar en la CSS avanzada.

Una ventaja añadida de tener una CSS básica es que nos sirve también como CSS de impresión, simplemente habrá que tener cuidado en ocultar los bloques que no se deben imprimir, como la navegación.

También incluyen consideraciones de accesibilidad:

la definición de la fuente en medidas relativas;
el contraste de color;
evitar la información que se transmite solo por el color;
la necesidad de subrayar los enlaces dentro del texto;
definir los colores de fondo bajo las imágenes de fondo;
no ocultar el foco;
el ancho de columna recomendado; u
ocultar correctamente el contenido.

Por último, repasa diversos trucos para dudas habituales relacionadas con los elementos flotantes o los bugs en IE, como los relacionados con el z-index o el hasLayout.

Capítulo 5. Mejorar la experiencia y la interactividad con scripts

Este capítulo de centra en cómo aplicar JS no intrusivo para extender la funcionalidad de las páginas:

Aplicar el código JS al HTML de manera correcta: dónde y cuándo cargar los scripts.
La inclusión del JS EnhancedJS para testear las capacidades del navegador y cargar los JS y CSS para la experiencia mejorada.
Cómo construir el marcado mejorado y añadir la interactividad a los controles por JS no intrusivo. Por ejemplo, aprovechando el texto existente en el HTML de base; controlando correctamente la ocultación de contenido con la técnica adecuada para cada caso; etc.
La importancia de conservar y mejorar la usabilidad y accesibilidad, asegurando el acceso por teclado y el acceso mediante lector de pantalla, para lo cual será imprescindible el correcto uso del atributo tabindex y el estándar WAI-ARIA (artículo relacionado WAI-ARIA).

Capítulo 6. Testear la capacidad del navegador

El framework javascript EnhancedJS testea las capacidad CSS y JS del navegador. Si pasa todos los test y, por tanto, soporta todas las características, se cargan las CSS y JS de la capa mejorada; de lo contrario, se mantiene la experiencia básica que es totalmente funcional.

No solo testea si se soportan ciertos elementos, sino si los soporta correctamente, en especial en aspectos como el modelos de cajas y sus dimensiones o posiciones. Por ejemplo, dada una caja con unas dimensiones (ancho, márgenes, padding, …) compara su ancho final con la suma de sus dimensiones.

Cuando el test pasa:

Asigna la clase "enhanced" a los elementos HTML. De este modo, por ejemplo, en la CSS avanzada defines el estilo de HMTL.enhanced {} y en la CSS básica el estilo de HTML {}.
Se incluyen las CSS y JS especificados para la experiencia mejorada.
Graba el resultado en una cookie para prevenir al framework del resultado del test en cada pagina, así primero busca si existe la cookie.
Añade un enlace en la página para que el usuario pueda intercambiar de forma manual entre ambas versiones. Tiene opciones de personalización y se puede deshabilitar.

También se puede forzar a pasar o fallar el test; a borrar la cookie y refrescar la pagina; o hacer que el valor de la cookie sea "pasa" o "falla" y refrescar.

Para incluir el framework:

Se añade la llamada a la función "enhance()" en cada página. Acepta diferente parámetros, como el listado de JS y CSS que quieres añadir en la versión mejorada. Si el navegador no soporta JavaScript o no lo tiene activado, se ignora la función y se carga la versión básica. Los autores indican también un método para que no haya un flash de la pagina sin estilos mientras se carga la versión avanzada.
La inclusión del fichero "enhance.js" que realiza todos los test, que pueden ser editados y extendidos fácilmente.

Hay otras librerías que podrían ser complementarias a esta, como modernizr.

Segunda parte. Mejora Progresiva en acción

Esta segunda parte incluye los ejemplos sobre cómo construir diferentes widget desde cero, paso a paso, mediante mejora progresiva.

Cada capítulo es un ejemplo diferente, pero todos tienen la misma estructura:

Se parte del resultado final, la versión mejorada interactiva a la que se quiere llegar, revisándolo desde la perspectiva de rayos x (x-ray perspective).
Se mapea para descomponer sus piezas funcionales en elementos HTML estándar.
Se escribe el marcado base.
Se aplican estilo "seguros" en una CSS básica.
Se crea la capa de mejora con CSS avanzadas y ficheros JS.
Se asegura la accesibilidad por teclado y con el lector de pantalla.

Todos los ejemplos están disponibles en la web del libro:

Acordeón
Pestañas
- pestañas que mantienen funcional el botón atrás del navegador
- pestañas que rotan solas
Tooltips. Tengo que decir que no estoy de acuerdo con esta solución. En la versión básica, la ayuda de las etiquetas de los campos de texto, que en la versión avanzada se incluye con tooltips, se sustituye por el atributo title, que no es accesible con teclado.
Árbol
Gráfica con html5 canvas
Ventanas de diálogo
Botones
- versión con iconos
Votaciones con estrellas
Slider
Menu desplegable (I) y Menu desplegable (II)
Crear elementos en una lista

Podéis pulsar el enlace "View high-bandwidth version" / "View low-bandwidth version" que hay al final de cada página de ejemplo para ver la versión avanzada o básica.

Para evitar que la página se vea sin estilos mientras se testea el navegador y se carga la versión avanzada, propone:

html.enhanced body {visibility: hidden}

y una vez cargada

html.enhanced body {visibility: visible}

Todos los ejemplos en: