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

Mejora Progresiva

Siguiente ►
►

La mejora progresiva es una estrategia de diseño web que enfatiza la accesibilidad, la semántica y la funcionalidad básica, permitiendo que todos los usuarios, independientemente de sus capacidades o del dispositivo que utilicen, puedan acceder al contenido esencial de un sitio web. A medida que se dispone de más capacidades del navegador o del dispositivo, se pueden ofrecer características adicionales y mejoras en la experiencia del usuario.

Conceptos Clave de la Mejora Progresiva

  1. Contenido Primero: Asegúrate de que el contenido principal sea accesible para todos los usuarios, incluso en navegadores más antiguos o dispositivos con capacidades limitadas.

  2. HTML Semántico: Utiliza etiquetas HTML semánticas para estructurar el contenido de manera que sea comprensible tanto para los navegadores como para las tecnologías de asistencia.

  3. CSS para Estilos: Aplica estilos CSS para mejorar la presentación visual sin afectar la accesibilidad del contenido.

  4. JavaScript para Comportamiento: Añade interactividad y mejoras de comportamiento utilizando JavaScript, asegurándote de que el sitio funcione correctamente incluso si JavaScript está deshabilitado.

  5. Accesibilidad: Implementa prácticas de accesibilidad para garantizar que el sitio sea utilizable por personas con discapacidades.

Ejemplo Práctico

Vamos a crear un ejemplo simple de mejora progresiva utilizando HTML, CSS y JavaScript.

Paso 1: Estructura HTML Básica

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Mejora Progresiva</title>
</head>
<body>
    <header>
        <h1>Bienvenido a Nuestro Sitio Web</h1>
    </header>
    <main>
        <article>
            <h2>Artículo Principal</h2>
            <p>Este es el contenido principal del sitio web. Es accesible para todos los usuarios.</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2023 Nuestro Sitio Web</p>
    </footer>
</body>
</html>

Paso 2: Añadir Estilos CSS

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

header, footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em 0;
}

main {
    padding: 1em;
}

Paso 3: Mejorar con JavaScript

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const article = document.querySelector('article');
        const toggleButton = document.createElement('button');
        toggleButton.textContent = 'Mostrar/Ocultar Artículo';
        document.body.insertBefore(toggleButton, article);

        toggleButton.addEventListener('click', function() {
            if (article.style.display === 'none') {
                article.style.display = 'block';
            } else {
                article.style.display = 'none';
            }
        });
    });
</script>

Explicación del Código

  • HTML: Proporciona la estructura básica del contenido, asegurando que sea accesible para todos los usuarios.
  • CSS: Mejora la presentación visual del contenido sin afectar su accesibilidad.
  • JavaScript: Añade interactividad al permitir que los usuarios muestren u oculten el artículo, mejorando la experiencia del usuario sin comprometer la funcionalidad básica.

Ejercicio Práctico

Tarea: Crea una página web simple que utilice la mejora progresiva para mostrar una lista de productos. Asegúrate de que la lista sea accesible sin JavaScript y añade un botón que permita filtrar los productos por categoría utilizando JavaScript.

Solución Sugerida

  1. HTML: Crea una lista de productos con categorías.
  2. CSS: Aplica estilos básicos para mejorar la presentación.
  3. JavaScript: Añade funcionalidad para filtrar productos por categoría.

Conclusión

La mejora progresiva es una técnica esencial en el diseño web moderno que garantiza que todos los usuarios puedan acceder al contenido básico de un sitio web, mientras que aquellos con dispositivos más avanzados pueden disfrutar de características adicionales. Al seguir este enfoque, puedes crear experiencias web inclusivas y accesibles para todos. En el siguiente tema, exploraremos cómo aplicar el diseño móvil-primero para mejorar aún más la experiencia del usuario en dispositivos móviles.

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