Entendiendo la Mejora Progresiva
Por Aaron Gustafson. Original en inglés, traducido al español por Nils Tellería.
Desde 1994, la comunidad de desarrollo web se ha llevado al compás de la promoción a la degradación agraciada. Como resultado de una adaptación del mundo de la ingeniería, el concepto fue, en su núcleo, sobre ir ofreciendo a los últimos y mejores navegadores una experiencia de cena completa mientras se le arrojaban unas pocas sobras a las tristes gentes lo suficientemente desafortunadas como para estar utilizando Netscape 4. Funcionó, seguro, pero no se correspondió realmente con la visión original de Tim Berners-Lee de una web universalmente accesible.
Una década más tarde, algunos ingeniosos comenzaron a cuestionar a la degradación agraciada y encontraron que fallaba en muchos niveles. Relacionado con disponibilidad de contenido, accesibilidad general y funcionalidades en navegadores móviles, buscaron una nueva forma de tratar el desarrollo web — una forma que se enfocara en el contenido e hiciera más que solo murmurar a viejos dispositivos.
En la SXSW del 2003, Steve Champeon y Nick Finck hicieron una presentación titulada “Inclusive Web Design For The Future” (Diseño de Web Inclusiva para el Futuro). Allí, develaron un anteproyecto para su nueva forma de tratar el desarrollo web. Steve además la nombró: mejora progresiva.
Hay una (sutil) diferencia
En caso de que estés rompiéndote la cabeza, tratando de ver en qué difieren la degradación agraciada y la mejora progresiva, diré: es una cuestión de perspectiva. Ambas, degradación agraciada y mejora progresiva, consideran cuán bien funciona un sitio sobre una variedad de navegadores en una variedad de dispositivos. La clave es dónde se enfocan y cómo ello afecta al flujo de trabajo.
La perspectiva de la Degradación agraciada
La Degradación agraciada se enfoca en construir el sitio web para los navegadores más avanzados/capaces. Probarlo en navegadores juzgados “envejecidos” o menos capaces usualmente toma lugar durante el último cuarto del ciclo de desarrollo y es a menudo restringido a la liberación anterior de los navegadores principales (IE, Mozilla, etc.).
Bajo este paradigma, los navegadores envejecidos se espera que ofrezcan una experiencia pobre pero aceptable. Podrían hacerse pequeños arreglos para acomodar a un navegador en particular. Debido a que no son el foco principal, se presta poca atención fuera de los errores más eminentes.
La perspectiva de la mejora progresiva
La Mejora progresiva se enfoca en el contenido. Nótese la diferencia: Ni siquiera he mencionado a los navegadores.
Para empezar, el contenido es la razón por la que creamos los sitios web. Algunos sitios lo divulgan, otros lo recopilan, algunos lo solicitan, otros lo manipulan, y algunos incluso hacen todo eso, pero todos lo requieren. Eso es lo que hace que la mejora progresiva sea un paradigma más apropiado. Es la razón por la cual Yahoo! rápidamente la adoptó y la utilizó para crear su estrategia Graded Browser Support.
Entonces, ¿cómo funciona?
Meterse dentro de la mentalidad de la mejora progresiva es simple: solo piensa desde el contenido hacia afuera. El contenido forma la base sólida en que tú solapas tu estilo e interactividad. Si eres un fan de las golosinas, piensa en ello como un M&M de Maní:
Comenzando con tu contenido de maní, marcado con semántica (X)HTML enriquecida. Reviste ese contenido con una capa de rico y cremoso CSS. Finalmente, añade JavaScript como una cáscara de caramelo duro para provocar una sabrosa delicia (y evitar que se derrita en tus manos).
Si estás familiarizado con el mantra del movimiento de los estándares web — separación, separación, separación — esto tiene total sentido. El desarrollo basado en estándares web ha menudo se ha comparado con un pastel y sus capas (o, si quieres ponerlo realmente elegante, un trifle).
Yo prefiero la analogía del M&M de Maní, porque en ella, las capas envuelven el contenido completamente, muy similar a la forma en la que nuestros estilos y scripts circundan nuestro contenido.
Si vas a degustar mi analogía comestible un poco más (espero no te esté dando hambre), te explicaré por qué este enfoque es mejor y cómo las capas interactúan dentro de este paradigma.
El maní
A algunas personas les gusta el maní; de hecho, algunas personas prefieren el maní que los M&Ms de maní. De la misma forma, alguna gente (y cosas como robots de motores de búsquedas) quieren solo el contenido.
También hay gente que no puede lidiar con el chocolate y las capas de caramelo encima del maní (diabéticos, por ejemplo). Como ellos, personas en dispositivos móviles o viejos navegadores podrían no estar habilitados para ver tu lindo diseño o interacción con tu sofisticada interfaz basada en Ajax.
Para ofrecer una experiencia básica a esos usuarios es esencial asegurarse que tu markup transmite el mayor nivel de detalle sobre el contenido que encapsula.
La cobertura de chocolate
Luego, puedes sumergir delicadamente tu contenido en un baño tibio de CSS suculento — pero antes de que pases a la cáscara dura de caramelo, hay algunas consideraciones adicionales.
Hay gente que adora las coberturas de chocolates de los manís. Esa gente es como la capa media de usuarios que tienen algún nivel de soporte de CSS, pero pueden no tener soporte decente para JavaScript. O pueden trabajar en una compañía donde los de seguridad IT están más que un poco fóbicos con JavaScript. Para ellos, JavaScript debería ser deshabilitado completamente.
Así sean fanáticos de Goober o no, esa gente merece ser tenida en cuenta. Hay varias formas en la mejora progresiva de aplicar estilos a tu contenido, y serán asunto del segundo artículo en esta serie.
La cáscara de caramelo duro
Finalmente, puedes introducir JavaScript en la mezcla. Con las posibilidades de interacción enriquecidas que provee, así como la habilidad de manipular e interactuar con las capas de contenido y presentación, JavaScript es verdaderamente el ingrediente que puede impulsar un sitio hacia una “experiencia”.
No estoy seguro exactamente cómo la cáscara dura de caramelo es adicionada a un M&M (supongo que se sumergen de alguna forma), pero se puede adicionar funcionalidad e interactividad basada en JavaScript a tus sitios web en un abrir y cerrar de ojos cuando piensas en mejora progresiva. Y, similar a los M&Ms; que están disponibles en variedad de colores, la experiencia JavaScript puede variar basada en las capacidades del navegador o dispositivo que está intentando usarlo.
Como probablemente sepas, este tipo de desarrollo es llamado JavaScript no intrusivo. Cubriré esas técnicas y prácticas en el tercer y final artículo de esta serie.
Juntándolo todo
Desarrollar con mejora progresiva es de verdad muy simple una vez que entiendes el concepto y comienzas a ponerlo en práctica; quizás mucho más simple que elaborar caramelo. Los próximos dos artículos en esta serie te ayudarán a perfeccionar tus habilidades en la mejora progresiva con CSS y JavaScript, y te enseñarán como la filosofía se traduce a código.
