Spanish (Español) translation by Valentino (you can also view the original English article)
JavaScript es un lenguaje poderoso que da vida a los sitios web con interactividad, hasta ese temido momento en el que JavaScript está desactivado en el navegador, de la nada. . En este consejo rápido, veremos cómo proporcionar alternativas con el elemento <noscript>.
Sin JavaScript
Los usuarios pueden deshabilitar JavaScript por varias razones. Es posible que lo estén haciendo para hacer frente a las limitaciones de ancho de banda, para salvar la duración de la batería de su teléfono, tal vez por motivos de privacidad, de modo que no sean rastreados con scripts analíticos. Un puñado de personas incluso instala extensiones de navegador como NoScript para evitar que el navegador ejecute JavaScript. Basta decir que si JavaScript está desactivado, muchos sitios web y aplicaciones no funcionan; si no completamente, parcialmente.
Veamos algunos ejemplos.
Sugerencia: Para los propósitos de este tutorial, voy a 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 puedes ver en la siguiente captura de pantalla, no muestra nada más que el logotipo de WordPress "W" cuando JavaScript está desactivado. Suponiendo que la mayoría de los usuarios de WordPress no sean expertos en tecnología, probablemente no estarían al tanto de lo que está sucediendo.
Trello
Trello, una aplicación web de gestión de proyectos, depende en gran medida de JavaScript. Sin embargo, a diferencia de WordPress.com, Trello amablemente nos lo dice con una simple advertencia:
Facebook maneja esta situación aún mejor. Muestra una notificación, les dice a los usuarios lo que está sucediendo y proporciona varios cursos de acción con el botón para cerrar sesión y actualizar, y la opción de recurrir a la versión optimizada para dispositivos móviles. Todos estos se presentan con la conocida marca visual de Facebook.
New York Times
Algunos sitios pueden usar JavaScript solo parcialmente, como blogs y sitios de noticias. Cuando utilices NewYorkTimes, por ejemplo, encontrarás un par de espacios en blanco cuando JavaScript esté desactivado. Los iconos de búsqueda que acompañan a los enlaces Buscar y Secciones desaparecen, como se ve a continuación.
Esta es una degradación elegante (es posible que los usuarios ni siquiera se den cuenta), lo que destaca que es aconsejable ofrecer la mejor experiencia posible cuando JavaScript está desactivado.
Usando el elemento "noscript"
La forma en que proporcionamos respaldo dependerá en gran medida de cómo implementemos JavaScript en nuestros sitios web, pero el elemento noscript será útil en muchos casos. Como su nombre lo indica, podemos usar noscript para representar contenido alternativo. Todo lo que esté dentro de las etiquetas <noscript><.noscript> se mostrará solo cuando JavaScript esté desactivado.
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 Medium. Las imágenes y el efecto de desenfoque se envían a través de JavaScript, así que ¿adivinen qué sucede cuando desactivamos JavaScript?
Las imágenes no se cargarán.
Para mostrar estas imágenes, podemos envolverlas en elementos noscript así como envolver las declaraciones de estilo, abordando los problemas de posicionamiento.
1 |
<head>
|
2 |
<noscript>
|
3 |
<style>
|
4 |
figure noscript { |
5 |
top: 0; |
6 |
left: 0; |
7 |
position: absolute; |
8 |
}
|
9 |
</style>
|
10 |
</noscript>
|
11 |
</head>
|
12 |
|
13 |
... |
14 |
|
15 |
<figure>
|
16 |
<img src="img/img-small-1.jpg" |
17 |
width="30" |
18 |
height="20" |
19 |
class="img-small" |
20 |
alt="" |
21 |
data-large="img/img-large-1.jpeg" |
22 |
data-large-width="1280" |
23 |
data-large-height="853"> |
24 |
<canvas></canvas>
|
25 |
<figcaption>Lorem ipsum dolor sit amet.</figcaption> |
26 |
|
27 |
<!-- fallback image -->
|
28 |
<noscript><img src="img/img-large-1.jpeg" height="600" width="900"></noscript> |
29 |
</figure>
|
También podemos usar el elemento noscript 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 activar JavaScript.
Envolver
Proporcionar noscript como respaldo es una forma útil de decirles a los usuarios del sitio web que, sin JavaScript, es posible que las cosas no funcionen al 100%. Pero no olvidemos que su prioridad debe ser asegurarte de que la falta de JavaScript (o CDN, o cualquiera de una gran cantidad de otras dependencias) no rompa la experiencia del usuario. Gracias a Christian Heilmann por asegurarse de que se transmitiera ese mensaje.
By
