{"id":31655,"date":"2024-11-12T12:39:32","date_gmt":"2024-11-12T12:39:32","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31655"},"modified":"2025-03-18T14:06:44","modified_gmt":"2025-03-18T14:06:44","slug":"mejora-progresiva-progressive-enhancement","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/mejora-progresiva-progressive-enhancement","title":{"rendered":"Mejora progresiva (progressive enhancement)"},"content":{"rendered":"

\u00bfQu\u00e9 es la mejora progresiva o progressive enhancement?<\/span><\/h2>\n

La mejora progresiva o tambi\u00e9n llamada progressive enhancement es una estrategia de dise\u00f1o y desarrollo para sitios web que comienza con una base simple y va agregando mejoras paso a paso seg\u00fan el sistema lo requiera.\n<\/p>\n

Se utiliza para dise\u00f1ar sitios web capaces de aprovechar las bondades de los navegadores y dispositivos modernos, previniendo adem\u00e1s los problemas de rendimiento y visualizaci\u00f3n en dispositivos menos potentes o navegadores m\u00e1s antiguos con funciones limitadas.\n<\/p>\n

Diferencias de la mejora progresiva con la degradaci\u00f3n gradual<\/span><\/h2>\n
\n
\"Mejora<\/a> <\/p>\n
Imagen:<\/b> Mejora progresiva vs. degradaci\u00f3n gradual – Autor: Seobility – Licencia: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

En principio, la degradaci\u00f3n gradual<\/a> es el dise\u00f1o opuesto a la mejora progresiva, puesto que va en sentido contrario: de lo m\u00e1s complejo a lo m\u00e1s simple.\n<\/p>\n

Con esta estrategia los sitios web est\u00e1n orientados, inicialmente, a los navegadores m\u00e1s avanzados y, posteriormente, se van testeando con navegadores m\u00e1s antiguos y menos complejos para crear versiones funcionales que permitan trabajar con estos programas.\n<\/p>\n

De este modo, las y los desarrolladores de front-end pueden dise\u00f1ar una interfaz creativa con las \u00faltimas tecnolog\u00edas, pero que a su vez garantice el correcto funcionamiento del sitio web en apps cliente m\u00e1s antiguas.\n<\/p>\n

\u00bfC\u00f3mo funciona la mejora progresiva?<\/span><\/h2>\n

La funcionalidad de la mejora progresiva es comparable a la de un auto, es decir, por lo general, cada modelo cuenta con una versi\u00f3n b\u00e1sica y simple pero que a su vez es funcional, y se va mejorando al agregarle caracter\u00edsticas adicionales como un sistema de navegaci\u00f3n, una transmisi\u00f3n autom\u00e1tica o el enganche de remolque.\n<\/p>\n

En desarrollo web, existen tres niveles de mejoras progresivas que se pueden aplicar en el dise\u00f1o de un portal: HTML, CSS y JavaScript.\n<\/p>\n

El primer nivel est\u00e1 constituido por un HTML<\/strong> limpio y sem\u00e1ntico, lo cual permite a los agentes de usuario basados en texto, en el idioma u otros m\u00e1s antiguos que interpreten y muestren correctamente el contenido de una web.\n<\/p>\n

El segundo nivel lo conforma el CSS<\/strong>. Cuando un navegador no es capaz de interpretar una propiedad CSS determinada, simplemente la ignora. Por lo tanto, al crear una base con estilos que todos los navegadores entiendan, se pueden agregar estilos adicionales con CSS para versiones m\u00e1s nuevas de navegadores que a su vez sean ignoradas por los navegadores m\u00e1s antiguos.\n<\/p>\n

El siguiente c\u00f3digo muestra un ejemplo simple de una mejora progresiva en CSS:\n<\/p>\n

.main-content {\r\nbackground: # 999;\r\nbackground: rgba (153, 153, 153, .75);\r\n}<\/pre>\n
Aqu\u00ed podemos observar que el primer estilo establecer\u00eda el fondo en un color gris, mientras que la segunda regla utiliza valores de color RGBA especificando un nivel de transparencia. Por lo tanto, si un navegador admite RGBA, sobrescribe el primer estilo con el segundo, de lo contrario, solo se muestra en color gris, o sea con el primer estilo indicado\n<\/p>\n
El tercer nivel de dise\u00f1o de sitios web est\u00e1 constituido por JavaScript<\/strong>. Con JavaScript se puede mejorar la usabilidad<\/a> en una p\u00e1gina web a trav\u00e9s de la interactividad.\n<\/p>\n
Otra forma de integrar mejoras progresivas es hacerlo a trav\u00e9s de las \u201cfeature queries\u201d, pues son similares a las media queries<\/a> que se utilizan para crear p\u00e1ginas web responsive. As\u00ed pues, a diferencia de las media queries que consultan los tama\u00f1os de pantalla y otras propiedades del dispositivo, las feature queries verifican si un navegador web admite o no una funci\u00f3n en particular.\n<\/p>\n
Por ejemplo, esta podr\u00eda ser su sintaxis:\n<\/p>\n
@supports (display: flex) {\r\n}<\/pre>\n
En este ejemplo vemos que los estilos de dise\u00f1o que se agregan a esta consulta solo funcionan si un navegador admite \u00abflex\u00bb, es decir, estilos para flexbox.\n<\/p>\n
Ventajas y desventajas de la mejora progresiva<\/span><\/h2>\n
Una raz\u00f3n importante por la cual la mejora progresiva es tan popular en la web es que ofrece excelentes resultados. Adem\u00e1s, acceder al contenido desarrollado con mejoras progresivas es m\u00e1s f\u00e1cil tanto para los usuarios y usuarias como para las ara\u00f1as web<\/a>.\n<\/p>\n
Asimismo, la mejora progresiva obliga a las y los desarrolladores a planificar desde el inicio su proyecto como un sistema funcional, es decir, utilizando exclusivamente tecnolog\u00edas web b\u00e1sicas, lo cual crea una base a la cual recurrir a medida que el proyecto se hace m\u00e1s complejo.\n<\/p>\n
Incluso, cuando se lanza un navegador nuevo o una extensi\u00f3n del mismo, se pueden agregar m\u00e1s funciones al dise\u00f1o sin tener que cambiar la versi\u00f3n original. Por el contrario, la degradaci\u00f3n gradual, requiere que se modifique la versi\u00f3n original.\n<\/p>\n
Otra ventaja de los proyectos de mejora progresiva es que tambi\u00e9n son f\u00e1ciles de mantener. Partiendo de la base original, de los \u00abprincipios originales\u00bb o first principles, las y los desarrolladores pueden concentrarse en secciones m\u00e1s complejas como la interacci\u00f3n del sistema, sin tener que preocuparse por lo b\u00e1sico. Asimismo, esta estrategia de dise\u00f1o reduce el tiempo requerido para las pruebas de compatibilidad con diferentes navegadores.\n<\/p>\n
Sin embargo, hay aplicaciones que necesitan una interfaz front-end muy compleja y que, por lo tanto, son dif\u00edciles de planificar en funci\u00f3n de la mejora progresiva. En estos casos, lo normal es que no se pueda desarrollar una versi\u00f3n b\u00e1sica simple y, por lo tanto, las personas que navegan con   dispositivos y navegadores m\u00e1s antiguos no disponen de una funcionalidad comparable.\n<\/p>\n
Compatibilidad con mobile first<\/span><\/h2>\n
Los dise\u00f1os web basados en la mejora progresiva son compatibles con el enfoque actual del mobile first<\/a>.  Ambas estrategias se desarrollan para sistemas menos potentes (smartphones) y, gradualmente, ampl\u00edan las funcionalidades para adaptarse a dispositivos m\u00e1s complejos, como podr\u00eda ser una PC de escritorio con un navegador web moderno.\n<\/p>\n
As\u00ed pues, en el caso del dise\u00f1o para m\u00f3viles, se empieza por crear y estructurar su contenido y, a continuaci\u00f3n se programa la web para adaptarla a dispositivos m\u00f3viles con pantallas peque\u00f1as y navegadores m\u00e1s antiguos.\n<\/p>\n
De tal manera que, cuando este HTML b\u00e1sico se ejecuta en los dispositivos previstos, tambi\u00e9n se puede personalizar agregando propiedades CSS y media queries que puedan mostrarse en pantallas m\u00e1s grandes.\n<\/p>\n
En este punto del proceso, tambi\u00e9n se consultan las capacidades de los navegadores utilizando la detecci\u00f3n de funciones integradas para que la p\u00e1gina ofrezca una mejor funcionalidad y usabilidad en cada versi\u00f3n del navegador.\n<\/p>\n
En conclusi\u00f3n, si desarrollamos una versi\u00f3n simple para pantallas peque\u00f1as y navegadores m\u00e1s antiguos, podremos crear m\u00e1s f\u00e1cilmente un website para pantallas m\u00e1s grandes y dispositivos m\u00e1s modernos a trav\u00e9s de mejoras progresivas.\n<\/p>\n
Ampliar conocimientos<\/span><\/h2>\n