Consejo rápido No olvide el elemento noscript

JavaScript es un lenguaje poderoso que hace que los sitios web cobren vida con la interactividad, hasta ese momento temido en que JavaScript está deshabilitado en el navegador, de la nada. En este consejo rápido veremos cómo proporcionarle servicios de reserva

No JavaScript

Los usuarios pueden deshabilitar JavaScript por varios motivos. Es posible que lo estén haciendo para hacer frente a las restricciones de ancho de banda, para ahorrar la vida de la batería de su teléfono, tal vez por privacidad, para que no se las rastree con scripts analíticos. Algunas personas incluso instalan extensiones de navegador como NoScript para evitar que el navegador ejecute JavaScript. Basta con decir que, si JavaScript está deshabilitado, muchos sitios web y aplicaciones no funcionan; si no completamente, entonces parcialmente.

Veamos algunos ejemplos..

Propina: Para los fines de este tutorial, usaré Quick JavaScript Switcher, una práctica extensión para Chrome que me permite alternar JavaScript con un solo clic..

WordPress.com

El nuevo editor de publicaciones de WordPress.com depende en gran medida de JavaScript. Como puede ver en la siguiente captura de pantalla, no muestra nada más que el logotipo de WordPress "W" cuando JavaScript está deshabilitado. Asumiendo la mayoría de WordPress usuarios podrían no ser expertos en tecnología, probablemente no estarían conscientes de lo que está sucediendo.

WordPress.com editor de post (11 de diciembre de 2015).

Trello

Trello, una aplicación web de gestión de proyectos, depende en gran medida de JavaScript. A diferencia de WordPress.com, sin embargo, Trello amablemente nos dice con una simple advertencia:

Interfaz Trello (11 de diciembre de 2015)

Facebook

Facebook maneja esta situación aún mejor. Muestra una notificación, informa a los usuarios lo que está sucediendo y proporciona varios cursos de acción con el botón de cerrar sesión y actualizar, y la opción de recurrir a la versión optimizada para dispositivos móviles. Todos estos son presentados con marcas visuales familiares de Facebook..

Facebook (11 de diciembre de 2015)

New York Times

Algunos sitios pueden usar JavaScript solo parcialmente, como blogs y sitios de noticias. Cuando use NewYorkTimes, por ejemplo, encontrará un par de espacios en blanco cuando JavaScript esté desactivado. Los iconos de búsqueda que acompañan a la Buscar y el Secciones los enlaces desaparecen, como se ve abajo.

Esta es una degradación elegante (es posible que los usuarios ni siquiera lo noten), destacando que es conveniente ofrecer la mejor experiencia posible cuando JavaScript está desactivado. 

Usando el elemento "noscript"

La forma en que proporcionamos el respaldo dependerá en gran medida de cómo implementemos JavaScript en nuestros sitios web, pero la noscript El elemento será útil en muchos casos. Como su nombre lo indica, podemos usar noscript para hacer contenido alternativo. Cualquier cosa dentro las etiquetas se mostrarán solo cuando JavaScript esté deshabilitado.

Para servir como ejemplo construí una página de demostración. Esta demostración replica el efecto de carga de imágenes borrosas como se ve en Medio. Las imágenes y el efecto de desenfoque se entregan a través de JavaScript, así que adivina qué sucede cuando desactivamos JavaScript?

Las imágenes no serán cargadas..

Para mostrar estas imágenes, podemos envolverlas en noscript elementos, así como envolver las declaraciones de estilo, abordando los problemas de posicionamiento.

  ... 
      
 

También podemos utilizar el noscript Elemento para notificar a los usuarios sobre la desactivación de JavaScript, similar a lo que hacen Facebook y Trello. Además, podemos agregar un enlace de referencia para ayudar a nuestros usuarios a girar en JavaScript.

Envolver

Siempre que noscript como una alternativa es una forma útil de decirle a los usuarios del sitio web que, sin JavaScript, las cosas no necesariamente funcionan al 100%. Pero no olvidemos que su prioridad debe ser asegurarse de que la falta de JavaScript (o CDN, o cualquiera de las muchas otras dependencias) no rompa la experiencia del usuario. Gracias a Christian Heilmann por asegurarse de que el mensaje fue transmitido.