🟢 DÍA 8: ANIMACIONES, HOSTING Y CSS AVANZADO (5/5)

🎯 Objetivo del día:

Culminar tu web con animaciones CSS, efectos visuales modernos y publicarla en Internet.
También explorarás herramientas avanzadas como filtros, transformaciones, variables CSS y técnicas modernas como clamp, calc y backdrop-filter.

Hoy tu web cobra vida y se hace accesible al mundo real. 🌍

---

📺 Segmento del vídeo para este día:

Curso: Desarrollo Web 24h
Minutos a cubrir: 18:02:13 – 23:42:39
Duración estimada: ~5,5 horas

---

🔍 Contenidos a estudiar

💫 ANIMACIONES:

• Transiciones (transition: all 0.3s ease-in-out).
• @keyframes, animaciones automáticas y al interactuar.
• Efecto typewriter, animaciones con scroll.
• Integración de animaciones en una web real.

☁️ WEB HOSTING:

• Introducción al hosting gratuito.
• Cómo subir tu web a GitHub Pages, Netlify o mediante FTP.
• Consideraciones de seguridad y rendimiento.

🧪 CSS AVANZADO:

• Filtros (filter, backdrop-filter).
• Transformaciones (scale, rotate, skew).
• Unidades modernas: min(), max(), clamp().
• Variables CSS (--color-acento: #f00).
• Funciones calc(), color-mix().
• Viewport dinámico (dvh, lvh, svh).
• Propiedades especiales de texto (initial-letter, text-wrap, etc.).

---

🧠 Apuntes Técnicos recomendados

Transición + animación básica

button {
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #444;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero {
  animation: aparecer 1s ease forwards;
}

Uso de clamp() y variables

:root {
  --color-principal: #0066cc;
  --tamano-texto: clamp(1rem, 2vw, 2rem);
}

h1 {
  color: var(--color-principal);
  font-size: var(--tamano-texto);
}

---

🛠️ Proyecto Práctico

✅ Animaciones:

• Añade al menos 2 tipos de animaciones:
  • Una de entrada al cargar (@keyframes).
  • Una sobre interacción (:hover, :focus, etc.).
• Usa transition en botones o elementos interactivos.
• Opcional: aplica efecto typewriter o fade-in a un título o bloque.

✅ Hosting:

• Elige una plataforma:
  • GitHub Pages (estático).
  • Netlify (mejor manejo de rutas y despliegue rápido).
  • Hostinger/000webhost si quieres probar vía FTP.
• Publica tu web y guarda el enlace.

✅ CSS moderno:

• Usa al menos una variable (--nombre) y una función calc() o clamp().
• Integra un filter o backdrop-filter para experimentar.
• Ajusta tamaños con unidades relativas (no px rígidos).

---

📄 Entrega y Evidencias (PAF)

Prepara un documento PDF o carpeta comprimida que contenga:

• ✅ Capturas:
  • De las animaciones funcionando.
  • De la web publicada en navegador.
  • De efectos como filtros o transformaciones.
• ✅ Código fuente comentado.
• ✅ URL pública de la web subida.
• ✅ Notas personales:
  • ¿Qué animación fue más fácil/difícil de aplicar?
  • ¿Qué aprendiste sobre el despliegue web?
  • ¿Qué parte del CSS avanzado te pareció más útil para el futuro?

---

🎯 Resultado esperado al finalizar el día

✅ Web publicada en Internet.
✅ Animaciones integradas de forma elegante.
✅ Uso práctico de CSS moderno (variables, filtros, funciones).
✅ Proyecto real terminado, visual, adaptable y profesional.

---

💪 Cierre

¡Lo lograste! 🎉
Has pasado de crear una simple página a construir, animar y publicar un sitio real con diseño adaptable, accesible y visualmente moderno.
Hoy demostraste que no solo sabes programar, también sabes crear experiencias visuales completas.

Este sitio es tu carta de presentación.
¡Y es solo el comienzo!
A partir de aquí, puedes añadir más funcionalidades, crear proyectos reales y consolidarte como desarrollador front-end profesional con visión DevSecOps.

🚀 ¡Enhorabuena! Prepárate para el siguiente módulo, donde aplicaremos seguridad, backend y despliegue avanzado.

---