Reg谩late acceso ilimitado a todos los cursos por 1 a帽o a precio especial de Navidad 馃巹

Antes: $199

Currency
$149/a帽o
reg铆strate

termina en:

18D
6H
44M
27S

5 razones para usar animaciones en la web

1/20
Recursos

En este curso implementaremos algo muy divertido para aprender al hablar de una pel铆cula muy famosa, donde la protagonista se pregunta el por qu茅 de varias cosas.

Justamente ese nuestro punto de partida 驴Por qu茅 hacer animaciones?

  • Tienen beneficios para el cerebro
  • Comunican
  • Conectan los contextos
  • Generan una coreograf铆a de UI
  • Llaman la atenci贸n

1. Las animaciones tienen beneficios para el cerebro

Las animaciones permiten reducir el esfuerzo que hace el usuario al entrar a una p谩gina web con varios elementos, por consiguiente, elevamos la atenci贸n en lo m谩s importante.

2. Las animaciones comunican

Las animaciones sirven para elaborar un hilo conductor que est茅 asociado a la vida real, caso contrario, puede generar confusi贸n o frustraci贸n.

3. Las animaciones conectan los contextos

Las animaciones relacionan las caracter铆sticas 煤nicas de cualquier aplicaci贸n, independiente de la plataforma en la que se usa o el lenguaje que fue construido.

En conjunto con las im谩genes y la tipograf铆a, las animaciones son relevantes para que el usuario tenga la sensaci贸n de que est谩 en el mismo lugar.

Por ejemplo, Platzi, independiente de la versi贸n en Android, Apple o en la web, sus animaciones son las mismas haciendo que el usuario reconozca la aplicaci贸n.

4. Coreograf铆a de UI

Las animaciones deben tener coherencia en el movimiento y la duraci贸n. Una pelota rebotando suavemente no transmite lo mismo que una pelota rebotando r谩pidamente.

5. Las animaciones llaman la atenci贸n

Esta es la intercepci贸n de las razones anteriores, las animaciones reducen la carga cognitiva para comunicar y expresar varias situaciones de la vida real de manera ordenada, pensando en el futuro de aquello que estamos creando.

馃帀隆Bienvenido/a al curso! Y acompa帽anos a este incre铆ble mundo de 鈥淎lice in Animationland鈥.

animationland01.PNG

Profesora: Estefany Aguilar ( Desarrolladora Frontend en La Haus )
Twitter: @teffcode

Codi.link es un editor de c贸digo para escribir HTML, CSS y JavaScript, y visualizar el resultado a tiempo real. A lo largo del curso observar谩s ejemplos con esta herramienta. Util铆zalo para da帽ar o crear nuevos ejemplos que te ayuden a reforzar los temas aprendidos.

Contribuciones del curso creadas por Andr茅s Guano.

Aportes 48

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

鈽 Las animaciones tambi茅n son importantes para brindar uuna buena experiencia de usuario. 驴Algunas vez has entrado a una de estas p谩ginas modernas y has sentido como las animaciones le dan un toque m谩s suave? El uso de animaciones puede llegar a ser muy importante, ya que de alguna manera puedes sentir que tu p谩gina est谩 鈥渧iva鈥 馃槃
.
Adicionalmente, hacer animaciones con CSS es rid铆culamente f谩cil, tal vez muchos lleguen pensando aqu铆: 鈥淣o, es que esto es dif铆cil, seguro ser谩 mucho c贸digp鈥, pero para nada es as铆, con muy pocas propiedades puedes crear animaciones bien pro 馃槈. De hecho, seguramente escribas m谩s reglas para darle estilos a tu elemento que las reglas que escribir谩s para animar jaja.
.
So, ya que est谩s aqu铆鈥 隆脕nimos! Este curso es incre铆ble 馃槃

**Resumen de la primera clase: **

- Las animaciones tienen beneficio para nuestro cerebro: Ayudan a reducir la carga cognitiva, y generar atenci贸n en espacios realmente importantes.

**- Las animaciones se comunican: **Las figuras emiten diversos mensajes que nos ayudan a asociar situaciones en la vida real.

**- Las animaciones conectan contextos: **Si ejecutar铆amos una App m贸vil y la web de un mismo sitio(ejemplo: Platzi), la animaci贸n ayudar铆a a que logremos relacionarlos y reconozcamos de manera r谩pida de quien se trata. (Platzi)

- Coreograf铆a de UI: Las animaciones deben comunicar el mismo mensaje.

**- Las animaciones llaman la atenci贸n: **Si bien es cierto que las animaciones son visualmente entretenidas y c贸modas, ayudan a resaltar ciertas cosas de nuestro sitio web.

5 Razones para usar animaciones en la web
1 - Las animaciones tienen beneficios para el cerebro: nos ayudan a reducir la carga cognitiva, Con animaciones podemos hacer que los usuarios se enfoquen en las partes importantes de un web dejando de lado lo que no es tan importante.
2 - Las animaciones se comunican: Los seres humanos tratamos de conectar absolutamente todo, con animaciones podemos facilitar la comunicaci贸n entre diferentes objetos.
3 鈥 Las animaciones conectan contextos: Independientemente de la plataforma por la que entro (web o app), debo tener la sensaci贸n como usuario de que estoy en el mismo lugar.
4 鈥 Coreograf铆a de UI: Todas las animaciones que creemos deben comunicar de la misma manera. Debe haber coherencia cuando creamos las animaciones.
5 鈥 Las animaciones llaman la atenci贸n: Nos ayudan a reducir la cargar cognitiva, nos ayudan a comunicar y tambi茅n a expresar muchas cosas.

Lo mas dif铆cil del curso ser谩 aprender a ignorar que el fondo se mueve 馃槄

Uso practico de las animaciones con CSS
.
Yo estoy haciendo un juego para mi portafolio con CSS, cuando este listo les dejare el enlace.
.
El punto es que para que parezca que el pacman y los fantasmas se mueven, yo use unos efectos en css. As铆 que no solo son muy cool, sino que tambi茅n son 煤tiles para crear arcade games

Alguien mas noto que el fondo se estaba moviendo O: jajaja

Las 5 razones para usar animaciones en la web

Serian las siguientes:

  • Las animaciones tienen beneficios para el cerebro
  • Las animaciones se comunican.
  • Las animaciones conectan los contextos
  • Coreograf铆a de UI
  • Las animaciones llaman la atenci贸n.

Pdt: Que excelente que se empiece hablando de lo bueno de las animaciones, normalmente nos encontramos con gente que dice que esto puede ser algo perjudicial para las paginas. 馃槂

Estuve esperando este curso desde que lo anunciaron 鉁 Me gusta mucho las ganas que tiene la profe en ense帽ar de la mejor manera.

Hola, comparto mis notas del curso, tienen la opci贸n de duplicarlo, si as铆 lo desean!
https://pickled-dugout-35a.notion.site/Transformaciones-y-Transiciones-en-CSS-c1b86bea5cb54d7aab02714ca3ed787a

Hab铆a buscado un curso de animaciones en CSS y vi que exist铆a uno en el pasado, que bueno saber que se convirtieron en m谩s de 1!
Espero aprender mucho 馃槃

馃悋 Waaaaaa鈥 Necesito seguir este conejo si o si!!! 馃挌

Alguien m谩s se dio cuenta que Teff estaba vestida igual que Alicia!!! 馃槃

Muy buena explicaci贸n Miss!1 Cada vez me emociono m谩s en entrar a este mundo de la animaci贸n web

馃嵖5 razones para usar animaciones en la web

鉂as animaciones tienen beneficios para el cerebro

Ayudan a reducir la carga cognitiva, y generar atenci贸n en espacios realmente importantes.

馃АLas animaciones se comunican

Los seres humanos tratamos de conectar absolutamente todo, con animaciones podemos facilitar la comunicaci贸n entre diferentes objetos.

馃挍Las animaciones conectan contextos

Independientemente de la plataforma por la que entro (web o app), debo tener la sensaci贸n como usuario de que estoy en el mismo lugar.

馃挌Coreograf铆a de UI

Todas las animaciones que creemos deben comunicar de la misma manera. Debe haber coherencia cuando creamos las animaciones.

馃挋Las animaciones llaman la atenci贸n

Nos ayudan a reducir la cargar cognitiva, nos ayudan a comunicar y tambi茅n a expresar muchas cosas.

Me emociona mucho el tema de las animaciones

Justamente me encantan las clases de la profesora Estefany Aguilar :3

Me encantan los cursos con Estefany, ella al igual que Juan David son excelentes profes.

Empezando este curso que lo he estado esperando desde que lo anunciaron

Totalmente magnifico, es muy importante darle animaciones a las p谩ginas web!!!

5锔忊儯 razones para usar animaciones en la web

Ideas/conceptos claves

La carga cognitiva es el esfuerzo utilizado en la memoria de trabajo

Apuntes

1. Las animaciones tienen beneficios para el cerebro 馃

  • La carga cognitiva 鈬 llenar todo el website nos cansa como usuarios revisar cada detalle
  • Con las animaciones podemos hacer que el usuario se enfoque en ciertos lugares deseados

2. Las animaciones se comunican 馃憚

  • Nosotros como personas tratamos de darle sentido o 鈥渉ilo conductor鈥 a cosas de la vida cotidiana
  • Podemos aplicar esta idea en productos digitales para mejorar la compresi贸n

3. Las animaciones conectan los contextos 馃拰

  • El producto final debe comunicar una misma idea a lo largo del mismo
  • Por lo cual nos podemos comunicar una idea a trav茅s de animaciones

4. Core贸grafa de UI 馃暫

  • Las animaciones deben tener consistencia es decir que se sientan de igual forma

5. Las animaciones llaman la atenci贸n 馃憗锔

  • Esto resume los anteriores puntos
  • Las animaciones cumplen el rol de:
    1. Reducir la carga cognitiva
    2. Comunicar y expresar una idea o mensaje

Apuntes / Notas / Resumen

Recopilatorio de res煤menes hechos por la comunidad, todo en un solo lugar GitHub. Adem谩s, en este repositorio encontraras mas resumenes de los cursos de la escuela de Desarrollo Web.馃槉


鉁 This is open source, share it with the world.鉂

Analizando un poco la clase entend铆 que las animaciones no deben de abrumar al usuarrio. A mi parecer la funci贸n de la animaci贸n el llevar la atencion del usario hacia un elemento deseado.

Aprovechare al m谩ximo el curso, para implementarlo en buenas futuras paginas web 馃槃

5 razones para usar animaciones en la web

  1. Las animaciones tienen beneficios para nuestro cerebro. Evitando la sobre carga cognitiva de un sitio web, haciendo que el usuario se enfoque en lo importante.
  2. Las animaciones se comunican. Porque nos permiten armar un hilo conductor que nos relacione con la vida real.
  3. Las animaciones conectan contextos, si hacemos web y mobile nos permiten comunicar lo mismo.
  4. La coreograf铆a de UI. Nos permiten comunicar de la misma manera usando las mismas animaciones. Esto siendo coherentes con estas.
  5. Las animaciones llaman la atenci贸n, que ser铆a como un resumen de las primeras 4 razones.
  1. Las animaciones tiene beneficios para el cerebro, ya que estas reducen el esfuerzo que se hace al momento de visualizar la informaci贸n.
  2. Las animaciones se comunican: como seres humanos tendemos a formar un hilo conductor y por tanto asociamos todo a figuras o dibujos.
  3. Las animaciones conectan con textos: el texto debe ser igual para cualquier aplicaci贸n para que pueda haber una conexi贸n.
  4. Coreograf铆as de ui: Los pasos deben coincidir unos con otros. Las animaciones deben ser de la misma forma, que haya una comunicaci贸n entre s铆.
  5. Las animaciones llaman la atenci贸n: est谩s deben comunicar.

Nunca he visto la pel铆cula y no tengo ganas de verla, espero que no haya mas referencias de ella en el resto del curso. Se volver谩 insufrible de haber mas.

La clase va de animaciones, pero poner un fondo animado es distractivo y hasta un poco molesto, quita la atenci贸n a la presentaci贸n. La comunicaci贸n corporal de la profesora es excelente y creo que eso era suficiente para la clase.

Con Estefany no aplica lo de colocar. mayor velocidad del video

Las animaciones鈥

  1. Tienen beneficios para el cerebro | relajan
  2. Comunican | crean historias
  3. Conectan contextos | dan personalidad
  4. Coreograf铆a UI | debe haber armon铆a
  5. Llaman la atenci贸n | facilitan la atenci贸n

El curso se ve genial, lista para aprender transformaciones y transiciones en CSS 馃槂

Notas de la clase

Uff!! Gracias!! Gran profesora!! Gracias por ir complementando m谩s cursos para la escuela Web.

Esta genial este inicio y la referencia me encanto

Que nota de curso! 馃憣

Yo sent铆a que le faltaba algo a Platzi para ser perfecto. Ahora entiendo que siempre fue el Cosplay 馃槏

una clase muy creativa relacionando con pais de las maravillas yuju muy genial

gracias teff la mejor profesora de platzi que conozco

Genial, estaba esperando este curso. A darle!

Ten铆as muchas ganas de que saliera este curso!!! Adem谩s Estefany es de mis profesores favoritas 馃挌

Las animaciones me parecen muy importantes porque llaman la atenci贸n (lo que en dise帽o podr铆amos denominar peso visual) por ende nos permite ayudar al usuario a navegar por nuestra p谩gina (adem谩s se ve genial!).

Hoy se lanz贸 el curso! Me encanta 馃挌

El proyecto final del curso se ve muy interesante 鉁

Alice in chains 馃槄

Para un Frontend es super importante saber hacer animaciones y llevar a realidad las ideas geniales que muchos dise帽adores tienen en la cabeza.

Buenos puntos, como desarrollador indi , diria que las animaciones hacen todo mas fluido y que se mire mas profesional la pagina al hacer que todo se muestre fluidamente y no abrutamente

ya me emociona aprender este curso

a seguir al conejo al fondo de su madriguera

Comienzo una nueva aventura a la par que me pongo a realizar apuntes en Notion casi que por primera vez para ir probando si me resulta mejor estrategia de estudio a solo ir tomando las clases.
Es un tema que me interesa mucho y espero pronto poder estar implementando animaciones que resulten agradables a la vista, pero que cuenten algo al usuario final.
A darle con todo 馃殌

馃敶Les recomiendo esta pagina para acompa帽ar el curso馃槈