El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Diseño Responsivo con JavaScript

Siguiente ►
►

En este módulo, exploraremos cómo JavaScript puede complementar el diseño responsivo, permitiendo una mayor interactividad y adaptabilidad en los sitios web. Aunque CSS es la base del diseño responsivo, JavaScript ofrece herramientas adicionales para manejar situaciones más complejas y mejorar la experiencia del usuario.

Conceptos Clave

  1. Detección de Tamaño de Pantalla:

    • JavaScript puede detectar el tamaño de la pantalla y ajustar el contenido dinámicamente.
    • Utiliza window.innerWidth y window.innerHeight para obtener las dimensiones actuales de la ventana del navegador.

  2. Manipulación del DOM:

    • JavaScript permite modificar el DOM en respuesta a cambios en el tamaño de la pantalla.
    • Puedes agregar o quitar clases, cambiar estilos en línea, o incluso modificar el contenido.

  3. Eventos de Redimensionamiento:

    • El evento resize se dispara cada vez que la ventana del navegador cambia de tamaño.
    • Puedes usar este evento para ejecutar funciones que ajusten el diseño de la página.

  4. Consultas de Medios en JavaScript:

    • Aunque las consultas de medios son una característica de CSS, JavaScript puede usarlas a través de la API window.matchMedia.

Ejemplo Práctico

Veamos un ejemplo de cómo usar JavaScript para cambiar el diseño de una página en función del tamaño de la pantalla.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diseño Responsivo con JavaScript</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            transition: background-color 0.3s;
        }
        .small-screen {
            background-color: lightblue;
        }
        .large-screen {
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <h1>Bienvenido a mi sitio web</h1>
    <p>Este es un ejemplo de diseño responsivo usando JavaScript.</p>

    <script>
        function adjustLayout() {
            if (window.innerWidth < 600) {
                document.body.classList.add('small-screen');
                document.body.classList.remove('large-screen');
            } else {
                document.body.classList.add('large-screen');
                document.body.classList.remove('small-screen');
            }
        }

        // Ejecutar la función al cargar la página
        adjustLayout();

        // Ejecutar la función cada vez que se redimensiona la ventana
        window.addEventListener('resize', adjustLayout);
    </script>
</body>
</html>

Explicación del Código

  • CSS: Define dos clases, small-screen y large-screen, que cambian el color de fondo del cuerpo del documento.
  • JavaScript:
    • La función adjustLayout verifica el ancho de la ventana.
    • Si el ancho es menor a 600 píxeles, aplica la clase small-screen; de lo contrario, aplica large-screen.
    • La función se ejecuta al cargar la página y cada vez que se redimensiona la ventana.

Ejercicio Práctico

Objetivo: Crear un script que cambie el texto de un elemento <p> dependiendo del tamaño de la pantalla.

  1. Crea un archivo HTML con un elemento <p> que contenga el texto "Pantalla grande".
  2. Escribe un script que cambie el texto a "Pantalla pequeña" si el ancho de la ventana es menor a 500 píxeles.
  3. Asegúrate de que el texto cambie dinámicamente cuando se redimensiona la ventana.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio de Diseño Responsivo</title>
</head>
<body>
    <p id="responsive-text">Pantalla grande</p>

    <script>
        function updateText() {
            const paragraph = document.getElementById('responsive-text');
            if (window.innerWidth < 500) {
                paragraph.textContent = 'Pantalla pequeña';
            } else {
                paragraph.textContent = 'Pantalla grande';
            }
        }

        // Ejecutar la función al cargar la página
        updateText();

        // Ejecutar la función cada vez que se redimensiona la ventana
        window.addEventListener('resize', updateText);
    </script>
</body>
</html>

Retroalimentación

  • Error Común: Olvidar eliminar o agregar clases adecuadamente puede llevar a estilos incorrectos. Asegúrate de usar classList.add y classList.remove correctamente.
  • Consejo: Usa debounce para optimizar el rendimiento al manejar eventos de resize, evitando que la función se ejecute demasiadas veces en un corto período.

Conclusión

JavaScript es una herramienta poderosa para mejorar el diseño responsivo, permitiendo ajustes dinámicos y personalizados que van más allá de lo que CSS puede lograr por sí solo. Con la práctica, puedes crear experiencias de usuario más ricas y adaptativas. En el siguiente módulo, exploraremos cómo las variables CSS pueden integrarse en el diseño responsivo para una mayor flexibilidad.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados