├── portfolio
    ├── images
    │   ├── carmen.jpg
    │   └── hero-image.png
    ├── script.js
    ├── about.html
    ├── fonts.css
    ├── index.html
    └── styles.css
├── dia-1
    ├── script.js
    ├── README.md
    ├── ejercicios
    │   ├── ejercicio-1-figma.md
    │   ├── ejercicio-3-css-basico.md
    │   └── ejercicio-2-html.md
    ├── style.css
    ├── index.html
    └── teoria
    │   ├── 2-html-semantico.md
    │   ├── 3-css-fundamentos.md
    │   ├── 0-diseno-web.md
    │   ├── 2-html-semantico.html
    │   ├── 1-figma-fundamentos.html
    │   ├── 3-css-fundamentos.html
    │   ├── 0-teoria-completa.html
    │   └── 0-diseno-web.html
├── dia-2
    ├── ejercicios
    │   ├── ejercicio-5-animaciones.md
    │   ├── ejercicio-4-responsive.md
    │   └── ejercicio-6-deploy.md
    ├── README.md
    └── teoria
    │   ├── 5-deploy.md
    │   ├── 4-animaciones.md
    │   ├── 3-flexbox-grid.md
    │   ├── 5-deploy.html
    │   ├── 4-animaciones.html
    │   ├── 6-portfolio-template.html
    │   ├── 3-flexbox-grid.html
    │   └── 7-portfolio-template-v2.html
├── README.md
├── public
    └── vite.svg
├── style.css
├── styles
    └── main.css
└── index.html


/portfolio/images/carmen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carmenansio/workshop-portfolio/HEAD/portfolio/images/carmen.jpg


--------------------------------------------------------------------------------
/dia-1/script.js:
--------------------------------------------------------------------------------
1 | // Este archivo se utilizará para añadir interactividad
2 | console.log('¡Bienvenido al taller de diseño web!');


--------------------------------------------------------------------------------
/portfolio/images/hero-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carmenansio/workshop-portfolio/HEAD/portfolio/images/hero-image.png


--------------------------------------------------------------------------------
/portfolio/script.js:
--------------------------------------------------------------------------------
 1 | const header = document.querySelector('header');
 2 | 
 3 |     window.addEventListener('scroll', () => {
 4 |         if (window.scrollY > 50) {
 5 |             header.classList.add('scrolled');
 6 |         } else {
 7 |             header.classList.remove('scrolled');
 8 |         }
 9 |     });
10 |     


--------------------------------------------------------------------------------
/dia-1/README.md:
--------------------------------------------------------------------------------
 1 | # Día 1: Fundamentos de Diseño Web y HTML
 2 | 
 3 | ## 📚 Contenido
 4 | 
 5 | 1. Introducción al Diseño Web
 6 |    - Principios básicos de diseño
 7 |    - Wireframing con Figma
 8 |    - Diseño responsive
 9 | 
10 | 2. HTML Básico
11 |    - Estructura básica de una página
12 |    - Etiquetas principales
13 |    - Semántica HTML
14 | 
15 | ## 🎯 Ejercicios
16 | 
17 | Los ejercicios se encuentran en la carpeta `ejercicios/`


--------------------------------------------------------------------------------
/dia-2/ejercicios/ejercicio-5-animaciones.md:
--------------------------------------------------------------------------------
 1 | # Ejercicio 5: Animaciones Simples
 2 | 
 3 | ## 🎯 Objetivo
 4 | Añadir interactividad básica a tu portfolio.
 5 | 
 6 | ## 📝 Instrucciones
 7 | 
 8 | 1. Añade estas animaciones:
 9 |    - Hover en botones y enlaces
10 |    - Fade-in al cargar las secciones
11 |    - Transición suave en el menú móvil
12 |    - Hover en las tarjetas de proyectos
13 | 
14 | ## 💡 Tips
15 | - Mantén las animaciones sutiles
16 | - No más de 0.3s de duración
17 | - Usa transform y opacity para mejor rendimiento


--------------------------------------------------------------------------------
/dia-2/README.md:
--------------------------------------------------------------------------------
 1 | # Día 2: CSS Avanzado y Publicación
 2 | 
 3 | ## 📚 Contenido
 4 | 
 5 | 1. CSS Avanzado
 6 |    - Flexbox y Grid
 7 |    - Animaciones y transiciones
 8 |    - Media queries
 9 | 
10 | 2. Ejemplos de Portfolio
11 |    - [Portfolio Template Básico](teoria/6-portfolio-template.html)
12 |    - [Portfolio con shadcn/ui](teoria/6-portfolio-template-shadcn.html)
13 | 
14 | 3. Publicación
15 |    - Configuración de GitHub Pages
16 |    - Despliegue en Netlify
17 |    - Mantenimiento básico
18 | 
19 | ## 🎯 Ejercicios
20 | 
21 | Los ejercicios se encuentran en la carpeta `ejercicios/`


--------------------------------------------------------------------------------
/dia-2/ejercicios/ejercicio-4-responsive.md:
--------------------------------------------------------------------------------
 1 | # Ejercicio 4: Diseño Responsive
 2 | 
 3 | ## 🎯 Objetivo
 4 | Hacer que tu portfolio se vea bien en todos los dispositivos.
 5 | 
 6 | ## 📝 Instrucciones
 7 | 
 8 | 1. Añade media queries para:
 9 |    - Móvil (hasta 768px)
10 |    - Tablet (768px - 1024px)
11 |    - Desktop (1024px+)
12 | 
13 | 2. Ajusta:
14 |    - Tamaño de fuentes
15 |    - Layout de la navegación
16 |    - Disposición de proyectos
17 |    - Márgenes y padding
18 | 
19 | ## 💡 Tips
20 | - Prueba en diferentes dispositivos
21 | - Usa unidades relativas (rem, em, %)
22 | - Mobile-first approach


--------------------------------------------------------------------------------
/dia-1/ejercicios/ejercicio-1-figma.md:
--------------------------------------------------------------------------------
 1 | # Ejercicio 1: Wireframe en Figma
 2 | 
 3 | ## 🎯 Objetivo
 4 | Crear un wireframe básico para tu portafolio personal usando Figma.
 5 | 
 6 | ## 📝 Instrucciones
 7 | 
 8 | 1. Abre Figma y crea un nuevo proyecto
 9 | 2. Crea un frame para desktop (1440x900)
10 | 3. Diseña las siguientes secciones:
11 |    - Header con navegación
12 |    - Hero section
13 |    - Sección "Sobre Mí"
14 |    - Galería de proyectos
15 |    - Formulario de contacto
16 |    - Footer
17 | 
18 | ## ✨ Consejos
19 | - Usa formas básicas (rectángulos, círculos)
20 | - Mantén un diseño simple y limpio
21 | - Piensa en la jerarquía visual


--------------------------------------------------------------------------------
/dia-1/ejercicios/ejercicio-3-css-basico.md:
--------------------------------------------------------------------------------
 1 | # Ejercicio 3: Estilos CSS Básicos
 2 | 
 3 | ## 🎯 Objetivo
 4 | Dar estilo básico a tu portfolio usando CSS.
 5 | 
 6 | ## 📝 Instrucciones
 7 | 
 8 | 1. Define tu paleta de colores (máximo 3 colores principales)
 9 | 2. Estiliza las siguientes partes:
10 |    - Fondo y color de texto principal
11 |    - Navegación responsive
12 |    - Títulos y subtítulos
13 |    - Espaciado entre secciones
14 |    - Formulario de contacto
15 | 
16 | ## 🎨 Paletas Recomendadas
17 | - Minimalista: #ffffff, #000000, #4a90e2
18 | - Profesional: #f8f9fa, #212529, #0d6efd
19 | - Creativa: #ffffff, #ff6b6b, #339af0
20 | 
21 | ## 💡 Tips
22 | - Menos es más
23 | - Usa variables CSS para los colores
24 | - Mantén el contraste para la accesibilidad


--------------------------------------------------------------------------------
/dia-1/ejercicios/ejercicio-2-html.md:
--------------------------------------------------------------------------------
 1 | # Ejercicio 2: Estructura HTML del Portfolio
 2 | 
 3 | ## 🎯 Objetivo
 4 | Crear la estructura HTML básica de tu portfolio siguiendo el wireframe que diseñaste en Figma.
 5 | 
 6 | ## 📝 Instrucciones
 7 | 
 8 | 1. Abre el archivo `index.html` en tu editor
 9 | 2. Crea las siguientes secciones:
10 |    - Header con tu nombre/logo
11 |    - Sección "Hero" con una frase que te describa
12 |    - Sección "Sobre Mí" con un párrafo sobre ti
13 |    - Sección "Proyectos" (aunque aún no tengas, prepara la estructura)
14 |    - Sección "Contacto" con un formulario simple
15 |    - Footer con tus redes sociales
16 | 
17 | ## 💡 Tips
18 | - Usa etiquetas semánticas (`header`, `section`, `footer`)
19 | - No te preocupes por el diseño aún, solo por la estructura
20 | - Asegúrate de que el contenido tenga sentido sin estilos


--------------------------------------------------------------------------------
/dia-2/teoria/5-deploy.md:
--------------------------------------------------------------------------------
 1 | # Publicación y Mantenimiento
 2 | 
 3 | ## 1. Preparación para Producción
 4 | 
 5 | ### 1.1 Optimización
 6 | - Minificación de CSS/JS
 7 | - Optimización de imágenes
 8 | - Compresión de archivos
 9 | - Caché del navegador
10 | 
11 | ### 1.2 SEO Básico
12 | - Meta tags
13 | - Open Graph
14 | - Sitemap
15 | - Robots.txt
16 | 
17 | ## 2. Deployment
18 | 
19 | ### 2.1 Netlify
20 | - Ventajas
21 | - Configuración básica
22 | - Dominios personalizados
23 | - HTTPS automático
24 | 
25 | ### 2.2 Formularios
26 | - Configuración en Netlify
27 | - Validación
28 | - Spam protection
29 | - Notificaciones
30 | 
31 | ## 3. Mantenimiento
32 | 
33 | ### 3.1 Analytics
34 | - Google Analytics
35 | - Netlify Analytics
36 | - Métricas importantes
37 | 
38 | ### 3.2 Actualizaciones
39 | - Contenido
40 | - Dependencias
41 | - Seguridad
42 | - Backups


--------------------------------------------------------------------------------
/dia-1/style.css:
--------------------------------------------------------------------------------
 1 | /* Estilos base */
 2 | :root {
 3 |     --primary-color: #4a90e2;
 4 |     --text-color: #333;
 5 |     --background-color: #fff;
 6 | }
 7 | 
 8 | * {
 9 |     margin: 0;
10 |     padding: 0;
11 |     box-sizing: border-box;
12 | }
13 | 
14 | body {
15 |     font-family: 'Arial', sans-serif;
16 |     line-height: 1.6;
17 |     color: var(--text-color);
18 |     background-color: var(--background-color);
19 | }
20 | 
21 | /* Navegación */
22 | nav {
23 |     display: flex;
24 |     justify-content: space-between;
25 |     align-items: center;
26 |     padding: 1rem;
27 |     background-color: var(--primary-color);
28 | }
29 | 
30 | nav ul {
31 |     display: flex;
32 |     list-style: none;
33 | }
34 | 
35 | nav ul li a {
36 |     color: white;
37 |     text-decoration: none;
38 |     padding: 0.5rem 1rem;
39 | }
40 | 
41 | /* Secciones principales */
42 | section {
43 |     padding: 2rem;
44 |     max-width: 1200px;
45 |     margin: 0 auto;
46 | }
47 | 
48 | /* Footer */
49 | footer {
50 |     text-align: center;
51 |     padding: 1rem;
52 |     background-color: #f5f5f5;
53 | }


--------------------------------------------------------------------------------
/dia-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Mi Primera Página Web</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 |     <header>
13 |         <nav>
14 |             <img src="assets/logo.png" alt="Logo" class="logo">
15 |             <ul>
16 |                 <li><a href="#inicio">Inicio</a></li>
17 |                 <li><a href="#sobre-mi">Sobre Mí</a></li>
18 |                 <li><a href="#proyectos">Proyectos</a></li>
19 |                 <li><a href="#contacto">Contacto</a></li>
20 |             </ul>
21 |         </nav>
22 |     </header>
23 | 
24 |     <main>
25 |         <section id="inicio">
26 |             <h1>Bienvenidos a Mi Portafolio</h1>
27 |             <p>Aquí aprenderemos a crear una página web desde cero.</p>
28 |         </section>
29 |     </main>
30 | 
31 |     <footer>
32 |         <p>© 2024 Mi Portafolio. Todos los derechos reservados.</p>
33 |     </footer>
34 | 
35 |     <script src="script.js"></script>
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/dia-2/ejercicios/ejercicio-6-deploy.md:
--------------------------------------------------------------------------------
 1 | # Ejercicio 6: Publicación en GitHub Pages
 2 | 
 3 | ## 🎯 Objetivo
 4 | Publicar tu portfolio en internet usando GitHub Pages.
 5 | 
 6 | ## 📝 Instrucciones
 7 | 
 8 | 1. Crear un repositorio en GitHub
 9 |    - Nombre: `<tu-usuario>.github.io`
10 |    - Público
11 |    - Con README
12 | 
13 | 2. Subir tu código
14 |    ```bash
15 |    git init
16 |    git add .
17 |    git commit -m "Initial commit"
18 |    git branch -M main
19 |    git remote add origin https://github.com/<tu-usuario>/<tu-usuario>.github.io.git
20 |    git push -u origin main
21 |    ```
22 | 
23 | 3. Configurar GitHub Pages
24 |    - Ir a Settings > Pages
25 |    - Source: Deploy from a branch
26 |    - Branch: main
27 |    - Folder: / (root)
28 |    - Save
29 | 
30 | ## ✅ Checklist antes de publicar
31 | - Revisar todos los enlaces
32 | - Comprobar el responsive
33 | - Verificar que las imágenes cargan
34 | - Probar el formulario de contacto
35 | 
36 | ## 💡 Tips
37 | - Tu sitio estará disponible en `https://<tu-usuario>.github.io`
38 | - Los cambios se publican automáticamente al hacer push
39 | - Activa HTTPS por defecto
40 | - Añade metadatos para redes sociales


--------------------------------------------------------------------------------
/dia-1/teoria/2-html-semantico.md:
--------------------------------------------------------------------------------
 1 | # HTML Semántico y Accesibilidad
 2 | 
 3 | ## 1. HTML Semántico
 4 | 
 5 | ### 1.1 Etiquetas Estructurales
 6 | - `<header>`: Encabezado del sitio o sección
 7 | - `<nav>`: Navegación principal
 8 | - `<main>`: Contenido principal
 9 | - `<article>`: Contenido independiente
10 | - `<section>`: Sección temática
11 | - `<aside>`: Contenido relacionado
12 | - `<footer>`: Pie de página
13 | 
14 | ### 1.2 Beneficios
15 | - Mejor SEO
16 | - Mayor accesibilidad
17 | - Código más mantenible
18 | - Mejor compatibilidad con lectores de pantalla
19 | 
20 | ## 2. Accesibilidad Web
21 | 
22 | ### 2.1 Principios WCAG
23 | - **Perceptible**: Información visible para todos
24 | - **Operable**: Navegación accesible
25 | - **Comprensible**: Contenido claro
26 | - **Robusto**: Compatible con tecnologías asistivas
27 | 
28 | ### 2.2 Mejores Prácticas
29 | - Usar atributos alt en imágenes
30 | - Estructura jerárquica de encabezados
31 | - Contraste de color adecuado
32 | - Labels en formularios
33 | - ARIA roles cuando sea necesario
34 | 
35 | ### 2.3 Testing de Accesibilidad
36 | - Herramientas de validación
37 | - Navegación por teclado
38 | - Lectores de pantalla
39 | - Pruebas de contraste


--------------------------------------------------------------------------------
/dia-2/teoria/4-animaciones.md:
--------------------------------------------------------------------------------
 1 | # Animaciones y Transiciones en CSS
 2 | 
 3 | ## 1. Transiciones
 4 | 
 5 | ### 1.1 Propiedades
 6 | - `transition-property`
 7 | - `transition-duration`
 8 | - `transition-timing-function`
 9 | - `transition-delay`
10 | 
11 | ### 1.2 Timing Functions
12 | - `ease`
13 | - `linear`
14 | - `ease-in`
15 | - `ease-out`
16 | - `ease-in-out`
17 | - `cubic-bezier()`
18 | 
19 | ## 2. Transformaciones
20 | 
21 | ### 2.1 Tipos
22 | - `translate()`
23 | - `scale()`
24 | - `rotate()`
25 | - `skew()`
26 | 
27 | ### 2.2 Mejores Prácticas
28 | - Usar `transform` para animaciones
29 | - Combinar con `opacity`
30 | - Evitar animar propiedades costosas
31 | 
32 | ## 3. Animaciones
33 | 
34 | ### 3.1 Keyframes
35 | ```css
36 | @keyframes nombreAnimacion {
37 |   0% { /* estado inicial */ }
38 |   50% { /* estado intermedio */ }
39 |   100% { /* estado final */ }
40 | }
41 | ```
42 | 
43 | ### 3.2 Propiedades
44 | - `animation-name`
45 | - `animation-duration`
46 | - `animation-timing-function`
47 | - `animation-delay`
48 | - `animation-iteration-count`
49 | - `animation-direction`
50 | - `animation-fill-mode`
51 | 
52 | ### 3.3 Performance
53 | - Usar `will-change`
54 | - Preferir `transform` y `opacity`
55 | - Evitar animaciones complejas en móvil


--------------------------------------------------------------------------------
/dia-2/teoria/3-flexbox-grid.md:
--------------------------------------------------------------------------------
 1 | # Flexbox y Grid
 2 | 
 3 | ## 1. Flexbox
 4 | 
 5 | ### 1.1 Propiedades del Contenedor
 6 | - `display: flex`
 7 | - `flex-direction: row | column`
 8 | - `flex-wrap: wrap | nowrap`
 9 | - `justify-content: flex-start | center | space-between | space-around`
10 | - `align-items: stretch | center | flex-start | flex-end`
11 | 
12 | ### 1.2 Propiedades de los Items
13 | - `flex-grow`
14 | - `flex-shrink`
15 | - `flex-basis`
16 | - `align-self`
17 | - `order`
18 | 
19 | ## 2. Grid
20 | 
21 | ### 2.1 Propiedades del Contenedor
22 | - `display: grid`
23 | - `grid-template-columns`
24 | - `grid-template-rows`
25 | - `grid-template-areas`
26 | - `gap`
27 | - `grid-auto-flow`
28 | 
29 | ### 2.2 Propiedades de los Items
30 | - `grid-column`
31 | - `grid-row`
32 | - `grid-area`
33 | - `justify-self`
34 | - `align-self`
35 | 
36 | ### 2.3 Funciones y Unidades
37 | - `repeat()`
38 | - `minmax()`
39 | - `fr`
40 | - `auto-fit` / `auto-fill`
41 | 
42 | ## 3. Cuándo Usar Cada Uno
43 | 
44 | ### Flexbox
45 | - Layouts unidimensionales
46 | - Menús de navegación
47 | - Alineación de elementos en línea
48 | - Distribución de espacio flexible
49 | 
50 | ### Grid
51 | - Layouts bidimensionales
52 | - Diseños de página completos
53 | - Galerías de imágenes
54 | - Layouts complejos con áreas definidas


--------------------------------------------------------------------------------
/dia-1/teoria/3-css-fundamentos.md:
--------------------------------------------------------------------------------
 1 | # Fundamentos de CSS
 2 | 
 3 | ## 1. Selectores y Especificidad
 4 | 
 5 | ### 1.1 Tipos de Selectores
 6 | - Elemento: `p`, `div`, `span`
 7 | - Clase: `.mi-clase`
 8 | - ID: `#mi-id`
 9 | - Atributo: `[type="text"]`
10 | - Combinadores: `>`, `+`, `~`
11 | 
12 | ### 1.2 Especificidad
13 | 1. Estilos en línea
14 | 2. IDs
15 | 3. Clases, atributos y pseudo-clases
16 | 4. Elementos y pseudo-elementos
17 | 
18 | ## 2. Box Model
19 | 
20 | ### 2.1 Componentes
21 | - Content
22 | - Padding
23 | - Border
24 | - Margin
25 | 
26 | ### 2.2 Box-sizing
27 | - `content-box` vs `border-box`
28 | 
29 | ## 3. Layout
30 | 
31 | ### 3.1 Flexbox
32 | - **Propiedades del contenedor**:
33 |   - `display: flex`
34 |   - `flex-direction`
35 |   - `justify-content`
36 |   - `align-items`
37 | - **Propiedades de los items**:
38 |   - `flex-grow`
39 |   - `flex-shrink`
40 |   - `flex-basis`
41 | 
42 | ### 3.2 Grid
43 | - **Propiedades del contenedor**:
44 |   - `display: grid`
45 |   - `grid-template-columns`
46 |   - `grid-template-rows`
47 |   - `gap`
48 | - **Propiedades de los items**:
49 |   - `grid-column`
50 |   - `grid-row`
51 | 
52 | ## 4. Responsive Design
53 | 
54 | ### 4.1 Media Queries
55 | ```css
56 | @media (min-width: 768px) {
57 |   /* Estilos para tablet y desktop */
58 | }
59 | ```
60 | 
61 | ### 4.2 Unidades Relativas
62 | - `rem` vs `em`
63 | - `vh` y `vw`
64 | - Porcentajes


--------------------------------------------------------------------------------
/dia-1/teoria/0-diseno-web.md:
--------------------------------------------------------------------------------
 1 | # Fundamentos de Diseño Web
 2 | 
 3 | ## 1. Principios Básicos de Diseño
 4 | 
 5 | ### 1.1 Jerarquía Visual
 6 | - **Definición**: Organización de elementos por importancia
 7 | - **Elementos clave**:
 8 |   - Tamaño y peso de fuentes
 9 |   - Contraste
10 |   - Espaciado
11 |   - Posición en la página
12 | 
13 | ### 1.2 Balance y Composición
14 | - **Regla de los tercios**
15 | - **Simetría vs. Asimetría**
16 | - **Punto focal**
17 | - **Espacio en blanco**
18 | 
19 | ### 1.3 Color
20 | - **Psicología del color**:
21 |   - Azul: Profesionalismo, confianza
22 |   - Verde: Crecimiento, naturaleza
23 |   - Rojo: Energía, urgencia
24 |   - Negro: Elegancia, poder
25 | - **Esquemas de color**:
26 |   - Monocromático
27 |   - Complementario
28 |   - Análogo
29 |   - Tríada
30 | 
31 | ### 1.4 Tipografía
32 | - **Clasificaciones**:
33 |   - Serif vs. Sans-serif
34 |   - Display vs. Text
35 | - **Reglas básicas**:
36 |   - Máximo 2-3 fuentes
37 |   - Contraste entre títulos y texto
38 |   - Legibilidad primero
39 | 
40 | ## 2. Diseño Responsive
41 | 
42 | ### 2.1 Conceptos Básicos
43 | - **Viewport**
44 | - **Media queries**
45 | - **Unidades relativas (rem, em, vh, vw)**
46 | - **Breakpoints estándar**:
47 |   - Móvil: < 768px
48 |   - Tablet: 768px - 1024px
49 |   - Desktop: > 1024px
50 | 
51 | ### 2.2 Mobile First
52 | - **Ventajas**
53 | - **Mejores prácticas**
54 | - **Consideraciones de rendimiento**


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Curso Intensivo: Diseña y publica tu primera página web
 2 | 
 3 | Aprende los fundamentos de diseño web y construye tu propio portafolio en línea en solo dos sesiones intensivas.
 4 | 
 5 | ## 🎯 Lo que aprenderás
 6 | 
 7 | ### 🌟 Diseño con Figma
 8 | - Creación de wireframes y prototipos sencillos
 9 | - Aplicación de conceptos básicos de composición, colores y tipografías
10 | 
11 | ### 🌐 Fundamentos de HTML y CSS
12 | - Estructura de una página web y etiquetas más comunes
13 | - Cómo dar estilo a tu sitio con propiedades básicas de CSS
14 | 
15 | ### 🚀 Publicación en Hosting Gratuito
16 | - Descubre plataformas como GitHub Pages, Netlify o Vercel
17 | - Comparte tu nueva web con el mundo y aprende a realizar actualizaciones
18 | 
19 | ### 💡 Buenas Prácticas y Accesibilidad
20 | - Uso de etiquetas semánticas
21 | - Consejos para que tu página sea accesible para todos
22 | 
23 | ## 🕒 Metodología y Estructura
24 | - Sesiones intensivas (2 días): Cada día tendrá 3 horas
25 | - Hands-on: Construirás tu propia web paso a paso
26 | - Ejemplos reales: Verás demostraciones de páginas existentes
27 | - Publicación rápida: Al final, tendrás tu página lista y publicada
28 | 
29 | ## 🛠️ Requisitos
30 | - Cuenta gratuita en [Figma](https://figma.com)
31 | - Editor de texto (Visual Studio Code recomendado)
32 | - Cuenta en GitHub
33 | - Conexión a Internet estable
34 | - Navegador web actualizado
35 | - ¡Ganas de aprender y explorar! 🚀


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 3 |   line-height: 1.5;
 4 |   font-weight: 400;
 5 | 
 6 |   color-scheme: light dark;
 7 |   color: rgba(255, 255, 255, 0.87);
 8 |   background-color: #242424;
 9 | 
10 |   font-synthesis: none;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | a {
17 |   font-weight: 500;
18 |   color: #646cff;
19 |   text-decoration: inherit;
20 | }
21 | a:hover {
22 |   color: #535bf2;
23 | }
24 | 
25 | body {
26 |   margin: 0;
27 |   display: flex;
28 |   place-items: center;
29 |   min-width: 320px;
30 |   min-height: 100vh;
31 | }
32 | 
33 | h1 {
34 |   font-size: 3.2em;
35 |   line-height: 1.1;
36 | }
37 | 
38 | #app {
39 |   max-width: 1280px;
40 |   margin: 0 auto;
41 |   padding: 2rem;
42 |   text-align: center;
43 | }
44 | 
45 | .logo {
46 |   height: 6em;
47 |   padding: 1.5em;
48 |   will-change: filter;
49 |   transition: filter 300ms;
50 | }
51 | .logo:hover {
52 |   filter: drop-shadow(0 0 2em #646cffaa);
53 | }
54 | .logo.vanilla:hover {
55 |   filter: drop-shadow(0 0 2em #f7df1eaa);
56 | }
57 | 
58 | .card {
59 |   padding: 2em;
60 | }
61 | 
62 | .read-the-docs {
63 |   color: #888;
64 | }
65 | 
66 | button {
67 |   border-radius: 8px;
68 |   border: 1px solid transparent;
69 |   padding: 0.6em 1.2em;
70 |   font-size: 1em;
71 |   font-weight: 500;
72 |   font-family: inherit;
73 |   background-color: #1a1a1a;
74 |   cursor: pointer;
75 |   transition: border-color 0.25s;
76 | }
77 | button:hover {
78 |   border-color: #646cff;
79 | }
80 | button:focus,
81 | button:focus-visible {
82 |   outline: 4px auto -webkit-focus-ring-color;
83 | }
84 | 
85 | @media (prefers-color-scheme: light) {
86 |   :root {
87 |     color: #213547;
88 |     background-color: #ffffff;
89 |   }
90 |   a:hover {
91 |     color: #747bff;
92 |   }
93 |   button {
94 |     background-color: #f9f9f9;
95 |   }
96 | }
97 | 


--------------------------------------------------------------------------------
/portfolio/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>About - Carmen Ansio</title>
 8 |     <link rel="stylesheet" href="styles.css">
 9 |     <link rel="stylesheet" href="fonts.css">
10 |     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
11 | </head>
12 | 
13 | <body>
14 |     <header>
15 |         <nav class="container">
16 |             <div class="logo">
17 |                 <a href="index.html">Carmen Ansio</a>
18 |             </div>
19 |             <ul class="nav-links">
20 |                 <li><a href="about.html" class="active">About</a></li>
21 |                 <li><a href="index.html#projects">Projects</a></li>
22 |                 <li><a href="index.html#contact">Contact</a></li>
23 |             </ul>
24 |         </nav>
25 |     </header>
26 | 
27 |     <main>
28 |         <section id="about" class="container">
29 |             <div class="about-content">
30 |                 <div class="about-text">
31 |                     <h1>About me</h1>
32 |                     <p>
33 |                         Nisl arcu, scelerisque neque ut. Tincidunt amet, tempor duis tortor neque auctor dis ipsum.
34 |                         Pretium cras amet odio amet eleifend id sed cras sed. Aliquet risus posuere aliquet imperdiet
35 |                         sit.
36 |                     </p>
37 |                     <a href="#" class="btn btn-primary">LinkedIn</a>
38 |                 </div>
39 |                 <div class="about-image">
40 |                     <img src="images/carmen.jpg" alt="Carmen Ansio">
41 |                 </div>
42 |             </div>
43 |         </section>
44 |     </main>
45 | 
46 |     <footer id="contact">
47 |         <div class="container">
48 |             <div class="social-links">
49 |                 <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
50 |                 <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
51 |                 <a href="mailto:example@email.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
52 |             </div>
53 | 
54 |             <p class="copyright">Carmen Ansio 2025</p>
55 |         </div>
56 |     </footer>
57 | </body>
58 | 
59 | </html>


--------------------------------------------------------------------------------
/portfolio/fonts.css:
--------------------------------------------------------------------------------
 1 | /* Google Fonts */
 2 | @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&family=Playfair+Display:wght@400;700&display=swap');
 3 | 
 4 | /* Type styles */
 5 | body {
 6 |     font-family: 'Nunito', sans-serif;
 7 |     line-height: 1.6;
 8 | }
 9 | 
10 | h1, h2, h3, h4, h5, h6 {
11 |     font-family: 'Playfair Display', serif;
12 | }
13 | 
14 | h1 {
15 |     font-size: 3.5rem;
16 |     font-weight: 700;
17 |     line-height: 1.2;
18 |     margin-bottom: 1rem;
19 | }
20 | 
21 | h2 {
22 |     font-size: 2.5rem;
23 |     font-weight: 700;
24 |     margin-bottom: 2rem;
25 | }
26 | 
27 | h3 {
28 |     font-size: 1.8rem;
29 |     font-weight: 600;
30 | }
31 | 
32 | p {
33 |     font-size: 1rem;
34 |     font-weight: 400;
35 |     color: var(--color-text-light);
36 |     margin-bottom: 1rem;
37 | }
38 | 
39 | /* Buttons */
40 | .btn {
41 |     font-family: 'Nunito', sans-serif;
42 |     font-size: 1rem;
43 |     font-weight: 600;
44 | }
45 | 
46 | 
47 | /* 
48 | @font-face {
49 |     font-family: 'Playfair Display';
50 |     src: url('fonts/PlayfairDisplay-Regular.woff2') format('woff2'),
51 |          url('fonts/PlayfairDisplay-Regular.woff') format('woff');
52 |     font-weight: 400;
53 |     font-style: normal;
54 | }
55 | 
56 | @font-face {
57 |     font-family: 'Playfair Display';
58 |     src: url('fonts/PlayfairDisplay-Bold.woff2') format('woff2'),
59 |          url('fonts/PlayfairDisplay-Bold.woff') format('woff');
60 |     font-weight: 700;
61 |     font-style: normal;
62 | }
63 | 
64 | @font-face {
65 |     font-family: 'Nunito';
66 |     src: url('fonts/Nunito-Light.woff2') format('woff2'),
67 |          url('fonts/Nunito-Light.woff') format('woff');
68 |     font-weight: 300;
69 |     font-style: normal;
70 | }
71 | 
72 | @font-face {
73 |     font-family: 'Nunito';
74 |     src: url('fonts/Nunito-Regular.woff2') format('woff2'),
75 |          url('fonts/Nunito-Regular.woff') format('woff');
76 |     font-weight: 400;
77 |     font-style: normal;
78 | }
79 | 
80 | @font-face {
81 |     font-family: 'Nunito';
82 |     src: url('fonts/Nunito-SemiBold.woff2') format('woff2'),
83 |          url('fonts/Nunito-SemiBold.woff') format('woff');
84 |     font-weight: 600;
85 |     font-style: normal;
86 | }
87 | 
88 | body {
89 |     font-family: 'Nunito', sans-serif;
90 |     line-height: 1.6;
91 | }
92 | 
93 | h1, h2, h3, h4, h5, h6 {
94 |     font-family: 'Playfair Display', serif;
95 | } */


--------------------------------------------------------------------------------
/styles/main.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --primary-color: #0071e3;
  3 |     --secondary-color: #06c;
  4 |     --bg-color: #fbfbfd;
  5 |     --text-color: #1d1d1f;
  6 |     --section-bg: #ffffff;
  7 |     --gray-color: #86868b;
  8 |     --success: #00a651;
  9 |     --warning: #ff9f0a;
 10 |     --error: #ff3b30;
 11 | }
 12 | 
 13 | * {
 14 |     margin: 0;
 15 |     padding: 0;
 16 |     box-sizing: border-box;
 17 | }
 18 | 
 19 | body {
 20 |     font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
 21 |     line-height: 1.47059;
 22 |     color: var(--text-color);
 23 |     background: var(--bg-color);
 24 |     -webkit-font-smoothing: antialiased;
 25 | }
 26 | 
 27 | header {
 28 |     background: rgba(255, 255, 255, 0.8);
 29 |     backdrop-filter: blur(20px);
 30 |     -webkit-backdrop-filter: blur(20px);
 31 |     position: sticky;
 32 |     top: 0;
 33 |     z-index: 100;
 34 |     padding: 1rem;
 35 |     text-align: center;
 36 |     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 37 | }
 38 | 
 39 | h1, h2, h3 {
 40 |     font-weight: 600;
 41 |     letter-spacing: -0.015em;
 42 | }
 43 | 
 44 | h1 {
 45 |     font-size: 2rem;
 46 |     margin-bottom: 1rem;
 47 | }
 48 | 
 49 | h2 {
 50 |     font-size: 1.5rem;
 51 |     margin-bottom: 1.5rem;
 52 | }
 53 | 
 54 | h3 {
 55 |     font-size: 1.25rem;
 56 |     margin-bottom: 1rem;
 57 | }
 58 | 
 59 | p {
 60 |     margin-bottom: 1rem;
 61 |     color: var(--gray-color);
 62 | }
 63 | 
 64 | .section {
 65 |     background: var(--section-bg);
 66 |     padding: 2rem;
 67 |     border-radius: 18px;
 68 |     margin-bottom: 2rem;
 69 |     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 70 | }
 71 | 
 72 | .breadcrumb {
 73 |     position: fixed;
 74 |     top: 1rem;
 75 |     left: 1rem;
 76 |     z-index: 1000;
 77 |     display: flex;
 78 |     align-items: center;
 79 |     font-size: 12px;
 80 |     color: var(--gray-color);
 81 |     text-decoration: none;
 82 |     padding: 4px 8px;
 83 |     border-radius: 4px;
 84 |     background: rgba(255, 255, 255, 0.8);
 85 |     backdrop-filter: blur(20px);
 86 |     -webkit-backdrop-filter: blur(20px);
 87 |     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 88 | }
 89 | 
 90 | .breadcrumb:hover {
 91 |     background: rgba(255, 255, 255, 0.9);
 92 | }
 93 | 
 94 | .breadcrumb::before {
 95 |     content: "←";
 96 |     margin-right: 6px;
 97 |     font-size: 14px;
 98 | }
 99 | 
100 | code {
101 |     font-family: 'SF Mono', monospace;
102 |     background: rgba(0, 0, 0, 0.05);
103 |     padding: 0.2rem 0.4rem;
104 |     border-radius: 4px;
105 |     font-size: 0.9em;
106 | }
107 | 
108 | .demo-grid {
109 |     display: grid;
110 |     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
111 |     gap: 2rem;
112 |     margin: 2rem 0;
113 | }
114 | 
115 | .demo-item {
116 |     background: var(--section-bg);
117 |     padding: 1.5rem;
118 |     border-radius: 12px;
119 |     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
120 | }
121 | 
122 | /* Base styles for mobile */
123 | .container {
124 |     width: 100%;
125 |     padding: 1rem;
126 | }
127 | 
128 | /* Tablet and up */
129 | @media (min-width: 768px) {
130 |     .container {
131 |         padding: 2rem;
132 |         margin: 0 auto;
133 |         width: 90%;
134 |     }
135 | 
136 |     h1 {
137 |         font-size: 2.5rem;
138 |     }
139 | 
140 |     h2 {
141 |         font-size: 2rem;
142 |     }
143 | }
144 | 
145 | /* Desktop and up */
146 | @media (min-width: 1024px) {
147 |     .container {
148 |         max-width: 980px;
149 |     }
150 | 
151 |     h1 {
152 |         font-size: 3rem;
153 |     }
154 | 
155 |     h2 {
156 |         font-size: 2.5rem;
157 |     }
158 | }


--------------------------------------------------------------------------------
/portfolio/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Carmen Ansio - Portfolio</title>
  8 |     <link rel="stylesheet" href="styles.css">
  9 |     <link rel="stylesheet" href="fonts.css">
 10 |     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
 11 | </head>
 12 | 
 13 | <body>
 14 |     <header>
 15 |         <nav class="container">
 16 |             <div class="logo">
 17 |                 <a href="index.html">Carmen Ansio</a>
 18 |             </div>
 19 |             <ul class="nav-links">
 20 |                 <li><a href="about.html">About</a></li>
 21 |                 <li><a href="#projects">Projects</a></li>
 22 |                 <li><a href="#contact">Contact</a></li>
 23 |             </ul>
 24 |         </nav>
 25 |     </header>
 26 | 
 27 |     <main>
 28 |         <section id="hero" class="container">
 29 |             <div class="hero-content">
 30 |                 <span class="role">DESIGN ENGINEER</span>
 31 |                 <h1>Hello, my name<br>is Carmen Ansio</h1>
 32 |                 <p>Short text with details about you, what you do or your professional career. You can add more
 33 |                     information on the about page.</p>
 34 |                 <div class="cta-buttons">
 35 |                     <a href="#projects" class="btn btn-primary">Projects</a>
 36 |                     <a href="#" class="btn btn-outline">LinkedIn</a>
 37 |                 </div>
 38 |             </div>
 39 |             <div class="hero-image">
 40 |                 <img src="images/hero-image.png" alt="Carmen Avatar">
 41 |             </div>
 42 |         </section>
 43 | 
 44 |         <section id="projects" class="container">
 45 |             <h2 class="project-title">Projects</h2>
 46 |             <div class="project-grid">
 47 |                 <article class="project-card">
 48 |                     <div class="project-content">
 49 |                         <h3>Project Name</h3>
 50 |                         <p>I created this personal project in order to show how to create an interface in Figma using a
 51 |                             portfolio as an example.</p>
 52 |                         <a href="#" class="btn btn-outline">View Project</a>
 53 |                     </div>
 54 |                     <div class="project-image">
 55 |                         <img src="https://images.unsplash.com/photo-1603988363607-e1e4a66962c6?w=800&auto=format&fit=crop&q=60"
 56 |                             alt="Project Image">
 57 |                     </div>
 58 |                 </article>
 59 | 
 60 |                 <article class="project-card reverse">
 61 |                     <div class="project-content">
 62 |                         <h3>Project Name</h3>
 63 |                         <p>What was your role, your deliverables, if the project was personal, freelancing.</p>
 64 |                         <a href="#" class="btn btn-outline">View Project</a>
 65 |                     </div>
 66 |                     <div class="project-image">
 67 |                         <img src="https://images.unsplash.com/photo-1603988363607-e1e4a66962c6?w=800&auto=format&fit=crop&q=60"
 68 |                             alt="Project Image">
 69 |                     </div>
 70 |                 </article>
 71 | 
 72 |                 <article class="project-card">
 73 |                     <div class="project-content">
 74 |                         <h3>Project Name</h3>
 75 |                         <p>You can also add in this description the type of the project, if it was for web, mobile,
 76 |                             electron.</p>
 77 |                         <a href="#" class="btn btn-outline">View Project</a>
 78 |                     </div>
 79 |                     <div class="project-image">
 80 |                         <img src="https://images.unsplash.com/photo-1603988363607-e1e4a66962c6?w=800&auto=format&fit=crop&q=60"
 81 |                             alt="Project Image">
 82 |                     </div>
 83 |                 </article>
 84 |             </div>
 85 |         </section>
 86 | 
 87 |     </main>
 88 | 
 89 |     <footer id="contact">
 90 |         <div class="container">
 91 |             <div class="social-links">
 92 |                 <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
 93 |                 <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
 94 |                 <a href="mailto:example@email.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
 95 |             </div>
 96 | 
 97 |             <p class="copyright">Carmen Ansio 2025</p>
 98 |         </div>
 99 |     </footer>
100 |     <script src="script.js"></script>
101 | </body>
102 | 
103 | </html>


--------------------------------------------------------------------------------
/dia-1/teoria/2-html-semantico.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>HTML Semántico y Accesibilidad</title>
  8 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap">
  9 |     <link rel="stylesheet" href="../../styles/main.css">
 10 |     <style>
 11 |         .tag-example {
 12 |             background: rgba(0, 0, 0, 0.05);
 13 |             padding: 1.5rem;
 14 |             border-radius: 12px;
 15 |             border-left: 4px solid var(--primary-color);
 16 |             margin: 1.5rem 0;
 17 |             font-family: 'SF Mono', monospace;
 18 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 19 |         }
 20 | 
 21 |         .tag-example code {
 22 |             display: block;
 23 |             line-height: 1.8;
 24 |             color: var(--text-color);
 25 |         }
 26 | 
 27 |         .accessibility-demo {
 28 |             margin: 2rem 0;
 29 |             padding: 1.5rem;
 30 |             background: var(--section-bg);
 31 |             border-radius: 12px;
 32 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 33 |         }
 34 | 
 35 |         .bad-contrast {
 36 |             color: var(--gray-color);
 37 |             background: var(--section-bg);
 38 |             padding: 1rem;
 39 |             border-radius: 8px;
 40 |             margin-bottom: 1rem;
 41 |             border: 1px solid rgba(0, 0, 0, 0.1);
 42 |         }
 43 | 
 44 |         .good-contrast {
 45 |             color: var(--text-color);
 46 |             background: var(--section-bg);
 47 |             padding: 1rem;
 48 |             border-radius: 8px;
 49 |             border: 1px solid rgba(0, 0, 0, 0.1);
 50 |         }
 51 | 
 52 |         .form-demo {
 53 |             margin: 2rem 0;
 54 |             padding: 2rem;
 55 |             background: var(--section-bg);
 56 |             border-radius: 12px;
 57 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 58 |         }
 59 | 
 60 |         .form-demo label {
 61 |             display: block;
 62 |             margin-bottom: 0.5rem;
 63 |             color: var(--text-color);
 64 |             font-weight: 500;
 65 |         }
 66 | 
 67 |         .form-demo input {
 68 |             width: 100%;
 69 |             padding: 0.8rem;
 70 |             margin-bottom: 1rem;
 71 |             border: 1px solid rgba(0, 0, 0, 0.1);
 72 |             border-radius: 8px;
 73 |             font-family: inherit;
 74 |             transition: all 0.2s ease;
 75 |         }
 76 | 
 77 |         .form-demo input:focus {
 78 |             outline: none;
 79 |             border-color: var(--primary-color);
 80 |             box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
 81 |         }
 82 | 
 83 |         .demo-grid {
 84 |             display: grid;
 85 |             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 86 |             gap: 2rem;
 87 |             margin: 2rem 0;
 88 |         }
 89 | 
 90 |         .demo-item {
 91 |             background: var(--section-bg);
 92 |             padding: 1.5rem;
 93 |             border-radius: 12px;
 94 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 95 |             transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 96 |         }
 97 | 
 98 |         .demo-item:hover {
 99 |             transform: translateY(-4px);
100 |             box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1);
101 |         }
102 | 
103 |         @media (max-width: 768px) {
104 | 
105 |             .tag-example,
106 |             .accessibility-demo,
107 |             .form-demo {
108 |                 padding: 1rem;
109 |             }
110 |         }
111 |     </style>
112 | </head>
113 | 
114 | <body>
115 |     <a href="../../index.html" class="breadcrumb">Inicio</a>
116 | 
117 |     <div class="container">
118 |         <header>
119 |             <h3>HTML Semántico y Accesibilidad</h3>
120 |             <p>Aprende a crear sitios web accesibles y bien estructurados</p>
121 |         </header>
122 | 
123 |         <main>
124 |             <section class="section">
125 |                 <h3>Estructura Básica</h3>
126 |                 <div class="tag-example">
127 |                     <code>
128 |                         &lt;header&gt;<br>
129 |                         &lt;nav&gt;<br>
130 |                         &lt;main&gt;<br>
131 |                         &lt;article&gt;<br>
132 |                         &lt;section&gt;<br>
133 |                         &lt;aside&gt;<br>
134 |                         &lt;footer&gt;
135 |                     </code>
136 |                 </div>
137 |             </section>
138 | 
139 |             <section class="section">
140 |                 <h3>Accesibilidad</h3>
141 |                 <div class="accessibility-demo">
142 |                     <h3>Ejemplos de Contraste</h3>
143 |                     <div class="bad-contrast">❌ Texto con mal contraste</div>
144 |                     <div class="good-contrast">✅ Texto con buen contraste</div>
145 |                 </div>
146 | 
147 |                 <div class="form-demo">
148 |                     <h3>Formulario Accesible</h3>
149 |                     <form>
150 |                         <div>
151 |                             <label for="nombre">Nombre:</label>
152 |                             <input type="text" id="nombre" name="nombre" aria-label="Ingresa tu nombre"
153 |                                 placeholder="Tu nombre">
154 |                         </div>
155 |                         <div>
156 |                             <label for="email">Email:</label>
157 |                             <input type="email" id="email" name="email" aria-label="Ingresa tu email"
158 |                                 placeholder="tu@email.com">
159 |                         </div>
160 |                     </form>
161 |                 </div>
162 |             </section>
163 | 
164 |             <section class="section">
165 |                 <h3>Mejores Prácticas</h3>
166 |                 <div class="demo-grid">
167 |                     <div class="demo-item">
168 |                         <h3>Etiquetas Semánticas</h3>
169 |                         <p>Usa elementos que describan su contenido</p>
170 |                     </div>
171 |                     <div class="demo-item">
172 |                         <h3>Atributos ARIA</h3>
173 |                         <p>Mejora la accesibilidad con roles y estados</p>
174 |                     </div>
175 |                     <div class="demo-item">
176 |                         <h3>Navegación por Teclado</h3>
177 |                         <p>Asegura que todo sea accesible sin ratón</p>
178 |                     </div>
179 |                 </div>
180 |             </section>
181 |         </main>
182 |     </div>
183 | </body>
184 | 
185 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Curso de Diseño Web</title>
  8 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
  9 |     <link rel="stylesheet" href="styles/main.css">
 10 |     <style>
 11 |         .days-grid {
 12 |             display: grid;
 13 |             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 14 |             gap: 2rem;
 15 |             margin: 2rem 0;
 16 |         }
 17 | 
 18 |         .day-card {
 19 |             background: var(--section-bg);
 20 |             border-radius: 12px;
 21 |             padding: 2rem;
 22 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 23 |             transition: transform 0.3s ease, box-shadow 0.3s ease;
 24 |         }
 25 | 
 26 |         .day-card:hover {
 27 |             transform: translateY(-4px);
 28 |             box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1);
 29 |         }
 30 | 
 31 |         .topics-list {
 32 |             margin-top: 1.5rem;
 33 |             list-style: none;
 34 |         }
 35 | 
 36 |         .topics-list li {
 37 |             margin-bottom: 0.75rem;
 38 |             padding-left: 1.5rem;
 39 |             position: relative;
 40 |         }
 41 | 
 42 |         .topics-list li::before {
 43 |             content: "→";
 44 |             position: absolute;
 45 |             left: 0;
 46 |             color: var(--primary-color);
 47 |         }
 48 | 
 49 |         .link-list {
 50 |             margin-top: 1rem;
 51 |             padding-top: 1rem;
 52 |             border-top: 1px solid rgba(0, 0, 0, 0.1);
 53 |         }
 54 | 
 55 |         .link-list a {
 56 |             display: block;
 57 |             color: var(--primary-color);
 58 |             text-decoration: none;
 59 |             padding: 0.5rem 0;
 60 |             transition: color 0.3s ease;
 61 |         }
 62 | 
 63 |         .link-list a:hover {
 64 |             color: var(--secondary-color);
 65 |         }
 66 |     </style>
 67 | </head>
 68 | 
 69 | <body>
 70 |     <div class="container">
 71 |         <header>
 72 |             <h3>Diseña y construye tu portfolio</h3>
 73 |         </header>
 74 | 
 75 |         <main>
 76 | 
 77 |             <div class="days-grid">
 78 |                 <!-- Día 1 -->
 79 |                 <div class="day-card">
 80 |                     <h3>Día 1: Fundamentos diseño Web y HTML</h3>
 81 |                     <ul class="topics-list">
 82 |                         <li>Principios básicos de diseño</li>
 83 |                         <li>Wireframing con Figma</li>
 84 |                         <li>HTML semántico</li>
 85 |                         <li>Accesibilidad web</li>
 86 |                     </ul>
 87 |                     <div class="link-list">
 88 |                         <a href="dia-1/teoria/0-teoria-completa.html">Ver
 89 |                             Roadmap</a>
 90 |                         <a href="dia-1/teoria/0-diseno-web.html">Fundamentos de diseño web</a>
 91 |                         <a href="dia-1/teoria/1-figma-fundamentos.html">Fundamentos de Figma</a>
 92 |                         <a href="dia-1/teoria/2-html-semantico.html">HTML semántico</a>
 93 |                         <a href="dia-1/teoria/3-css-fundamentos.html">Fundamentos CSS</a>
 94 |                     </div>
 95 |                 </div>
 96 | 
 97 |                 <!-- Día 2 -->
 98 |                 <div class="day-card">
 99 |                     <h3>Día 2: CSS Avanzado y publicación</h3>
100 |                     <ul class="topics-list">
101 |                         <li>Flexbox y Grid</li>
102 |                         <li>Animaciones y transiciones</li>
103 |                         <li>Diseño responsive</li>
104 |                         <li>Publicación y mantenimiento</li>
105 |                     </ul>
106 |                     <div class="link-list">
107 |                         <a href="dia-2/teoria/3-flexbox-grid.html">Flexbox y Grid</a>
108 |                         <a href="dia-2/teoria/4-animaciones.html">Animaciones CSS</a>
109 |                         <a href="dia-2/teoria/5-deploy.html">Publicación</a>
110 |                         <a href="dia-2/teoria/6-portfolio-template.html">Portfolio v1</a>
111 |                         <a href="dia-2/teoria/7-portfolio-template-v2.html">Portfolio v2</a>
112 |                         <a href="https://carmenansio.github.io/portfolio-template/">Portfolio v2 Publicado - Github
113 |                             Pages</a>
114 | 
115 |                     </div>
116 |                 </div>
117 | 
118 |                 <section class="section">
119 |                     <h3>Material</h3>
120 |                     <ul class="topics-list">
121 |                         <li><a href="https://github.com/carmenansio/workshop-portfolio" target="_blank"
122 |                                 rel="noopener">Repo Material Clase</a>
123 |                         </li>
124 |                         <li><a href="portfolio/index.html" target="_blank" rel="noopener">Portfolio Figma</a>
125 |                         </li>
126 |                         <li><a href="https://carmenansio.github.io/portfolio-figma/" target="_blank"
127 |                                 rel="noopener">Portfolio Publicado - Github Pages</a>
128 |                         </li>
129 |                         <li><a href="https://www.figma.com/community/file/1470557630236757316" target="_blank"
130 |                                 rel="noopener">Clonar archivo figma Community - Carmen
131 |                                 Ansio</a>
132 |                         </li>
133 |                     </ul>
134 |                 </section>
135 | 
136 |                 <section class="section">
137 |                     <h3>Recursos adicionales</h3>
138 |                     <ul class="topics-list">
139 |                         <li><a href="https://figma.com" target="_blank" rel="noopener">Figma - Herramienta de diseño</a>
140 |                         </li>
141 |                         <li><a href="https://ui.shadcn.com" target="_blank" rel="noopener">shadcn/ui - Componentes de
142 |                                 UI</a>
143 |                         </li>
144 |                         <li><a href="https://tailwindcss.com" target="_blank" rel="noopener">Tailwind CSS - Framework
145 |                                 CSS</a></li>
146 |                         <li><a href="https://recursoscosmicos.com" target="_blank" rel="noopener">Recursos Cósmicos</a>
147 |                         </li>
148 |                         <li><a href="https://htmlrev.com/" target="_blank" rel="noopener">Plantillas gratis HTML</a>
149 |                         </li>
150 |                     </ul>
151 |                 </section>
152 |         </main>
153 | 
154 |         <footer>
155 |             <p>© 2025 Curso de diseño web. Todos los derechos reservados. <a href="https://carmenansio.com"
156 |                     target="_blank" rel="noopener">Carmen Ansio</a></p>
157 |         </footer>
158 |     </div>
159 | </body>
160 | 
161 | </html>


--------------------------------------------------------------------------------
/dia-2/teoria/5-deploy.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Publicación y Mantenimiento</title>
  8 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap">
  9 |     <link rel="stylesheet" href="../../styles/main.css">
 10 |     <style>
 11 |         .checklist {
 12 |             list-style: none;
 13 |             padding: 0;
 14 |             margin: 2rem 0;
 15 |         }
 16 | 
 17 |         .checklist li {
 18 |             margin-bottom: 1rem;
 19 |             padding: 1rem;
 20 |             background: var(--section-bg);
 21 |             border-radius: 12px;
 22 |             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 23 |             display: flex;
 24 |             align-items: center;
 25 |         }
 26 | 
 27 |         .checklist li::before {
 28 |             content: '✓';
 29 |             color: var(--success);
 30 |             margin-right: 1rem;
 31 |             font-weight: bold;
 32 |         }
 33 | 
 34 |         .status-indicator {
 35 |             display: inline-block;
 36 |             width: 12px;
 37 |             height: 12px;
 38 |             border-radius: 50%;
 39 |             margin-right: 8px;
 40 |         }
 41 | 
 42 |         .status-success {
 43 |             background-color: var(--success);
 44 |         }
 45 | 
 46 |         .status-warning {
 47 |             background-color: var(--warning);
 48 |         }
 49 | 
 50 |         .status-error {
 51 |             background-color: var(--error);
 52 |         }
 53 | 
 54 |         .deployment-steps {
 55 |             counter-reset: step;
 56 |             list-style: none;
 57 |             padding: 0;
 58 |             margin: 2rem 0;
 59 |         }
 60 | 
 61 |         .deployment-steps li {
 62 |             margin-bottom: 1.5rem;
 63 |             padding: 1.5rem 1.5rem 1.5rem 4rem;
 64 |             background: var(--section-bg);
 65 |             border-radius: 12px;
 66 |             position: relative;
 67 |             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 68 |         }
 69 | 
 70 |         .deployment-steps li::before {
 71 |             counter-increment: step;
 72 |             content: counter(step);
 73 |             position: absolute;
 74 |             left: 1rem;
 75 |             width: 2rem;
 76 |             height: 2rem;
 77 |             background: var(--primary-color);
 78 |             color: white;
 79 |             border-radius: 50%;
 80 |             display: flex;
 81 |             align-items: center;
 82 |             justify-content: center;
 83 |             font-weight: bold;
 84 |         }
 85 | 
 86 |         .meta-tags {
 87 |             background: var(--section-bg);
 88 |             padding: 1.5rem;
 89 |             border-radius: 12px;
 90 |             font-family: 'SF Mono', monospace;
 91 |             margin: 1.5rem 0;
 92 |             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 93 |             border-left: 4px solid var(--primary-color);
 94 |         }
 95 | 
 96 |         .meta-tags code {
 97 |             display: block;
 98 |             line-height: 1.8;
 99 |             color: var(--text-color);
100 |         }
101 | 
102 |         .status-grid {
103 |             display: grid;
104 |             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
105 |             gap: 1.5rem;
106 |             margin: 2rem 0;
107 |         }
108 | 
109 |         .status-card {
110 |             background: var(--section-bg);
111 |             padding: 1.5rem;
112 |             border-radius: 12px;
113 |             display: flex;
114 |             align-items: center;
115 |             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
116 |         }
117 | 
118 |         .code-snippet {
119 |             background: rgba(0, 0, 0, 0.05);
120 |             padding: 1.5rem;
121 |             border-radius: 12px;
122 |             margin-top: 1rem;
123 |             font-family: 'SF Mono', monospace;
124 |             border-left: 4px solid var(--primary-color);
125 |         }
126 | 
127 |         .code-snippet code {
128 |             display: block;
129 |             white-space: pre;
130 |             overflow-x: auto;
131 |             background: none;
132 |             padding: 0;
133 |         }
134 |     </style>
135 | </head>
136 | 
137 | <body>
138 |     <a href="../../index.html" class="breadcrumb">Inicio</a>
139 | 
140 |     <div class="container">
141 |         <header>
142 |             <h3>Publicación y Mantenimiento</h3>
143 |             <p>Guía práctica para publicar y mantener tu sitio web</p>
144 |         </header>
145 | 
146 |         <main>
147 |             <section class="section">
148 |                 <h3>Preparación para Producción</h3>
149 |                 <ul class="checklist">
150 |                     <li>Minificación de CSS/JS</li>
151 |                     <li>Optimización de imágenes</li>
152 |                     <li>Compresión de archivos</li>
153 |                     <li>Configuración de caché</li>
154 |                 </ul>
155 |                 <div class="code-snippet">
156 |                     <code>// Ejemplo de configuración de caché en .htaccess
157 | &lt;IfModule mod_expires.c&gt;
158 |     ExpiresActive On
159 |     ExpiresByType image/jpg "access plus 1 year"
160 |     ExpiresByType image/jpeg "access plus 1 year"
161 |     ExpiresByType image/png "access plus 1 year"
162 |     ExpiresByType text/css "access plus 1 month"
163 |     ExpiresByType text/javascript "access plus 1 month"
164 | &lt;/IfModule&gt;</code>
165 |                 </div>
166 | 
167 |                 <h3>Meta Tags Esenciales</h3>
168 |                 <div class="meta-tags">
169 |                     <code>&lt;meta name="description" content="..."&gt;
170 | &lt;meta name="keywords" content="..."&gt;
171 | &lt;meta property="og:title" content="..."&gt;
172 | &lt;meta property="og:description" content="..."&gt;</code>
173 |                 </div>
174 |             </section>
175 | 
176 |             <section class="section">
177 |                 <h3>Proceso de Deployment</h3>
178 |                 <ol class="deployment-steps">
179 |                     <li>Preparar archivos para producción</li>
180 |                     <li>Configurar repositorio en GitHub</li>
181 |                     <li>Configurar GitHub Pages</li>
182 |                     <li>Configurar dominio personalizado</li>
183 |                     <li>Verificar despliegue</li>
184 |                 </ol>
185 |                 <div class="code-snippet">
186 |                     <code>// Comandos básicos de Git para deployment
187 | git init
188 | git add .
189 | git commit -m "Initial commit"
190 | git branch -M main
191 | git remote add origin https://github.com/usuario/repo.git
192 | git push -u origin main</code>
193 |                 </div>
194 |             </section>
195 | 
196 |             <section class="section">
197 |                 <h3>Monitoreo</h3>
198 |                 <div class="status-grid">
199 |                     <div class="status-card">
200 |                         <span class="status-indicator status-success"></span>
201 |                         <span>Sitio en línea</span>
202 |                     </div>
203 |                     <div class="status-card">
204 |                         <span class="status-indicator status-warning"></span>
205 |                         <span>Rendimiento</span>
206 |                     </div>
207 |                     <div class="status-card">
208 |                         <span class="status-indicator status-error"></span>
209 |                         <span>Errores 404</span>
210 |                     </div>
211 |                 </div>
212 |                 <div class="code-snippet">
213 |                     <code>// Ejemplo de script de monitoreo básico
214 | const checkStatus = async (url) => {
215 |     try {
216 |         const response = await fetch(url);
217 |         return response.status === 200;
218 |     } catch (error) {
219 |         return false;
220 |     }
221 | };</code>
222 |                 </div>
223 |             </section>
224 |         </main>
225 |     </div>
226 | </body>
227 | 
228 | </html>


--------------------------------------------------------------------------------
/portfolio/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --color-primary: #FFD233;
  3 |     --color-text: #333333;
  4 |     --color-text-light: #666666;
  5 |     --color-background: #FFFFFF;
  6 | }
  7 | 
  8 | * {
  9 |     margin: 0;
 10 |     padding: 0;
 11 |     box-sizing: border-box;
 12 | }
 13 | 
 14 | html, body {
 15 |     height: 100%;
 16 | }
 17 | 
 18 | body {
 19 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 20 |     color: var(--color-text);
 21 |     line-height: 1.5;
 22 |     background-color: var(--color-background);
 23 | }
 24 | 
 25 | .container {
 26 |     max-width: 1200px;
 27 |     margin: 0 auto;
 28 |     padding: 0 2rem;
 29 | }
 30 | 
 31 | /* Header */
 32 | header {
 33 |     position: sticky;
 34 |     top: 0;
 35 |     z-index: 100;
 36 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 37 |     backdrop-filter: blur(10px);
 38 |     -webkit-backdrop-filter: blur(10px);
 39 |     padding: 1rem 0;
 40 |     transition: background-color 0.3s ease, box-shadow 0.3s ease;
 41 | }
 42 | 
 43 | header.scrolled {
 44 |     background-color: rgba(255, 255, 255, 0.95);
 45 |     box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
 46 | }
 47 | 
 48 | nav {
 49 |     display: flex;
 50 |     justify-content: space-between;
 51 |     align-items: center;
 52 | }
 53 | 
 54 | .logo {
 55 |     font-size: 1.25rem;
 56 |     font-weight: 500;
 57 | }
 58 | .logo a {
 59 |     text-decoration: none;
 60 | 
 61 |     &:visited {
 62 |         color: var(--color-text);
 63 |     }
 64 | }
 65 | 
 66 | .nav-links {
 67 |     display: flex;
 68 |     gap: 2rem;
 69 |     list-style: none;
 70 | }
 71 | 
 72 | .nav-links a {
 73 |     text-decoration: none;
 74 |     color: var(--color-text);
 75 |     position: relative;
 76 |     padding: 0.5rem 0;
 77 | }
 78 | 
 79 | .nav-links a.active {
 80 |     border-bottom: 2px solid var(--color-primary);
 81 | }
 82 | 
 83 | .nav-links a:hover {
 84 |     color: var(--color-primary);
 85 | }
 86 | 
 87 | /* Hero Section */
 88 | #hero {
 89 |     text-align: center;
 90 |     gap: 4rem;
 91 |     min-height: 60vh;
 92 |     display: flex;
 93 |     flex-direction: column-reverse;
 94 | }
 95 | 
 96 | .hero-content {
 97 |     display: flex;
 98 |     flex-direction: column;
 99 |     justify-content: center;
100 |     gap: 1.5rem;
101 |     align-items: center;    
102 |     z-index: 2;
103 | }
104 | 
105 | .role {
106 |     font-size: 0.875rem;
107 |     color: var(--color-primary);
108 | }
109 | 
110 | h1 {
111 |     font-size: 3.5rem;
112 |     line-height: 1.2;
113 |     font-weight: 700;
114 | }
115 | 
116 | .hero-content p {
117 |     color: var(--color-text-light);
118 |     max-width: 500px;
119 | }
120 | 
121 | .cta-buttons {
122 |     display: flex;
123 |     gap: 1rem;
124 |     margin-top: 1rem;
125 | }
126 | 
127 | .btn {
128 |     display: inline-block;
129 |     padding: 8px 24px;
130 |     border-radius: 4px;
131 |     text-decoration: none;
132 |     font-weight: 600;
133 |     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
134 | }
135 | 
136 | .btn-primary {
137 |     background-color: var(--color-primary);
138 |     color: var(--color-text);
139 |     border: none;
140 | }
141 | 
142 | .btn-primary:hover {
143 |     background-color: #ffc107;
144 |     color: #000;
145 | }
146 | 
147 | .btn-outline {
148 |     background-color: transparent;
149 |     color: var(--color-text);
150 |     border: 1px solid var(--color-text);
151 | }
152 | 
153 | .btn-outline:hover {
154 |     background-color: var(--color-text);
155 |     color: var(--color-background);
156 | }
157 | .hero-image {
158 |     width: 100%;
159 | }
160 | 
161 | .hero-image img {
162 |     width: 100%;
163 |     height: auto;
164 |     border-radius: 8px;
165 |     object-fit: cover;
166 |     margin: 0 auto;
167 | }
168 | 
169 | @media (min-width: 768px) {
170 |     #hero {
171 |         display: grid;
172 |         grid-template-columns: 1fr 1fr;
173 |         align-items: center;
174 |         gap: 2rem;
175 |     }
176 |     .hero-content {
177 |         align-items: flex-start;
178 |     }
179 | 
180 |     .hero-image {
181 |         margin-top: 0;
182 |     }
183 | 
184 |     .hero-image img {
185 |         width: 50vw;
186 |         min-width: 700px;
187 |         object-fit: cover;
188 |         object-position: center;
189 |         position: absolute;
190 |         top: 0;
191 |         right: 0;
192 |         z-index: 1;
193 |     }
194 | }
195 | 
196 | /* Projects Section */
197 | #projects {
198 |     padding: 4rem 1rem;
199 | }
200 | 
201 | .project-title {
202 |     text-align: center;
203 |     margin-bottom: 2rem;
204 |     position: relative;
205 | }
206 | 
207 | .project-title::before {
208 |     content: '';
209 |     position: absolute;
210 |     bottom: -4px;
211 |     left: 50%;
212 |     transform: translateX(-50%);
213 |     width: 50px;
214 |     height: 4px;
215 |     background-color: #f0b400;
216 |     border-radius: 2px;
217 | }
218 | 
219 | .project-grid {
220 |     display: grid;
221 |     grid-template-columns: 1fr;
222 |     gap: 2rem;
223 | }
224 | 
225 | .project-card {
226 |     display: flex;
227 |     flex-direction: column;
228 |     background-color: #fff;
229 |     border-radius: 12px;
230 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
231 |     overflow: hidden;
232 |     transition: transform 0.3s ease, box-shadow 0.3s ease;
233 | }
234 | 
235 | .project-card:hover {
236 |     transform: translateY(-5px);
237 |     box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
238 | }
239 | 
240 | .project-content {
241 |     padding: 1.5rem;
242 |     order: 2;
243 | }
244 | 
245 | .project-content h3 {
246 |     font-size: 1.5rem;
247 |     margin-bottom: 0.5rem;
248 | }
249 | 
250 | .project-content p {
251 |     color: var(--color-text-light);
252 |     margin-bottom: 1rem;
253 |     line-height: 1.6;
254 | }
255 | 
256 | .project-image {
257 |     order: 1;
258 |     height: 250px;
259 |     width: 100%;
260 | }
261 | 
262 | .project-image img {
263 |     width: 100%;
264 |     height: 100%;
265 |     object-fit: cover;
266 | }
267 | 
268 | /* Tablet styles */
269 | @media (min-width: 768px) {
270 |     #projects {
271 |         padding: 5rem 2rem;
272 |     }
273 | 
274 |     .projects-grid {
275 |         gap: 3rem;
276 |     }
277 | 
278 |     .project-card {
279 |         flex-direction: row;
280 |         align-items: center;
281 |     }
282 | 
283 |     .project-content {
284 |         flex: 1;
285 |         padding: 2rem;
286 |         order: 1;
287 |     }
288 | 
289 |     .project-content h3 {
290 |         font-size: 1.8rem;
291 |     }
292 | 
293 |     .project-image {
294 |         flex: 1;
295 |         height: 300px;
296 |         order: 2;
297 |     }
298 | 
299 |     .project-card:nth-child(even) {
300 |         flex-direction: row-reverse;
301 |     }
302 | }
303 | 
304 | /* Desktop styles */
305 | @media (min-width: 1024px) {
306 |     #projects {
307 |         padding: 6rem 2rem;
308 |     }
309 | 
310 |     .projects-grid {
311 |         max-width: 1200px;
312 |         margin: 0 auto;
313 |         gap: 4rem;
314 |     }
315 | 
316 |     .project-card {
317 |         gap: 2rem;
318 |     }
319 | 
320 |     .project-content h3 {
321 |         font-size: 2rem;
322 |     }
323 | 
324 |     .project-image {
325 |         height: 350px;
326 |     }
327 | }
328 | 
329 | /* Footer */
330 | footer {
331 |     padding: 4rem 0;
332 |     text-align: center;
333 | }
334 | 
335 | .social-links {
336 |     display: flex;
337 |     justify-content: center;
338 |     gap: 2rem;
339 |     margin-bottom: 1rem;
340 | }
341 | 
342 | .social-links a {
343 |     color: var(--color-text);
344 |     font-size: 1.5rem;
345 |     transition: color 0.3s ease;
346 |     display: inline-flex;
347 |     align-items: center;
348 |     justify-content: center;
349 |     text-decoration: none;
350 | }
351 | 
352 | .social-links a:hover {
353 |     color: var(--color-primary);
354 | }
355 | 
356 | .copyright {
357 |     color: var(--color-text-light);
358 |     font-size: 0.875rem;
359 | }
360 | 
361 | /* About */
362 | /* About Section */
363 | #about {
364 |     display: flex;
365 |     flex-direction: column;
366 |     justify-content: center;
367 |     align-items: center;
368 |     padding: 6rem 2rem;
369 |     text-align: center;
370 | }
371 | 
372 | .about-content {
373 |     display: grid;
374 |     grid-template-columns: 1fr 1fr;
375 |     gap: 4rem;
376 |     align-items: center;
377 |     max-width: 1200px;
378 |     margin: 0 auto;
379 | }
380 | 
381 | .about-text h1 {
382 |     font-size: 2.5rem;
383 |     margin-bottom: 1rem;
384 | }
385 | 
386 | .about-text p {
387 |     color: var(--color-text-light);
388 |     margin-bottom: 2rem;
389 |     line-height: 1.6;
390 | }
391 | 
392 | .about-image img {
393 |     width: 300px;
394 |     height: 300px;
395 |     border-radius: 50%;
396 |     object-fit: cover;
397 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
398 | }
399 | /* Responsive Design */
400 | @media (min-width: 768px) {
401 |     #hero {
402 |         grid-template-columns: 1fr 1fr;
403 |         text-align: left;
404 |         gap: 2rem;
405 |     }
406 | 
407 |     .hero-image img {
408 |         width: 50%;
409 |         object-fit: cover;
410 |     }
411 | 
412 |     .projects-grid {
413 |         flex-direction: row;
414 |         flex-wrap: wrap;
415 |         justify-content: center;
416 |         gap: 2rem;
417 |     }
418 | 
419 |     .project-card {
420 |         grid-template-columns: 1fr 1fr;
421 |         width: 100%;
422 |     }
423 | 
424 |     .project-card img {
425 |         border-radius: 0;
426 |     }
427 | }
428 | 


--------------------------------------------------------------------------------
/dia-2/teoria/4-animaciones.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Animaciones y Transiciones CSS</title>
  8 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap">
  9 |     <link rel="stylesheet" href="../../styles/main.css">
 10 |     <style>
 11 |         .demo-section {
 12 |             margin: 2rem 0;
 13 |             padding: 2rem;
 14 |             background: var(--section-bg);
 15 |             border-radius: 12px;
 16 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 17 |         }
 18 | 
 19 |         .controls {
 20 |             display: flex;
 21 |             gap: 1rem;
 22 |             margin-bottom: 1rem;
 23 |             flex-wrap: wrap;
 24 |         }
 25 | 
 26 |         .control-button {
 27 |             padding: 0.5rem 1rem;
 28 |             background: var(--primary-color);
 29 |             color: white;
 30 |             border: none;
 31 |             border-radius: 4px;
 32 |             cursor: pointer;
 33 |             transition: background-color 0.3s ease;
 34 |         }
 35 | 
 36 |         .control-button:hover {
 37 |             background-color: var(--secondary-color);
 38 |         }
 39 | 
 40 |         .animation-box {
 41 |             width: 100px;
 42 |             height: 100px;
 43 |             background: var(--primary-color);
 44 |             margin: 2rem auto;
 45 |             border-radius: 8px;
 46 |             transition: all 0.3s ease;
 47 |         }
 48 | 
 49 |         .code-example {
 50 |             background: #1d1f21;
 51 |             color: #fff;
 52 |             padding: 1rem;
 53 |             border-radius: 8px;
 54 |             margin: 1rem 0;
 55 |             font-family: 'SF Mono', monospace;
 56 |             overflow-x: auto;
 57 |         }
 58 | 
 59 |         .code-example code {
 60 |             background: none;
 61 |             color: inherit;
 62 |         }
 63 | 
 64 |         /* Transition variations */
 65 |         .scale {
 66 |             transform: scale(1.5);
 67 |         }
 68 | 
 69 |         .rotate {
 70 |             transform: rotate(180deg);
 71 |         }
 72 | 
 73 |         .translate {
 74 |             transform: translateY(-50px);
 75 |         }
 76 | 
 77 |         .skew {
 78 |             transform: skew(20deg);
 79 |         }
 80 | 
 81 |         /* Timing functions */
 82 |         .ease {
 83 |             transition-timing-function: ease;
 84 |         }
 85 | 
 86 |         .linear {
 87 |             transition-timing-function: linear;
 88 |         }
 89 | 
 90 |         .ease-in {
 91 |             transition-timing-function: ease-in;
 92 |         }
 93 | 
 94 |         .ease-out {
 95 |             transition-timing-function: ease-out;
 96 |         }
 97 | 
 98 |         /* Animation variations */
 99 |         @keyframes bounce {
100 | 
101 |             0%,
102 |             100% {
103 |                 transform: translateY(0);
104 |             }
105 | 
106 |             50% {
107 |                 transform: translateY(-30px);
108 |             }
109 |         }
110 | 
111 |         @keyframes pulse {
112 | 
113 |             0%,
114 |             100% {
115 |                 transform: scale(1);
116 |             }
117 | 
118 |             50% {
119 |                 transform: scale(1.2);
120 |             }
121 |         }
122 | 
123 |         @keyframes shake {
124 | 
125 |             0%,
126 |             100% {
127 |                 transform: translateX(0);
128 |             }
129 | 
130 |             25% {
131 |                 transform: translateX(-10px);
132 |             }
133 | 
134 |             75% {
135 |                 transform: translateX(10px);
136 |             }
137 |         }
138 | 
139 |         @keyframes rotate {
140 |             from {
141 |                 transform: rotate(0deg);
142 |             }
143 | 
144 |             to {
145 |                 transform: rotate(360deg);
146 |             }
147 |         }
148 | 
149 |         .bounce {
150 |             animation: bounce 1s infinite;
151 |         }
152 | 
153 |         .pulse {
154 |             animation: pulse 1s infinite;
155 |         }
156 | 
157 |         .shake {
158 |             animation: shake 0.5s infinite;
159 |         }
160 | 
161 |         .rotate {
162 |             animation: rotate 2s linear infinite;
163 |         }
164 |     </style>
165 | </head>
166 | 
167 | <body>
168 |     <a href="../../index.html" class="breadcrumb">Inicio</a>
169 | 
170 |     <div class="container">
171 |         <header>
172 |             <h3>Animaciones y Transiciones CSS</h3>
173 |             <p>Explora diferentes tipos de animaciones y transiciones con estos ejemplos interactivos</p>
174 |         </header>
175 | 
176 |         <main>
177 |             <section class="section">
178 |                 <h3>Transiciones</h3>
179 |                 <div class="controls">
180 |                     <button class="control-button" onclick="applyTransform('scale')">Scale</button>
181 |                     <button class="control-button" onclick="applyTransform('rotate')">Rotate</button>
182 |                     <button class="control-button" onclick="applyTransform('translate')">Translate</button>
183 |                     <button class="control-button" onclick="applyTransform('skew')">Skew</button>
184 |                     <button class="control-button" onclick="resetTransform()">Reset</button>
185 |                 </div>
186 |                 <div id="transitionDemo" class="animation-box"></div>
187 |                 <div class="code-example">
188 |                     <code id="transitionCode">transform: none;
189 | transition: all 0.3s ease;</code>
190 |                 </div>
191 |             </section>
192 | 
193 |             <section class="section">
194 |                 <h3>Timing Functions</h3>
195 |                 <div class="controls">
196 |                     <button class="control-button" onclick="changeTimingFunction('ease')">Ease</button>
197 |                     <button class="control-button" onclick="changeTimingFunction('linear')">Linear</button>
198 |                     <button class="control-button" onclick="changeTimingFunction('ease-in')">Ease In</button>
199 |                     <button class="control-button" onclick="changeTimingFunction('ease-out')">Ease Out</button>
200 |                 </div>
201 |                 <div id="timingDemo" class="animation-box"></div>
202 |                 <div class="code-example">
203 |                     <code id="timingCode">transition-timing-function: ease;</code>
204 |                 </div>
205 |             </section>
206 | 
207 |             <section class="section">
208 |                 <h3>Animaciones</h3>
209 |                 <div class="controls">
210 |                     <button class="control-button" onclick="playAnimation('bounce')">Bounce</button>
211 |                     <button class="control-button" onclick="playAnimation('pulse')">Pulse</button>
212 |                     <button class="control-button" onclick="playAnimation('shake')">Shake</button>
213 |                     <button class="control-button" onclick="playAnimation('rotate')">Rotate</button>
214 |                     <button class="control-button" onclick="stopAnimation()">Stop</button>
215 |                 </div>
216 |                 <div id="animationDemo" class="animation-box"></div>
217 |                 <div class="code-example">
218 |                     <code id="animationCode">/* No animation */</code>
219 |                 </div>
220 |             </section>
221 |         </main>
222 |     </div>
223 | 
224 |     <script>
225 |         // Transition Controls
226 |         function applyTransform(type) {
227 |             const demo = document.getElementById('transitionDemo');
228 |             const code = document.getElementById('transitionCode');
229 | 
230 |             demo.className = 'animation-box ' + type;
231 | 
232 |             let transform = '';
233 |             switch (type) {
234 |                 case 'scale':
235 |                     transform = 'transform: scale(1.5);';
236 |                     break;
237 |                 case 'rotate':
238 |                     transform = 'transform: rotate(180deg);';
239 |                     break;
240 |                 case 'translate':
241 |                     transform = 'transform: translateY(-50px);';
242 |                     break;
243 |                 case 'skew':
244 |                     transform = 'transform: skew(20deg);';
245 |                     break;
246 |             }
247 | 
248 |             code.textContent = `${transform}
249 | transition: all 0.3s ease;`;
250 |         }
251 | 
252 |         function resetTransform() {
253 |             const demo = document.getElementById('transitionDemo');
254 |             const code = document.getElementById('transitionCode');
255 | 
256 |             demo.className = 'animation-box';
257 |             code.textContent = `transform: none;
258 | transition: all 0.3s ease;`;
259 |         }
260 | 
261 |         // Timing Function Controls
262 |         function changeTimingFunction(timing) {
263 |             const demo = document.getElementById('timingDemo');
264 |             const code = document.getElementById('timingCode');
265 | 
266 |             demo.className = 'animation-box ' + timing;
267 |             demo.style.transform = demo.style.transform === 'translateX(200px)' ? 'translateX(0)' : 'translateX(200px)';
268 | 
269 |             code.textContent = `transition-timing-function: ${timing};`;
270 |         }
271 | 
272 |         // Animation Controls
273 |         function playAnimation(type) {
274 |             const demo = document.getElementById('animationDemo');
275 |             const code = document.getElementById('animationCode');
276 | 
277 |             demo.className = 'animation-box ' + type;
278 | 
279 |             let keyframes = '';
280 |             switch (type) {
281 |                 case 'bounce':
282 |                     keyframes = `@keyframes bounce {
283 |     0%, 100% { transform: translateY(0); }
284 |     50% { transform: translateY(-30px); }
285 | }`;
286 |                     break;
287 |                 case 'pulse':
288 |                     keyframes = `@keyframes pulse {
289 |     0%, 100% { transform: scale(1); }
290 |     50% { transform: scale(1.2); }
291 | }`;
292 |                     break;
293 |                 case 'shake':
294 |                     keyframes = `@keyframes shake {
295 |     0%, 100% { transform: translateX(0); }
296 |     25% { transform: translateX(-10px); }
297 |     75% { transform: translateX(10px); }
298 | }`;
299 |                     break;
300 |                 case 'rotate':
301 |                     keyframes = `@keyframes rotate {
302 |     from { transform: rotate(0deg); }
303 |     to { transform: rotate(360deg); }
304 | }`;
305 |                     break;
306 |             }
307 | 
308 |             code.textContent = `${keyframes}
309 | 
310 | .${type} {
311 |     animation: ${type} 1s infinite;
312 | }`;
313 |         }
314 | 
315 |         function stopAnimation() {
316 |             const demo = document.getElementById('animationDemo');
317 |             const code = document.getElementById('animationCode');
318 | 
319 |             demo.className = 'animation-box';
320 |             code.textContent = '/* No animation */';
321 |         }
322 |     </script>
323 | </body>
324 | 
325 | </html>


--------------------------------------------------------------------------------
/dia-2/teoria/6-portfolio-template.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Plantilla de Portfolio</title>
  8 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
  9 |     <style>
 10 |         :root {
 11 |             --primary-color: #0071e3;
 12 |             --text-color: #1d1d1f;
 13 |             --bg-color: #fbfbfd;
 14 |             --section-bg: #ffffff;
 15 |             --gray-color: #86868b;
 16 |         }
 17 | 
 18 |         * {
 19 |             margin: 0;
 20 |             padding: 0;
 21 |             box-sizing: border-box;
 22 |         }
 23 | 
 24 |         body {
 25 |             font-family: 'Inter', sans-serif;
 26 |             line-height: 1.5;
 27 |             color: var(--text-color);
 28 |             background-color: var(--bg-color);
 29 |         }
 30 | 
 31 |         /* Header y Navegación */
 32 |         header {
 33 |             position: fixed;
 34 |             top: 0;
 35 |             left: 0;
 36 |             right: 0;
 37 |             background: rgba(255, 255, 255, 0.8);
 38 |             backdrop-filter: blur(20px);
 39 |             -webkit-backdrop-filter: blur(20px);
 40 |             z-index: 1000;
 41 |             padding: 1rem;
 42 |             border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 43 |         }
 44 | 
 45 |         nav {
 46 |             max-width: 1200px;
 47 |             margin: 0 auto;
 48 |             display: flex;
 49 |             justify-content: space-between;
 50 |             align-items: center;
 51 |         }
 52 | 
 53 |         .logo {
 54 |             font-weight: 700;
 55 |             font-size: 1.5rem;
 56 |             color: var(--text-color);
 57 |             text-decoration: none;
 58 |         }
 59 | 
 60 |         nav ul {
 61 |             display: flex;
 62 |             gap: 2rem;
 63 |             list-style: none;
 64 |         }
 65 | 
 66 |         nav a {
 67 |             color: var(--text-color);
 68 |             text-decoration: none;
 69 |             font-weight: 500;
 70 |             transition: color 0.3s ease;
 71 |         }
 72 | 
 73 |         nav a:hover {
 74 |             color: var(--primary-color);
 75 |         }
 76 | 
 77 |         /* Hero Section */
 78 |         .hero {
 79 |             min-height: 100vh;
 80 |             display: flex;
 81 |             align-items: center;
 82 |             padding: 6rem 2rem 2rem;
 83 |             background: linear-gradient(to bottom right, #f8f9fa, #e9ecef);
 84 |         }
 85 | 
 86 |         .hero-content {
 87 |             max-width: 1200px;
 88 |             margin: 0 auto;
 89 |             text-align: center;
 90 |         }
 91 | 
 92 |         .hero h1 {
 93 |             font-size: 4rem;
 94 |             font-weight: 700;
 95 |             margin-bottom: 1rem;
 96 |             line-height: 1.2;
 97 |         }
 98 | 
 99 |         .hero p {
100 |             font-size: 1.25rem;
101 |             color: var(--gray-color);
102 |             max-width: 600px;
103 |             margin: 0 auto 2rem;
104 |         }
105 | 
106 |         /* Sobre Mí */
107 |         .about {
108 |             padding: 6rem 2rem;
109 |             background: var(--section-bg);
110 |         }
111 | 
112 |         .about-content {
113 |             max-width: 1200px;
114 |             margin: 0 auto;
115 |             display: grid;
116 |             grid-template-columns: 1fr 1fr;
117 |             gap: 4rem;
118 |             align-items: center;
119 |         }
120 | 
121 |         .about-image {
122 |             border-radius: 20px;
123 |             overflow: hidden;
124 |         }
125 | 
126 |         .about-image img {
127 |             width: 100%;
128 |             height: auto;
129 |             display: block;
130 |         }
131 | 
132 |         /* Proyectos */
133 |         .projects {
134 |             padding: 6rem 2rem;
135 |             background: var(--bg-color);
136 |         }
137 | 
138 |         .projects-content {
139 |             max-width: 1200px;
140 |             margin: 0 auto;
141 |         }
142 | 
143 |         .projects-grid {
144 |             display: grid;
145 |             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
146 |             gap: 2rem;
147 |             margin-top: 3rem;
148 |         }
149 | 
150 |         .project-card {
151 |             background: var(--section-bg);
152 |             border-radius: 20px;
153 |             overflow: hidden;
154 |             transition: transform 0.3s ease, box-shadow 0.3s ease;
155 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
156 |         }
157 | 
158 |         .project-card:hover {
159 |             transform: translateY(-5px);
160 |             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
161 |         }
162 | 
163 |         .project-image {
164 |             width: 100%;
165 |             height: 200px;
166 |             background: #f1f1f1;
167 |         }
168 | 
169 |         .project-info {
170 |             padding: 1.5rem;
171 |         }
172 | 
173 |         /* Contacto */
174 |         .contact {
175 |             padding: 6rem 2rem;
176 |             background: var(--section-bg);
177 |         }
178 | 
179 |         .contact-content {
180 |             max-width: 600px;
181 |             margin: 0 auto;
182 |             text-align: center;
183 |         }
184 | 
185 |         .contact form {
186 |             margin-top: 2rem;
187 |             display: grid;
188 |             gap: 1rem;
189 |         }
190 | 
191 |         .form-group {
192 |             text-align: left;
193 |         }
194 | 
195 |         .form-group label {
196 |             display: block;
197 |             margin-bottom: 0.5rem;
198 |             font-weight: 500;
199 |         }
200 | 
201 |         .form-group input,
202 |         .form-group textarea {
203 |             width: 100%;
204 |             padding: 0.75rem;
205 |             border: 1px solid #ddd;
206 |             border-radius: 8px;
207 |             font-family: inherit;
208 |             font-size: inherit;
209 |         }
210 | 
211 |         .form-group input:focus,
212 |         .form-group textarea:focus {
213 |             outline: none;
214 |             border-color: var(--primary-color);
215 |             box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
216 |         }
217 | 
218 |         /* Footer */
219 |         footer {
220 |             padding: 4rem 2rem;
221 |             background: #1d1d1f;
222 |             color: white;
223 |             text-align: center;
224 |         }
225 | 
226 |         .social-links {
227 |             display: flex;
228 |             justify-content: center;
229 |             gap: 2rem;
230 |             margin-top: 2rem;
231 |         }
232 | 
233 |         .social-links a {
234 |             color: white;
235 |             text-decoration: none;
236 |             transition: color 0.3s ease;
237 |         }
238 | 
239 |         .social-links a:hover {
240 |             color: var(--primary-color);
241 |         }
242 | 
243 |         /* Botones */
244 |         .button {
245 |             display: inline-block;
246 |             padding: 1rem 2rem;
247 |             background: var(--primary-color);
248 |             color: white;
249 |             text-decoration: none;
250 |             border-radius: 8px;
251 |             font-weight: 500;
252 |             transition: background-color 0.3s ease, transform 0.3s ease;
253 |         }
254 | 
255 |         .button:hover {
256 |             background-color: #005abc;
257 |             transform: translateY(-2px);
258 |         }
259 | 
260 |         /* Responsive */
261 |         @media (max-width: 768px) {
262 |             .hero h1 {
263 |                 font-size: 3rem;
264 |             }
265 | 
266 |             .about-content {
267 |                 grid-template-columns: 1fr;
268 |             }
269 | 
270 |             nav ul {
271 |                 display: none;
272 |             }
273 |         }
274 |     </style>
275 | </head>
276 | 
277 | <body>
278 |     <header>
279 |         <nav>
280 |             <a href="#" class="logo">Tu Nombre</a>
281 |             <ul>
282 |                 <li><a href="#inicio">Inicio</a></li>
283 |                 <li><a href="#sobre-mi">Sobre Mí</a></li>
284 |                 <li><a href="#proyectos">Proyectos</a></li>
285 |                 <li><a href="#contacto">Contacto</a></li>
286 |             </ul>
287 |         </nav>
288 |     </header>
289 | 
290 |     <section id="inicio" class="hero">
291 |         <div class="hero-content">
292 |             <h3>¡Hola! Soy [Tu Nombre]</h3>
293 |             <p>Desarrollador/a Web Frontend apasionado/a por crear experiencias digitales únicas y accesibles.</p>
294 |             <a href="#proyectos" class="button">Ver Proyectos</a>
295 |         </div>
296 |     </section>
297 | 
298 |     <section id="sobre-mi" class="about">
299 |         <div class="about-content">
300 |             <div class="about-image">
301 |                 <img src="https://via.placeholder.com/600x400" alt="Tu foto">
302 |             </div>
303 |             <div class="about-text">
304 |                 <h3>Sobre Mí</h3>
305 |                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
306 |                     labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
307 |                     laboris.</p>
308 |                 <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
309 |                     pariatur.</p>
310 |             </div>
311 |         </div>
312 |     </section>
313 | 
314 |     <section id="proyectos" class="projects">
315 |         <div class="projects-content">
316 |             <h3>Mis Proyectos</h3>
317 |             <div class="projects-grid">
318 |                 <article class="project-card">
319 |                     <div class="project-image"></div>
320 |                     <div class="project-info">
321 |                         <h3>Proyecto 1</h3>
322 |                         <p>Descripción breve del proyecto.</p>
323 |                     </div>
324 |                 </article>
325 |                 <article class="project-card">
326 |                     <div class="project-image"></div>
327 |                     <div class="project-info">
328 |                         <h3>Proyecto 2</h3>
329 |                         <p>Descripción breve del proyecto.</p>
330 |                     </div>
331 |                 </article>
332 |                 <article class="project-card">
333 |                     <div class="project-image"></div>
334 |                     <div class="project-info">
335 |                         <h3>Proyecto 3</h3>
336 |                         <p>Descripción breve del proyecto.</p>
337 |                     </div>
338 |                 </article>
339 |             </div>
340 |         </div>
341 |     </section>
342 | 
343 |     <section id="contacto" class="contact">
344 |         <div class="contact-content">
345 |             <h3>Contacto</h3>
346 |             <p>¿Tienes un proyecto en mente? ¡Hablemos!</p>
347 |             <form>
348 |                 <div class="form-group">
349 |                     <label for="nombre">Nombre</label>
350 |                     <input type="text" id="nombre" name="nombre" required>
351 |                 </div>
352 |                 <div class="form-group">
353 |                     <label for="email">Email</label>
354 |                     <input type="email" id="email" name="email" required>
355 |                 </div>
356 |                 <div class="form-group">
357 |                     <label for="mensaje">Mensaje</label>
358 |                     <textarea id="mensaje" name="mensaje" rows="4" required></textarea>
359 |                 </div>
360 |                 <button type="submit" class="button">Enviar Mensaje</button>
361 |             </form>
362 |         </div>
363 |     </section>
364 | 
365 |     <footer>
366 |         <p>© 2025 [Tu Nombre]. Todos los derechos reservados.</p>
367 |         <div class="social-links">
368 |             <a href="#">LinkedIn</a>
369 |             <a href="#">GitHub</a>
370 |             <a href="#">Twitter</a>
371 |         </div>
372 |     </footer>
373 | </body>
374 | 
375 | </html>


--------------------------------------------------------------------------------
/dia-2/teoria/3-flexbox-grid.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Flexbox y Grid</title>
  8 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap">
  9 |     <link rel="stylesheet" href="../../styles/main.css">
 10 |     <style>
 11 |         .demo-section {
 12 |             margin: 2rem 0;
 13 |             padding: 2rem;
 14 |             background: var(--section-bg);
 15 |             border-radius: 12px;
 16 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 17 |         }
 18 | 
 19 |         /* Flexbox Demo */
 20 |         .flex-demo {
 21 |             margin: 2rem 0;
 22 |         }
 23 | 
 24 |         .flex-container {
 25 |             border: 2px dashed var(--primary-color);
 26 |             padding: 1rem;
 27 |             margin: 1rem 0;
 28 |             border-radius: 8px;
 29 |         }
 30 | 
 31 |         .flex-item {
 32 |             background: var(--primary-color);
 33 |             color: white;
 34 |             padding: 1rem;
 35 |             margin: 0.5rem;
 36 |             border-radius: 4px;
 37 |             text-align: center;
 38 |         }
 39 | 
 40 |         /* Grid Demo */
 41 |         .grid-demo {
 42 |             margin: 2rem 0;
 43 |         }
 44 | 
 45 |         .grid-container {
 46 |             border: 2px dashed var(--primary-color);
 47 |             padding: 1rem;
 48 |             margin: 1rem 0;
 49 |             border-radius: 8px;
 50 |         }
 51 | 
 52 |         .grid-item {
 53 |             background: var(--primary-color);
 54 |             color: white;
 55 |             padding: 1rem;
 56 |             margin: 0.5rem;
 57 |             border-radius: 4px;
 58 |             text-align: center;
 59 |         }
 60 | 
 61 |         /* Controls */
 62 |         .controls {
 63 |             display: flex;
 64 |             gap: 1rem;
 65 |             margin-bottom: 1rem;
 66 |             flex-wrap: wrap;
 67 |         }
 68 | 
 69 |         .control-button {
 70 |             padding: 0.5rem 1rem;
 71 |             background: var(--primary-color);
 72 |             color: white;
 73 |             border: none;
 74 |             border-radius: 4px;
 75 |             cursor: pointer;
 76 |             transition: background-color 0.3s ease;
 77 |         }
 78 | 
 79 |         .control-button:hover {
 80 |             background-color: var(--secondary-color);
 81 |         }
 82 | 
 83 |         .code-example {
 84 |             background: #1d1f21;
 85 |             color: #fff;
 86 |             padding: 1rem;
 87 |             border-radius: 8px;
 88 |             margin: 1rem 0;
 89 |             font-family: 'SF Mono', monospace;
 90 |             overflow-x: auto;
 91 |         }
 92 | 
 93 |         .code-example code {
 94 |             background: none;
 95 |             color: inherit;
 96 |         }
 97 | 
 98 |         /* Flexbox variations */
 99 |         .flex-row {
100 |             flex-direction: row;
101 |         }
102 | 
103 |         .flex-column {
104 |             flex-direction: column;
105 |         }
106 | 
107 |         .flex-wrap {
108 |             flex-wrap: wrap;
109 |         }
110 | 
111 |         .justify-start {
112 |             justify-content: flex-start;
113 |         }
114 | 
115 |         .justify-center {
116 |             justify-content: center;
117 |         }
118 | 
119 |         .justify-end {
120 |             justify-content: flex-end;
121 |         }
122 | 
123 |         .justify-between {
124 |             justify-content: space-between;
125 |         }
126 | 
127 |         .justify-around {
128 |             justify-content: space-around;
129 |         }
130 | 
131 |         .align-start {
132 |             align-items: flex-start;
133 |         }
134 | 
135 |         .align-center {
136 |             align-items: center;
137 |         }
138 | 
139 |         .align-end {
140 |             align-items: flex-end;
141 |         }
142 | 
143 |         /* Grid variations */
144 |         .grid-2-cols {
145 |             grid-template-columns: repeat(2, 1fr);
146 |         }
147 | 
148 |         .grid-3-cols {
149 |             grid-template-columns: repeat(3, 1fr);
150 |         }
151 | 
152 |         .grid-auto-cols {
153 |             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
154 |         }
155 | 
156 |         .grid-template-areas {
157 |             grid-template-areas:
158 |                 "header header"
159 |                 "sidebar main"
160 |                 "footer footer";
161 |         }
162 |     </style>
163 | </head>
164 | 
165 | <body>
166 |     <a href="../../index.html" class="breadcrumb">Inicio</a>
167 | 
168 |     <div class="container">
169 |         <header>
170 |             <h3>Flexbox y Grid</h3>
171 |             <p>Explora los sistemas de layout modernos en CSS</p>
172 |         </header>
173 | 
174 |         <main>
175 |             <!-- Flexbox -->
176 |             <section class="section">
177 |                 <h2>Flexbox</h2>
178 |                 <p>Flexbox es ideal para layouts unidimensionales (filas o columnas).</p>
179 | 
180 |                 <div class="demo-section">
181 |                     <h3>Dirección y Wrap</h3>
182 |                     <div class="controls">
183 |                         <button class="control-button" onclick="setFlexDirection('row')">Row</button>
184 |                         <button class="control-button" onclick="setFlexDirection('column')">Column</button>
185 |                         <button class="control-button" onclick="toggleFlexWrap()">Toggle Wrap</button>
186 |                     </div>
187 |                     <div id="flexDirectionDemo" class="flex-container" style="display: flex;">
188 |                         <div class="flex-item">1</div>
189 |                         <div class="flex-item">2</div>
190 |                         <div class="flex-item">3</div>
191 |                         <div class="flex-item">4</div>
192 |                     </div>
193 |                     <div class="code-example">
194 |                         <code id="flexDirectionCode">.container {
195 |     display: flex;
196 |     flex-direction: row;
197 |     flex-wrap: nowrap;
198 | }</code>
199 |                     </div>
200 |                 </div>
201 | 
202 |                 <div class="demo-section">
203 |                     <h3>Justify Content</h3>
204 |                     <div class="controls">
205 |                         <button class="control-button" onclick="setJustifyContent('flex-start')">Start</button>
206 |                         <button class="control-button" onclick="setJustifyContent('center')">Center</button>
207 |                         <button class="control-button" onclick="setJustifyContent('flex-end')">End</button>
208 |                         <button class="control-button" onclick="setJustifyContent('space-between')">Space
209 |                             Between</button>
210 |                         <button class="control-button" onclick="setJustifyContent('space-around')">Space Around</button>
211 |                     </div>
212 |                     <div id="justifyDemo" class="flex-container" style="display: flex;">
213 |                         <div class="flex-item">1</div>
214 |                         <div class="flex-item">2</div>
215 |                         <div class="flex-item">3</div>
216 |                     </div>
217 |                     <div class="code-example">
218 |                         <code id="justifyCode">.container {
219 |     display: flex;
220 |     justify-content: flex-start;
221 | }</code>
222 |                     </div>
223 |                 </div>
224 | 
225 |                 <div class="demo-section">
226 |                     <h3>Align Items</h3>
227 |                     <div class="controls">
228 |                         <button class="control-button" onclick="setAlignItems('flex-start')">Start</button>
229 |                         <button class="control-button" onclick="setAlignItems('center')">Center</button>
230 |                         <button class="control-button" onclick="setAlignItems('flex-end')">End</button>
231 |                         <button class="control-button" onclick="setAlignItems('stretch')">Stretch</button>
232 |                     </div>
233 |                     <div id="alignDemo" class="flex-container" style="display: flex; height: 200px;">
234 |                         <div class="flex-item">1</div>
235 |                         <div class="flex-item">2</div>
236 |                         <div class="flex-item">3</div>
237 |                     </div>
238 |                     <div class="code-example">
239 |                         <code id="alignCode">.container {
240 |     display: flex;
241 |     align-items: flex-start;
242 | }</code>
243 |                     </div>
244 |                 </div>
245 |             </section>
246 | 
247 |             <!-- Grid -->
248 |             <section class="section">
249 |                 <h2>Grid</h2>
250 |                 <p>Grid es perfecto para layouts bidimensionales (filas y columnas).</p>
251 | 
252 |                 <div class="demo-section">
253 |                     <h3>Grid Básico</h3>
254 |                     <div class="controls">
255 |                         <button class="control-button" onclick="setGridColumns('2')">2 Columnas</button>
256 |                         <button class="control-button" onclick="setGridColumns('3')">3 Columnas</button>
257 |                         <button class="control-button" onclick="setGridColumns('auto')">Auto-fit</button>
258 |                     </div>
259 |                     <div id="gridDemo" class="grid-container" style="display: grid; gap: 1rem;">
260 |                         <div class="grid-item">1</div>
261 |                         <div class="grid-item">2</div>
262 |                         <div class="grid-item">3</div>
263 |                         <div class="grid-item">4</div>
264 |                         <div class="grid-item">5</div>
265 |                         <div class="grid-item">6</div>
266 |                     </div>
267 |                     <div class="code-example">
268 |                         <code id="gridCode">.container {
269 |     display: grid;
270 |     grid-template-columns: repeat(2, 1fr);
271 |     gap: 1rem;
272 | }</code>
273 |                     </div>
274 |                 </div>
275 | 
276 |                 <div class="demo-section">
277 |                     <h3>Grid Areas</h3>
278 |                     <div class="grid-container" style="display: grid; grid-template-areas: 
279 |                         'header header'
280 |                         'sidebar main'
281 |                         'footer footer';
282 |                         gap: 1rem;">
283 |                         <div class="grid-item" style="grid-area: header;">Header</div>
284 |                         <div class="grid-item" style="grid-area: sidebar;">Sidebar</div>
285 |                         <div class="grid-item" style="grid-area: main;">Main Content</div>
286 |                         <div class="grid-item" style="grid-area: footer;">Footer</div>
287 |                     </div>
288 |                     <div class="code-example">
289 |                         <code>.container {
290 |     display: grid;
291 |     grid-template-areas:
292 |         "header header"
293 |         "sidebar main"
294 |         "footer footer";
295 |     gap: 1rem;
296 | }</code>
297 |                     </div>
298 |                 </div>
299 |             </section>
300 |         </main>
301 |     </div>
302 | 
303 |     <script>
304 |         // Flexbox Controls
305 |         function setFlexDirection(direction) {
306 |             const demo = document.getElementById('flexDirectionDemo');
307 |             const code = document.getElementById('flexDirectionCode');
308 |             demo.style.flexDirection = direction;
309 |             updateFlexCode();
310 |         }
311 | 
312 |         function toggleFlexWrap() {
313 |             const demo = document.getElementById('flexDirectionDemo');
314 |             demo.style.flexWrap = demo.style.flexWrap === 'wrap' ? 'nowrap' : 'wrap';
315 |             updateFlexCode();
316 |         }
317 | 
318 |         function updateFlexCode() {
319 |             const demo = document.getElementById('flexDirectionDemo');
320 |             const code = document.getElementById('flexDirectionCode');
321 |             code.textContent = `.container {
322 |     display: flex;
323 |     flex-direction: ${demo.style.flexDirection || 'row'};
324 |     flex-wrap: ${demo.style.flexWrap || 'nowrap'};
325 | }`;
326 |         }
327 | 
328 |         function setJustifyContent(value) {
329 |             const demo = document.getElementById('justifyDemo');
330 |             const code = document.getElementById('justifyCode');
331 |             demo.style.justifyContent = value;
332 |             code.textContent = `.container {
333 |     display: flex;
334 |     justify-content: ${value};
335 | }`;
336 |         }
337 | 
338 |         function setAlignItems(value) {
339 |             const demo = document.getElementById('alignDemo');
340 |             const code = document.getElementById('alignCode');
341 |             demo.style.alignItems = value;
342 |             code.textContent = `.container {
343 |     display: flex;
344 |     align-items: ${value};
345 | }`;
346 |         }
347 | 
348 |         // Grid Controls
349 |         function setGridColumns(value) {
350 |             const demo = document.getElementById('gridDemo');
351 |             const code = document.getElementById('gridCode');
352 |             let columns;
353 | 
354 |             switch (value) {
355 |                 case '2':
356 |                     columns = 'repeat(2, 1fr)';
357 |                     break;
358 |                 case '3':
359 |                     columns = 'repeat(3, 1fr)';
360 |                     break;
361 |                 case 'auto':
362 |                     columns = 'repeat(auto-fit, minmax(150px, 1fr))';
363 |                     break;
364 |             }
365 | 
366 |             demo.style.gridTemplateColumns = columns;
367 |             code.textContent = `.container {
368 |     display: grid;
369 |     grid-template-columns: ${columns};
370 |     gap: 1rem;
371 | }`;
372 |         }
373 |     </script>
374 | </body>
375 | 
376 | </html>


--------------------------------------------------------------------------------
/dia-1/teoria/1-figma-fundamentos.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Fundamentos de Figma</title>
  8 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap">
  9 |     <link rel="stylesheet" href="../../styles/main.css">
 10 |     <style>
 11 |         .demo-section {
 12 |             margin: 2rem 0;
 13 |             padding: 2rem;
 14 |             background: var(--section-bg);
 15 |             border-radius: 12px;
 16 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 17 |         }
 18 | 
 19 |         .tools-grid {
 20 |             display: grid;
 21 |             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 22 |             gap: 1.5rem;
 23 |             margin: 2rem 0;
 24 |         }
 25 | 
 26 |         .tool-card {
 27 |             background: var(--section-bg);
 28 |             padding: 1.5rem;
 29 |             border-radius: 12px;
 30 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 31 |             transition: transform 0.3s ease;
 32 |         }
 33 | 
 34 |         .tool-card:hover {
 35 |             transform: translateY(-4px);
 36 |         }
 37 | 
 38 |         .tool-icon {
 39 |             width: 40px;
 40 |             height: 40px;
 41 |             background: var(--primary-color);
 42 |             border-radius: 8px;
 43 |             display: flex;
 44 |             align-items: center;
 45 |             justify-content: center;
 46 |             color: white;
 47 |             margin-bottom: 1rem;
 48 |         }
 49 | 
 50 |         .shortcut {
 51 |             display: inline-block;
 52 |             padding: 0.25rem 0.5rem;
 53 |             background: rgba(0, 0, 0, 0.05);
 54 |             border-radius: 4px;
 55 |             font-family: 'SF Mono', monospace;
 56 |             font-size: 0.9em;
 57 |             margin-top: 0.5rem;
 58 |         }
 59 | 
 60 |         .feature-grid {
 61 |             display: grid;
 62 |             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 63 |             gap: 1.5rem;
 64 |             margin: 2rem 0;
 65 |         }
 66 | 
 67 |         .feature-card {
 68 |             background: var(--section-bg);
 69 |             padding: 1.5rem;
 70 |             border-radius: 12px;
 71 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 72 |         }
 73 | 
 74 |         .feature-icon {
 75 |             font-size: 1.5rem;
 76 |             margin-bottom: 1rem;
 77 |             color: var(--primary-color);
 78 |         }
 79 | 
 80 |         .tip-box {
 81 |             background: rgba(0, 113, 227, 0.1);
 82 |             border-left: 4px solid var(--primary-color);
 83 |             padding: 1rem;
 84 |             margin: 1rem 0;
 85 |             border-radius: 0 8px 8px 0;
 86 |         }
 87 | 
 88 |         .canvas-demo {
 89 |             background: #f5f5f7;
 90 |             padding: 2rem;
 91 |             border-radius: 12px;
 92 |             margin: 2rem 0;
 93 |             text-align: center;
 94 |         }
 95 | 
 96 |         .frame-example {
 97 |             background: white;
 98 |             padding: 1rem;
 99 |             border-radius: 8px;
100 |             display: inline-block;
101 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
102 |         }
103 | 
104 |         .component-demo {
105 |             display: flex;
106 |             gap: 1rem;
107 |             margin: 2rem 0;
108 |             flex-wrap: wrap;
109 |         }
110 | 
111 |         .component {
112 |             background: white;
113 |             padding: 1rem;
114 |             border-radius: 8px;
115 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
116 |             min-width: 150px;
117 |             text-align: center;
118 |         }
119 | 
120 |         .prototype-flow {
121 |             display: flex;
122 |             align-items: center;
123 |             justify-content: center;
124 |             gap: 2rem;
125 |             margin: 2rem 0;
126 |             flex-wrap: wrap;
127 |         }
128 | 
129 |         .prototype-screen {
130 |             background: white;
131 |             padding: 1rem;
132 |             border-radius: 8px;
133 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
134 |             min-width: 100px;
135 |             text-align: center;
136 |         }
137 | 
138 |         .prototype-arrow {
139 |             font-size: 1.5rem;
140 |             color: var(--primary-color);
141 |         }
142 | 
143 |         .code-example {
144 |             background: #1d1f21;
145 |             color: #fff;
146 |             padding: 1rem;
147 |             border-radius: 8px;
148 |             margin: 1rem 0;
149 |             font-family: 'SF Mono', monospace;
150 |             overflow-x: auto;
151 |         }
152 | 
153 |         .code-example code {
154 |             background: none;
155 |             color: inherit;
156 |         }
157 |     </style>
158 | </head>
159 | 
160 | <body>
161 |     <a href="../../index.html" class="breadcrumb">Inicio</a>
162 | 
163 |     <div class="container">
164 |         <header>
165 |             <h3>Fundamentos de Figma</h3>
166 |             <p>Guía completa para dominar Figma y crear diseños profesionales</p>
167 |         </header>
168 | 
169 |         <main>
170 |             <section class="section">
171 |                 <h3>1. Interfaz y herramientas</h3>
172 |                 <div class="tools-grid">
173 |                     <div class="tool-card">
174 |                         <div class="tool-icon">V</div>
175 |                         <h3>Selección</h3>
176 |                         <p>Seleccionar, mover y redimensionar elementos</p>
177 |                         <span class="shortcut">V</span>
178 |                     </div>
179 |                     <div class="tool-card">
180 |                         <div class="tool-icon">F</div>
181 |                         <h3>Frame</h3>
182 |                         <p>Crear contenedores y artboards</p>
183 |                         <span class="shortcut">F</span>
184 |                     </div>
185 |                     <div class="tool-card">
186 |                         <div class="tool-icon">R</div>
187 |                         <h3>Formas</h3>
188 |                         <p>Crear rectángulos, círculos y otras formas</p>
189 |                         <span class="shortcut">R</span>
190 |                     </div>
191 |                     <div class="tool-card">
192 |                         <div class="tool-icon">T</div>
193 |                         <h3>Texto</h3>
194 |                         <p>Añadir y editar texto</p>
195 |                         <span class="shortcut">T</span>
196 |                     </div>
197 |                     <div class="tool-card">
198 |                         <div class="tool-icon">P</div>
199 |                         <h3>Pen Tool</h3>
200 |                         <p>Crear formas personalizadas</p>
201 |                         <span class="shortcut">P</span>
202 |                     </div>
203 |                     <div class="tool-card">
204 |                         <div class="tool-icon">K</div>
205 |                         <h3>Scale Tool</h3>
206 |                         <p>Escalar elementos manteniendo proporciones</p>
207 |                         <span class="shortcut">K</span>
208 |                     </div>
209 |                 </div>
210 |             </section>
211 | 
212 |             <section class="section">
213 |                 <h3>2. Auto-layout y constraints</h3>
214 |                 <div class="feature-grid">
215 |                     <div class="feature-card">
216 |                         <div class="feature-icon">↔️</div>
217 |                         <h3>Auto-layout Horizontal</h3>
218 |                         <p>Distribuye elementos horizontalmente con espaciado consistente</p>
219 |                         <div class="code-example">
220 |                             <code>Shift + A</code>
221 |                         </div>
222 |                     </div>
223 |                     <div class="feature-card">
224 |                         <div class="feature-icon">↕️</div>
225 |                         <h3>Auto-layout vertical</h3>
226 |                         <p>Organiza elementos verticalmente con espaciado automático</p>
227 |                         <div class="code-example">
228 |                             <code>Shift + A</code>
229 |                         </div>
230 |                     </div>
231 |                     <div class="feature-card">
232 |                         <div class="feature-icon">📏</div>
233 |                         <h3>Constraints</h3>
234 |                         <p>Mantén elementos anclados al redimensionar frames</p>
235 |                     </div>
236 |                 </div>
237 |                 <div class="tip-box">
238 |                     <strong>Pro Tip:</strong> Usa Auto-layout para crear interfaces responsivas que se adapten
239 |                     automáticamente al contenido.
240 |                 </div>
241 |             </section>
242 | 
243 |             <section class="section">
244 |                 <h3>3. Componentes y estilos</h3>
245 |                 <div class="feature-grid">
246 |                     <div class="feature-card">
247 |                         <div class="feature-icon">🔄</div>
248 |                         <h3>Componentes</h3>
249 |                         <p>Elementos reutilizables que mantienen consistencia</p>
250 |                         <div class="code-example">
251 |                             <code>Ctrl/Cmd + Alt + K</code>
252 |                         </div>
253 |                     </div>
254 |                     <div class="feature-card">
255 |                         <div class="feature-icon">🎨</div>
256 |                         <h3>Estilos de color</h3>
257 |                         <p>Define y reutiliza colores en todo el proyecto</p>
258 |                         <div class="code-example">
259 |                             <code>Ctrl/Cmd + Alt + G</code>
260 |                         </div>
261 |                     </div>
262 |                     <div class="feature-card">
263 |                         <div class="feature-icon">T</div>
264 |                         <h3>Estilos de texto</h3>
265 |                         <p>Mantén tipografía consistente con estilos predefinidos</p>
266 |                     </div>
267 |                 </div>
268 |                 <div class="component-demo">
269 |                     <div class="component">
270 |                         <h4>Componente principal</h4>
271 |                         <p>Master Component</p>
272 |                     </div>
273 |                     <div class="component">
274 |                         <h4>Instancia 1</h4>
275 |                         <p>Variante</p>
276 |                     </div>
277 |                     <div class="component">
278 |                         <h4>Instancia 2</h4>
279 |                         <p>Variante</p>
280 |                     </div>
281 |                 </div>
282 |             </section>
283 | 
284 |             <section class="section">
285 |                 <h3>4. Prototipado</h3>
286 |                 <div class="prototype-flow">
287 |                     <div class="prototype-screen">Inicio</div>
288 |                     <span class="prototype-arrow">→</span>
289 |                     <div class="prototype-screen">Detalle</div>
290 |                     <span class="prototype-arrow">→</span>
291 |                     <div class="prototype-screen">Contacto</div>
292 |                 </div>
293 |                 <div class="feature-grid">
294 |                     <div class="feature-card">
295 |                         <div class="feature-icon">🔗</div>
296 |                         <h3>Conexiones</h3>
297 |                         <p>Crea flujos de navegación entre pantallas</p>
298 |                     </div>
299 |                     <div class="feature-card">
300 |                         <div class="feature-icon">⚡</div>
301 |                         <h3>Interacciones</h3>
302 |                         <p>Añade animaciones y transiciones</p>
303 |                     </div>
304 |                     <div class="feature-card">
305 |                         <div class="feature-icon">📱</div>
306 |                         <h3>Vista previa</h3>
307 |                         <p>Prueba el prototipo en dispositivos reales</p>
308 |                     </div>
309 |                 </div>
310 |             </section>
311 | 
312 |             <section class="section">
313 |                 <h3>5. Colaboración</h3>
314 |                 <div class="feature-grid">
315 |                     <div class="feature-card">
316 |                         <div class="feature-icon">👥</div>
317 |                         <h3>Trabajo en equipo</h3>
318 |                         <p>Edición simultánea y control de versiones</p>
319 |                     </div>
320 |                     <div class="feature-card">
321 |                         <div class="feature-icon">💬</div>
322 |                         <h3>Comentarios</h3>
323 |                         <p>Feedback directo sobre el diseño</p>
324 |                     </div>
325 |                     <div class="feature-card">
326 |                         <div class="feature-icon">🔄</div>
327 |                         <h3>Bibliotecas</h3>
328 |                         <p>Comparte recursos entre proyectos</p>
329 |                     </div>
330 |                 </div>
331 |             </section>
332 | 
333 |             <section class="section">
334 |                 <h3>6. Exportación</h3>
335 |                 <div class="feature-grid">
336 |                     <div class="feature-card">
337 |                         <div class="feature-icon">💻</div>
338 |                         <h3>Para Desarrollo</h3>
339 |                         <p>CSS, SVG y especificaciones técnicas</p>
340 |                     </div>
341 |                     <div class="feature-card">
342 |                         <div class="feature-icon">🖼️</div>
343 |                         <h3>Para Presentación</h3>
344 |                         <p>PNG, JPG y PDF</p>
345 |                     </div>
346 |                     <div class="feature-card">
347 |                         <div class="feature-icon">📱</div>
348 |                         <h3>Para Apps</h3>
349 |                         <p>Assets optimizados para diferentes plataformas</p>
350 |                     </div>
351 |                 </div>
352 |                 <div class="tip-box">
353 |                     <strong>Pro Tip:</strong> Usa "Export Settings" para configurar diferentes formatos y escalas para
354 |                     cada elemento.
355 |                 </div>
356 |             </section>
357 |         </main>
358 |     </div>
359 | </body>
360 | 
361 | </html>


--------------------------------------------------------------------------------
/dia-2/teoria/7-portfolio-template-v2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Tu Portfolio</title>
  8 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
  9 |     <style>
 10 |         :root {
 11 |             --background: #ffffff;
 12 |             --foreground: #020817;
 13 |             --muted: #f1f5f9;
 14 |             --muted-foreground: #64748b;
 15 |             --border: #e2e8f0;
 16 |             --primary: #0f172a;
 17 |             --primary-foreground: #ffffff;
 18 |         }
 19 | 
 20 |         * {
 21 |             margin: 0;
 22 |             padding: 0;
 23 |             box-sizing: border-box;
 24 |         }
 25 | 
 26 |         body {
 27 |             font-family: 'Inter', sans-serif;
 28 |             color: var(--foreground);
 29 |             background: var(--background);
 30 |             line-height: 1.5;
 31 |         }
 32 | 
 33 |         .container {
 34 |             max-width: 1200px;
 35 |             margin: 0 auto;
 36 |             padding: 0 2rem;
 37 |         }
 38 | 
 39 |         /* Header */
 40 |         header {
 41 |             position: fixed;
 42 |             top: 0;
 43 |             left: 0;
 44 |             right: 0;
 45 |             z-index: 50;
 46 |             border-bottom: 1px solid var(--border);
 47 |             background: rgba(255, 255, 255, 0.8);
 48 |             backdrop-filter: blur(8px);
 49 |         }
 50 | 
 51 |         nav {
 52 |             height: 4rem;
 53 |             display: flex;
 54 |             align-items: center;
 55 |         }
 56 | 
 57 |         nav ul {
 58 |             display: flex;
 59 |             gap: 2rem;
 60 |             list-style: none;
 61 |         }
 62 | 
 63 |         nav a {
 64 |             color: var(--foreground);
 65 |             text-decoration: none;
 66 |             font-size: 0.875rem;
 67 |             transition: color 0.2s;
 68 |         }
 69 | 
 70 |         nav a:hover {
 71 |             color: var(--muted-foreground);
 72 |         }
 73 | 
 74 |         nav .brand {
 75 |             font-size: 1.125rem;
 76 |             font-weight: 700;
 77 |             margin-right: 2rem;
 78 |         }
 79 | 
 80 |         /* Hero Section */
 81 |         .hero {
 82 |             min-height: 100vh;
 83 |             display: flex;
 84 |             align-items: center;
 85 |             justify-content: center;
 86 |             padding-top: 4rem;
 87 |             background: linear-gradient(to bottom right, var(--background), var(--muted));
 88 |             text-align: center;
 89 |         }
 90 | 
 91 |         .avatar {
 92 |             width: 8rem;
 93 |             height: 8rem;
 94 |             border-radius: 9999px;
 95 |             margin-bottom: 2rem;
 96 |             object-fit: cover;
 97 |         }
 98 | 
 99 |         .hero h1 {
100 |             font-size: 3rem;
101 |             font-weight: 700;
102 |             line-height: 1.2;
103 |             margin-bottom: 1.5rem;
104 |         }
105 | 
106 |         @media (min-width: 640px) {
107 |             .hero h1 {
108 |                 font-size: 3.75rem;
109 |             }
110 |         }
111 | 
112 |         .hero p {
113 |             color: var(--muted-foreground);
114 |             font-size: 1.125rem;
115 |             max-width: 42rem;
116 |             margin: 0 auto 2rem;
117 |         }
118 | 
119 |         .button-group {
120 |             display: flex;
121 |             gap: 1rem;
122 |             justify-content: center;
123 |         }
124 | 
125 |         .button {
126 |             display: inline-flex;
127 |             align-items: center;
128 |             justify-content: center;
129 |             padding: 0.5rem 1rem;
130 |             border-radius: 0.375rem;
131 |             font-weight: 500;
132 |             transition: all 0.2s;
133 |             text-decoration: none;
134 |         }
135 | 
136 |         .button-primary {
137 |             background: var(--primary);
138 |             color: var(--primary-foreground);
139 |         }
140 | 
141 |         .button-outline {
142 |             border: 1px solid var(--border);
143 |             color: var(--foreground);
144 |         }
145 | 
146 |         .button:hover {
147 |             opacity: 0.9;
148 |             transform: translateY(-1px);
149 |         }
150 | 
151 |         /* About Section */
152 |         .about {
153 |             padding: 6rem 0;
154 |             background: var(--muted);
155 |         }
156 | 
157 |         .about-grid {
158 |             display: grid;
159 |             gap: 3rem;
160 |             align-items: center;
161 |         }
162 | 
163 |         @media (min-width: 768px) {
164 |             .about-grid {
165 |                 grid-template-columns: repeat(2, 1fr);
166 |             }
167 |         }
168 | 
169 |         .skills {
170 |             background: var(--background);
171 |             border: 1px solid var(--border);
172 |             padding: 1rem;
173 |             border-radius: 0.5rem;
174 |             height: 18rem;
175 |             overflow-y: auto;
176 |         }
177 | 
178 |         .skill-item {
179 |             display: flex;
180 |             justify-content: space-between;
181 |             padding: 0.5rem 0;
182 |         }
183 | 
184 |         .separator {
185 |             height: 1px;
186 |             background: var(--border);
187 |             margin: 0.5rem 0;
188 |         }
189 | 
190 |         /* Projects Section */
191 |         .projects {
192 |             padding: 6rem 0;
193 |         }
194 | 
195 |         .projects h2 {
196 |             text-align: center;
197 |             margin-bottom: 3rem;
198 |             font-size: 1.875rem;
199 |             font-weight: 700;
200 |         }
201 | 
202 |         .projects-grid {
203 |             display: grid;
204 |             gap: 1.5rem;
205 |         }
206 | 
207 |         @media (min-width: 768px) {
208 |             .projects-grid {
209 |                 grid-template-columns: repeat(2, 1fr);
210 |             }
211 |         }
212 | 
213 |         @media (min-width: 1024px) {
214 |             .projects-grid {
215 |                 grid-template-columns: repeat(3, 1fr);
216 |             }
217 |         }
218 | 
219 |         .card {
220 |             background: var(--background);
221 |             border: 1px solid var(--border);
222 |             border-radius: 0.5rem;
223 |             overflow: hidden;
224 |             transition: all 0.2s;
225 |         }
226 | 
227 |         .card:hover {
228 |             transform: translateY(-0.25rem);
229 |             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
230 |         }
231 | 
232 |         .card-header {
233 |             padding: 1.5rem;
234 |         }
235 | 
236 |         .card-title {
237 |             font-size: 1.25rem;
238 |             font-weight: 600;
239 |             margin-bottom: 0.5rem;
240 |         }
241 | 
242 |         .card-description {
243 |             color: var(--muted-foreground);
244 |             font-size: 0.875rem;
245 |         }
246 | 
247 |         .card-content {
248 |             padding: 0 1.5rem 1.5rem;
249 |         }
250 | 
251 |         .aspect-video {
252 |             aspect-ratio: 16 / 9;
253 |             background: var(--muted);
254 |             border-radius: 0.375rem;
255 |         }
256 | 
257 |         /* Footer */
258 |         footer {
259 |             padding: 3rem 0;
260 |             background: var(--muted);
261 |             text-align: center;
262 |         }
263 | 
264 |         .social-links {
265 |             display: flex;
266 |             justify-content: center;
267 |             gap: 1.5rem;
268 |             margin-top: 1.5rem;
269 |         }
270 | 
271 |         .social-link {
272 |             color: var(--foreground);
273 |             padding: 0.5rem;
274 |             border-radius: 0.375rem;
275 |             transition: all 0.2s;
276 |         }
277 | 
278 |         .social-link:hover {
279 |             background: var(--border);
280 |         }
281 | 
282 |         .social-link svg {
283 |             width: 1.25rem;
284 |             height: 1.25rem;
285 |         }
286 |     </style>
287 | </head>
288 | 
289 | <body>
290 |     <header>
291 |         <nav class="container">
292 |             <a href="/" class="brand">Tu Nombre</a>
293 |             <ul>
294 |                 <li><a href="#about">Sobre Mí</a></li>
295 |                 <li><a href="#projects">Proyectos</a></li>
296 |                 <li><a href="#social">Contacto</a></li>
297 |             </ul>
298 |         </nav>
299 |     </header>
300 | 
301 |     <section class="hero">
302 |         <div class="container">
303 |             <img src="https://github.com/shadcn.png" alt="Tu foto" class="avatar">
304 |             <h1>¡Hola! Soy [Tu Nombre]</h1>
305 |             <p>Desarrollador/a Web Frontend apasionado/a por crear experiencias digitales únicas y accesibles.</p>
306 |             <div class="button-group">
307 |                 <a href="#projects" class="button button-primary">Ver Proyectos</a>
308 |                 <a href="#social" class="button button-outline">Contactar</a>
309 |             </div>
310 |         </div>
311 |     </section>
312 | 
313 |     <section id="about" class="about">
314 |         <div class="container">
315 |             <div class="about-grid">
316 |                 <div>
317 |                     <h2 class="text-3xl font-bold">Sobre Mí</h2>
318 |                     <p style="margin-top: 1rem; color: var(--muted-foreground)">
319 |                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
320 |                         labore et dolore magna aliqua.
321 |                     </p>
322 |                     <p style="margin-top: 1rem; color: var(--muted-foreground)">
323 |                         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
324 |                         pariatur.
325 |                     </p>
326 |                 </div>
327 |                 <div class="skills">
328 |                     <h3 style="font-weight: 600; margin-bottom: 1rem">Habilidades</h3>
329 |                     <div class="skill-item">
330 |                         <span>React</span>
331 |                         <span style="color: var(--muted-foreground)">Avanzado</span>
332 |                     </div>
333 |                     <div class="separator"></div>
334 |                     <div class="skill-item">
335 |                         <span>TypeScript</span>
336 |                         <span style="color: var(--muted-foreground)">Intermedio</span>
337 |                     </div>
338 |                     <div class="separator"></div>
339 |                     <div class="skill-item">
340 |                         <span>Node.js</span>
341 |                         <span style="color: var(--muted-foreground)">Intermedio</span>
342 |                     </div>
343 |                     <div class="separator"></div>
344 |                     <div class="skill-item">
345 |                         <span>Tailwind CSS</span>
346 |                         <span style="color: var(--muted-foreground)">Avanzado</span>
347 |                     </div>
348 |                 </div>
349 |             </div>
350 |         </div>
351 |     </section>
352 | 
353 |     <section id="projects" class="projects">
354 |         <div class="container">
355 |             <h2>Mis Proyectos</h2>
356 |             <div class="projects-grid">
357 |                 <div class="card">
358 |                     <div class="card-header">
359 |                         <h3 class="card-title">Proyecto 1</h3>
360 |                         <p class="card-description">Tecnologías: React, TypeScript, Tailwind</p>
361 |                     </div>
362 |                     <div class="card-content">
363 |                         <div class="aspect-video"></div>
364 |                     </div>
365 |                 </div>
366 |                 <div class="card">
367 |                     <div class="card-header">
368 |                         <h3 class="card-title">Proyecto 2</h3>
369 |                         <p class="card-description">Tecnologías: React, TypeScript, Tailwind</p>
370 |                     </div>
371 |                     <div class="card-content">
372 |                         <div class="aspect-video"></div>
373 |                     </div>
374 |                 </div>
375 |                 <div class="card">
376 |                     <div class="card-header">
377 |                         <h3 class="card-title">Proyecto 3</h3>
378 |                         <p class="card-description">Tecnologías: React, TypeScript, Tailwind</p>
379 |                     </div>
380 |                     <div class="card-content">
381 |                         <div class="aspect-video"></div>
382 |                     </div>
383 |                 </div>
384 |                 <div class="card">
385 |                     <div class="card-header">
386 |                         <h3 class="card-title">Proyecto 4</h3>
387 |                         <p class="card-description">Tecnologías: React, TypeScript, Tailwind</p>
388 |                     </div>
389 |                     <div class="card-content">
390 |                         <div class="aspect-video"></div>
391 |                     </div>
392 |                 </div>
393 |                 <div class="card">
394 |                     <div class="card-header">
395 |                         <h3 class="card-title">Proyecto 5</h3>
396 |                         <p class="card-description">Tecnologías: React, TypeScript, Tailwind</p>
397 |                     </div>
398 |                     <div class="card-content">
399 |                         <div class="aspect-video"></div>
400 |                     </div>
401 |                 </div>
402 |             </div>
403 |         </div>
404 |     </section>
405 | 
406 |     <footer id="social">
407 |         <div class="container">
408 |             <p style="color: var(--muted-foreground); font-size: 0.875rem">
409 |                 © 2025 [Tu Nombre]. Todos los derechos reservados.
410 |             </p>
411 |             <div class="social-links">
412 |                 <a href="#" class="social-link" target="_blank" rel="noopener noreferrer">
413 |                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
414 |                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
415 |                         <path
416 |                             d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
417 |                         <path d="M9 18c-4.51 2-5-2-7-2" />
418 |                     </svg>
419 |                 </a>
420 |                 <a href="#" class="social-link" target="_blank" rel="noopener noreferrer">
421 |                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
422 |                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
423 |                         <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
424 |                         <rect width="4" height="12" x="2" y="9" />
425 |                         <circle cx="4" cy="4" r="2" />
426 |                     </svg>
427 |                 </a>
428 |                 <a href="#" class="social-link" target="_blank" rel="noopener noreferrer">
429 |                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
430 |                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
431 |                         <path
432 |                             d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
433 |                     </svg>
434 |                 </a>
435 |             </div>
436 |         </div>
437 |     </footer>
438 | </body>
439 | 
440 | </html>


--------------------------------------------------------------------------------
/dia-1/teoria/3-css-fundamentos.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Fundamentos de CSS</title>
  8 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap">
  9 |     <link rel="stylesheet" href="../../styles/main.css">
 10 |     <style>
 11 |         .demo-section {
 12 |             background: var(--section-bg);
 13 |             padding: 2rem;
 14 |             border-radius: 12px;
 15 |             margin-bottom: 2rem;
 16 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 17 |         }
 18 | 
 19 |         .user-agent-demo {
 20 |             margin: 2rem 0;
 21 |         }
 22 | 
 23 |         .user-agent-demo button {
 24 |             /* Eliminamos estilos del user agent */
 25 |             all: unset;
 26 |             /* Nuestros estilos */
 27 |             padding: 0.5rem 1rem;
 28 |             background: var(--primary-color);
 29 |             color: white;
 30 |             border-radius: 8px;
 31 |             cursor: pointer;
 32 |         }
 33 | 
 34 |         .specificity-calculator {
 35 |             display: grid;
 36 |             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 37 |             gap: 1rem;
 38 |             margin: 2rem 0;
 39 |         }
 40 | 
 41 |         .specificity-item {
 42 |             background: var(--section-bg);
 43 |             padding: 1rem;
 44 |             border-radius: 8px;
 45 |             text-align: center;
 46 |         }
 47 | 
 48 |         .specificity-value {
 49 |             font-size: 1.5rem;
 50 |             font-weight: bold;
 51 |             color: var(--primary-color);
 52 |         }
 53 | 
 54 |         .box-model-demo {
 55 |             width: 300px;
 56 |             margin: 2rem auto;
 57 |             position: relative;
 58 |             background: #fff;
 59 |             padding: 2rem;
 60 |             border: 2px solid var(--primary-color);
 61 |         }
 62 | 
 63 |         .box-model-demo::before {
 64 |             content: 'Content';
 65 |             position: absolute;
 66 |             top: 50%;
 67 |             left: 50%;
 68 |             transform: translate(-50%, -50%);
 69 |         }
 70 | 
 71 |         .box-model-labels {
 72 |             position: absolute;
 73 |             width: 100%;
 74 |             height: 100%;
 75 |             top: 0;
 76 |             left: 0;
 77 |             pointer-events: none;
 78 |         }
 79 | 
 80 |         .box-model-label {
 81 |             position: absolute;
 82 |             font-size: 0.8rem;
 83 |             color: var(--gray-color);
 84 |         }
 85 | 
 86 |         .inheritance-demo {
 87 |             color: blue;
 88 |             font-family: Arial;
 89 |         }
 90 | 
 91 |         .inheritance-demo div {
 92 |             /* Hereda color y font-family */
 93 |             margin: 1rem 0;
 94 |             padding: 1rem;
 95 |             border: 1px solid #ccc;
 96 |         }
 97 | 
 98 |         .inheritance-demo p {
 99 |             /* Hereda color y font-family */
100 |             margin: 0.5rem 0;
101 |         }
102 | 
103 |         .flex-demo {
104 |             display: flex;
105 |             gap: 1rem;
106 |             margin: 2rem 0;
107 |         }
108 | 
109 |         .flex-item {
110 |             background: var(--primary-color);
111 |             color: white;
112 |             padding: 1rem;
113 |             border-radius: 8px;
114 |             flex: 1;
115 |         }
116 | 
117 |         .grid-demo {
118 |             display: grid;
119 |             grid-template-columns: repeat(3, 1fr);
120 |             gap: 1rem;
121 |             margin: 2rem 0;
122 |         }
123 | 
124 |         .grid-item {
125 |             background: var(--primary-color);
126 |             color: white;
127 |             padding: 1rem;
128 |             border-radius: 8px;
129 |             text-align: center;
130 |         }
131 | 
132 |         .code-snippet {
133 |             background: rgba(0, 0, 0, 0.05);
134 |             padding: 1.5rem;
135 |             border-radius: 12px;
136 |             margin-top: 1rem;
137 |             font-family: 'SF Mono', monospace;
138 |             border-left: 4px solid var(--primary-color);
139 |         }
140 | 
141 |         .code-snippet code {
142 |             display: block;
143 |             white-space: pre;
144 |             overflow-x: auto;
145 |             background: none;
146 |             padding: 0;
147 |         }
148 | 
149 |         /* Add positioning demo styles */
150 |         .positioning-demo {
151 |             position: relative;
152 |             height: 300px;
153 |             background: #f8f9fa;
154 |             border-radius: 8px;
155 |             margin: 1rem 0;
156 |             padding: 1rem;
157 |         }
158 | 
159 |         .positioned-item {
160 |             width: 100px;
161 |             height: 100px;
162 |             background: var(--primary-color);
163 |             color: white;
164 |             display: flex;
165 |             align-items: center;
166 |             justify-content: center;
167 |             border-radius: 4px;
168 |         }
169 | 
170 |         .relative {
171 |             position: relative;
172 |             top: 20px;
173 |             left: 20px;
174 |         }
175 | 
176 |         .absolute {
177 |             position: absolute;
178 |             top: 50%;
179 |             left: 50%;
180 |             transform: translate(-50%, -50%);
181 |         }
182 | 
183 |         .fixed {
184 |             position: fixed;
185 |             bottom: 20px;
186 |             right: 20px;
187 |         }
188 | 
189 |         .sticky {
190 |             position: sticky;
191 |             top: 0;
192 |         }
193 | 
194 |         /* Add units demo styles */
195 |         .units-demo {
196 |             margin: 1rem 0;
197 |         }
198 | 
199 |         .unit-box {
200 |             padding: 1rem;
201 |             margin: 0.5rem 0;
202 |             background: var(--primary-color);
203 |             color: white;
204 |             border-radius: 4px;
205 |         }
206 | 
207 |         .px-unit {
208 |             width: 200px;
209 |         }
210 | 
211 |         .percent-unit {
212 |             width: 50%;
213 |         }
214 | 
215 |         .vw-unit {
216 |             width: 50vw;
217 |         }
218 | 
219 |         .rem-unit {
220 |             width: 20rem;
221 |         }
222 |     </style>
223 | </head>
224 | 
225 | <body>
226 |     <a href="../../index.html" class="breadcrumb">Inicio</a>
227 | 
228 |     <div class="container">
229 |         <header>
230 |             <h3>Fundamentos de CSS</h3>
231 |             <p>Conceptos esenciales para entender y trabajar con CSS</p>
232 |         </header>
233 | 
234 |         <main>
235 |             <section class="demo-section">
236 |                 <h3>1. User Agent Stylesheet</h3>
237 |                 <p>Los navegadores aplican estilos por defecto a los elementos HTML.</p>
238 |                 <div class="user-agent-demo">
239 |                     <button>Botón sin estilos por defecto</button>
240 |                 </div>
241 |                 <div class="code-snippet">
242 |                     <code>/* Eliminar estilos por defecto */
243 | button {
244 |     all: unset;
245 |     /* Nuevos estilos */
246 |     padding: 0.5rem 1rem;
247 |     background: blue;
248 |     color: white;
249 | }</code>
250 |                 </div>
251 |             </section>
252 | 
253 |             <section class="demo-section">
254 |                 <h3>2. Selectores CSS</h3>
255 |                 <div class="selectors-demo">
256 |                     <p class="clase">Selector de clase (.clase)</p>
257 |                     <p id="identificador">Selector de ID (#identificador)</p>
258 |                     <p data-tipo="especial">Selector de atributo ([data-tipo="especial"])</p>
259 |                 </div>
260 |                 <div class="code-snippet">
261 |                     <code>/* Selectores básicos */
262 | p { } /* Elemento */
263 | .clase { } /* Clase */
264 | #id { } /* ID */
265 | [attr] { } /* Atributo */</code>
266 |                 </div>
267 |             </section>
268 | 
269 |             <section class="demo-section">
270 |                 <h3>3. Cascada y Carga de Estilos</h3>
271 |                 <p>Orden de importancia en CSS:</p>
272 |                 <ol>
273 |                     <li>!important</li>
274 |                     <li>Estilos en línea</li>
275 |                     <li>Estilos internos y externos (según orden)</li>
276 |                     <li>Estilos del navegador</li>
277 |                 </ol>
278 |                 <div class="code-snippet">
279 |                     <code>/* Orden de carga */
280 | @import url('estilos.css');
281 | &lt;link rel="stylesheet" href="estilos.css"&gt;
282 | &lt;style&gt;/* Estilos internos */&lt;/style&gt;
283 | style="/* Estilos en línea */"</code>
284 |                 </div>
285 |             </section>
286 | 
287 |             <section class="demo-section">
288 |                 <h3>4. Especificidad CSS</h3>
289 |                 <div class="specificity-calculator">
290 |                     <div class="specificity-item">
291 |                         <h3>Estilos en línea</h3>
292 |                         <div class="specificity-value">1000</div>
293 |                     </div>
294 |                     <div class="specificity-item">
295 |                         <h3>ID</h3>
296 |                         <div class="specificity-value">100</div>
297 |                     </div>
298 |                     <div class="specificity-item">
299 |                         <h3>Clase</h3>
300 |                         <div class="specificity-value">10</div>
301 |                     </div>
302 |                     <div class="specificity-item">
303 |                         <h3>Elemento</h3>
304 |                         <div class="specificity-value">1</div>
305 |                     </div>
306 |                 </div>
307 |                 <div class="code-snippet">
308 |                     <code>/* Ejemplos de especificidad */
309 | p {} /* 0,0,0,1 */
310 | .clase {} /* 0,0,1,0 */
311 | #id {} /* 0,1,0,0 */
312 | style="" /* 1,0,0,0 */</code>
313 |                 </div>
314 |             </section>
315 | 
316 |             <section class="demo-section">
317 |                 <h3>5. Herencia en CSS</h3>
318 |                 <div class="inheritance-demo">
319 |                     <div>
320 |                         <p>Este texto hereda color y font-family</p>
321 |                         <p>Este también hereda las mismas propiedades</p>
322 |                     </div>
323 |                 </div>
324 |                 <div class="code-snippet">
325 |                     <code>/* Propiedades que se heredan */
326 | color
327 | font-family
328 | font-size
329 | line-height
330 | 
331 | /* Forzar herencia */
332 | border: inherit;
333 | margin: inherit;</code>
334 |                 </div>
335 |             </section>
336 | 
337 |             <section class="demo-section">
338 |                 <h3>6. Box Model</h3>
339 |                 <div class="box-model-demo">
340 |                     <div class="box-model-labels">
341 |                         <span class="box-model-label" style="top: -20px">Margin</span>
342 |                         <span class="box-model-label" style="right: -40px">Border</span>
343 |                         <span class="box-model-label" style="bottom: -20px">Padding</span>
344 |                         <span class="box-model-label" style="left: -40px">Content</span>
345 |                     </div>
346 |                 </div>
347 |                 <div class="code-snippet">
348 |                     <code>.elemento {
349 |     /* Content */
350 |     width: 200px;
351 |     height: 100px;
352 |     
353 |     /* Padding */
354 |     padding: 20px;
355 |     
356 |     /* Border */
357 |     border: 2px solid black;
358 |     
359 |     /* Margin */
360 |     margin: 20px;
361 | }</code>
362 |                 </div>
363 |             </section>
364 | 
365 |             <!-- Add Positioning section after Box Model -->
366 |             <section class="section">
367 |                 <h3>Posicionamiento CSS</h3>
368 |                 <p>Diferentes tipos de posicionamiento en CSS.</p>
369 | 
370 |                 <div class="demo-section">
371 |                     <h3>Position: Static (Default)</h3>
372 |                     <div class="positioning-demo">
373 |                         <div class="positioned-item">Static</div>
374 |                     </div>
375 |                     <div class="code-example">
376 |                         <code>position: static; /* Posicionamiento normal en el flujo del documento */</code>
377 |                     </div>
378 |                 </div>
379 | 
380 |                 <div class="demo-section">
381 |                     <h3>Position: Relative</h3>
382 |                     <div class="positioning-demo">
383 |                         <div class="positioned-item relative">Relative</div>
384 |                     </div>
385 |                     <div class="code-example">
386 |                         <code>position: relative;
387 | top: 20px;
388 | left: 20px; /* Se mueve desde su posición original */</code>
389 |                     </div>
390 |                 </div>
391 | 
392 |                 <div class="demo-section">
393 |                     <h3>Position: Absolute</h3>
394 |                     <div class="positioning-demo">
395 |                         <div class="positioned-item absolute">Absolute</div>
396 |                     </div>
397 |                     <div class="code-example">
398 |                         <code>position: absolute;
399 | top: 50%;
400 | left: 50%;
401 | transform: translate(-50%, -50%); /* Centrado absoluto */</code>
402 |                     </div>
403 |                 </div>
404 | 
405 |                 <div class="demo-section">
406 |                     <h3>Position: Fixed</h3>
407 |                     <div class="positioning-demo">
408 |                         <div class="positioned-item fixed">Fixed</div>
409 |                     </div>
410 |                     <div class="code-example">
411 |                         <code>position: fixed;
412 | bottom: 20px;
413 | right: 20px; /* Fijo respecto a la ventana */</code>
414 |                     </div>
415 |                 </div>
416 |             </section>
417 | 
418 |             <!-- Add Units section -->
419 |             <section class="section">
420 |                 <h3>Unidades CSS</h3>
421 | 
422 |                 <div class="demo-section">
423 |                     <h3>Unidades Absolutas</h3>
424 |                     <div class="units-demo">
425 |                         <div class="unit-box px-unit">200px (Píxeles)</div>
426 |                     </div>
427 |                     <div class="code-example">
428 |                         <code>width: 200px; /* Tamaño fijo en píxeles */</code>
429 |                     </div>
430 |                 </div>
431 | 
432 |                 <div class="demo-section">
433 |                     <h3>Unidades Relativas</h3>
434 |                     <div class="units-demo">
435 |                         <div class="unit-box percent-unit">50% (Porcentaje del contenedor)</div>
436 |                         <div class="unit-box vw-unit">50vw (Viewport Width)</div>
437 |                         <div class="unit-box rem-unit">20rem (Relativo al font-size del root)</div>
438 |                     </div>
439 |                     <div class="code-example">
440 |                         <code>/* Unidades relativas */
441 | .percent { width: 50%; }  /* Relativo al contenedor */
442 | .vw { width: 50vw; }     /* Relativo al viewport */
443 | .rem { width: 20rem; }   /* Relativo al font-size root */</code>
444 |                     </div>
445 |                 </div>
446 |             </section>
447 | 
448 |             <section class="demo-section">
449 |                 <h3>7. Flexbox</h3>
450 |                 <div class="flex-demo">
451 |                     <div class="flex-item">Item 1</div>
452 |                     <div class="flex-item">Item 2</div>
453 |                     <div class="flex-item">Item 3</div>
454 |                 </div>
455 |                 <div class="code-snippet">
456 |                     <code>.contenedor {
457 |     display: flex;
458 |     justify-content: space-between;
459 |     align-items: center;
460 | }
461 | 
462 | .item {
463 |     flex: 1;
464 | }</code>
465 |                 </div>
466 |             </section>
467 | 
468 |             <section class="demo-section">
469 |                 <h3>8. Grid</h3>
470 |                 <div class="grid-demo">
471 |                     <div class="grid-item">1</div>
472 |                     <div class="grid-item">2</div>
473 |                     <div class="grid-item">3</div>
474 |                     <div class="grid-item">4</div>
475 |                     <div class="grid-item">5</div>
476 |                     <div class="grid-item">6</div>
477 |                 </div>
478 |                 <div class="code-snippet">
479 |                     <code>.contenedor {
480 |     display: grid;
481 |     grid-template-columns: repeat(3, 1fr);
482 |     gap: 1rem;
483 | }</code>
484 |                 </div>
485 |             </section>
486 |         </main>
487 |     </div>
488 | </body>
489 | 
490 | </html>


--------------------------------------------------------------------------------
/dia-1/teoria/0-teoria-completa.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Teoría Completa de Diseño Web</title>
  8 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
  9 |     <link rel="stylesheet" href="../../styles/main.css">
 10 |     <style>
 11 |         /* Table of Contents styles */
 12 |         .toc {
 13 |             position: sticky;
 14 |             top: 2rem;
 15 |             background: var(--section-bg);
 16 |             padding: 1.5rem;
 17 |             border-radius: 12px;
 18 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 19 |             margin-bottom: 2rem;
 20 |         }
 21 | 
 22 |         .toc ul {
 23 |             list-style: none;
 24 |             padding-left: 0;
 25 |         }
 26 | 
 27 |         .toc li {
 28 |             margin-bottom: 0.5rem;
 29 |         }
 30 | 
 31 |         .toc a {
 32 |             color: var(--text-color);
 33 |             text-decoration: none;
 34 |             transition: color 0.3s ease;
 35 |         }
 36 | 
 37 |         .toc a:hover {
 38 |             color: var(--primary-color);
 39 |         }
 40 | 
 41 |         .toc .level-2 {
 42 |             padding-left: 1rem;
 43 |             font-size: 0.9em;
 44 |         }
 45 | 
 46 |         .toc .level-3 {
 47 |             padding-left: 2rem;
 48 |             font-size: 0.85em;
 49 |             color: var(--gray-color);
 50 |         }
 51 | 
 52 |         /* Process Flow styles */
 53 |         .process-flow {
 54 |             display: flex;
 55 |             align-items: center;
 56 |             gap: 1rem;
 57 |             margin: 2rem 0;
 58 |             overflow-x: auto;
 59 |             padding: 1rem;
 60 |         }
 61 | 
 62 |         .process-step {
 63 |             flex: 0 0 auto;
 64 |             background: var(--section-bg);
 65 |             padding: 1rem;
 66 |             border-radius: 8px;
 67 |             min-width: 200px;
 68 |             text-align: center;
 69 |             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 70 |         }
 71 | 
 72 |         .process-arrow {
 73 |             flex: 0 0 auto;
 74 |             color: var(--primary-color);
 75 |             font-size: 1.5rem;
 76 |         }
 77 | 
 78 |         /* Example sections */
 79 |         .example-section {
 80 |             background: var(--section-bg);
 81 |             padding: 1.5rem;
 82 |             border-radius: 12px;
 83 |             margin: 1rem 0;
 84 |             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 85 |         }
 86 | 
 87 |         .example-grid {
 88 |             display: grid;
 89 |             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 90 |             gap: 1rem;
 91 |             margin: 1rem 0;
 92 |         }
 93 | 
 94 |         .example-card {
 95 |             background: white;
 96 |             padding: 1rem;
 97 |             border-radius: 8px;
 98 |             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 99 |         }
100 | 
101 |         /* Code examples */
102 |         .code-block {
103 |             background: #1d1f21;
104 |             color: #fff;
105 |             padding: 1rem;
106 |             border-radius: 8px;
107 |             margin: 1rem 0;
108 |             overflow-x: auto;
109 |         }
110 | 
111 |         .code-block code {
112 |             font-family: 'SF Mono', monospace;
113 |             background: none;
114 |             color: inherit;
115 |         }
116 | 
117 |         /* Best practices section */
118 |         .best-practices {
119 |             display: grid;
120 |             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
121 |             gap: 1.5rem;
122 |             margin: 2rem 0;
123 |         }
124 | 
125 |         .practice-card {
126 |             background: var(--section-bg);
127 |             padding: 1.5rem;
128 |             border-radius: 12px;
129 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
130 |         }
131 | 
132 |         .practice-card h4 {
133 |             color: var(--primary-color);
134 |             margin-bottom: 1rem;
135 |         }
136 | 
137 |         /* Tools section */
138 |         .tools-grid {
139 |             display: grid;
140 |             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
141 |             gap: 1rem;
142 |             margin: 2rem 0;
143 |         }
144 | 
145 |         .tool-card {
146 |             background: var(--section-bg);
147 |             padding: 1rem;
148 |             border-radius: 8px;
149 |             text-align: center;
150 |             transition: transform 0.3s ease;
151 |         }
152 | 
153 |         .tool-card:hover {
154 |             transform: translateY(-4px);
155 |         }
156 | 
157 |         .tool-icon {
158 |             font-size: 2rem;
159 |             margin-bottom: 0.5rem;
160 |             color: var(--primary-color);
161 |         }
162 | 
163 |         /* Responsive images */
164 |         .image-container {
165 |             max-width: 100%;
166 |             margin: 1rem 0;
167 |             border-radius: 8px;
168 |             overflow: hidden;
169 |         }
170 | 
171 |         .image-container img {
172 |             width: 100%;
173 |             height: auto;
174 |             display: block;
175 |         }
176 | 
177 |         /* Tips and notes */
178 |         .tip-box {
179 |             background: rgba(0, 113, 227, 0.1);
180 |             border-left: 4px solid var(--primary-color);
181 |             padding: 1rem;
182 |             margin: 1rem 0;
183 |             border-radius: 0 8px 8px 0;
184 |         }
185 | 
186 |         .warning-box {
187 |             background: rgba(255, 149, 0, 0.1);
188 |             border-left: 4px solid #ff9500;
189 |             padding: 1rem;
190 |             margin: 1rem 0;
191 |             border-radius: 0 8px 8px 0;
192 |         }
193 |     </style>
194 | </head>
195 | 
196 | <body>
197 |     <a href="../../index.html" class="breadcrumb">Inicio</a>
198 | 
199 |     <div class="container">
200 |         <header>
201 |             <h3>Roadmap</h3>
202 |             <p>Una guía desde la conceptualización hasta la implementación web</p>
203 |         </header>
204 | 
205 |         <main><!-- Proceso de Diseño -->
206 |             <section id="proceso-diseno" class="section">
207 |                 <h3>1. Proceso de diseño</h3>
208 | 
209 |                 <div class="process-flow">
210 |                     <div class="process-step">Investigación</div>
211 |                     <span class="process-arrow">→</span>
212 |                     <div class="process-step">Wireframing</div>
213 |                     <span class="process-arrow">→</span>
214 |                     <div class="process-step">Diseño Visual</div>
215 |                     <span class="process-arrow">→</span>
216 |                     <div class="process-step">Prototipado</div>
217 |                     <span class="process-arrow">→</span>
218 |                     <div class="process-step">Implementación</div>
219 |                 </div>
220 | 
221 |                 <section id="investigacion">
222 |                     <h3>1.1 Investigación y planificación</h3>
223 |                     <div class="example-section">
224 |                         <h4>Elementos clave:</h4>
225 |                         <ul>
226 |                             <li>Análisis de usuarios objetivo</li>
227 |                             <li>Benchmarking de competencia</li>
228 |                             <li>Definición de objetivos</li>
229 |                             <li>Arquitectura de información</li>
230 |                         </ul>
231 | 
232 |                         <div class="tip-box">
233 |                             <strong>Tip:</strong> Comienza con un moodboard para establecer la dirección visual del
234 |                             proyecto.
235 |                         </div>
236 |                     </div>
237 |                 </section>
238 | 
239 |                 <section id="wireframing">
240 |                     <h3>1.2 Wireframing</h3>
241 |                     <div class="example-section">
242 |                         <h4>Proceso de wireframing:</h4>
243 |                         <div class="example-grid">
244 |                             <div class="example-card">
245 |                                 <h5>1. Bocetos iniciales</h5>
246 |                                 <p>Dibujos rápidos para explorar ideas</p>
247 |                             </div>
248 |                             <div class="example-card">
249 |                                 <h5>2. Wireframes de baja fidelidad</h5>
250 |                                 <p>Estructura básica y layout</p>
251 |                             </div>
252 |                             <div class="example-card">
253 |                                 <h5>3. Wireframes de alta fidelidad</h5>
254 |                                 <p>Detalles de UI y contenido</p>
255 |                             </div>
256 |                         </div>
257 |                     </div>
258 |                 </section>
259 | 
260 |                 <section id="diseno-visual">
261 |                     <h3>1.3 Diseño visual</h3>
262 |                     <div class="example-section">
263 |                         <h4>Elementos del diseño visual:</h4>
264 |                         <div class="example-grid">
265 |                             <div class="example-card">
266 |                                 <h5>Color</h5>
267 |                                 <p>Paleta y psicología del color</p>
268 |                             </div>
269 |                             <div class="example-card">
270 |                                 <h5>Tipografía</h5>
271 |                                 <p>Jerarquía y legibilidad</p>
272 |                             </div>
273 |                             <div class="example-card">
274 |                                 <h5>Espaciado</h5>
275 |                                 <p>Balance y composición</p>
276 |                             </div>
277 |                         </div>
278 |                     </div>
279 |                 </section>
280 |             </section>
281 | 
282 |             <!-- Diseño con Figma -->
283 |             <section id="figma" class="section">
284 |                 <h3>2. Diseño con Figma</h3>
285 | 
286 |                 <section id="herramientas-figma">
287 |                     <h3>2.1 Herramientas básicas</h3>
288 |                     <div class="tools-grid">
289 |                         <div class="tool-card">
290 |                             <div class="tool-icon">⚪</div>
291 |                             <h4>Frames</h4>
292 |                             <p>Contenedores para diseño</p>
293 |                         </div>
294 |                         <div class="tool-card">
295 |                             <div class="tool-icon">▢</div>
296 |                             <h4>Shapes</h4>
297 |                             <p>Formas básicas</p>
298 |                         </div>
299 |                         <div class="tool-card">
300 |                             <div class="tool-icon">T</div>
301 |                             <h4>Text</h4>
302 |                             <p>Elementos de texto</p>
303 |                         </div>
304 |                         <div class="tool-card">
305 |                             <div class="tool-icon">⚡</div>
306 |                             <h4>Auto-layout</h4>
307 |                             <p>Layouts flexibles</p>
308 |                         </div>
309 |                     </div>
310 |                 </section>
311 | 
312 |                 <section id="componentes">
313 |                     <h3>2.2 Componentes y estilos</h3>
314 |                     <div class="example-section">
315 |                         <h4>Sistema de Diseño</h4>
316 |                         <div class="example-grid">
317 |                             <div class="example-card">
318 |                                 <h5>Color styles</h5>
319 |                                 <p>Variables de color reutilizables</p>
320 |                             </div>
321 |                             <div class="example-card">
322 |                                 <h5>Text styles</h5>
323 |                                 <p>Estilos de texto consistentes</p>
324 |                             </div>
325 |                             <div class="example-card">
326 |                                 <h5>Components</h5>
327 |                                 <p>Elementos UI reutilizables</p>
328 |                             </div>
329 |                         </div>
330 |                     </div>
331 |                 </section>
332 | 
333 |                 <section id="prototipado">
334 |                     <h3>2.3 Prototipado</h3>
335 |                     <div class="example-section">
336 |                         <h4>Tipos de interacciones:</h4>
337 |                         <ul>
338 |                             <li>Navegación entre pantallas</li>
339 |                             <li>Animaciones y transiciones</li>
340 |                             <li>Estados de hover y click</li>
341 |                             <li>Scroll y overlay</li>
342 |                         </ul>
343 |                     </div>
344 |                 </section>
345 |             </section>
346 | 
347 |             <!-- Principios de Diseño -->
348 |             <section id="principios" class="section">
349 |                 <h3>3. Principios de diseño</h3>
350 | 
351 |                 <section id="jerarquia">
352 |                     <h3>3.1 Jerarquía visual</h3>
353 |                     <div class="example-section">
354 |                         <h4>Elementos de jerarquía:</h4>
355 |                         <ul>
356 |                             <li>Tamaño y escala</li>
357 |                             <li>Contraste y color</li>
358 |                             <li>Espaciado y alineación</li>
359 |                             <li>Peso visual</li>
360 |                         </ul>
361 |                     </div>
362 |                 </section>
363 | 
364 |                 <section id="color">
365 |                     <h3>3.2 Teoría del color</h3>
366 |                     <div class="example-section">
367 |                         <h4>Esquemas de color:</h4>
368 |                         <div class="example-grid">
369 |                             <div class="example-card">
370 |                                 <h5>Monocromático</h5>
371 |                                 <p>Variaciones de un solo color</p>
372 |                             </div>
373 |                             <div class="example-card">
374 |                                 <h5>Complementario</h5>
375 |                                 <p>Colores opuestos</p>
376 |                             </div>
377 |                             <div class="example-card">
378 |                                 <h5>Análogo</h5>
379 |                                 <p>Colores adyacentes</p>
380 |                             </div>
381 |                         </div>
382 |                     </div>
383 |                 </section>
384 | 
385 |                 <section id="tipografia">
386 |                     <h3>3.3 Tipografía</h3>
387 |                     <div class="example-section">
388 |                         <h4>Sistema tipográfico:</h4>
389 |                         <div class="example-grid">
390 |                             <div class="example-card">
391 |                                 <h5>Títulos</h5>
392 |                                 <p>Impacto y jerarquía</p>
393 |                             </div>
394 |                             <div class="example-card">
395 |                                 <h5>Cuerpo</h5>
396 |                                 <p>Legibilidad y lectura</p>
397 |                             </div>
398 |                             <div class="example-card">
399 |                                 <h5>UI</h5>
400 |                                 <p>Claridad y usabilidad</p>
401 |                             </div>
402 |                         </div>
403 |                     </div>
404 |                 </section>
405 |             </section>
406 | 
407 |             <!-- Implementación -->
408 |             <section id="implementacion" class="section">
409 |                 <h3>4. Implementación</h3>
410 | 
411 |                 <section id="html-semantico">
412 |                     <h3>4.1 HTML semántico</h3>
413 |                     <div class="example-section">
414 |                         <h4>Estructura básica:</h4>
415 |                         <div class="code-block">
416 |                             <code>&lt;header&gt;
417 |     &lt;nav&gt;...&lt;/nav&gt;
418 | &lt;/header&gt;
419 | &lt;main&gt;
420 |     &lt;section&gt;...&lt;/section&gt;
421 |     &lt;article&gt;...&lt;/article&gt;
422 | &lt;/main&gt;
423 | &lt;footer&gt;...&lt;/footer&gt;</code>
424 |                         </div>
425 |                     </div>
426 |                 </section>
427 | 
428 |                 <section id="css-moderno">
429 |                     <h3>4.2 CSS moderno</h3>
430 |                     <div class="example-section">
431 |                         <h4>Técnicas modernas:</h4>
432 |                         <div class="example-grid">
433 |                             <div class="example-card">
434 |                                 <h5>Custom properties</h5>
435 |                                 <div class="code-block">
436 |                                     <code>:root {
437 |     --primary: #0071e3;
438 |     --spacing: 1rem;
439 | }</code>
440 |                                 </div>
441 |                             </div>
442 |                             <div class="example-card">
443 |                                 <h5>Flexbox</h5>
444 |                                 <div class="code-block">
445 |                                     <code>.container {
446 |     display: flex;
447 |     gap: var(--spacing);
448 | }</code>
449 |                                 </div>
450 |                             </div>
451 |                             <div class="example-card">
452 |                                 <h5>Grid</h5>
453 |                                 <div class="code-block">
454 |                                     <code>.grid {
455 |     display: grid;
456 |     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
457 | }</code>
458 |                                 </div>
459 |                             </div>
460 |                         </div>
461 |                     </div>
462 |                 </section>
463 | 
464 |                 <section id="responsive">
465 |                     <h3>4.3 Diseño responsive</h3>
466 |                     <div class="example-section">
467 |                         <h4>Media queries:</h4>
468 |                         <div class="code-block">
469 |                             <code>/* Mobile First */
470 | @media (min-width: 768px) {
471 |     /* Tablet styles */
472 | }
473 | 
474 | @media (min-width: 1024px) {
475 |     /* Desktop styles */
476 | }</code>
477 |                         </div>
478 | 
479 |                         <div class="tip-box">
480 |                             <strong>Tip:</strong> Usa unidades relativas (rem, em, %) para mejor adaptabilidad.
481 |                         </div>
482 |                     </div>
483 |                 </section>
484 |             </section>
485 | 
486 |             <!-- Mejores Prácticas -->
487 |             <section class="section">
488 |                 <h3>Mejores prácticas</h3>
489 |                 <div class="best-practices">
490 |                     <div class="practice-card">
491 |                         <h4>Diseño</h4>
492 |                         <ul>
493 |                             <li>Mantén la consistencia</li>
494 |                             <li>Prioriza la usabilidad</li>
495 |                             <li>Diseña para móvil primero</li>
496 |                             <li>Usa un sistema de diseño</li>
497 |                         </ul>
498 |                     </div>
499 |                     <div class="practice-card">
500 |                         <h4>Desarrollo</h4>
501 |                         <ul>
502 |                             <li>Código limpio y mantenible</li>
503 |                             <li>Optimización de rendimiento</li>
504 |                             <li>Accesibilidad web</li>
505 |                             <li>Testing en múltiples dispositivos</li>
506 |                         </ul>
507 |                     </div>
508 |                     <div class="practice-card">
509 |                         <h4>Workflow</h4>
510 |                         <ul>
511 |                             <li>Versionado de diseños</li>
512 |                             <li>Documentación clara</li>
513 |                             <li>Feedback temprano</li>
514 |                             <li>Iteración continua</li>
515 |                         </ul>
516 |                     </div>
517 |                 </div>
518 |             </section>
519 |         </main>
520 |     </div>
521 | </body>
522 | 
523 | </html>


--------------------------------------------------------------------------------
/dia-1/teoria/0-diseno-web.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Fundamentos de Diseño Web</title>
  8 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap">
  9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap">
 10 |     <link rel="stylesheet" href="../../styles/main.css">
 11 |     <style>
 12 |         .demo-section {
 13 |             margin: 2rem 0;
 14 |             padding: 2rem;
 15 |             background: var(--section-bg);
 16 |             border-radius: 12px;
 17 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 18 |         }
 19 | 
 20 |         .principles-grid {
 21 |             display: grid;
 22 |             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 23 |             gap: 1.5rem;
 24 |             margin: 2rem 0;
 25 |         }
 26 | 
 27 |         .principle-card {
 28 |             background: var(--section-bg);
 29 |             padding: 1.5rem;
 30 |             border-radius: 12px;
 31 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 32 |             transition: transform 0.3s ease;
 33 |         }
 34 | 
 35 |         .principle-card:hover {
 36 |             transform: translateY(-4px);
 37 |         }
 38 | 
 39 |         .principle-icon {
 40 |             width: 48px;
 41 |             height: 48px;
 42 |             background: var(--primary-color);
 43 |             border-radius: 12px;
 44 |             display: flex;
 45 |             align-items: center;
 46 |             justify-content: center;
 47 |             color: white;
 48 |             font-size: 1.5rem;
 49 |             margin-bottom: 1rem;
 50 |         }
 51 | 
 52 |         .color-demo {
 53 |             display: grid;
 54 |             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 55 |             gap: 2rem;
 56 |             margin: 2rem 0;
 57 |         }
 58 | 
 59 |         .color-box {
 60 |             padding: 2rem;
 61 |             color: white;
 62 |             text-align: center;
 63 |             border-radius: 12px;
 64 |             transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 65 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 66 |         }
 67 | 
 68 |         .color-box:hover {
 69 |             transform: scale(1.05);
 70 |             box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1);
 71 |         }
 72 | 
 73 |         .color-box p {
 74 |             color: white;
 75 |         }
 76 | 
 77 |         .typography-demo {
 78 |             background: var(--section-bg);
 79 |             padding: 2rem;
 80 |             border-radius: 12px;
 81 |             margin: 2rem 0;
 82 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 83 |         }
 84 | 
 85 |         .font-example {
 86 |             margin: 1rem 0;
 87 |             padding: 1rem;
 88 |             background: rgba(0, 0, 0, 0.05);
 89 |             border-radius: 8px;
 90 |         }
 91 | 
 92 |         .font-family-demo {
 93 |             display: grid;
 94 |             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 95 |             gap: 1.5rem;
 96 |             margin: 2rem 0;
 97 |         }
 98 | 
 99 |         .font-card {
100 |             background: var(--section-bg);
101 |             padding: 1.5rem;
102 |             border-radius: 12px;
103 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
104 |         }
105 | 
106 |         .font-preview {
107 |             font-size: 1.5rem;
108 |             margin-bottom: 1rem;
109 |             line-height: 1.4;
110 |         }
111 | 
112 |         .font-info {
113 |             font-size: 0.875rem;
114 |             color: var(--gray-color);
115 |         }
116 | 
117 |         .layout-demo {
118 |             background: var(--section-bg);
119 |             padding: 2rem;
120 |             border-radius: 12px;
121 |             margin: 2rem 0;
122 |         }
123 | 
124 |         .layout-grid {
125 |             display: grid;
126 |             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
127 |             gap: 1.5rem;
128 |             margin: 2rem 0;
129 |         }
130 | 
131 |         .layout-example {
132 |             border: 2px dashed var(--primary-color);
133 |             padding: 1rem;
134 |             border-radius: 8px;
135 |             min-height: 200px;
136 |             display: flex;
137 |             flex-direction: column;
138 |             gap: 1rem;
139 |         }
140 | 
141 |         .layout-box {
142 |             background: var(--primary-color);
143 |             color: white;
144 |             padding: 1rem;
145 |             border-radius: 4px;
146 |             text-align: center;
147 |         }
148 | 
149 |         .tip-box {
150 |             background: rgba(0, 113, 227, 0.1);
151 |             border-left: 4px solid var(--primary-color);
152 |             padding: 1rem;
153 |             margin: 1rem 0;
154 |             border-radius: 0 8px 8px 0;
155 |         }
156 | 
157 |         .example-section {
158 |             background: var(--section-bg);
159 |             padding: 2rem;
160 |             border-radius: 12px;
161 |             margin: 2rem 0;
162 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
163 |         }
164 | 
165 |         .code-example {
166 |             background: #1d1f21;
167 |             color: #fff;
168 |             padding: 1rem;
169 |             border-radius: 8px;
170 |             margin: 1rem 0;
171 |             font-family: 'SF Mono', monospace;
172 |             overflow-x: auto;
173 |         }
174 | 
175 |         .code-example code {
176 |             background: none;
177 |             color: inherit;
178 |         }
179 | 
180 |         .responsive-demo {
181 |             position: relative;
182 |             border: 2px solid var(--primary-color);
183 |             padding: 1rem;
184 |             margin: 2rem 0;
185 |             border-radius: 8px;
186 |             min-height: 200px;
187 |             resize: horizontal;
188 |             overflow: auto;
189 |             max-width: 100%;
190 |         }
191 | 
192 |         .responsive-content {
193 |             display: grid;
194 |             gap: 1rem;
195 |             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
196 |         }
197 | 
198 |         .responsive-item {
199 |             background: var(--primary-color);
200 |             color: white;
201 |             padding: 1rem;
202 |             border-radius: 4px;
203 |             text-align: center;
204 |         }
205 | 
206 |         .accessibility-demo {
207 |             margin: 2rem 0;
208 |         }
209 | 
210 |         .contrast-example {
211 |             display: grid;
212 |             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
213 |             gap: 1rem;
214 |             margin: 1rem 0;
215 |         }
216 | 
217 |         .contrast-box {
218 |             padding: 1rem;
219 |             border-radius: 8px;
220 |             text-align: center;
221 |         }
222 | 
223 |         .bad-contrast {
224 |             background: #f8f9fa;
225 |             color: #dee2e6;
226 |         }
227 | 
228 |         .good-contrast {
229 |             background: #f8f9fa;
230 |             color: #212529;
231 |         }
232 | 
233 |         .animation-demo {
234 |             margin: 2rem 0;
235 |         }
236 | 
237 |         .animate-box {
238 |             width: 100px;
239 |             height: 100px;
240 |             background: var(--primary-color);
241 |             border-radius: 8px;
242 |             margin: 1rem 0;
243 |             transition: all 0.3s ease;
244 |         }
245 | 
246 |         .animate-box:hover {
247 |             transform: translateX(100px);
248 |         }
249 | 
250 |         .controls {
251 |             display: flex;
252 |             gap: 1rem;
253 |             margin-bottom: 1rem;
254 |             flex-wrap: wrap;
255 |         }
256 | 
257 |         .control-button {
258 |             padding: 0.5rem 1rem;
259 |             background: var(--primary-color);
260 |             color: white;
261 |             border: none;
262 |             border-radius: 4px;
263 |             cursor: pointer;
264 |             transition: background-color 0.3s ease;
265 |         }
266 | 
267 |         .control-button:hover {
268 |             background-color: var(--secondary-color);
269 |         }
270 | 
271 |         .font-loading-demo {
272 |             background: var(--section-bg);
273 |             padding: 2rem;
274 |             border-radius: 12px;
275 |             margin: 2rem 0;
276 |         }
277 | 
278 |         .google-font {
279 |             font-family: 'Playfair Display', serif;
280 |         }
281 | 
282 |         .local-font {
283 |             font-family: 'CustomFont', sans-serif;
284 |         }
285 | 
286 |         @font-face {
287 |             font-family: 'CustomFont';
288 |             src: url('path/to/font.woff2') format('woff2'),
289 |                 url('path/to/font.woff') format('woff');
290 |             font-weight: normal;
291 |             font-style: normal;
292 |             font-display: swap;
293 |         }
294 |     </style>
295 | </head>
296 | 
297 | <body>
298 |     <a href="../../index.html" class="breadcrumb">Inicio</a>
299 | 
300 |     <div class="container">
301 |         <header>
302 |             <h3>Fundamentos de Diseño Web</h3>
303 |             <p>Guía completa de principios y prácticas de diseño web moderno</p>
304 |         </header>
305 | 
306 |         <main>
307 |             <section class="section">
308 |                 <h3>1. Principios Fundamentales</h3>
309 |                 <div class="principles-grid">
310 |                     <div class="principle-card">
311 |                         <div class="principle-icon">⚖️</div>
312 |                         <h3>Balance</h3>
313 |                         <p>Distribución equilibrada de elementos visuales</p>
314 |                         <ul>
315 |                             <li>Simetría vs. Asimetría</li>
316 |                             <li>Peso visual</li>
317 |                             <li>Espacio negativo</li>
318 |                         </ul>
319 |                     </div>
320 |                     <div class="principle-card">
321 |                         <div class="principle-icon">↕️</div>
322 |                         <h3>Jerarquía</h3>
323 |                         <p>Organización y priorización de contenido</p>
324 |                         <ul>
325 |                             <li>Tamaños de texto</li>
326 |                             <li>Contraste visual</li>
327 |                             <li>Espaciado</li>
328 |                         </ul>
329 |                     </div>
330 |                     <div class="principle-card">
331 |                         <div class="principle-icon">🎯</div>
332 |                         <h3>Énfasis</h3>
333 |                         <p>Destacar elementos importantes</p>
334 |                         <ul>
335 |                             <li>Color y contraste</li>
336 |                             <li>Escala</li>
337 |                             <li>Posicionamiento</li>
338 |                         </ul>
339 |                     </div>
340 |                     <div class="principle-card">
341 |                         <div class="principle-icon">🔄</div>
342 |                         <h3>Ritmo</h3>
343 |                         <p>Patrones y repetición visual</p>
344 |                         <ul>
345 |                             <li>Espaciado consistente</li>
346 |                             <li>Elementos repetitivos</li>
347 |                             <li>Grids y alineación</li>
348 |                         </ul>
349 |                     </div>
350 |                 </div>
351 |             </section>
352 | 
353 |             <section class="section">
354 |                 <h3>2. Teoría del Color</h3>
355 |                 <div class="color-demo">
356 |                     <div class="color-box" style="background-color: #0071e3">
357 |                         <h3>Primario</h3>
358 |                         <p>Acción principal</p>
359 |                     </div>
360 |                     <div class="color-box" style="background-color: #34c759">
361 |                         <h3>Éxito</h3>
362 |                         <p>Confirmación</p>
363 |                     </div>
364 |                     <div class="color-box" style="background-color: #ff3b30">
365 |                         <h3>Error</h3>
366 |                         <p>Alertas</p>
367 |                     </div>
368 |                     <div class="color-box" style="background-color: #ff9500">
369 |                         <h3>Advertencia</h3>
370 |                         <p>Precaución</p>
371 |                     </div>
372 |                 </div>
373 |                 <div class="tip-box">
374 |                     <strong>Pro Tip:</strong> Usa el contraste de color para guiar la atención del usuario y mejorar la
375 |                     legibilidad.
376 |                 </div>
377 |             </section>
378 | 
379 |             <section class="section">
380 |                 <h3>3. Tipografía</h3>
381 |                 <div class="font-family-demo">
382 |                     <div class="font-card">
383 |                         <h3>Sans-serif</h3>
384 |                         <div class="font-preview" style="font-family: 'SF Pro Display', sans-serif">
385 |                             The quick brown fox jumps over the lazy dog
386 |                         </div>
387 |                         <div class="font-info">
388 |                             <p>Ideal para interfaces y texto en pantalla</p>
389 |                             <p>Ejemplos: SF Pro, Inter, Roboto</p>
390 |                         </div>
391 |                     </div>
392 |                     <div class="font-card">
393 |                         <h3>Serif</h3>
394 |                         <div class="font-preview" style="font-family: Georgia, serif">
395 |                             The quick brown fox jumps over the lazy dog
396 |                         </div>
397 |                         <div class="font-info">
398 |                             <p>Mejor para textos largos y títulos elegantes</p>
399 |                             <p>Ejemplos: Georgia, Merriweather</p>
400 |                         </div>
401 |                     </div>
402 |                     <div class="font-card">
403 |                         <h3>Monospace</h3>
404 |                         <div class="font-preview" style="font-family: 'SF Mono', monospace">
405 |                             The quick brown fox jumps over the lazy dog
406 |                         </div>
407 |                         <div class="font-info">
408 |                             <p>Perfecta para código y datos técnicos</p>
409 |                             <p>Ejemplos: SF Mono, Fira Code</p>
410 |                         </div>
411 |                     </div>
412 |                 </div>
413 |             </section>
414 | 
415 |             <section class="section">
416 |                 <h3>4. Layout y Composición</h3>
417 |                 <div class="layout-grid">
418 |                     <div class="layout-example">
419 |                         <h3>Grid Layout</h3>
420 |                         <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
421 |                             <div class="layout-box">1</div>
422 |                             <div class="layout-box">2</div>
423 |                             <div class="layout-box">3</div>
424 |                             <div class="layout-box">4</div>
425 |                         </div>
426 |                     </div>
427 |                     <div class="layout-example">
428 |                         <h3>Flexbox Layout</h3>
429 |                         <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
430 |                             <div class="layout-box" style="flex: 1">1</div>
431 |                             <div class="layout-box" style="flex: 1">2</div>
432 |                             <div class="layout-box" style="flex: 1">3</div>
433 |                         </div>
434 |                     </div>
435 |                 </div>
436 |             </section>
437 | 
438 |             <section class="section">
439 |                 <h3>5. Diseño Responsive</h3>
440 |                 <div class="responsive-demo">
441 |                     <p style="margin-bottom: 1rem">↔️ Redimensiona para ver el comportamiento responsive</p>
442 |                     <div class="responsive-content">
443 |                         <div class="responsive-item">1</div>
444 |                         <div class="responsive-item">2</div>
445 |                         <div class="responsive-item">3</div>
446 |                         <div class="responsive-item">4</div>
447 |                     </div>
448 |                 </div>
449 |                 <div class="code-example">
450 |                     <code>/* Mobile First */
451 | @media (min-width: 768px) {
452 |     .container {
453 |         max-width: 720px;
454 |     }
455 | }
456 | 
457 | @media (min-width: 1024px) {
458 |     .container {
459 |         max-width: 960px;
460 |     }
461 | }</code>
462 |                 </div>
463 |             </section>
464 | 
465 |             <section class="section">
466 |                 <h3>6. Accesibilidad</h3>
467 |                 <div class="accessibility-demo">
468 |                     <h3>Contraste de Color</h3>
469 |                     <div class="contrast-example">
470 |                         <div class="contrast-box bad-contrast">
471 |                             ❌ Mal contraste
472 |                         </div>
473 |                         <div class="contrast-box good-contrast">
474 |                             ✅ Buen contraste
475 |                         </div>
476 |                     </div>
477 |                     <div class="tip-box">
478 |                         <strong>Pro Tip:</strong> Asegúrate de que el contraste entre texto y fondo cumpla con WCAG 2.1
479 |                         AA (4.5:1 para texto normal).
480 |                     </div>
481 |                 </div>
482 |             </section>
483 | 
484 |             <section class="section">
485 |                 <h3>7. Animaciones y Transiciones</h3>
486 |                 <div class="animation-demo">
487 |                     <p>Hover sobre el cuadrado:</p>
488 |                     <div class="animate-box"></div>
489 |                     <div class="code-example">
490 |                         <code>.elemento {
491 |     transition: all 0.3s ease;
492 | }
493 | 
494 | .elemento:hover {
495 |     transform: translateX(100px);
496 | }</code>
497 |                     </div>
498 |                 </div>
499 |             </section>
500 | 
501 |             <section class="section">
502 |                 <h3>8. Mejores Prácticas</h3>
503 |                 <div class="principles-grid">
504 |                     <div class="principle-card">
505 |                         <div class="principle-icon">📱</div>
506 |                         <h3>Mobile First</h3>
507 |                         <p>Diseña primero para móviles y expande para pantallas más grandes</p>
508 |                     </div>
509 |                     <div class="principle-card">
510 |                         <div class="principle-icon">♿</div>
511 |                         <h3>Accesibilidad</h3>
512 |                         <p>Asegura que tu diseño sea usable por todos</p>
513 |                     </div>
514 |                     <div class="principle-card">
515 |                         <div class="principle-icon">🚀</div>
516 |                         <h3>Performance</h3>
517 |                         <p>Optimiza imágenes y recursos para carga rápida</p>
518 |                     </div>
519 |                     <div class="principle-card">
520 |                         <div class="principle-icon">🎯</div>
521 |                         <h3>Consistencia</h3>
522 |                         <p>Mantén un diseño coherente en toda la interfaz</p>
523 |                     </div>
524 |                 </div>
525 |             </section>
526 |         </main>
527 |     </div>
528 | 
529 |     <script>
530 |         function toggleFontExample(type) {
531 |             const googleExample = document.getElementById('googleFontExample');
532 |             const localExample = document.getElementById('localFontExample');
533 |             const codeExample = document.getElementById('fontLoadingCode');
534 | 
535 |             if (type === 'google') {
536 |                 googleExample.style.display = 'block';
537 |                 localExample.style.display = 'none';
538 |                 codeExample.textContent = `/* Google Fonts */
539 | @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
540 | 
541 | .elemento {
542 |     font-family: 'Playfair Display', serif;
543 | }`;
544 |             } else {
545 |                 googleExample.style.display = 'none';
546 |                 localExample.style.display = 'block';
547 |                 codeExample.textContent = `/* Local Font */
548 | @font-face {
549 |     font-family: 'CustomFont';
550 |     src: url('font.woff2') format('woff2');
551 |     font-display: swap;
552 | }
553 | 
554 | .elemento {
555 |     font-family: 'CustomFont', sans-serif;
556 | }`;
557 |             }
558 |         }
559 |     </script>
560 | </body>
561 | 
562 | </html>


--------------------------------------------------------------------------------