javascript progressive-enhancement graceful-degradation

javascript - ¿Cuál es la diferencia entre la mejora progresiva y la degradación agraciada?



progressive-enhancement graceful-degradation (8)

Degradación agraciada

La degradación agraciada es la capacidad de una computadora, máquina, sistema electrónico o red para mantener una funcionalidad limitada incluso cuando una gran parte de la misma se ha destruido o dejado de funcionar. El propósito de la degradación elegante es evitar fallas catastróficas.

La degradación agraciada es una solución. Es la práctica de crear un sitio web o aplicación, por lo que proporciona un buen nivel de experiencia de usuario en los navegadores modernos. Sin embargo, se degradará con gracia para aquellos que usan navegadores más antiguos. El sistema puede no ser tan agradable o bonito, pero la funcionalidad básica funcionará en sistemas más antiguos.

Un ejemplo simple es el uso de PNG transparentes alfa de 24 bits. Esas imágenes se pueden mostrar en los navegadores modernos sin problemas. IE5.5 e IE6 mostrarían la imagen, pero los efectos de transparencia fallarían (se puede hacer que funcionen si es necesario). Los navegadores antiguos que no son compatibles con PNG mostrarían texto alternativo o un espacio vacío.

Los desarrolladores que adoptan una degradación elegante a menudo especifican el nivel de soporte de su navegador, por ejemplo, navegadores de nivel 1 (mejor experiencia) y navegadores de nivel 2 (experiencia degradada).

Mejora progresiva

La mejora progresiva es una estrategia para el diseño web que enfatiza la accesibilidad, el marcado semántico de HTML y las tecnologías externas de hojas de estilo y scripting. La mejora progresiva utiliza tecnologías web de forma escalonada que permite que todos accedan al contenido básico y la funcionalidad de una página web, utilizando cualquier navegador o conexión a Internet, y también proporciona una versión mejorada de la página a aquellos con software de navegador más avanzado o mayor ancho de banda .

La mejora progresiva es un concepto similar a la degradación elegante, pero a la inversa. El sitio web o la aplicación establecerían un nivel básico de experiencia de usuario para la mayoría de los navegadores. Luego se agregaría una funcionalidad más avanzada cuando un navegador lo admita.

La mejora progresiva no requiere que seleccionemos navegadores compatibles o que revertamos a diseños basados ​​en tablas. Elegimos un nivel de tecnología; es decir, el navegador debe ser compatible con HTML 4.01 y la solicitud / respuestas de la página estándar.

Volviendo a nuestro ejemplo de imagen, podríamos decidir que nuestra aplicación debería ser funcional en todos los navegadores gráficos. Podríamos usar imágenes GIF de menor calidad por defecto, pero reemplácelas con PNG de 24 bits cuando el navegador las admita.

Campo de golf

Wikipedia: Mejora progresiva y degradación agraciada (Fault_tolerance)

Fuente: Blog de Sitepoint

Estoy confundido sobre cuál es la diferencia entre la mejora progresiva y la degradación agraciada . Para mí, parecen ser lo mismo.

¿Puedes explicarme las diferencias entre los dos y en qué situación usaría uno sobre el otro?


Encuentro que tiende a ser actitudinal: ¿está diciendo "está bien, mi sitio funciona con Lynx, los usuarios pueden hacer todo lo que quiero que puedan hacer, ahora agreguemos algo de entusiasmo", o está diciendo "está bien, mi sitio funciona". en Firefox, ahora intentemos solucionarlo para las personas que no estén dispuestas a usarlo / que desactiven javascript / etc "


La degradación elegante es la práctica de desarrollar su funcionalidad web de modo que proporcione un cierto nivel de experiencia del usuario en navegadores más modernos, pero también se degradará con elegancia a un nivel más bajo de experiencia del usuario en navegadores más antiguos. Este nivel inferior no es tan agradable de usar para los visitantes de su sitio, pero aún les proporciona la funcionalidad básica que utilizaron en su sitio; las cosas no se rompen para ellos.

La mejora progresiva es similar, pero hace las cosas al revés. Empieza estableciendo un nivel básico de experiencia de usuario que todos los navegadores podrán proporcionar al renderizar su sitio web, pero también crea una funcionalidad más avanzada que estará disponible automáticamente para los navegadores que puedan usarla.

En otras palabras, la degradación gradual comienza desde el status quo de la complejidad y trata de arreglar para la experiencia menor, mientras que la mejora progresiva comienza desde un ejemplo de trabajo muy básico y permite la extensión constante para entornos futuros. Degradación graciosamente significa mirar hacia atrás, mientras que mejorar progresivamente significa mirar hacia adelante y mantener los pies en terreno firme.


La dirección de una línea de base elegida para cada concepto es diferente.

Graceful Degradation comienza en un nivel de experiencia de usuario ideal y disminuye según las capacidades del agente de usuario hasta un nivel mínimo, atendiendo a agentes que no admiten ciertas características utilizadas por la línea de base.

La mejora progresiva comienza con una experiencia de usuario mínima amplia y aumenta según las capacidades del agente de usuario hasta un nivel más capaz, atendiendo a agentes que admiten funciones más avanzadas que la línea de base.

Creo que uno podría emplear ambos conceptos si el tiempo / presupuesto lo permite. De lo contrario, se preferiría una degradación elegante.


Perdón por resucitar algo que tiene más de un año, pero sentí que podía contribuir, de alguna manera, con mi propia opinión sobre el asunto.

Aunque de alguna manera estoy de acuerdo con Alex Mcp y deceze, los términos "Graceful Degradation" y "Progressive Enhancement" tienen significados levemente diferentes de donde estoy parado.

La degradación agraciada , muchas veces (en mi opinión), parece ser más un palo para vencer a una aplicación después de que se ha construido mal en primer lugar en mi experiencia. Como alguien construyendo un gran objeto javascript que proporciona al usuario algo realmente genial para jugar, hasta que llega un gerente, lo prueba y todos corren gritando y abrazan cuando se trata de su atención de que su aplicación no funciona en el 35% de los navegadores. "Alguien mejor proporcionar una alternativa para esto".

Sin embargo, la mejora progresiva (y es un término más agradable para decirlo) me parece que se trata más bien de construir algo que simplemente funciona, en un nivel de entrada, en todas partes, a través de los métodos más básicos disponibles, para proporcionar toda la funcionalidad que el usuario necesariamente. Esto se puede agregar con pequeños ayudantes discretos, estilos, etc. que en realidad mejoran la experiencia del usuario de la aplicación en cuestión, en lugar de simplemente hacerla apenas utilizable. "Eso parece genial. ¿Funciona en IE6? Oh sí. Lo hace"

Creo que quizás dar estilo como ejemplo de Ambos términos en las dos respuestas principales aquí pasa por alto el problema real de usabilidad subyacente que la mejora progresiva a menudo resuelve por su propia naturaleza, donde la degradación elegante ignora hasta que las cosas van mal.

Despotricar sobre...


SON casi exactamente lo mismo, pero difieren en el contexto.

Hay una clase de navegadores llamada "A Grade Browsers". Estos son los miembros de tu audiencia típica que (probablemente) componen la mayoría de tus visitantes. Comenzará con una línea base de estos usuarios. Llama a esto las mejores prácticas modernas .

Si quieres mejorar la experiencia de cualquiera que utilice FF3.6 o Safari 4 o algún otro desarrollador de whizbang en el sitio web nocturno, haz lo que quieras, querrás hacer cosas increíbles como

  • esquinas redondeadas a través de css
  • texto sombreado (pero por favor, no demasiado)
  • sombras paralelas (ver arriba entre paréntesis)

Estos hacen que su sitio parezca increíble, pero no lo romperán. Esta es una mejora progresiva . Abrazar el futuro desde el punto de las mejores prácticas .

Por otro lado, su sitio nicho de Nintendo atrae a un buen número de usuarios de IE5. Pobre de ti, pero también quieres asegurarte de que vuelvan. Puede proporcionar una alternativa a su comportamiento de ajax incluyendo el script ajax en un archivo externo y si su JS no está activado, tal vez sus enlaces actualicen toda la página. Etc. Desde el punto de vista de las mejores prácticas modernas , se está asegurando de que ciertos mercados históricos estén siendo atendidos por una apariencia de un sitio funcional . Esta es una degradación elegante .

En su mayoría son idénticos, pero difieren en términos de prioridad para muchos equipos de desarrollo: PE es bastante agradable si tienes tiempo, pero GD a menudo es necesario


Si su sitio se ve igual de bueno en todos los navegadores, pero ciertos navegadores obtienen, por ejemplo, ponis de baile porque admiten ponis de baile, eso es Mejora progresiva. Funciona en todos los navegadores, pero ciertos buscadores obtienen algo extra. Por lo general, ese término se aplica a ciertas funciones de Javascript que pueden mejorar la usabilidad más allá del "HTML sin procesar".

Si su sitio solo se ve de la manera que usted pretende en los navegadores que soportan completamente, por ejemplo, CSS3 e IE8, mostrará la misma página sin, por ejemplo, esquinas redondeadas, entonces eso es Degradación elegante. El sitio está diseñado para navegadores de última generación, pero todavía se puede usar en navegadores antiguos, pero no tan elegante.

Al final, son realmente lo mismo, mirado desde dos perspectivas diferentes.


para hacerlo más fácil, simplemente establece tu barra en la parte superior y luego puedes ignorar la mejora progresiva. cuando sale una nueva característica suba su barra;)

o, alternativamente, establezca su barra en el nivel más bajo (¿tal vez lince?) y solo use la mejora progresiva.