# Eningles.info - Plataforma de Aprendizaje de Inglés ## 📖 Descripción Eningles.info es una plataforma educativa completa para aprender inglés desde cero hasta niveles avanzados. Diseñada específicamente para hispanohablantes, ofrece un enfoque interactivo y progresivo para el aprendizaje del idioma inglés. ## 🎯 Características Principales ### 📚 Sistema de Cursos Organizado - **Niveles progresivos**: Principiante, Intermedio, Avanzado - **Módulos estructurados**: Cada nivel contiene 6-8 módulos con contenido específico - **Contenido diversificado**: Videos, teoría, ejercicios prácticos y evaluaciones ### 🔄 Sistema de Progreso Local - **Seguimiento en tiempo real**: Monitoriza tu avance en cada nivel y módulo - **Puntuación acumulativa**: Gana puntos por cada ejercicio completado exitosamente - **Estadísticas detalladas**: Precisión, tiempo de estudio, ejercicios correctos/incorrectos - **Logros y recompensas**: Sistema de badges y reconocimientos por metas alcanzadas ### 🎮 Ejercicios Interactivos - **Tipos de ejercicios variados**: - Opción múltiple - Completar espacios - Relacionar columnas - Arrastrar y soltar - Escritura libre - **Retroalimentación inmediata**: Respuestas correctas e incorrectas con explicaciones - **Pistas y ayuda**: Soporte disponible para ejercicios difíciles ### 📱 Compatibilidad Total - **Responsive Design**: Funciona perfectamente en desktop, tablet y móvil - **Sin necesidad de servidor**: Sistema completamente local usando LocalStorage - **Offline friendly**: Puedes estudiar sin conexión a internet ## 🛠️ Tecnología Utilizada ### Frontend - **HTML5**: Estructura semántica y accesible - **CSS3**: Estilos modernos con Bootstrap 5 - **JavaScript ES6+**: Lógica interactiva y manejo de progreso - **Font Awesome**: Iconografía consistente ### Sistema de Progreso - **LocalStorage API**: Almacenamiento local del progreso del usuario - **ProgressTracker**: Sistema personalizado de seguimiento - **ExerciseEngine**: Motor de ejercicios interactivos ## 📁 Estructura del Proyecto ``` Eningles.info/ ├── index.html # Página principal con navegación ├── dashboard.html # Panel de control del usuario ├── module-template.html # Plantilla para módulos de estudio ├── progress-tracker.js # Sistema de seguimiento de progreso ├── exercise-engine.js # Motor de ejercicios interactivos ├── style.css # Estilos principales ├── script.js # Lógica general del sitio ├── courses/ # Directorio de cursos por nivel │ ├── beginner.html # Curso para principiantes │ ├── intermediate.html # Curso intermedio │ ├── advanced.html # Curso avanzado │ ├── a1.html # Nivel A1 (CEFR) │ ├── a2.html # Nivel A2 (CEFR) │ ├── b1.html # Nivel B1 (CEFR) │ └── [módulos específicos] ├── assets/ # Recursos multimedia │ ├── video-player.js # Reproductor de videos │ ├── adsense-manager.js # Gestión de publicidad │ └── [otros recursos] └── docs/ # Documentación ``` ## 🚀 Instalación y Uso ### Requisitos - Navegador web moderno (Chrome, Firefox, Safari, Edge) - No se requiere instalación de software adicional - No se necesita conexión a internet para usar la plataforma (excepto para contenido externo) ### Para Desarrolladores 1. **Clonar el repositorio**: ```bash git clone https://github.com/tu-usuario/eningles.info.git cd eningles.info ``` 2. **Abrir en el navegador**: - Simplemente abre `index.html` en tu navegador - No se requiere servidor web para desarrollo local 3. **Personalización**: - Edita `config.json` para modificar la configuración - Modifica `style.css` para cambiar estilos - Añade nuevos ejercicios en los archivos de módulos ## 📊 Sistema de Progreso ### ¿Cómo funciona? El sistema utiliza LocalStorage del navegador para almacenar: - Progreso por nivel (módulos completados) - Puntuación acumulada - Estadísticas de ejercicios (correctos/incorrectos) - Tiempo de estudio - Sesiones de aprendizaje - Logros desbloqueados ### Tipos de Progreso 1. **Progreso General**: Porcentaje completado de todos los niveles 2. **Progreso por Nivel**: Avance individual en cada nivel 3. **Progreso por Módulo**: Completitud de cada módulo dentro de un nivel 4. **Estadísticas de Ejercicios**: Precisión y rendimiento en actividades ### Exportar/Importar Progreso - **Exportar**: Descarga tu progreso como archivo JSON - **Importar**: Sube un archivo JSON para restaurar tu progreso - **Copia de seguridad**: Sistema automático de respaldo del progreso ## 🎮 Tipos de Ejercicios ### 1. Opción Múltiple - Selección de una respuesta correcta entre varias opciones - Ideal para vocabulario y comprensión auditiva ### 2. Completar Espacios - Rellenar palabras o frases faltantes en oraciones - Perfecto para gramática y estructura de oraciones ### 3. Relacionar Columnas - Emparejar elementos de dos listas diferentes - Excelente para asociaciones de vocabulario ### 4. Arrastrar y Soltar - Interacción táctil para ordenar o clasificar elementos - Muy útil para secuencias y categorías ### 5. Escritura Libre - Respuesta abierta donde el usuario escribe su respuesta - Ideal para práctica de escritura y expresión ## 📱 Optimización Mobile ### Características Responsive - **Diseño adaptable**: Se ajusta automáticamente a cualquier tamaño de pantalla - **Touch-friendly**: Interacciones optimizadas para pantallas táctiles - **Velocidad optimizada**: Carga rápida en dispositivos móviles - **Navegación intuitiva**: Menús y controles fáciles de usar en móviles ### Mejoras Mobile - **Fuentes legibles**: Tamaños de texto optimizados para pantallas pequeñas - **Espaciado adecuado**: Botones y controles con suficiente espacio para tocar - **Scroll suave**: Navegación fluida entre secciones - **Carga rápida**: Optimización para conexiones móviles ## 🔧 Personalización ### Cambiar Contenido 1. **Cursos**: Edita los archivos en `/courses/` 2. **Ejercicios**: Modifica los contenedores con clase `exercise-container` 3. **Estilos**: Personaliza `style.css` o añade estilos en línea 4. **Configuración**: Actualiza `config.json` según tus necesidades ### Añadir Nuevos Cursos 1. Crea un nuevo archivo HTML en `/courses/` 2. Define el contenido del curso 3. Añade el enlace en `index.html` 4. Actualiza el sistema de progreso si es necesario ### Personalizar el Sistema de Progreso - Modifica `progress-tracker.js` para cambiar la lógica de progreso - Ajusta los puntos otorgados por actividades - Cambia los criterios de logros y recompensas ## 🌐 Hosting y Despliegue ### Opciones de Hosting 1. **Hosting Tradicional**: Funciona con cualquier hosting que soporte HTML/CSS/JS 2. **GitHub Pages**: Ideal para proyectos estáticos 3. **Netlify/Vercel**: Despliegue rápido y fácil 4. **Hostinger**: Compatible con planes básicos de hosting ### Consideraciones de Hosting - **No requiere backend**: Todo el sistema funciona del lado del cliente - **Sin base de datos**: El progreso se guarda localmente en el navegador del usuario - **Bajo consumo de recursos**: Ideal para hosting económico - **Escalable**: Puede manejar muchos usuarios simultáneos ### Configuración para Producción 1. **Optimización de recursos**: Minificar CSS y JS 2. **Compresión de imágenes**: Reducir tamaño de recursos multimedia 3. **Caché del navegador**: Configurar headers de caché 4. **HTTPS**: Asegurar la conexión para mayor seguridad ## 📈 SEO y Accesibilidad ### Optimización SEO - **Meta tags**: Descripciones y palabras clave relevantes - **Estructura semántica**: Uso correcto de encabezados (H1, H2, etc.) - **Contenido accesible**: Texto alternativo para imágenes - **Rutas amigables**: URLs descriptivas y limpias ### Accesibilidad - **Navegación por teclado**: Compatible con navegación sin mouse - **Lectores de pantalla**: Soporte para tecnologías de asistencia - **Contraste adecuado**: Colores con suficiente contraste - **Tamaños de fuente**: Legibles para todos los usuarios ## 🤝 Contribuir ### ¿Cómo Contribuir? 1. **Fork** este repositorio 2. Crea una rama para tu característica: `git checkout -b feature/nombre-caracteristica` 3. **Commit** tus cambios: `git commit -m 'Añade nueva característica'` 4. **Push** a la rama: `git push origin feature/nombre-caracteristica` 5. Abre un **Pull Request** ### Áreas de Mejora - **Más ejercicios**: Añadir variedad de actividades interactivas - **Gamificación**: Sistema de niveles y recompensas más elaborado - **Multi-idioma**: Soporte para otros idiomas además del español - **Integración con APIs**: Conexión con servicios externos de aprendizaje ## 📞 Soporte y Contacto ### Reportar Issues - Usa el sistema de **Issues** de GitHub - Describe claramente el problema - Incluye pasos para reproducir el error - Indica tu navegador y sistema operativo ### Solicitar Características - Abre un **Issue** con la etiqueta `enhancement` - Describe la característica deseada - Explica el beneficio para los usuarios ### Contacto - **Email**: [tu-email@ejemplo.com](mailto:tu-email@ejemplo.com) - **Sitio Web**: [https://eningles.info](https://eningles.info) ## 📄 Licencia Este proyecto está bajo la Licencia MIT. Consulta el archivo [LICENSE](LICENSE) para más detalles. ## 🙏 Agradecimientos - **Comunidad de desarrolladores**: Por sus contribuciones y feedback - **Usuarios**: Por su apoyo y sugerencias de mejora - **Recursos educativos**: Por el contenido que inspira este proyecto --- **Eningles.info** - Tu camino hacia el dominio del inglés, paso a paso. 🌟