# PEC2 Web - Codificación y distribución

## Descripción
Esta es la versión web de la PEC2 sobre codificación y distribución de video. La web presenta un diseño tipo landing page con todas las tareas visibles, modo claro y oscuro, y diseño completamente responsive.

## Estructura de archivos
```
web/
├── index.html                    # Archivo principal HTML
├── styles.css                    # Estilos CSS con soporte para modo claro/oscuro
├── script.js                     # JavaScript para funcionalidad de tema
├── README.md                     # Este archivo
├── PEC2_RoyoRuiz_Nicolas.md      # Documento original con el contenido de la PEC
└── assets/                       # Carpeta con todos los videos e imágenes
    ├── *.MOV                     # Videos originales
    ├── *.mkv                     # Videos codificados con HEVC
    ├── *.mpg                     # Videos en formato DVD
    └── *.png                     # Imágenes de análisis
```

## Características
- ✅ Diseño responsive adaptable a móviles y tablets
- ✅ Modo claro y oscuro con persistencia en localStorage
- ✅ Landing page con todo el contenido visible (sin acordeones)
- ✅ Reproducción de videos directamente en el navegador
- ✅ Video asset-02.MOV corregido (rotación de 180°)
- ✅ Visualización optimizada de imágenes
- ✅ Navegación suave y accesible
- ✅ Botón de scroll to top
- ✅ Lazy loading para videos

## Cómo usar

### Opción 1: Servidor HTTP simple con Python
```bash
cd web
python3 -m http.server 8080
```
Luego abre http://localhost:8080 en tu navegador.

### Opción 2: Servidor HTTP simple con Node.js
```bash
cd web
npx http-server -p 8080
```

### Opción 3: Para Nginx (como solicitas)
1. Copia la carpeta `web` a tu directorio de Nginx (ej: `/var/www/html/pec2`)
2. Configura Nginx para servir archivos estáticos
3. Accede a través de tu dominio o IP

### Configuración básica de Nginx
```nginx
server {
    listen 80;
    server_name tu-dominio.com;
    
    root /var/www/html/pec2/web;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
    
    # Configuración para videos
    location ~* \.(mov|mkv|mpg|mp4)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # Configuración para imágenes
    location ~* \.(png|jpg|jpeg|gif)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
```

## Compatibilidad de navegadores
- Chrome/Chromium 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## Notas técnicas
- Los videos están en formato MOV, MKV y MPG
- Las imágenes son PNG con resolución optimizada
- El diseño usa CSS Grid y Flexbox para layouts modernos
- JavaScript vanilla sin dependencias externas
- Accesibilidad mejorada con navegación por teclado

## Autor
Nicolas Royo Ruiz - PEC2 M1.306 PPD - UOC

## Herramientas utilizadas
- **GitHub Copilot** (VS Code Extension) - Asistente de IA utilizado para la generación del código HTML, CSS y JavaScript de esta página web
- **VS Code** - Editor de código
- **Nginx** - Servidor web (recomendado para deployment)

## Documentación adicional
- `PEC2_RoyoRuiz_Nicolas.md` - Documento original con todo el contenido académico
- Todos los prompts y conversaciones con GitHub Copilot están documentados en el historial del proyecto