Mejora progresiva - Progressive enhancement

Accesibilidad a través de HTML puro (primera capa) sin estilo (segunda capa) y scripts (tercera capa). La página tiene un tamaño de solo 76 KB con HTML puro.

La mejora progresiva es una estrategia en el diseño web que pone énfasis en el contenido web en primer lugar. Esta estrategia implica separar la semántica de presentación del contenido, con la presentación implementada en una o más capas opcionales, activadas en función de aspectos del navegador o la conexión a Internet del usuario . Los beneficios propuestos de esta estrategia son que permite que todos accedan al contenido y la funcionalidad básicos de una página web, mientras que las personas con funciones de navegador adicionales o un acceso más rápido a Internet reciben la versión mejorada.

Historia

La "mejora progresiva" fue acuñada por Steven Champeon y Nick Finck en la conferencia SXSW Interactive el 11 de marzo de 2003 en Austin, ya través de una serie de artículos para Webmonkey que se publicaron entre marzo y junio de 2003.

Las técnicas específicas de hojas de estilo en cascada (CSS) relacionadas con la flexibilidad del diseño de la página que se adapta a diferentes resoluciones de pantalla es el concepto asociado con el enfoque de diseño web receptivo . .net Magazine eligió Progressive Enhancement como el número 1 en su lista de las principales tendencias de diseño web para 2012 (el diseño receptivo fue el número 2). Google ha alentado la adopción de mejoras progresivas para ayudar a "nuestros sistemas (y una gama más amplia de navegadores) a ver contenido utilizable y funcionalidad básica cuando ciertas características de diseño web aún no son compatibles".

Introducción

La estrategia es una evolución de una estrategia de diseño web anterior conocida como degradación elegante , en la que las páginas web se diseñaron primero para los navegadores más recientes, pero luego se hicieron funcionar bien en versiones anteriores del software del navegador. La degradación elegante tiene como objetivo permitir que una página se "degrade", para que permanezca presentable y accesible incluso si ciertas tecnologías esperadas por el diseño están ausentes.

En la mejora progresiva, la estrategia se invierte deliberadamente: el contenido web se crea con un documento de marcado , orientado hacia el mínimo común denominador de la funcionalidad del software del navegador. El desarrollador agrega toda la funcionalidad deseada a la presentación y el comportamiento de la página, utilizando CSS moderno, Gráficos vectoriales escalables (SVG) o JavaScript .

Fondo

El enfoque de mejora progresiva se deriva de la experiencia inicial de Champeon (c. 1993-4) con el lenguaje de marcado estándar generalizado (SGML), antes de trabajar con HTML o cualquier lenguaje de presentación web, así como de experiencias posteriores de trabajo con CSS para solucionar los errores del navegador. . En esos primeros contextos SGML, el marcado semántico era de importancia clave, mientras que la presentación casi siempre se consideraba por separado, en lugar de estar incrustado en el marcado en sí. Este concepto se denomina de diversas formas en los círculos de marcado como la regla de separación de presentación y contenido , separación de contenido y estilo , o separación de semántica y presentación . A medida que la Web evolucionó a mediados de los noventa, pero antes de que CSS se introdujera y tuviera un amplio apoyo, los extensores de HTML violaban repetidamente esta regla fundamental de SGML. Como resultado, los diseñadores web se vieron obligados a adoptar nuevas tecnologías y etiquetas disruptivas para seguir siendo relevantes. Con un guiño a la degradación elegante, en reconocimiento de que no todos tenían el navegador más reciente, muchos comenzaron a simplemente adoptar prácticas de diseño y tecnologías que solo eran compatibles con las versiones más recientes y quizás las principales de navegadores anteriores. Durante varios años, gran parte de la Web simplemente no funcionó en nada más que en los navegadores más recientes y populares. Esto siguió siendo cierto hasta el surgimiento y la adopción generalizada y el soporte de CSS, así como muchos esfuerzos educativos populares y de base (de Eric Costello, Owen Briggs, Dave Shea y otros) que muestran a los diseñadores web cómo usar CSS para fines de diseño.

La mejora progresiva se basa en el reconocimiento de que la suposición central detrás de la "degradación elegante" (que los navegadores siempre se volvieron más rápidos y más potentes) estaba demostrando ser falsa con el surgimiento de dispositivos PDA y de mano con navegadores de baja funcionalidad y serias limitaciones de ancho de banda. Además, la rápida evolución de HTML y tecnologías relacionadas en los primeros días de la Web se ha ralentizado y los navegadores muy antiguos se han vuelto obsoletos, lo que permite a los diseñadores utilizar tecnologías potentes como CSS para administrar todas las tareas de presentación y JavaScript para mejorar la complejidad de los clientes. comportamiento lateral.

Propuesto por primera vez como una frase general algo menos difícil de manejar para describir el delicado arte de "separar la estructura y el contenido del documento de la semántica, la presentación y el comportamiento", y basado en el uso común en ese momento de los trucos de CSS para evitar errores de representación en navegadores específicos, La estrategia de mejora progresiva ha cobrado vida propia a medida que los nuevos diseñadores han adoptado la idea y ampliado y revisado el enfoque.

Principios básicos

La estrategia de mejora progresiva consta de los siguientes principios básicos:

  • El contenido básico debe ser accesible para todos los navegadores web.
  • La funcionalidad básica debe ser accesible para todos los navegadores web.
  • El marcado semántico escaso contiene todo el contenido.
  • El diseño mejorado es proporcionado por CSS vinculado externamente.
  • El comportamiento mejorado lo proporciona JavaScript vinculado externamente.
  • Se respetan las preferencias del navegador web del usuario final.

Apoyo y adopción

  • La mejora progresiva se utiliza en las interfaces de sitios con tecnología MediaWiki , como Wikipedia , ya que es legible, navegable e incluso editable utilizando la interfaz HTML básica sin estilo o scripts, aunque se mejora con estos. Por ejemplo, la barra de herramientas del editor de wikitexto se carga y funciona a través de JavaScript.
  • En agosto de 2003, Jim Wilkinson creó una página wiki de mejora progresiva para recopilar algunos trucos y consejos y explicar la estrategia general.
  • Diseñadores como Jeremy Keith han demostrado cómo el enfoque se puede utilizar en armonía con otros enfoques del diseño web moderno (como Ajax ) para proporcionar experiencias de usuario flexibles, pero potentes.
  • Aaron Gustafson escribió una serie que cubre los fundamentos de la mejora progresiva, desde la filosofía subyacente hasta los enfoques CSS sobre cómo manejar JavaScript, para A List Apart.
  • Otros, incluido Dave Shea , han ayudado a difundir la adopción del término para referirse a las estrategias de diseño basadas en CSS.
  • Organizaciones como Web Standards Project (WaSP), que estuvo detrás de la creación de las pruebas Acid2 y Acid3 , han adoptado la mejora progresiva como base para sus esfuerzos educativos.
  • En 2006, Nate Koechley en Yahoo! hizo una amplia referencia a la mejora progresiva en su propio enfoque de diseño web y compatibilidad con navegadores, Graded Browser Support (GBS).
  • Steve Chipman de AOL se ha referido a la mejora progresiva (mediante secuencias de comandos DOM) como base para su estrategia de diseño web.
  • David Artz, líder del equipo de optimización de AOL, desarrolló un conjunto de tecnologías de renderizado accesibles e inventó una técnica para desensamblar la "mejora" sobre la marcha, ahorrando la preferencia del usuario.
  • Chris Heilmann discutió la importancia de la entrega dirigida de CSS para que cada navegador solo obtenga el contenido (y las mejoras) que puede manejar.
  • Scott Jehl de Filament Group propuso una "mejora progresiva basada en pruebas", recomendando probar las capacidades del dispositivo (en lugar de inferirlas del agente de usuario detectado ) antes de proporcionar mejoras.
  • Wt es un marco de trabajo de aplicación web del lado del servidor de código abierto que implementa de manera transparente la mejora progresiva durante su arranque, progresando desde HTML simple hasta Ajax completo.

Beneficios

Accesibilidad, compatibilidad y divulgación

Las páginas web creadas de acuerdo con los principios de mejora progresiva son, por su naturaleza, más accesibles, compatibles y de mayor alcance , porque la estrategia exige que el contenido básico esté siempre disponible, no obstruido por secuencias de comandos que comúnmente no están respaldadas o que pueden deshabilitarse fácilmente, no respaldadas (por ejemplo, por navegadores web basados ​​en texto ) o bloqueados en computadoras en entornos sensibles. Además, el principio de marcado disperso facilita que las herramientas que leen contenido en voz alta lo encuentren. No está claro qué tan bien funcionan los sitios de mejora progresiva con herramientas más antiguas diseñadas para lidiar con diseños de tablas, " sopa de etiquetas " y similares.

Velocidad, eficiencia y control del usuario

El cliente (informática) puede seleccionar qué partes de una página descargar más allá del HTML básico (por ejemplo, estilo, imágenes, etc.), y puede optar por descargar solo las partes necesarias para el uso deseado para acelerar la carga y reducir el ancho de banda y el consumo de energía. . Por ejemplo, un cliente puede optar por descargar solo HTML básico, sin cargar hojas de estilo, scripts y medios (por ejemplo, imágenes), debido a las bajas velocidades de Internet causadas por la ubicación geográfica, la señal celular deficiente o la velocidad limitada debido a la alta velocidad agotada. plan de datos. Esto también reduce el consumo de ancho de banda en el lado del servidor.

En comparación, las páginas cuyo contenido inicial se carga a través de AJAX requieren que el cliente ejecute JavaScript de manera ineficiente para descargar y ver el contenido de la página, en lugar de descargar el contenido inmediatamente.

Optimización de motores de búsqueda (SEO)

La mejora de los resultados con respecto a la optimización de motores de búsqueda (SEO) es otro efecto secundario de una estrategia de diseño web basada en mejoras progresivas. Debido a que el contenido básico siempre es accesible para las arañas de los motores de búsqueda, las páginas creadas con métodos de mejora progresiva evitan problemas que pueden dificultar la indexación del motor de búsqueda, mientras que tener que representar el contenido básico de la página mediante la ejecución de JavaScript haría que el rastreo sea lento e ineficiente.

Críticas y respuestas

Algunos escépticos, como Garret Dimon, han expresado su preocupación de que la mejora progresiva no sea viable en situaciones que dependen en gran medida de JavaScript para lograr determinadas presentaciones o comportamientos de la interfaz de usuario. Otros han respondido con el punto de que las páginas informativas deben codificarse mediante una mejora progresiva para que las arañas puedan indexarlas, y que incluso las páginas con mucho Flash deben codificarse mediante una mejora progresiva. En un área relacionada, muchos han expresado sus dudas sobre el principio de la separación de contenido y presentación en términos absolutos, presionando en cambio por un reconocimiento realista de que los dos están indisolublemente vinculados.

Ver también

Notas

Referencias

Otras lecturas

Artículos
Libros