Curso de Animación Web con CSS – online

Gratis
Curso de Animación Web con CSS – online

Curso en vivo  
Clases online en directo: martes y jueves
Horario: 17h a 19h (GMT +1)
Duración: 7 semanas (20 horas de clases en directo +16 horas de trabajo en casa).

Aprende los fundamentos de la animación web, incluyendo los conceptos básicos de CSS como selectores, propiedades y valores, y descubre cómo usarlos para crear animaciones y transiciones fluidas.

Accede a ESAT Online

¿Qué vas a aprender?

Disfruta de la animación web de forma fácil

A través de este curso, aprenderás los fundamentos de la animación web: los conceptos básicos de CSS como selectores, propiedades y valores, y, además, cómo usarlos para crear animaciones y transiciones fluidas.

También aprenderás a crear animaciones utilizando keyframes, animaciones de transición, animaciones basadas en eventos y efectos especiales..

Para quién es

Es recomendable que, para aprovechar este curso, tengas un conocimiento básico de HTML y CSS.

Deberías estar familiarizados con la estructura básica de una página web, incluyendo la estructura de etiquetas HTML y la forma en que se utilizan las hojas de estilo CSS para dar estilo a una página.

Herramientas que verás en el curso

  • Cuenta en Github: es una plataforma de alojamiento de código fuente y desarrollo colaborativo.
  • Cuenta en Codesandbox: es una plataforma de desarrollo en línea que permite a los usuarios crear, compartir y colaborar en proyectos de código
  • Editores de código: Herramientas como Visual Studio Code para escribir y probar código.
  • Navegadores web: Uso de navegadores como Chrome, Firefox y Safari para probar y depurar animaciones.
  • Greensock (GSAP): Una librería de JavaScript para crear animaciones avanzadas.
  • Herramientas de diseño: Figma para diseñar y planificar las animaciones.
  • DevTools: Herramientas de desarrollo integradas en los navegadores para depurar y optimizar las animaciones.

Proyecto final

Realizarás un proyecto que integre los conocimientos adquiridos. Incluirá la implementación de la técnica de scrollytelling en una landing page, animando secciones conforme el usuario se desplaza por la página.

Diseño y estructura de la landing page: Decidirás la estructura, el contenido y el diseño básico de la landing page. También realizarás la implementación de animaciones básicas: Aplicarás las técnicas aprendidas en las primeras sesiones para animar elementos básicos de la página.

Y, por último, implementarás animaciones avanzadas : Integrar animaciones más complejas, como las basadas en scrollytelling y animaciones SVG.

    • Introducción a la animación web
      • Definición y utilidad de las animaciones CSS
      • Análisis de ejemplos de animaciones CSS
      • Diseño inicial de la landing page, definición de secciones y elementos que se animarán
      30 minute(s)
    • Ventajas y desventajas de las animaciones CSS
      • Análisis de las ventajas y desventajas de las animaciones CSS
      • Comparativa entre animaciones CSS y JavaScript
      • Identificación y discusión de secciones de la landing page que se beneficiarían de animaciones CSS vs. JavaScript
      30 minute(s)
    • Configuración del entorno de trabajo
      • Elección, instalación y configuración de un editor de código
      • Creación y definición de objetivos para un proyecto de animación
      • Organización de archivos y carpetas
      • Configuración del entorno de trabajo y estructuración inicial del proyecto de la landing page
      30 minute(s)
    • Introducción a las transiciones CSS
      • Introducción a las transiciones y su utilidad
      • Exploración de la propiedad transition y sus valores
      • Creación de un botón con efecto de transición que será utilizado en la landing page
      30 minute(s)
    • Animaciones Keyframes
      • Introducción a @keyframes y su sintaxis
      • Uso y configuración de la propiedad animation
      • Creación de un slider animado con imágenes para la sección de testimonios de la landing page
      30 minute(s)
    • Transformaciones en CSS
      • Exploración del sistema de coordenadas y transformaciones 2D/3D
      • Uso de la propiedad transform-origin
      • Diseño y animación de elementos gráficos en 3D para destacar características del producto o servicio en la landing page
      30 minute(s)
    • Animaciones avanzadas
      • Seguridad, SEO, Backup y Cache
      • Creación de animaciones multietapa y de bucle
      • Uso de eventos de animación
      • Animación de texto cambiante para mostrar estadísticas o puntos clave en la landing page
      30 minute(s)
    • Animaciones con SVG
      • Introducción a SVG y su uso en animaciones
      • Animación de un logo responsive para la landing page
      30 minute(s)
    • Introducción a Greensock
      • Uso de librerías como Greensock y sus plugins
      • Creación de una sección interactiva con ScrollTrigger en la landing page
      30 minute(s)
    • Proyecto final y recursos adicionales
      • Desarrollo de un proyecto final que integre los conocimientos adquiridos
      • Implementación de la técnica de scrollytelling en la landing page, animando secciones conforme el usuario se desplaza por la página
      • Presentación de frameworks, librerías y herramientas útiles
      • Recomendaciones de recursos en línea para seguir aprendiendo
      30 minute(s)
  • Desarrollo de sitios web: Como desarrollador de sitios web, serás responsable de crear y mantener páginas web funcionales y atractivas, trabajando tanto en el front-end como en el back-end para ofrecer una experiencia de usuario completa.
  • Animación con CSS: Como especialista en Animación con CSS, mejorarás la experiencia del usuario en sitios web al crear efectos visuales interactivos, siendo un activo clave en equipos de diseño y desarrollo web.

Carmen Ansio

Diseño y desarrollo web - Linkedin

Bio

Soy una gran fan del código creativo y las animaciones SVG. Me encanta mezclar código y diseño ♥

Diseñar es más divertido cuando lo haces con código.  usuario.

Experiencia

Ingeniera UX anteriormente trabajando en Codely y como Software Engineering Manager en Holaluz. Ha colaborado en la organización de varios eventos tecnológicos para mujeres con AdaJS, y ha sido ponente y co-presentadora en el podcast WeCodeSign.

    Más información y matrícula

    Envíanos tus consultas o inicia el proceso de matriculación, utilizando el siguiente formulario o llamando al 963 155 637. Nuestro horario de atención telefónica es de 9:00 a 18:00, de lunes a viernes, y de 9:00 a 14:00 los sábados.

    Términos y condiciones de privacidad: Los datos requeridos son necesarios para gestionar tu solicitud de información y mantener el contacto contigo. Si no facilitas los datos requeridos no podremos atender y gestionar tu petición. Los datos facilitados serán tratados y podrán incorporarse a un fichero cuya titularidad y responsabilidad sobre su tratamiento la ostenta la Escuela Superior de Arte y Tecnología (ESAT), con la finalidad de mantener el contacto y suministrarte información, en base a tu propia solicitud y consentimiento. Los datos serán tratados durante los plazos legalmente establecidos y serán conservados mientras mantengas tu relación con nosotros, siendo suprimidos una vez terminada la misma, a excepción de aquellos que legal o contractualmente sea necesario conservar. La cumplimentación, aceptación y envío del formulario, confirma tu consentimiento y autorización para el registro y tratamiento de tus datos, su inclusión en el fichero precitado y el envío/recepción de comunicaciones electrónicas o postales por parte de ESAT con la información solicitada. En cualquier momento podrás revocar tu consentimiento para ello sin que ello afecte a la licitud del tratamiento basado en tu consentimiento previo a su retirada, así como ejercer los derechos legalmente reconocidos sobre tus datos personales, entre otros, los derechos de acceso, rectificación, supresión y, en su caso, limitación del tratamiento, portabilidad u oposición, en el modo y forma establecidos en la Política de Privacidad recogida en este sitio web. Todo ello sin perjuicio de los derechos que te asistan para formular cualquier reclamación en defensa de tus derechos e intereses ante la Agencia Española de Protección de Datos. Si desea más información al respecto, contactar con nuestro Delegado de Protección de Datos formular cualquier reclamación, puede hacerlo a través de la dirección dpd@esat.es.

    (*) Campos de cumplimentación obligatoria.

    Ex alumnos y profesionales que nos valoran

    ignacio-bueno

    Nacho Bueno

    AKQA
    Durante mi estancia en Northumbria he crecido a todos los niveles, pero sin duda, lo que más valoro ha sido la oportunidad que he tenido para... [+]
    jonathan-kutnowski

    Jonathan Kutnowski

    Blinkfire Analytics
    Jonathan Kutnowski, exalumno de ESAT pudo probar, estudiando la carrera de Diseño y Multimedia, múltiples disciplinas para determinar que lo que más le interesaba eran las... [+]
    jose-manuel-naranjo-esat

    Jose Manuel Naranjo

    Ubisoft
    Desde pequeño he estado rodeado de juegos y consolas, algo que siempre generó en mí una profunda curiosidad en como se hacen videojuegos. Empecé mis estudios... [+]
    diego-cremades-esat

    Diego Cremades

    elite3d
    Decidí entrar en la ESAT por su ambiente familiar, sus instalaciones y por la enseñanza personalizada que los profesores emplean para cada alumno. Una vez dentro,... [+]
    leopoldo-coto-esat

    Leopoldo Coto

    2K Games
    Empezar a estudiar un HND in Arts and Videogames en ESAT ha sido una de las mejores decisiones que he tomado un mi vida. Desde niño,... [+]
    sergio-alapont-esat

    Sergio Alapont

    Arm
    Como otros muchos, estudié "Ingeniería informática" en la universidad con la esperanza de cumplir mi sueño de trabajar en la industria del videojuego. Sin embargo, al... [+]
    fernando-ferrando-esat

    Fernando Ferrando

    Saber Interactive
    Llegué a la ESAT con la esperanza de poder dedicar mi vida a los videojuegos, desde pequeño siempre quise dedicarme a eso, pero no había estudios... [+]
    dani-sierra-esat

    Dani Sierra

    elite3D
    Durante los 3 años de carrera de programación obtenemos un nivel muy alto de desarrollo videojuegos. Esto nos permite terminar la carrera en universidades de Reino... [+]
    hector-riera

    Héctor Riera

    elite3d
    Cuando era pequeño siempre tenía la inquietud de saber como se hacían los videojuegos, las películas de animación y los efectos especiales, pero lo veía como... [+]
    adrian-torres

    Adrián Torres

    Ophion Studios
    Entré en ESAT pensando que ya que se me daban bien los videojuegos, me gustaría crearlos. Nada más lejos de la realidad. Me di cuenta de... [+]
    esther-garcia-zurita-esat

    Esther García Zurita

    Inditex
    Decidí entrar en ESAT porque tenía muy claro que el diseño gráfico era lo mío y la universidad me ofrecía una oportunidad de poder estudiarlo. Además,... [+]
    tamara-trub-esat

    Tamara Trüb

    Entwicklungspark AG
    Al visitar por primera vez ESAT, las instalaciones, la gente y las posibilidades que ofrecían me dejaron boquiabierta. Lo que en principio era barajar una posibilidad... [+]
    aleix-merlos-vela

    Aleix Merlos Vela

    Lionbridge
    Desde bien pequeño siempre me ha apasionado el mundo de los videojuegos, desde el estilo gráfico hasta la música. Era una ilusión el pensar poder dedicarme... [+]
    eduardo-mira

    Eduardo Mira

    Freelance
    Estudiar en Inglaterra te abre un mundo de posibilidades. Cuando terminé mis estudios HND in Graphic & Multimedia Design en ESAT Valencia no dudé en continuar... [+]
    ignacio-galve

    Ignacio Galve

    IVO
    Mi experiencia personal con alumnos del HND in Software Engineering y HND in Graphic Design and Multimedia ha sido muy satisfactoria. Allá en donde he encontrado... [+]
    erika-andrada

    Erika Andrada

    Freelance
    Me decidí por ESAT porque me ofrecía la parte tecnológica y artística juntas, en comparación con otras universidades o escuelas. Estudiar en ESAT me ha aportado... [+]
    kike-domingo

    Kike Domingo

    Vitcord
    Dos días después de la última clase de mi HND en Diseño y New Media Arts me fui a vivir a San Francisco; desde entonces no... [+]
    lucas-gonzalez

    Lucas González

    Parallel Circles
    Empecé mis estudios de videojegos con el HND in Computing Systems Development en ESAT, la motivación que tenia de crear videojuegos me ayudo a trabajar bastante... [+]
    ruben-moragon

    Rubén Moragón

    Guerrilla Games
    Me gradué en ESAT con una sensación muy diferente a la de mi anterior carrera: que esta vez si estaba más preparado para trabajar. Tras su... [+]