Artículos de Tecnología > Front End

Aplicando progressive enhancement

Flavio Henrique de Souza Almeida
Flavio Henrique de Souza Almeida

Siempre has querido utilizar funciones modernas de HTML5 y de CSS3, pero eras impedido por tener que soportar navegadores más antiguos? ¿Tu sitio deja de funcionar con JavaScript desactivado?

https://i1.wp.com/blog.caelum.com.br/wp-content/uploads/2012/10/pe.png?resize=300%2C98&ssl=1

En esta publicación, te mostraré formas de aplicar el concepto de progressive enhancement atacando la tríada estructura, estilo y comportamiento para ayudarte en la difícil tarea de complacer a los griegos y troyanos que llegan a tu sitio web.

Una simple analogía

Había un gran río que atravesaba dos ciudades y dos competidores en el negocio de los cruces. El primero utilizó una canoa y el segundo un jet ski. El primero, para mejorar la experiencia de sus usuarios, agregó un motor a la canoa.

Todo funcionó a la perfección hasta que hubo escasez de combustible. Sin energía, el jet ski dejó de funcionar y no se hizo ningún cruce. Con la canoa, todavía era posible navegar, incluso sin el motor de la competencia, permitir que los usuarios sigan teniendo acceso a esta función.

¿Es el Progressive enhancement?

El concepto de progressive enhancement define que la construcción de una página parte de una base común y garantizada para ejecutarse en los navegadores más diversos y enseguida agregues pequeñas mejoras aunque solo funcionen en navegadores modernos.

Si alguna de estas mejoras no es compatible con el navegador, el usuario aún podrá acceder al sitio web, aunque tenga su experiencia reducida.

Este concepto no se aplica de manera uniforme en una página, y debería pensarse de forma aislada en cuanto a estructura, estilo y comportamiento. Cada punto de la tríada se comporta de manera diferente cuando se degrada, es decir, cuando no es compatible con el navegador.Una forma de pensar sobre cada punto es a través del criterio fail-safe.

El criterio fail-safe

El criterio fail safe dice que, si una característica en particular no es compatible con el navegador, esto no debería resultar en un error, incluso sin la necesidad de un tratamiento especial por parte del programador. Este criterio incluye HTML y CSS.En HTML, cuando usamos alguna tag desconocida por el navegador, no se genera ningún error, porque la tag simplemente se ignora.

Un ejemplo práctico de esto es el uso de la tag

Artículos de Tecnología > Front End

En Alura encontrarás variados cursos sobre Front End. ¡Comienza ahora!

Trimestral

Descuento de lanzamiento de 30%
  • 153 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Acceso completo a la plataforma por 3 meses
US$19,90
un pago de US$29,90 US$19,90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Semestral

Descuento de lanzamiento de 30%
  • 153 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Acceso completo a la plataforma por 6 meses
US$33,90
un pago de US$49,90 US$33,90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Acceso a todos
los cursos

Estudia las 24 horas,
dónde y cuándo quieras

Nuevos cursos
cada semana