Hispanopedia Wiki
Articulo de referencia

Mejora progresiva

El orden de mejora progresiva: HTML , CSS y JavaScript . Un artículo de Wikipedia al que se accede mediante HTML puro (primera capa). Sin estilos (segunda capa) ni scripts (terc...

Hispanopedia WikiContenido en espanolLectura gratuita
El orden de mejora progresiva: HTML , CSS y JavaScript .
Un artículo de Wikipedia al que se accede mediante HTML puro (primera capa). Sin estilos (segunda capa) ni scripts (tercera capa), el contenido ocupa tan solo 76 KB.

La mejora progresiva es una estrategia de diseño web que prioriza el contenido , permitiendo que todos accedan al contenido y la funcionalidad básicos de una página web, mientras que los usuarios con navegadores más potentes o 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 , ya que el texto de la página se carga inmediatamente a través del código fuente HTML , sin necesidad de esperar a que JavaScript inicie y cargue el contenido posteriormente. Esto significa que el contenido listo para su consumo se ofrece de inmediato, sin capas adicionales. [ 1 ] [ 2 ] [ 3 ]

Esta estrategia implica separar la semántica de presentación del contenido, implementando la presentación en una o más capas opcionales, activadas según 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 estilos y animaciones 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, ahora obsoleto , compartió el puesto final con JavaScript mientras este último estaba ampliamente en uso. [ 5 ] [ 6 ] Dado que los navegadores web pueden cargar las características del sitio en la medida en que son compatibles, en lugar de fallar al cargar todo el sitio debido a un error o una característica faltante en JavaScript, un sitio que mejora progresivamente es más estable y retrocompatible . [ 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 son el concepto asociado con el enfoque de diseño web responsivo . En 2012, net Magazine eligió la mejora progresiva como la número 1 en su lista de las principales tendencias de diseño web para 2012 ( el diseño responsivo fue la número 2). [ 9 ] Google ha fomentado la adopción de la mejora progresiva para ayudar a que "nuestros sistemas (y una gama más amplia de navegadores) vean 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ñaban primero para los navegadores más recientes, pero luego se adaptaban para funcionar correctamente 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 siga siendo presentable y accesible incluso si ciertas tecnologías previstas por el diseño no están presentes. [ 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 va a revelar de forma interactiva mediante JavaScript, como un menú de navegación desplegable, el marcado HTML revela todo el contenido por defecto y JavaScript oculta parte del mismo. [ 3 ] El desarrollador añade 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 a 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 propio marcado, es un concepto conocido como la regla de separación de presentación y contenido [ 15 ] [ 16 ] . Champeon expresó la 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 quitando 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 siguiera siendo 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 creciente de sitios web no funcionaban en nada que no fueran las últimas versiones de los navegadores populares. [ 12 ]

Esta tendencia se revirtió después de la década de 1990, una vez que CSS fue ampliamente respaldado, [ 8 ] [ 17 ] a través de esfuerzos educativos de base (de Eric Costello, Owen Briggs, Dave Shea y otros) que mostraron a los diseñadores web cómo usar CSS para fines de diseño.

Principios fundamentales

La estrategia de mejora progresiva consta de los siguientes principios fundamentales: [ 8 ]

  • El contenido básico debe ser accesible desde todos los navegadores web.
  • Las funciones básicas deben ser accesibles desde todos los navegadores web.
  • El marcado semántico y escaso contiene todo el contenido.
  • El diseño mejorado se proporciona mediante CSS vinculado externamente. [ 17 ]
  • El comportamiento mejorado se proporciona mediante JavaScript vinculado externamente. [ 14 ]
  • Se respetan las preferencias del navegador web del usuario final.

Apoyo y adopción

  • En agosto de 2003, Jim Wilkinson creó una página wiki sobre mejora progresiva para recopilar algunos trucos y consejos y explicar la estrategia general. [ 18 ]
  • Diseñadores como Jeremy Keith han demostrado cómo este enfoque puede utilizarse armoniosamente con otros enfoques del diseño web moderno (como Ajax ) para proporcionar experiencias de usuario flexibles pero potentes. [ 19 ] [ 20 ]
  • Aaron Gustafson escribió una serie para A List Apart que cubre los fundamentos de la mejora progresiva, desde la filosofía subyacente hasta los enfoques CSS y cómo manejar JavaScript. [ 21 ] [ 11 ] [ 22 ] [ 23 ]
  • CSS Zen Garden, de Molly Holzschlag y Dave Shea , extendió la adopción del término para referirse a estrategias de diseño basadas en CSS. [ 24 ]
  • Organizaciones como el Web Standards Project (WaSP), que estuvo detrás de la creación de las pruebas Acid2 y Acid3 , [ 25 ] han adoptado la mejora progresiva como base para sus esfuerzos educativos.
  • En 2006, Nate Koechley de Yahoo! hizo amplia referencia a la mejora progresiva en su propio enfoque de diseño web y compatibilidad con navegadores, Graded Browser Support (GBS). [ 12 ]
  • Steve Chipman de AOL se ha referido a la mejora progresiva (mediante scripting DOM) como base de su estrategia de diseño web. [ 26 ]
  • David Artz, líder del equipo de optimización de AOL, desarrolló un conjunto de tecnologías de renderizado accesible e inventó una técnica para desmontar la "mejora" sobre la marcha, guardando la preferencia del usuario.
  • La mejora progresiva se utiliza en las interfaces de usuario de sitios web basados ​​en MediaWiki , como Wikipedia , ya que permite leer, navegar e incluso editar el contenido mediante la interfaz HTML básica, sin estilos ni scripts, aunque se ve mejorada por estos. Por ejemplo, la barra de herramientas del editor de wikitexto se carga y funciona mediante JavaScript.
  • Chris Heilmann habló sobre la importancia de la entrega dirigida de CSS para que cada navegador solo reciba el contenido (y las mejoras) que puede manejar. [ 27 ] [ 28 ]
  • Scott Jehl de Filament Group propuso una "Mejora progresiva basada en pruebas" [ 29 ] , recomendando probar las capacidades del dispositivo (en lugar de inferirlas del agente de usuario detectado ) antes de proporcionar mejoras.
  • Wt es un framework de código abierto para aplicaciones web del lado del servidor que implementa de forma transparente la mejora progresiva durante su arranque, pasando de HTML simple a Ajax completo.

Beneficios

Accesibilidad, compatibilidad y alcance

Las páginas web creadas según los principios de mejora progresiva son, por naturaleza, más accesibles, [27] retrocompatibles [6] y de mayor alcance , porque la estrategia exige que el contenido básico esté siempre disponible, sin obstáculos por características o scripts que puedan deshabilitarse fácilmente, no ser compatibles (por ejemplo, con navegadores web basados ​​en texto ) o bloquearse en ordenadores en entornos sensibles. [ 14 ] Además, el principio de marcado escaso facilita que las herramientas que leen el contenido en voz alta lo encuentren. No está claro hasta qué punto los sitios de mejora progresiva funcionan con herramientas más antiguas diseñadas para manejar diseños de tabla, " sorpresa de etiquetas " y similares.

Velocidad, eficiencia y control por parte del usuario

El cliente puede seleccionar qué partes de una página descargar, además del HTML básico (por ejemplo, estilos, imágenes, etc.), y optar por descargar solo las partes necesarias para el uso deseado, lo que acelera la carga y reduce el consumo de ancho de banda y energía. Por ejemplo, un cliente puede elegir descargar únicamente el HTML básico, sin cargar hojas de estilo, scripts ni contenido multimedia (como imágenes), debido a la baja velocidad de internet causada por la ubicación geográfica, una señal celular deficiente o una velocidad reducida por haber agotado su plan de datos de alta velocidad. Esto también reduce el consumo de ancho de banda en el servidor.

En comparación, las páginas cuyo contenido inicial se carga mediante AJAX requieren que el cliente ejecute JavaScript de forma ineficiente para descargar y visualizar el contenido de la página, en lugar de descargarlo inmediatamente.

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

La mejora de los resultados en cuanto a la optimización para motores de búsqueda (SEO) es otro efecto secundario de una estrategia de diseño web basada en la mejora progresiva. Dado que el contenido básico siempre es accesible para los rastreadores de los motores de búsqueda, las páginas creadas con métodos de mejora progresiva evitan problemas que podrían dificultar la indexación, mientras que tener que renderizar 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 ] ) replicó que las páginas informativas deberían codificarse utilizando mejora progresiva para que los rastreadores de los motores de búsqueda las indexen. [ 33 ] Geoff Stearns (autor de SWFObject , una popular aplicación Flash) argumentó que las páginas con mucho Flash deberían codificarse utilizando 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, abogando en cambio por 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 . 3 de septiembre de 2013. Consultado el 11 de noviembre de 2021 .
  2. ↑ Tse, Tiffany (15 de febrero de 2017). "¿Qué es el aumento progresivo y por qué debería importarte?" . Recuperado el 28 de septiembre de 2023 .
  3. 1 2 3 Olsson, Tommy (2007-02-06). "Degradación elegante y mejora progresiva" . El arte de la accesibilidad . Accessites.org. Archivado del original el 4 de marzo de 2012. Recuperado el 28 de septiembre de 2023 .
  4. 1 2 van der Sluis, Bobby (19 de abril de 2005). "Diez buenas prácticas para escribir JavaScript en 2005" . Archivado del original el 4 de julio de 2008. Recuperado el 14 de abril de 2006 .
  5. ↑ Mills, Chris (8 de julio de 2011). "Degradación elegante versus mejora progresiva" . Consorcio World Wide Web . Recuperado el 13 de agosto de 2020 .
  6. 1 2 Nyman, Robert (1 de marzo de 2006). "¿Qué es la accesibilidad?" . Recuperado 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 del original el 8 de noviembre de 2014 – vía South by Southwest .
  8. 1 2 3 4 5 6 7 8 Champeon, Steve (2003-03-21). "Mejora progresiva y el futuro del diseño web" . Webmonkey . Recuperado el 28 de septiembre de 2023 .
  9. ↑ "15 principales tendencias de diseño y desarrollo web para 2012" . Creative Bloq.net . 9 de enero de 2012. Archivado del original el 23 de agosto de 2017.
  10. ↑ Pierre Far (2014), Actualización de nuestras directrices técnicas para webmasters , Blog de Webmaster Central
  11. 1 2 Gustafson, Aaron (2008-10-07). "Understanding Progressive Enhancement" . A List Apart . Recuperado el 28 de septiembre de 2023 .
  12. 1 2 3 4 5 Koechley, Nate (13 de febrero de 2006). "Compatibilidad graduada con navegadores" . Yahoo! Developer Network . Archivado del original el 14 de abril de 2006.
  13. ↑ "101 consejos de optimización para motores de búsqueda" . www.meta4creations.com . Consultado el 14 de abril de 2016. La mejora progresiva [...] significa construir su sitio web teniendo en cuenta los navegadores más comunes.
  14. 1 2 3 James Edwards; Cameron Adams (2006-03-07). "Script Smarter: Quality JavaScript from Scratch" . SitePoint . Recuperado el 14 de abril de 2006 .
  15. 1 2 Stein, Bob (2000-11-17). "Ansiedad de separación: El mito de la separación del estilo del contenido" . A List Apart . Recuperado 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. 1 2 3 Malicoat, Todd (23 de agosto de 2003). "Forma vs. Función en el diseño de sitios web" . SEO Today . Archivado del original el 29 de agosto de 2003. Recuperado 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 de Jeremy Keith sobre Adactio (2005), Mejora progresiva con Ajax
  20. ↑ Keith, Jeremy (2006-06-20). "Separación conductual" . A List Apart . Recuperado el 28 de septiembre de 2023 .
  21. ↑ Gustafson, Aaron (27 de marzo de 2007). "Arruinando la experiencia del usuario" . A List Apart . Recuperado el 28 de septiembre de 2023 .
  22. ↑ Gustafson, Aaron (22 de octubre de 2008). "Mejora progresiva con CSS" . A List Apart . Recuperado el 28 de septiembre de 2023 .
  23. ↑ Gustafson, Aaron (2008-11-04). "Mejora progresiva con JavaScript" . A List Apart . Recuperado el 28 de septiembre de 2023 .
  24. ↑ Lawson, Bruce. "Una entrevista con Dave Shea, el jardinero zen de CSS" . DMXzone.com . Archivado del 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 del original el 5 de mayo de 2008. Consultado el 5 de mayo de 2008. La prueba Acid 3 está en desarrollo y se actualizará cuando The Web Standards Project publique la versión final.
  26. ↑ Steven G. Chipman (2005), New Skool DOM Scripting
  27. 1 2 3 Heilmann, Chris (22 de febrero de 2005). "Doble visión: da a los navegadores CSS que puedan digerir" . Developer Shed. Archivado del original el 20 de julio de 2006. Recuperado el 6 de julio de 2017 .
  28. ↑ "Siete errores de accesibilidad (Parte 1)" . Revista web digital . 12 de abril de 2006. Archivado del original el 12 de abril de 2006. Consultado el 14 de abril de 2006 .
  29. ↑ Jehl, Scott (23 de septiembre de 2008). "Mejora progresiva basada en pruebas" . A List Apart . Recuperado el 27 de octubre de 2009 .
  30. ↑ Spencer, Stephan (25 de septiembre de 2007). "El PE es bueno para el SEO" . Searchlight - Noticias de CNET . Archivado del original el 10 de septiembre de 2011.
  31. ↑ Dimon, Garret (29 de agosto de 2005). "La realidad del mejoramiento progresivo" . Archivado del original el 17 de marzo de 2007.
  32. ↑ "Cumbre IA 2006: Biografías de los ponentes" . ASIS&T . Archivado del 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 del original el 17 de abril de 2006.
  34. ↑ Stearns, Geoff (27 de febrero de 2006). "Uso de contenido alternativo como contenido en Flash" . deconcept . Recuperado el 28 de septiembre de 2023 .
  35. ↑ Bowman, Douglas (14 de octubre de 2003). "¿Están realmente separados?" . Stopdesign.com . Archivado del original el 28 de marzo de 2006 . Consultado el 14 de abril de 2006 .

Lecturas adicionales

  • Briggs, Owen; Champeon, Steven; Costello, Eric; Patternson, Matthew (2004) Cascading Style Sheets: Separating Content From Presentation (2.ª ed.). San Francisco: Apress. ISBN 1-59059-231-X
  • Gustafson, Aaron (2011) Diseño web adaptativo: Creando experiencias enriquecedoras con mejora progresiva . Chattanooga: Easy Readers. ISBN 978-0-9835895-0-1.
  • Keith, Jeremy (2007) Bulletproof Ajax . Berkeley: New Riders. ISBN 0-321-47266-7
  • Keith, Jeremy (2005) DOM Scripting: Diseño web con JavaScript y el modelo de objetos del documento . Berkeley: friends of ED. ISBN 1-59059-533-5
  • Parker, Todd; Toland, Patty; Jehl, Scott; Costello Wachs, Maggie ( The Filament Group ) (2010) Diseño con mejora progresiva Peachpit/New Riders. ISBN 978-0-321-65888-3