El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Disseny Responsive amb JavaScript

Següent ►
►

En aquest tema, explorarem com JavaScript pot complementar el disseny responsive per crear experiències d'usuari més dinàmiques i adaptatives. JavaScript pot ajudar a ajustar el disseny d'una pàgina web en temps real, basant-se en les interaccions de l'usuari i les característiques del dispositiu.

Conceptes Clau

  1. Detecció de la mida de la finestra:

    • JavaScript pot detectar la mida de la finestra del navegador i ajustar el disseny en conseqüència.
    • Utilitza l'objecte window per obtenir informació sobre l'amplada i l'alçada de la finestra.

  2. Manipulació del DOM:

    • JavaScript pot modificar el Document Object Model (DOM) per canviar l'estructura i l'estil de la pàgina en resposta a esdeveniments.

  3. Esdeveniments de redimensionament:

    • L'esdeveniment resize permet executar codi JavaScript cada vegada que la finestra del navegador es redimensiona.

  4. Media Queries en JavaScript:

    • Utilitza l'API window.matchMedia() per aplicar media queries directament des de JavaScript.

Exemple Pràctic

A continuació, veurem un exemple de com utilitzar JavaScript per canviar el disseny d'una pàgina en funció de la mida de la finestra.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disseny Responsive amb JavaScript</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            transition: background-color 0.5s;
        }
        .small-screen {
            background-color: lightblue;
        }
        .large-screen {
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <h1>Benvingut al Disseny Responsive amb JavaScript</h1>
    <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');
            }
        }

        window.addEventListener('resize', adjustLayout);
        adjustLayout(); // Executa la funció al carregar la pàgina
    </script>
</body>
</html>

Explicació del Codi

  • CSS: Definim dos estils de fons diferents per a pantalles petites i grans.
  • JavaScript:
    • La funció adjustLayout() comprova l'amplada de la finestra.
    • Si l'amplada és inferior a 600 píxels, aplica la classe small-screen.
    • Si l'amplada és superior o igual a 600 píxels, aplica la classe large-screen.
    • L'esdeveniment resize assegura que la funció s'executi cada vegada que la finestra es redimensiona.
    • La funció adjustLayout() s'executa inicialment per establir l'estil correcte quan es carrega la pàgina.

Exercici Pràctic

Objectiu: Crea un script que canviï el text d'un element <p> per indicar si la finestra és "petita" o "gran" segons la seva amplada.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici de Disseny Responsive</title>
</head>
<body>
    <p id="size-indicator">La finestra és...</p>
    <script>
        function updateText() {
            const paragraph = document.getElementById('size-indicator');
            if (window.innerWidth < 600) {
                paragraph.textContent = 'La finestra és petita';
            } else {
                paragraph.textContent = 'La finestra és gran';
            }
        }

        window.addEventListener('resize', updateText);
        updateText(); // Executa la funció al carregar la pàgina
    </script>
</body>
</html>

Explicació de l'Exercici

  • JavaScript:
    • La funció updateText() actualitza el contingut del paràgraf amb l'ID size-indicator.
    • Comprova l'amplada de la finestra i actualitza el text en conseqüència.
    • L'esdeveniment resize assegura que el text s'actualitzi cada vegada que la finestra es redimensiona.

Conclusió

JavaScript és una eina poderosa per millorar el disseny responsive, permetent ajustos dinàmics basats en les interaccions de l'usuari i les característiques del dispositiu. Amb la combinació de CSS i JavaScript, pots crear experiències d'usuari riques i adaptatives. En el següent tema, explorarem el futur del disseny responsive i com les noves tecnologies poden influir en el seu desenvolupament.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats