Desarrollo
JavaScript para mejorar una página que ya funciona
Empiece por un HTML que funcione. Añada controles y transiciones suaves sin perder el acceso al artículo si falla el script.
Un enlace a un artículo debe abrir el artículo. HTML basta para hacerlo. JavaScript puede añadir un carrusel, ocultar la cabecera al desplazarse o ayudar a abrir el menú. Un fallo en ese código no debe impedir el acceso al contenido.
Este enfoque se llama mejora progresiva: primero construimos una base que funciona y después añadimos mejoras de uso. Es útil cuando la red es lenta, el script está desactivado o falla un componente. Los buscadores y otros sistemas automatizados también reciben el contenido directamente en la respuesta del servidor.
Empiece por un HTML comprensible
Para navegar, utilice un enlace con una dirección real. Para una acción en la página actual, utilice un botón. No los sustituya por bloques div con un manejador de clics.
<a href="/materials/?article=architecture/reliable-integrations">
Integraciones fiables
</a>
<button type="button" hidden data-next>
Siguiente artículo
</button>El enlace funciona desde el principio. Puede mostrar el botón de control después de inicializar correctamente el carrusel. Así el visitante no verá un control que no hace nada. Su etiqueta debe describir la acción; una flecha sin un nombre accesible no la explica a todos los usuarios.
Antes de ejecutar el script, incluya en el HTML los títulos, las descripciones breves y las direcciones de las tarjetas. Si oculta las diapositivas adicionales, mantenga el acceso a todos los contenidos mediante una lista o un catálogo. No cargue el texto principal del artículo únicamente después de ejecutar JavaScript.
Utilice la sintaxis moderna cuando resulte útil
Declare una variable con const cuando no vaya a asignarle otro valor. Use let para un estado que cambia, como el número de la diapositiva actual. const no vuelve inmutable el contenido de un objeto: sus propiedades pueden seguir cambiando.
Cargue el archivo con defer si debe ejecutarse después de analizar el HTML. Para varios archivos relacionados, puede usar módulos. Los módulos permiten declarar las dependencias; un sitio pequeño no necesita necesariamente un proceso de compilación complejo.
<script src="/assets/ui.js" defer></script>El número del estándar del lenguaje no demuestra por sí solo que un navegador admita una función. Elija funciones disponibles en los navegadores de destino y compruebe el resultado. Para una navegación sencilla suelen bastar las funciones de JavaScript y DOM que llevan años disponibles.
Compruebe que el componente existe
Un script compartido se carga en varias páginas. Una puede tener carrusel y otra solo un artículo. Inicialice cada componente por separado:
function initSlider() {
const slider = document.querySelector('[data-slider]');
if (!slider) return;
const next = slider.querySelector('[data-next]');
if (!next) return;
// Conectamos la acción y después mostramos el control.
next.addEventListener('click', showNextSlide);
next.hidden = false;
}En el ejemplo, showNextSlide es la función de cambio de diapositiva que debe definir en el componente. No copie el fragmento como si fuera un carrusel completo. Muestra el orden: localizar los elementos, conectar la acción y mostrar el botón. La ausencia de un carrusel no debe interrumpir la configuración del menú ni de otros elementos independientes.
No dificulte la lectura ni el uso del teclado
El carrusel puede avanzar cuando lo solicite la persona. El avance automático exige más trabajo: un control para detenerlo, gestión del foco y respeto a la preferencia de movimiento reducido. Para una selección de artículos, el avance manual suele ser suficiente.
La cabecera oculta debe volver a aparecer cuando el foco se dirige al menú. Después de cerrar el menú móvil con Escape, devuelva el foco al botón de apertura. Compruebe el recorrido con Tab, Shift+Tab y Enter, además de usar el ratón.
Al desplazarse, no recalcule el diseño sin necesidad. Agrupe las actualizaciones en requestAnimationFrame; el manejador no debe iniciar una animación infinita. Desactive el movimiento decorativo cuando se indique prefers-reduced-motion.
Para cambiar una etiqueta de texto, utilice textContent. No inserte una cadena externa mediante innerHTML: el navegador la interpreta como marcado. Si necesita un elemento nuevo, créelo mediante DOM y asigne atributos validados.
Compruebe lo que verá la persona
Compruebe la sintaxis del archivo con node --check assets/ui.js. El comando no inicia un navegador ni comprueba los botones. Después, abra la página, pulse F12 y seleccione la pestaña Console: las acciones no deben producir errores del sitio.
Desactive JavaScript y vuelva a abrir la portada y un artículo. Compruebe los enlaces, el texto y el acceso a todos los contenidos. En una pantalla estrecha, desplácese, abra el menú y cambie de diapositiva. Una base que funciona y unos controles claros importan más que el número de funciones del lenguaje utilizadas.