stringtranslate.com

Mejora progresiva

El orden de mejora progresiva: HTML , CSS y JavaScript .
Se puede acceder a este artículo a través de HTML puro (primera capa). Sin estilos (segunda capa) ni scripts (tercera capa), el contenido ocupa solo 76 KB.

La mejora progresiva es una estrategia de diseño web que pone el énfasis en el contenido web en primer lugar, lo que permite que todos accedan al contenido y la funcionalidad básicos de una página web, mientras que los usuarios con funciones adicionales del navegador o un acceso a Internet más rápido reciben la versión mejorada. Esta estrategia acelera la carga y facilita el rastreo por parte de los motores de búsqueda web , ya que el texto de una página se carga inmediatamente a través del código fuente HTML en lugar de tener que esperar a que JavaScript se inicie y cargue el contenido posteriormente, lo que significa que el contenido listo para el consumo "listo para usar" se ofrece de inmediato, y no detrás de capas adicionales. [1] [2] [3]

Esta estrategia implica separar la semántica de la presentación del contenido, y la presentación se implementa en una o más capas opcionales, activadas en función de aspectos del navegador o la conexión a Internet del cliente . En la práctica, esto significa servir contenido a través de HTML , el "mínimo común denominador" de los estándares web, y aplicar estilo y animación a través de CSS en la medida técnicamente posible, para luego aplicar mejoras adicionales a través de JavaScript . [4] Se podría pensar que Adobe Flash , que ya no se utiliza , compartió el lugar final con JavaScript mientras se usaba ampliamente. [5] [6] Dado que los navegadores web pueden cargar las funciones del sitio en la medida en que lo admitan en lugar de no poder cargar todo el sitio debido a un error o una función faltante en JavaScript, un sitio que mejora progresivamente es más estable y compatible con versiones anteriores . [4]

Historia

El término "mejora progresiva" fue acuñado por Steven Champeon y Nick Finck en la conferencia SXSW Interactive el 11 de marzo de 2003, en Austin, [7] y a través de una serie de artículos para Webmonkey que se publicaron entre marzo y junio de 2003. [8]

Las técnicas específicas de hojas de estilo en cascada (CSS) relacionadas con la flexibilidad del diseño de la página para adaptarse a diferentes resoluciones de pantalla es el concepto asociado con el enfoque de diseño web adaptable . En 2012, la revista Net Magazine eligió la mejora progresiva como la opción número 1 en su lista de las principales tendencias de diseño web para 2012 ( el diseño adaptable ocupó el segundo lugar). [9] Google ha fomentado la adopción de la mejora progresiva 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". [10]

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 para que funcionaran bien en versiones anteriores del software del navegador. [11] [3] La degradación elegante tiene como objetivo permitir que una página se "degrade", es decir, que permanezca presentable y accesible incluso si faltan ciertas tecnologías esperadas por el diseño. [12]

En la mejora progresiva, la estrategia se invierte deliberadamente: el contenido web se crea con un documento de marcado , orientado al mínimo común denominador de la funcionalidad del software del navegador. [13] [8] [12] Si el contenido se debe revelar de forma interactiva a través de JavaScript, como un menú de navegación plegable, esto se haría de forma predeterminada y solo primero lo ocultaría el propio JavaScript. [3] 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 . [14]

Fondo

El enfoque de mejora progresiva se deriva de la experiencia temprana de Champeon ( c.  1993-1994 ) con el lenguaje de marcado generalizado estándar (SGML), anterior al HTML y otros lenguajes de presentación web. [8]

Escribir contenido con marcado semántico y considerar la presentación del contenido por separado, en lugar de estar incrustado en el marcado mismo, es un concepto conocido como la regla de separación de presentación y contenido [15] [16] . Champeon expresó su esperanza de que, dado que los navegadores web proporcionan un estilo de presentación predeterminado para el contenido HTML, esto daría como resultado sitios web con su contenido escrito como HTML semántico, dejando la elección de presentación al navegador web. [8] Sin embargo, las necesidades de los diseñadores web llevaron a que el estándar HTML se extendiera con características codificadas que permitían que el contenido HTML prescribiera estilos específicos y quitara esta opción a los consumidores y sus navegadores web. [8] Estas características obligaron a los editores a elegir entre adoptar nuevas tecnologías disruptivas o permitir que el contenido permaneciera accesible para audiencias que usaban otros navegadores, un dilema entre diseño y compatibilidad. [8] [17] [12] Durante la década de 1990, un número cada vez mayor de sitios web no funcionaban en nada que no fuera el último de los navegadores populares. [12]

Esta tendencia se revirtió después de los años 1990, una vez que CSS fue ampliamente apoyado, [8] [17] a través de esfuerzos educativos de base (de Eric Costello, Owen Briggs, Dave Shea y otros) que mostraban a los diseñadores web cómo usar CSS para propósitos de diseño. [ cita requerida ]

Principios básicos

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

Apoyo y adopción

Beneficios

Accesibilidad, compatibilidad y alcance

Las páginas web creadas según los principios de mejora progresiva son, por su naturaleza, más accesibles, [27] compatibles con versiones anteriores , [6] y de mayor alcance , porque la estrategia exige que el contenido básico esté siempre disponible, no obstruido por elementos que no suelen ser compatibles o secuencias de comandos que pueden deshabilitarse fácilmente, no ser compatibles (por ejemplo, por navegadores web basados ​​en texto ) o bloquearse en computadoras en entornos sensibles. [14] Además, el principio de marcado disperso hace que sea más fácil para las herramientas que leen el contenido en voz alta encontrarlo. 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. [ cita requerida ]

Velocidad, eficiencia y control del usuario

El cliente (informática) puede seleccionar qué partes de una página descargar además del HTML básico (por ejemplo, estilos, 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 velocidades de Internet bajas causadas por la ubicación geográfica, mala señal celular o velocidad limitada debido al agotamiento del plan de datos de alta velocidad. 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 de manera ineficiente JavaScript 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)

Otro efecto secundario de una estrategia de diseño web basada en la mejora progresiva es la mejora de los resultados en materia de optimización de motores de búsqueda (SEO). Como el contenido básico siempre está 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 de los motores de búsqueda, mientras que tener que mostrar el contenido básico de la página mediante la ejecución de JavaScript haría que el rastreo fuera lento e ineficiente. [27] [30]

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 ciertas presentaciones o comportamientos de la interfaz de usuario. [31] Laurie Gray (arquitecta de información en KnowledgeStorm [32] ) respondió con el punto de que las páginas informativas deberían codificarse utilizando la mejora progresiva para poder ser indexadas por las arañas de los motores de búsqueda. [33] Geoff Stearns (autor de SWFObject , una popular aplicación Flash) argumentó que las páginas con mucho Flash deberían codificarse utilizando la mejora progresiva. [34]

Los diseñadores Douglas Bowman y Bob Stein expresaron dudas sobre el principio de separación de contenido y presentación en términos absolutos, impulsando en cambio un reconocimiento realista de que ambos están inextricablemente vinculados. [35] [15]

Véase también

Referencias

  1. ^ "La mejora progresiva es más rápida". jakearchibald.com . 2013-09-03 . Consultado el 2021-11-11 .
  2. ^ Tse, Tiffany (15 de febrero de 2017). "¿Qué es la mejora progresiva y por qué debería importarte?" . Consultado el 28 de septiembre de 2023 .
  3. ^ abc Olsson, Tommy (6 de febrero de 2007). «Degradación elegante y mejora progresiva». El arte de la accesibilidad . Accessites.org. Archivado desde el original el 4 de marzo de 2012. Consultado el 28 de septiembre de 2023 .
  4. ^ ab van der Sluis, Bobby (19 de abril de 2005). "Diez buenas prácticas para escribir JavaScript en 2005". Archivado desde el original el 4 de julio de 2008. Consultado el 14 de abril de 2006 .
  5. ^ Mills, Chris (8 de julio de 2011). «Gravedad elegante frente a mejora progresiva». World Wide Web Consortium . Consultado el 13 de agosto de 2020 .
  6. ^ ab Nyman, Robert (1 de marzo de 2006). "¿Qué es la accesibilidad?" . Consultado el 14 de abril de 2006 .
  7. ^ Steven Champeon; Nick Finck (11 de marzo de 2003). "Diseño web inclusivo para el futuro (presentación de SxSWi)". Archivado desde el original el 8 de noviembre de 2014, vía South by Southwest .
  8. ^ abcdefgh Champeon, Steve (21 de marzo de 2003). "Mejora progresiva y el futuro del diseño web". Webmonkey . Consultado el 28 de septiembre de 2023 .
  9. ^ "Las 15 principales tendencias de diseño y desarrollo web para 2012". Creative Bloq . net . 9 de enero de 2012. Archivado desde el original el 23 de agosto de 2017.
  10. ^ Pierre Far (2014), Actualización de nuestras directrices técnicas para webmasters, Blog central para webmasters
  11. ^ ab Gustafson, Aaron (7 de octubre de 2008). "Entender la mejora progresiva". A List Apart . Consultado el 28 de septiembre de 2023 .
  12. ^ abcde Koechley, Nate (13 de febrero de 2006). "Compatibilidad gradual con navegadores". Yahoo! Developer Network . Archivado desde el original el 14 de abril de 2006.
  13. ^ "101 consejos de optimización de motores de búsqueda". www.meta4creations.com . Consultado el 14 de abril de 2016 . Mejora progresiva […] significa [crear] su sitio web comenzando con los navegadores del mínimo común denominador en mente.
  14. ^ abc James Edwards; Cameron Adams (7 de marzo de 2006). "Script más inteligente: JavaScript de calidad desde cero". SitePoint . Consultado el 14 de abril de 2006 .
  15. ^ ab Stein, Bob (17 de noviembre de 2000). "Ansiedad por separación: el mito de la separación entre estilo y contenido". A List Apart . Consultado el 28 de septiembre de 2023 .
  16. ^ "Separación: el dilema del diseñador web". A List Apart . 14 de mayo de 2004. Consultado el 24 de mayo de 2017 .
  17. ^ abc Malicoat, Todd (23 de agosto de 2003). "Forma frente a función en el diseño de sitios web". SEO Today . Archivado desde el original el 29 de agosto de 2003. Consultado el 14 de abril de 2006 .
  18. ^ Wilkinson, Jim (2003), Mejora progresiva - CSS Discuss Archivado el 9 de marzo de 2016 en Wayback Machine.
  19. ^ Blog Adactio de Jeremy Keith (2005), Mejora progresiva con Ajax
  20. ^ Keith, Jeremy (20 de junio de 2006). "Separación conductual". A List Apart . Consultado el 28 de septiembre de 2023 .
  21. ^ Gustafson, Aaron (27 de marzo de 2007). "Arruinando la experiencia del usuario". A List Apart . Consultado el 28 de septiembre de 2023 .
  22. ^ Gustafson, Aaron (22 de octubre de 2008). "Mejora progresiva con CSS". A List Apart . Consultado el 28 de septiembre de 2023 .
  23. ^ Gustafson, Aaron (4 de noviembre de 2008). "Mejora progresiva con JavaScript". A List Apart . Consultado el 28 de septiembre de 2023 .
  24. ^ Lawson, Bruce. "Una entrevista con Dave Shea, el jardinero zen de CSS". DMXzone.com . Archivado desde el original el 8 de junio de 2007. Consultado el 5 de junio de 2007 .
  25. ^ "Resultados de la prueba Acid en un navegador popular". SciActive . Archivado desde el original el 2008-05-05 . Consultado el 2008-05-05 . La prueba Acid 3 es un trabajo en progreso y se actualizará cuando el Proyecto de estándares web publique la versión final de la prueba.
  26. ^ Steven G. Chipman (2005), Scripts DOM de la nueva escuela
  27. ^ abc Heilmann, Chris (22 de febrero de 2005). "Double Vision – Give the Browsers CSS They Can Digest" (Visión doble: proporcione a los navegadores CSS que puedan digerir). Developer Shed. Archivado desde el original el 20 de julio de 2006. Consultado el 6 de julio de 2017 .
  28. ^ "Siete errores de accesibilidad (Parte 1)". Revista Digital Web . 12 de abril de 2006. Archivado desde el original el 12 de abril de 2006. Consultado el 14 de abril de 2006 .{{cite web}}: CS1 maint: URL no apta ( enlace )
  29. ^ Jehl, Scott (23 de septiembre de 2008). "Mejora progresiva basada en pruebas". A List Apart . Consultado el 27 de octubre de 2009 .
  30. ^ Spencer, Stephan (25 de septiembre de 2007). "El PE es bueno para el SEO". Searchlight - CNET News . Archivado desde el original el 10 de septiembre de 2011.
  31. ^ Dimon, Garret (29 de agosto de 2005). "La realidad del mejoramiento progresivo". Archivado desde el original el 17 de marzo de 2007.
  32. ^ "IA Summit 2006: Biografías de los oradores". ASIS&T . Archivado desde el original el 17 de abril de 2006.
  33. ^ Gray, Laurie (27 de marzo de 2006). "Web 2.0 y SEO?". Asociación para la Ciencia y la Tecnología de la Información . Archivado desde el original el 17 de abril de 2006.
  34. ^ Stearns, Geoff (27 de febrero de 2006). "Uso de contenido alternativo como contenido en Flash". deconcept . Consultado el 28 de septiembre de 2023 .
  35. ^ Bowman, Douglas (14 de octubre de 2003). "¿Están realmente separados?". Stopdesign.com . Archivado desde el original el 28 de marzo de 2006. Consultado el 14 de abril de 2006 .

Lectura adicional