home

SOGED Modern Learning Hub

🎯 Descripción

Sistema moderno de aprendizaje de idiomas indígenas de Panamá con interfaz gamificada y experiencia de usuario de nivel mundial.

🏗️ Estructura del Proyecto

Archivos Principales

courses/
├── learning-hub.html      # 🏠 Página principal del hub de aprendizaje
├── css/
│   ├── learning-hub.css   # 🎨 Estilos principales del nuevo sistema
│   └── course-modern.css         # 🎨 Estilos base reutilizables
├── js/
│   └── learning-hub.js    # ⚡ Funcionalidad principal del hub
└── components/
    └── course-sidebar.js         # 🧩 Componente de sidebar (legacy, puede reutilizarse)

🚀 Características Principales

✨ Dashboard Inteligente

• Welcome Screen personalizado con estadísticas del usuario
• Quick Actions para acceso rápido a funciones principales
• Progress Tracking visual con barras animadas
• Daily Challenges con progreso en tiempo real
• Cultural Insights diarios sobre tradiciones indígenas

🎮 Gamificación Avanzada

• Sistema XP con niveles y recompensas
• Achievement System con notificaciones
• Learning Streaks con contador de días consecutivos
• Virtual Currency (Turtle Coins) para compras
• Leaderboard social y competitivo

📚 Experiencia de Aprendizaje

• Learning Path interactivo tipo videojuego
• Multi-language Support (Ngäbe, Guna, Emberá, Naso)
• Voice Practice con feedback de IA
• Interactive Stories con elementos culturales
• Practice Modes variados (flashcards, juegos, pronunciación)

🎨 Interfaz Moderna

• Responsive Design para todos los dispositivos
• Smooth Animations y micro-interacciones
• Dark/Light Theme support
• Accessibility optimizada
• Performance optimizada con lazy loading

🎯 Cómo Usar

Inicio Rápido

1. Abrir learning-hub.html en el navegador
2. El sistema cargará automáticamente con una pantalla de bienvenida
3. Navegar usando el sidebar o las acciones rápidas del dashboard

Navegación

• Sidebar: Navegación principal por secciones
• FAB (Floating Action Button): Acciones rápidas desde cualquier sección
• Breadcrumbs: Indicador de ubicación actual
• Keyboard Shortcuts: Alt+1, Alt+2, etc. para navegación rápida

Secciones Disponibles

• Dashboard: Vista general y acciones rápidas
• Learn: Path de aprendizaje interactivo
• Practice: Modos de práctica variados
• Stories: Historias interactivas culturales
• Achievements: Sistema de logros y recompensas
• Stats: Estadísticas detalladas de progreso
• Store: Tienda virtual para personalización

🛠️ Tecnologías Utilizadas

Frontend

• HTML5 con estructura semántica
• CSS3 con variables personalizadas y animaciones
• Vanilla JavaScript (ES6+) para máximo rendimiento
• AOS Library para animaciones al hacer scroll
• Font Awesome para iconografía
• Google Fonts (Poppins, Fredoka) para tipografía

Características Técnicas

• Mobile-First Design responsivo
• Progressive Web App ready
• Local Storage para persistencia de datos
• Modular Architecture para escalabilidad
• Performance Optimized con lazy loading

🎨 Personalización

Colores del Tema

El sistema utiliza las variables CSS de SOGED:

:root {
    --primary-color: #28A745;    /* Verde SOGED */
    --secondary-color: #FFB300;  /* Amarillo tropical */
    --accent-color: #FF6B35;     /* Naranja vibrante */
    --info-color: #00A3E0;       /* Azul celeste */
}

Modificar Contenido

• Idiomas: Agregar nuevos idiomas en el array de configuración
• Lecciones: Modificar el contenido en el método generateLearnContent()
• Historias: Actualizar historias en generateStoriesContent()
• Logros: Personalizar achievements en generateAchievementsContent()

📱 Compatibilidad

Navegadores Soportados

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+

Dispositivos

• ✅ Desktop (1920px+)
• ✅ Laptop (1366px+)
• ✅ Tablet (768px-1024px)
• ✅ Mobile (320px-768px)

🔄 Migración del Sistema Anterior

Archivos Eliminados (Sistema Legacy)

• course-app.html → Reemplazado por learning-hub.html
• *-course.html → Integrado en sistema unificado
• course-components.js → Funcionalidad migrada
• course-state-manager.js → Estado integrado en nuevo sistema

Datos Preservados

• Progreso del usuario se mantiene en localStorage
• Imágenes y assets culturales reutilizados
• Configuración de idiomas migrada

🚀 Próximas Mejoras

Funcionalidades Planeadas

• Backend Integration para sincronización en la nube
• Real-time Multiplayer para competencia social
• AI Tutor más avanzado con reconocimiento de voz
• AR/VR Support para inmersión cultural
• Offline Mode para aprendizaje sin conexión
• Analytics Dashboard para instructores

Optimizaciones Técnicas

• Service Worker para PWA completa
• WebAssembly para procesamiento de audio
• GraphQL para queries eficientes
• WebRTC para práctica de conversación en tiempo real

📞 Soporte

Para preguntas, sugerencias o reportar bugs, contactar al equipo de desarrollo de SOGED.

---

SOGED - Preservando las lenguas indígenas de Panamá a través de la tecnología moderna 🐢✨

This site is open source. Improve this page.