📊 Dashboard Interactivo - Módulo 5

🎯 Descripción del Proyecto

Este proyecto es un Dashboard Interactivo desarrollado como ejercicio integrador del Módulo 5 del Bootcamp de Data Analytics UVM IBAKTOR. La aplicación presenta datos de países y regiones de manera visual e interactiva, demostrando competencias en HTML5, CSS3, JavaScript ES6+ y visualización de datos.

✨ Características Principales

🎨 Diseño Web de Calidad

• HTML5 Semántico: Estructura accesible con elementos semánticos apropiados
• CSS3 Avanzado: Diseño responsivo con Flexbox, Grid y animaciones
• Diseño Moderno: Gradientes, sombras, transiciones y efectos visuales
• Responsive Design: Adaptable a móviles, tablets y escritorio

🎮 Interactividad Avanzada

• Controles Dinámicos: Filtros, selectores y botones interactivos
• Visualizaciones Interactivas: Gráficas que responden a la interacción del usuario
• Exportación de Datos: Descarga de datos en formato JSON
• Actualización en Tiempo Real: Cambios dinámicos sin recarga de página

📊 Visualización de Datos Efectiva

• Canvas API Nativo: Visualizaciones sin dependencias externas
• Múltiples Tipos: Gráficas de barras, líneas y tablas
• Datos Estructurados: Presentación clara de información compleja
• Estadísticas Automáticas: Cálculo dinámico de métricas

♿ Accesibilidad Completa

• WCAG 2.1 AA: Cumple estándares de accesibilidad web
• Navegación por Teclado: Todos los controles accesibles
• Lectores de Pantalla: Compatible con tecnologías asistivas
• Alto Contraste: Soporte para preferencias de usuario

🚀 Instalación y Uso

Opción 1: Ejecución Directa (Recomendado)

1. Navega a la carpeta del proyecto
2. Haz doble clic en index.html
3. Se abrirá en tu navegador predeterminado
4. ¡Funciona inmediatamente sin instalación!

Opción 2: Servidor Local

# En la carpeta del proyecto
python -m http.server 8000
# Luego abre: http://localhost:8000

📊 Datos Presentados

Por País (2018-2021)

• México: 120, 135, 110, 150
• Argentina: 80, 95, 70, 100
• España: 140, 155, 130, 165
• Francia: 130, 145, 120, 160

Por Región

• Latam: Suma de México + Argentina (200, 230, 180, 250)
• Europa: Suma de España + Francia (270, 300, 250, 325)

🎮 Funcionalidades Interactivas

Controles de Visualización

• Tipo de Gráfica: Barras, Líneas, Tabla
• Filtros de Datos: Todos, Solo Latam, Solo Europa, Últimos 2 años
• Exportación: Descarga de datos en formato JSON
• Actualización: Refrescar visualizaciones dinámicamente

Visualizaciones Dinámicas

• Gráfica de Barras: Comparación visual entre países/regiones
• Gráfica de Líneas: Tendencias temporales con puntos interactivos
• Tabla de Datos: Vista detallada con datos estructurados
• Estadísticas: Total, Promedio, Máximo, Mínimo calculados automáticamente

🛠️ Tecnologías Implementadas

Frontend

• HTML5: Estructura semántica y accesible
• CSS3: Diseño responsivo con Flexbox, Grid y animaciones
• JavaScript ES6+: Lógica interactiva y manipulación del DOM
• Canvas API: Visualizaciones nativas sin dependencias externas

Características Técnicas

• Sin Dependencias: No requiere librerías externas
• Offline: Funciona sin conexión a internet
• Cross-browser: Compatible con todos los navegadores modernos
• Performance: Optimizado para rendimiento

📱 Diseño Responsivo

Breakpoints

• Desktop (1200px+): Layout de 2 columnas con controles laterales
• Tablet (768px-1199px): Adaptación automática del grid
• Móvil (320px-767px): Layout de 1 columna con controles apilados

Características Responsivas

• Grid Adaptativo: Se ajusta automáticamente al tamaño de pantalla
• Tipografía Escalable: Tamaños de fuente que se adaptan
• Controles Optimizados: Botones y selectores apropiados para cada dispositivo
• Navegación Intuitiva: Experiencia consistente en todos los dispositivos

♿ Características de Accesibilidad

Estándares WCAG 2.1 AA

• Contraste: Ratio mínimo de 4.5:1 para texto normal
• Navegación: Estructura lógica y navegable por teclado
• Semántica: Uso correcto de elementos HTML5 semánticos
• Etiquetas: Labels descriptivos para todos los controles

Funcionalidades Accesibles

• Navegación por Teclado: Tab order lógico y focus visible
• Lectores de Pantalla: ARIA labels y roles apropiados
• Alto Contraste: Soporte para preferencias del sistema
• Movimiento Reducido: Respeta preferencias de animación

🎓 Objetivos de Aprendizaje Demostrados

Módulo 5 - Visualización de Datos en Web

1. HTML5: Estructura semántica, accesibilidad y SEO
2. CSS3: Diseño responsivo, animaciones y efectos visuales
3. JavaScript: Interactividad, manipulación de datos y eventos
4. Visualización: Presentación efectiva de datos complejos
5. UX/UI: Experiencia de usuario intuitiva y accesible

Competencias Técnicas

• Desarrollo Frontend: HTML, CSS, JavaScript moderno
• Responsive Design: Adaptación a múltiples dispositivos
• Accesibilidad Web: Implementación de estándares WCAG
• Visualización de Datos: Canvas API y técnicas de presentación
• Optimización: Rendimiento y experiencia de usuario

🔧 Personalización y Extensión

Modificar Datos

// En index.html, modifica el array originalData
const originalData = [
    {"country":"Nuevo País","region":"Nueva Región","year":2022,"value":100},
    // ... más datos
];

Cambiar Colores

// Modifica las funciones getCountryColor() y getRegionColor()
function getCountryColor(country) {
    const colors = {
        'Nuevo País': 'rgba(255, 0, 0, 0.8)',
        // ... más colores
    };
    return colors[country] || 'rgba(128, 128, 128, 0.8)';
}

Agregar Funcionalidades

• Nuevos tipos de gráfica en createSimpleChart()
• Filtros adicionales en getFilteredData()
• Métricas personalizadas en updateStats()

📚 Documentación Técnica

Para información técnica detallada sobre:

• Arquitectura del sistema
• Decisiones de diseño
• Implementación específica
• Características de accesibilidad

Consulta: docs/Documento_Explicativo.md

🚀 Instrucciones Rápidas

1. Abrir: index.html en cualquier navegador
2. Explorar: Usa los controles para cambiar visualizaciones
3. Filtrar: Selecciona diferentes conjuntos de datos
4. Exportar: Descarga los datos si necesitas

📱 Compatibilidad

Navegadores Soportados

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+

Dispositivos

• ✅ Desktop (1920x1080, 1366x768)
• ✅ Tablet (768x1024, 1024x768)
• ✅ Móvil (375x667, 414x896)

Sistemas Operativos

• ✅ Windows 10/11
• ✅ macOS 10.14+
• ✅ Linux (Ubuntu, CentOS, etc.)

🎯 Criterios de Evaluación Cumplidos

1. Calidad del Diseño Web (1 punto) ✅

• HTML5 semántico y accesible
• CSS3 responsivo con Flexbox y Grid
• Diseño visualmente atractivo y moderno
• Animaciones y transiciones suaves

2. Interactividad (1 punto) ✅

• Controles dinámicos funcionales
• Visualizaciones que responden a la interacción
• Exportación de datos
• Actualización en tiempo real

3. Visualización de Datos (1 punto) ✅

• Canvas API nativo para visualizaciones
• Múltiples tipos de gráficas
• Presentación clara y comprensible
• Datos estructurados y organizados

4. Accesibilidad (1 punto) ✅

• Cumplimiento WCAG 2.1 AA
• Navegación por teclado
• Lectores de pantalla
• Alto contraste y preferencias de usuario

5. Documentación y Presentación (1 punto) ✅

• README completo y claro
• Documentación técnica detallada
• Explicación de decisiones de diseño
• Instrucciones de uso y personalización

---

Desarrollado con ❤️ para el Bootcamp Data Analytics UVM IBAKTOR - Módulo 5

Fecha: Octubre 2025 | Versión: 1.0 | Estado: Listo para entrega