🟢 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.