Una aplicación web educativa diseñada para enseñar JavaScript con un enfoque moderno y metodología de diseño inverso, inspirada en el diseño icónico de Coca-Cola.
Autor: Aiker Ary Acosta Cantillo
GitHub: @aikerary
Repositorio: KolaJS
Área de Formación: Ingeniería de Sistemas
Kola JS es una unidad didáctica completa sobre "Fundamentos de JavaScript para el Desarrollo Web Moderno" dirigida a estudiantes de Ingeniería de Sistemas. La aplicación implementa metodologías de aprendizaje interactivo y evaluación continua, siguiendo el proceso de diseño inverso.
- Diseño Responsive: Optimizado para dispositivos móviles y desktop
- Interfaz Moderna: Inspirada en el diseño de Coca-Cola con Tailwind CSS v3
- Navegación Intuitiva: Menú sticky con scroll suave entre secciones
- Contenido Interactivo: Actividades expandibles y recursos organizados
- Evaluación Integral: Sistema de evaluación formativa y sumativa
- Ingeniería de Sistemas
- Especialización en desarrollo web y tecnologías modernas
"Fundamentos de JavaScript para el Desarrollo Web Moderno"
- Fundamentos de JavaScript
- Programación Orientada a Objetos
- Manipulación del DOM
- Programación Asíncrona
- Frameworks Modernos (React)
- Buenas Prácticas de Desarrollo
- Quizzes Interactivos Semanales (15%): Evaluaciones cortas al final de cada módulo
- Peer Code Reviews (10%): Revisión colaborativa de código entre estudiantes
- Proyecto Final (40%): Aplicación web completa full-stack
- Examen Práctico (35%): Evaluación individual de programación en tiempo real
- Laboratorio Interactivo: Variables y Tipos de Datos (2 horas)
- Proyecto Colaborativo: Calculadora Web (1 semana)
- Gamificación: Sistema de puntos y logros
- Aprendizaje Colaborativo: Trabajo en equipo y pair programming
- Videos Educativos: Cursos de YouTube y plataformas especializadas
- Artículos y Libros: Documentación oficial y literatura académica
- Herramientas: Editores de código, debugging tools, plataformas online
- Plataformas Interactivas: freeCodeCamp, Codecademy, LeetCode
Siguiendo formato APA 7ª edición, incluyendo:
- Libros técnicos especializados
- Documentación oficial (MDN, ECMAScript)
- Artículos académicos sobre educación en programación
- Estándares web y especificaciones técnicas
- Frontend: React 19.1.0 + Vite 6.3.5
- Estilos: Tailwind CSS v3.4.14
- Fuentes: Bebas Neue (estilo Coca-Cola) + Inter
- Build Tools: PostCSS, Autoprefixer
- Linting: ESLint con configuración moderna
- Node.js (versión 16 o superior)
- npm o yarn
# Clonar el repositorio
git clone https://github.com/aikerary/KolaJS.git
# Navegar al directorio
cd KolaJS
# Instalar dependencias
npm install
# Ejecutar en modo desarrollo
npm run dev
# Construir para producción
npm run build
# Vista previa de la build
npm run preview- Responsive Design: Adaptable a todos los tamaños de pantalla
- Performance Optimizada: Lazy loading y optimización de imágenes
- SEO Friendly: Estructura semántica y meta tags apropiados
- Accessibility: Cumple con estándares WCAG 2.1
- Cross-browser: Compatible con navegadores modernos
/* Colores principales inspirados en Coca-Cola */
--cola-red: #DC143C
--cola-dark-red: #B22222
--cola-white: #FFFFFF
--cola-light-gray: #F5F5F5
--cola-dark-gray: #2C2C2C- Identificación de resultados esperados
- Determinación de evidencias de aprendizaje
- Planificación de experiencias de aprendizaje
- Aprendizaje basado en proyectos
- Colaboración entre pares
- Evaluación auténtica y continua
Las contribuciones son bienvenidas. Para contribuir:
- Fork el proyecto
- Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.
Aiker Ary Acosta Cantillo
- GitHub: @aikerary
- Estudiante de Ingeniería de Sistemas
- Especialista en desarrollo web moderno
- A la comunidad de desarrolladores JavaScript
- A los creadores de las herramientas y frameworks utilizados
- A todos los educadores que inspiran metodologías innovadoras
Desarrollado con ❤️ para la educación en programación+ Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.