La mejora progresiva (PE) es una poderosa metodología para desarrollar aplicaciones web.
Aquí hay una definición formal:
La mejora progresiva es una estrategia para el diseño web que enfatiza primero el contenido principal de la página web. Esta estrategia luego agrega progresivamente capas de presentación y características más matizadas y técnicamente rigurosas en la parte superior del contenido según lo permita el navegador / conexión a Internet del usuario final. - WikipediaLos beneficios propuestos de esta estrategia son 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, al mismo tiempo que proporciona una versión mejorada de la página para aquellos con un software de navegación más avanzado o un mayor ancho de banda.
Y en pocas palabras ...
… Nos brinda una experiencia de usuario básica y compatibilidad cruzada entre navegadores para garantizar la estabilidad.
let PE = "Progressive Enhancement";La estrategia de educación física 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 es proporcionado por JavaScript discreto, vinculado externamente
- Se respetan las preferencias del navegador web del usuario final
Entonces, cuando construye su próximo sitio web con marcos JavaScript / CSS de próxima generación que funcionan solo en el entorno más favorable para su código y se rompe cuando no lo recibe…. esta no es una estrategia de mejora progresiva.
En su lugar, tenga un objetivo en el que el desarrollo deba comenzar proporcionando funciones básicas, estabilidad en todos los navegadores y dispositivos, y una experiencia perfecta para el usuario antes de introducir complejidad.
Ejemplos de PE
Veamos algunos de los ejemplos que muestran cómo funciona la estrategia de EP.
Fuentes Web
Las fuentes web son asombrosas y hermosas, pero cuando el usuario está en una red lenta con un sitio pesado, seguramente degradan la experiencia del usuario. Incluso en esta situación, la fuente del sistema debe usarse como respaldo para representar el contenido y se puede cambiar a una fuente web a medida que se cargan.
Mostrar contenido es mejor que esperar las fuentes web o no obtener nada.
HTML inicial
Los sitios están cargados de secuencias de comandos. Podría ser Angular, React o algún otro marco. Cuando estos scripts son responsables de la visualización inicial del contenido, su usuario verá la página en blanco en el navegador o dispositivo cuando algo salió mal con los scripts o cuando el usuario esté en la red lenta.
Siempre es bueno considerar cargar contenido inicial desde HTML para brindar una mejor experiencia de usuario, en lugar de depender completamente de scripts que aún no se han cargado.
Comprobación de funciones
Los buenos sitios siempre hacen esta parte. Cuando use una función que no es compatible con diferentes navegadores o dispositivos, asegúrese siempre de verificar si la función está disponible en el navegador antes de usarla en su JavaScript.
Modernizr es una biblioteca popular para la detección de características que puede ayudarlo.
Puede cargar scripts adicionales para cargar soporte de respaldo solo cuando no esté disponible en el navegador o dispositivo. De esta forma, puede evitar cargar scripts adicionales cuando no son necesarios.
Ahora, ¿por qué la educación física?
Razones importantes para centrarse en la estrategia de educación física antes de crear su próxima aplicación:
Base sólida
PE se centra en el inicio de su proyecto utilizando solo las tecnologías web muy básicas antes de introducir algunas de las características muy complejas. Entonces, en todos los casos, tiene la base para respaldar sus características complejas para asegurarse de que funcionen.
Una vez que el equipo esté seguro de que la experiencia central del sitio es estable y funcionará sin depender en gran medida de la velocidad de la red, el navegador y el dispositivo, puede comenzar a introducir capas de funciones más complejas o cosas de ciencia ficción.
Estabilidad
Quality Team : "El icono de búsqueda no funciona en la página Safari para ofertas"
Dev Team : "Bueno, funciona en mi máquina , borra la caché, vuelve a cargar o muere"
Quality Team (desde el cielo): "Sigue sin funcionar, estás comprobando Chrome, no funciona en Safari"
Dev Team : “¿Cuándo comenzamos a apoyar a Safari? Espere…. parcheando parcheando ……… ”
if(getBrowsers() == 'safari') {Patch.magicHelpers.searchIconMagic()}Patch.magicHelpers = {searchIconMagic: function() {// Can't share magic, doing something }};“Después de 1 hora …… verifique ahora”.
Quality Team: "Funciona bien para Chrome y Safari, pero ahora se rompió para Mozilla ... ¡¡¡¡Ahhhhh !!!!!"
Bueno, todos hemos estado en esta situación al menos una vez.
El costo de estabilidad y mantenimiento de un proyecto también depende de cómo comienza el proyecto. Configurar un proyecto con marcos y parchearlo no funcionará a largo plazo.
La estrategia de PE le ayuda a construir una base sólida para su proyecto donde su HTML, CSS y JS están alineados y apuntan a proporcionar alternativas. Intentan asegurarse de que no dependa en gran medida solo de las funciones específicas del navegador.
SEO y accesibilidad
Todo el mundo quiere que su aplicación aparezca en la primera página del motor de búsqueda, pero se necesita un trabajo constante y una planificación para crear aplicaciones tan increíbles. La base sólida de su proyecto garantiza que su aplicación se centre en el enfoque de contenido primero.
Páginas construidas con la estrategia PE asegurarse de que el contenido básico es siempre accesible para la araña del motor de búsqueda y está listo para ser indexados. Evite cualquier representación de contenido dinámico que pueda dificultar que la araña rastree su contenido.
Aplicaciones web progresivas(PWA) están diseñados para funcionar para todos los usuarios, independientemente de su elección de navegador, porque están construidos con la mejora progresiva como principio central.
Pensamientos finales
La estrategia de PE se centra en una base sólida para su proyecto. Esta sólida base le ayuda en su visión de su producto para un plan a largo plazo.
Es fácil conectarse a un nuevo marco de JavaScript / CSS para su nuevo proyecto y comenzar a codificar, pero eso puede conducir a Graceful Degradation. Seguirá parcheando su código con alternativas para navegadores o dispositivos que no son compatibles con marcos.
Aunque la estrategia PE requiere un poco más de planificación en las etapas iniciales, se asegura de que su usuario pueda experimentar al menos la funcionalidad básica también en el peor de los casos. La educación física no es viable en situaciones que dependen en gran medida de JavaScript para lograr ciertas presentaciones o comportamientos de la interfaz de usuario, pero para un proyecto a largo plazo, vale la pena considerar ciertos aspectos de la estrategia de educación física.
Espera que esto proporcione una descripción general de la estrategia de mejora progresiva.
No dude en dejar un comentario a continuación.
¡Gracias por leer este artículo! Si tiene alguna pregunta, envíeme un correo electrónico (praveend806 [at] gmail [dot] com).
Recursos que hablan más sobre educación física y estudios de casos:
Diseñar con mejora progresiva: crear una Web que funcione para todos
La mejora progresiva es un enfoque del desarrollo web que tiene como objetivo ofrecer la mejor experiencia posible a… www.oreilly.com Unboring.net | Flujo de trabajo: aplicación de mejora progresiva en un proyecto de WebVR
Cómo hice un contenido interactivo para incrustarlo en weather.com unboring.net