🚀 OTEC ONLINE LMS

Plataforma de Capacitación Multi-Tenant completa y funcional. Lista para mostrar a cliente y programador.

✅ Estado Actual: COMPLETADO

5
Empresas
34
Usuarios
12
Cursos
87
Certificados

🌐 Acceso Rápido a Todas las Pantallas

Pantalla URL Usuario
🔐 Login /otec-site/login.html Acceso a todos
👨‍💼 ADMIN OTEC
📊 Dashboard /otec-site/admin/index.html admin@otec.cl
🏢 Empresas /otec-site/admin/empresas.html admin@otec.cl
👥 Usuarios /otec-site/admin/usuarios.html admin@otec.cl
📚 Cursos /otec-site/admin/cursos.html admin@otec.cl
✅ Certificados /otec-site/admin/certificados.html admin@otec.cl
👨‍🏫 PROFESOR
📋 Mis Cursos /otec-site/profesor/index.html Cualquier profesor
✨ Crear Curso /otec-site/profesor/crear-curso.html Cualquier profesor
👨‍🎓 ALUMNO
📚 Mis Cursos /otec-site/alumno/index.html maria@vial.cl
🎥 Ver Curso /otec-site/alumno/ver-curso/python101.html maria@vial.cl
🏆 Certificados /otec-site/alumno/certificados.html maria@vial.cl

Credenciales de Prueba:

Admin: admin@otec.cl / demo123
Profesor: (cualquier usuario con rol profesor) / demo123
Alumno: maria@vial.cl / demo123

📦 Los 4 Módulos Principales

🔐

1. Autenticación

Login único. Asigna automáticamente roles (Admin, Profesor, Alumno).

⚙️

2. Admin OTEC

Gestión de empresas, usuarios, cursos y certificados. Control total.

👨‍🏫

3. Profesor

Constructor visual de cursos (sin código). Módulos → Lecciones → Contenidos → Quizzes.

👨‍🎓

4. Alumno

Reproductor de cursos con sidebar, videos y descargar materiales.

🔄 Flujos Principales

Flujo 1: Profesor crea un curso

  1. Accede a /profesor/crear-curso.html
  2. Completa nombre, descripción, horas, SENCE
  3. Crea Módulo 1, Módulo 2, etc
  4. Para cada módulo: crea Lección 1.1, 1.2, 1.3...
  5. Para cada lección: agrega contenido (video, PDF, audio con descripción)
  6. Crea quiz del módulo (V/F, Opción múltiple, Términos pareados)
  7. Publica el curso

Flujo 2: Alumno toma un curso

  1. Accede a /alumno/index.html
  2. Click en "Continuar curso"
  3. Ve video en el centro + sidebar con módulos/lecciones
  4. Navega lecciones, descarga materiales
  5. Hace quizzes, completa módulos
  6. Al terminar: obtiene certificado
  7. Descarga certificado desde /alumno/certificados.html

✨ Características Técnicas

🎨

Frontend

HTML5, CSS3, JavaScript vanilla. Sin dependencias externas. Responsive.

📊

Datos

localStorage para almacenamiento. JSON para estructura. Sincronización en tiempo real.

🎬

Videos

Vimeo embebido, YouTube embebido, videos locales HTML5. Cliente elige sin código.

📱

Responsive

Funciona perfecto en móvil, tablet y desktop. Diseño profesional.

¡Plataforma 100% Funcional!

Listo para mostrar a cliente, presentar a programador y validar UX/UI.

✅ Prototipo completo | ✅ Datos ficticios realistas | ✅ Diseño profesional | ✅ SIN CÓDIGO

📋 Resumen Ejecutivo

¿Qué tienes?

¿Para qué sirve?

¿Qué sigue?

🎉 ¡Proyecto Completado!

Tienes una plataforma profesional, funcional y lista para usar.
Explora todas las pantallas desde aquí.

🔐 Ir a Login ⚙️ Admin Panel ✨ Crear Curso 📚 Ver Cursos