🎓 XTART Alcorcón - Campus Virtual

Sitio web moderno y plataforma educativa digital para el centro de formación profesional XTART Alcorcón

📋 Descripción

XTART Alcorcón es un proyecto integral que incluye:

• Sitio web institucional con diseño moderno y responsive
• Sistema de autenticación con login personalizado
• Campus virtual con dashboard interactivo para estudiantes
• Arquitectura CSS modular para fácil mantenimiento
• Componentes JavaScript reutilizables

✨ Características Principales

🌐 Sitio Web Institucional

• ✅ Hero dinámico con Swiper.js (6 slides con efecto parallax)
• ✅ Navegación glassmorphism con efectos blur y transparencias
• ✅ Secciones completas: About, Programas, Instalaciones, Estadísticas, Contacto
• ✅ Diseño premium con gradientes brand (Rosa-Púrpura-Azul)
• ✅ Animaciones suaves en scroll y hover
• ✅ Totalmente responsive (Desktop, Tablet, Mobile)

🔐 Sistema de Login

• ✅ Autenticación moderna con glassmorphism
• ✅ Validación nativa HTML5 (email y campos requeridos)
• ✅ Toggle password (mostrar/ocultar contraseña)
• ✅ Social login con Microsoft
• ✅ Checkbox personalizado para "Recordarme"
• ✅ Fondo animado con gradientes
• ✅ Animaciones focus con glow effect y scale
• ✅ Código optimizado (36% menos líneas JavaScript)

⚡ Optimizaciones de Código (2025-12-03)

JavaScript (login.js)

Reducción: 107 → 68 líneas (36% menos código)

• ❌ Eliminadas validaciones redundantes (30 líneas):

  • Validación de email con regex → Se usa type="email" nativo de HTML5
  • Validación de campos vacíos → Se usa atributo required nativo
  • Mensajes alert() innecesarios → El navegador muestra sus propios mensajes

• ❌ Eliminados efectos focus en JavaScript (17 líneas):

  • Los efectos focus están implementados en CSS con pseudo-clase :focus
  • Selector incorrecto (.input-group vs .login__input-group)
  • CSS maneja mejor las transiciones visuales

• ✅ Simplificaciones:

  • Prevent default optimizado (de 6 → 1 línea)
  • Corrección selector botón Microsoft (.btn-microsoft → .login__btn-social--microsoft)

CSS (login.css)

Optimizaciones aplicadas:

• ❌ Propiedades redundantes eliminadas:

  • transform: scale(1) - Valor por defecto innecesario
  • font-family: var(--font-body) - Ya se hereda del body
  • cursor: pointer - En input invisible (opacity: 0)

• ❌ Duplicados innecesarios

• ✅ Animaciones añadidas:

  • Transiciones suaves en inputs (0.3s)
  • Efecto glow con doble box-shadow al hacer focus
  • Scale sutil del input (1.02) al enfocar
  • Label e icono se iluminan con color primario
  • Icono crece sutilmente (scale 1.1)

Beneficios Obtenidos

1. 🚀 Mejor rendimiento:

   • Menos código JavaScript ejecutándose
   • Aprovecha capacidades nativas del navegador
   • Menos event listeners

2. 🧹 Código más limpio:

   • Solo código necesario
   • Sin redundancias ni duplicaciones
   • Más fácil de mantener

3. ✨ Mejor UX:

   • Animaciones CSS más suaves que JavaScript
   • Validaciones nativas consistentes entre sitios
   • Efectos visuales modernos

4. 📚 Mejores prácticas:

   • HTML5 semántico con validación nativa
   • CSS3 para efectos visuales
   • JavaScript solo para lógica que lo requiere

📊 Campus Virtual (Dashboard)

• ✅ Sidebar navegable con 7 secciones
• ✅ Tarjetas de estadísticas con animaciones
• ✅ Gestión de cursos con barras de progreso
• ✅ Sistema de tareas con checkboxes funcionales
• ✅ Mini calendario interactivo
• ✅ Feed de actividad reciente
• ✅ Sistema de notificaciones
• ✅ Responsive completo con sidebar colapsable

🎨 Paleta de Colores (Brand XTART)

/* Gradiente Principal */
--primary-gradient: linear-gradient(
  135deg,
  #e91e63 0%,
  #9c27b0 50%,
  #2196f3 100%
);

/* Colores Sólidos */
--primary-color: #e91e63; /* Rosa */
--secondary-color: #9c27b0; /* Púrpura */
--accent-color: #2196f3; /* Azul */

🛠️ Tecnologías Utilizadas

Frontend Core

• HTML5 - Estructura semántica
• CSS3 - Estilos modulares con CSS Grid y Flexbox
• JavaScript (ES6+) - Lógica interactiva

Librerías y Frameworks

• Swiper.js v12 - Slider del hero con parallax
• Font Awesome 6.4.0 - Iconografía
• Google Fonts - Inter & Outfit

Metodologías y Patrones

• CSS Modular - Componentes separados
• BEM Naming - Nomenclatura consistente
• Mobile First - Diseño responsive
• Revealing Module Pattern - JavaScript componentes

📁 Estructura del Proyecto

ProyectoIntermodular/
├── index.html                      # Página principal
├── routes/
│   ├── login.html                  # Login campus virtual
│   └── dashboard.html              # Dashboard estudiante
├── styles/
│   ├── styles.css                  # Estilos globales + variables
│   └── components/
│       ├── hero.css                # Hero + Swiper
│       ├── cards.css               # Cards con glassmorphism
│       ├── grid.css                # Sistema de grids
│       ├── sections.css            # Secciones generales
│       ├── about.css               # Sección About
│       ├── programs.css            # Programas formativos
│       ├── facilities.css          # Instalaciones
│       ├── stats.css               # Estadísticas animadas
│       ├── contact.css             # Contacto y mapa
│       ├── animations.css          # Keyframes
│       ├── utilities.css           # Clases helper
│       ├── login.css               # Login page
│       └── dashboard.css           # Dashboard campus
├── js/
│   ├── components/
│   │   ├── navigation.js           # Navegación
│   │   ├── scroll.js               # Scroll effects
│   │   ├── animations.js           # Animaciones
│   │   └── interactions.js         # Interacciones
│   ├── utilities/
│   │   └── helpers.js              # Funciones helper
│   ├── main.js                     # JavaScript principal
│   ├── swiper.js                   # Configuración Swiper
│   ├── stats.js                    # Contador estadísticas
│   ├── login.js                    # Lógica de login
│   └── dashboard.js                # Funcionalidad dashboard
└── assets/
    └── images/
        ├── hero/                   # Imágenes del slider
        └── icons/                  # Logo y favicon

🚀 Instalación y Uso

Requisitos Previos

• Navegador web moderno (Chrome, Firefox, Edge, Safari)
• Servidor local (opcional): Live Server, XAMPP, o similar

Instalación

1. Clonar el repositorio

git clone https://github.com/tu-usuario/xtart-alcorcon.git
cd xtart-alcorcon

2. Abrir con servidor local

# Con Live Server (VS Code)
# Click derecho en index.html → "Open with Live Server"

# O con Python
python -m http.server 8000

# O con Node.js
npx http-server

3. Navegar

http://localhost:8000

Navegación del Sitio

1. Página Principal (index.html)
   ↓
2. Click "Campus Virtual" en navbar
   ↓
3. Login (routes/login.html)
   - Email: cualquier email
   - Password: cualquier contraseña
   ↓
4. Dashboard (routes/dashboard.html)
   - Cursos, tareas, calendario, etc.

🎯 Funcionalidades Implementadas

Sitio Web Principal

• Navegación fija con efecto blur
• Hero slider con 6 slides + parallax
• Sección About con features
• Tarjetas de programas formativos
• Galería de instalaciones con hover
• Estadísticas animadas al scroll
• Formulario de contacto
• Footer con redes sociales
• Scroll suave entre secciones
• Animaciones de entrada

Sistema de Login

• Validación de email
• Toggle password visibility
• Checkbox personalizado "Recordarme"
• Social login (Microsoft)
• Recuperación de contraseña
• Redirección a dashboard

Campus Virtual Dashboard

• Sidebar con navegación
• Tarjetas de estadísticas
• Lista de cursos con progreso
• Gestor de tareas pendientes
• Calendario mensual
• Feed de actividad
• Notificaciones
• Menú de usuario
• Sidebar responsive (mobile)

🎨 Características de Diseño

Glassmorphism

background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);

Gradientes Brand

• Botones primarios
• Texto destacado
• Íconos importantes
• Efectos hover

Animaciones

• Fade in up al scroll
• Hover scale en cards
• Progress bars animadas
• Slide transitions

📦 Componentes Modulares CSS

Ventajas de la arquitectura modular:

• ✅ Fácil mantenimiento
• ✅ Reutilización de código
• ✅ Carga eficiente
• ✅ Escalabilidad
• ✅ Trabajo en equipo sin conflictos

🔧 Personalización

Cambiar Colores del Brand

Edita en styles/styles.css:

:root {
  --primary-color: #TU_COLOR;
  --secondary-color: #TU_COLOR;
  --accent-color: #TU_COLOR;
}

Añadir Nuevos Componentes CSS

1. Crea styles/components/nuevo-componente.css
2. Añade en index.html:

<link rel="stylesheet" href="styles/components/nuevo-componente.css" />

Añadir Funcionalidad JavaScript

Crea módulos siguiendo el patrón:

const MiComponente = (function () {
  // Variables privadas

  function init() {
    // Inicialización
  }

  return { init };
})();

document.addEventListener("DOMContentLoaded", MiComponente.init);

🐛 Solución de Problemas

El slider no se muestra

• ✅ Verifica que Swiper CDN esté cargado
• ✅ Comprueba rutas de imágenes en hero.css
• ✅ Revisa consola del navegador

Estilos no se aplican

• ✅ Verifica orden de imports en HTML
• ✅ Fuerza recarga con Ctrl+Shift+R
• ✅ Revisa rutas relativas de CSS

Login no redirige

• ✅ Comprueba que login.js esté cargado
• ✅ Verifica ruta de dashboard.html
• ✅ Mira consola para errores JS

📄 Licencia

Este proyecto es un trabajo académico para el módulo de Desarrollo Web en Entorno Cliente (DWEC) del ciclo formativo de Administración de Sistemas Informáticos y Redes (ASIR).

👥 Créditos

• Desarrollo: Oscar Barahona, Alejandro Cuevas, Alvaro Lopez y Raul Yagüe
• Diseño: Basado en brand XTART
• Librerías: Swiper.js, Font Awesome, Google Fonts
• Centro: XTART Alcorcón

📞 Contacto

• 🌐 Web: www.xtart.es
• 📧 Email: info@xtart.es
• 📍 Dirección: Alcorcón, Madrid

---

⭐ Si te gusta este proyecto, dale una estrella! ⭐

Desarrollado usando HTML, CSS y JavaScript