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

Millora Progressiva

Següent ►
►

La millora progressiva és una estratègia de disseny web que se centra en proporcionar una experiència bàsica funcional a tots els usuaris, independentment del dispositiu o navegador que utilitzin, i després afegir millores per a aquells amb capacitats més avançades. Aquesta tècnica és fonamental en el disseny responsive, ja que assegura que el contingut sigui accessible i usable per a tothom.

Conceptes Clau de la Millora Progressiva

  1. Contingut Primer:

    • Prioritza el contingut essencial perquè sigui accessible a tots els usuaris.
    • Assegura que el contingut principal es carregui primer, independentment de les capacitats del navegador.

  2. Funcionalitat Bàsica:

    • Proporciona una funcionalitat mínima que funcioni en tots els navegadors.
    • Utilitza HTML semàntic per garantir que el contingut sigui comprensible i accessible.

  3. Millores Addicionals:

    • Afegeix funcionalitats avançades mitjançant CSS i JavaScript per a navegadors que les suportin.
    • Utilitza tècniques com les media queries per adaptar el disseny a diferents dispositius.

  4. Accessibilitat:

    • Assegura que el lloc sigui accessible per a persones amb discapacitats.
    • Implementa etiquetes ARIA i altres tècniques d'accessibilitat.

Exemples Pràctics

Exemple 1: HTML Semàntic

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Millora Progressiva</title>
</head>
<body>
    <header>
        <h1>Benvinguts al nostre lloc web</h1>
    </header>
    <main>
        <article>
            <h2>Notícies Recents</h2>
            <p>Aquí trobaràs les últimes notícies sobre tecnologia.</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2023 El Nostre Lloc Web</p>
    </footer>
</body>
</html>

Exemple 2: CSS per a Millores

/* Estils bàsics per a tots els navegadors */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Millores per a navegadors moderns */
@media (min-width: 600px) {
    body {
        max-width: 800px;
        margin: 0 auto;
    }
}

Exemple 3: JavaScript per a Funcionalitats Addicionals

document.addEventListener('DOMContentLoaded', function() {
    if ('querySelector' in document && 'addEventListener' in window) {
        // Millores per a navegadors moderns
        const button = document.querySelector('button');
        button.addEventListener('click', function() {
            alert('Botó clicat!');
        });
    }
});

Exercicis Pràctics

Exercici 1: Crear una Pàgina Bàsica

Crea una pàgina HTML que contingui un títol, un paràgraf i una imatge. Assegura't que el contingut sigui accessible sense CSS ni JavaScript.

Exercici 2: Afegir Millores amb CSS

Utilitza CSS per afegir estils a la pàgina creada en l'exercici anterior. Implementa media queries per millorar el disseny en pantalles més grans.

Exercici 3: Implementar JavaScript

Afegeix un botó a la teva pàgina i utilitza JavaScript per mostrar un missatge d'alerta quan el botó sigui clicat. Assegura't que la pàgina funcioni correctament sense JavaScript.

Solucions

Solució a l'Exercici 1

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Pàgina Bàsica</title>
</head>
<body>
    <h1>El Meu Títol</h1>
    <p>Aquest és un paràgraf de text.</p>
    <img src="imatge.jpg" alt="Descripció de la imatge">
</body>
</html>

Solució a l'Exercici 2

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 600px) {
    body {
        max-width: 800px;
        margin: 0 auto;
    }
}

Solució a l'Exercici 3

<button>Fes clic aquí</button>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const button = document.querySelector('button');
        button.addEventListener('click', function() {
            alert('Botó clicat!');
        });
    });
</script>

Conclusió

La millora progressiva és una tècnica essencial en el disseny responsive que assegura que tots els usuaris tinguin accés al contingut i a les funcionalitats bàsiques, mentre que aquells amb dispositius i navegadors més avançats poden gaudir d'una experiència millorada. Aquesta estratègia no només millora l'accessibilitat, sinó que també optimitza el rendiment i la usabilitat del lloc web.

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