Transcripciones
1. Ejemplos rápidos para el aprendizaje rápido: Hola a todos. hoy vamos a estar aprendiendo sobre animación Web. La animación es realmente útil en tantos contextos diferentes. El ojo humano está cableado para rastrear el movimiento. Entonces sobre todo cuando estamos integrando esto en un proyecto Web, realmente nos ayuda a controlar y dirigir la atención de los usuarios hacia ciertas partes de nuestra página Web. no mencionar que solo hay algo realmente divertido y genial sobre mover el ratón para
el dedo alrededor de una página Web y verlo responder a tus acciones. actualidad, vamos a aprender algunas herramientas de animación Web que puedes aplicar en una amplia gama de contextos. Vamos a aprender a hacer botones, efectos de
hover, imagen de sus efectos. Vamos a aprender a implantar alguna funcionalidad móvil fresca. Y luego incluso vamos a aprender a copiar una característica genial de 10. Si conoces CSS pero nunca lo has usado realmente para animar una página Web que va a ser perfecta para ti. Diseñé esta cancha para presentarte muchos conceptos en poco tiempo como sea posible, así que empecemos
2. Qué necesitas para esta clase: el proyecto de clase va a ser realmente sencillo. Todo lo que necesitas hacer es tomar uno de los ejemplos de este curso y de alguna manera expandirlo . Podrías meterte con el CSS, agrega algunos elementos nuevos al HTML y hacer lo que quieras para simplemente hacerlo genial. Todos los meses voy a estar eligiendo un proyecto de clase que presentó, y lo voy a poner en mi página de twitter. Hablemos muy rápido de lo que vas a necesitar para este curso. En realidad vamos a estar usando código pen, así que no hay necesidad de descargar ni instalar nada. Sí te recomiendo que tengas un moderno navegador Web actualizado. No importa cuál sea siempre y cuando hayas instalado la actualización más reciente. Porque en este curso vamos a acelerar un poco las cosas al no molestarnos en
escribir en código para los prefijos de proveedores. Todavía te voy a mostrar dónde encontrar esos, pero vamos a mantener las cosas realmente simples y todas actualizadas. Los navegadores web modernos ya no necesitan los prefijos de proveedor que estaríamos usando en este tutorial, así que solo asegúrate de tener la versión más actualizada de tu navegador. Por último, a
medida que avines, no asegúrate de copiar eso podría pennyroyal para cada ejemplo y pegarlo en tu
proyecto de clase , porque volveremos a algunos de ellos más adelante en el curso. Si tu navegador está actualizado, cualquier listo para empezar a animar páginas algo, empecemos.
3. Animar botes, fondos y texto: Muy bien, sumémonos y empecemos a animar esta página Web. Como puedes ver, es una página Web súper sencilla. Apenas poco llamó a la acción con este botón. Ahora mismo
, no hace nada. Entonces vamos a vestirlo un poco. Um, vamos a seguir adelante y saltar a la gente del código. Y lo primero que vas a hacer es hacer una copia de esto para que puedas guardar tus cambios. Vuelve a ello si quieres referirlo más adelante. Entonces, ¿de dónde está consiguiendo clics fork aquí arriba? Um, en realidad no
necesitamos registrarnos, así que digamos que salva anónimos. Si tienes una cuenta, puedes iniciar sesión y o si quieres estampar, definitivamente
puedes. Pero no tienes que hacerlo. Perdón por hacerte eso. Y ahora, sólo para que podamos volver a esta página más tarde, vamos a subir aquí y copiar la URL. Vamos a iniciar un proyecto. Pon tu título en. Sólo vamos a decir ejemplo uno y paz a ahí mismo. Está bien, entonces ahora que lo hemos hecho, hablemos de cómo queremos animar esto. Um, creo que sería bastante guay si este botón cambiara a un color diferente cuando la tenemos
encima . Está bien, así que allá vamos podemos ver que el efecto más pesado ahora se aplica cuando tenemos un conejo. Entonces, ¿cómo vamos a ir realmente a animar esto para que no sólo salte derecho a ese otro color? Queríamos realmente desvanecernos a ese azul. Entonces si arrastran sobre el trabajo de un panel de guiones, verán que he recorrido este enlace para ustedes chicos. Vamos a abrir eso ahora mismo sobre los enlaces. Vamos a llevarnos a la página web W tres escuelas dot com. Es un dedo de referencia súper útil. Cualquiera de tus CSS html JavaScript etcétera necesita aquí. Solo estamos mirando la propiedad de transición. Um, y antes de que hables demasiado de esto, solo
quiero hacer una nota rápida. En este curso, no
vamos a estar usando ningún prefijo de proveedor como Web get mas. Um, pero sí toma nota de esto. Si quieres admitir versiones anteriores de estos navegadores, entonces definitivamente vas a querer incluirlos cuando estés implementando esto en tus propios sitios web. Entonces, solo ten eso en mente Veamos esto en impuestos ahora. Entonces tenemos esta transición y vemos que podemos pasar en una federación patrimonial, una función de apriete, un retraso y luego, por
supuesto, heredar
inicial. Entonces, en cuanto a animar el color de fondo, creo que por ahora nos quedemos con la propiedad en duración y podemos hablar de algunos de los otros usos más adelante. De acuerdo, entonces volvamos a entrar y vamos a añadir la propiedad de transición a nuestro botón. Y en realidad tenemos que agregar esto a la clase de botón y no al botón. Ten su clase porque no puedes pasar esa propiedad de transición al mismo tiempo, estás modificando el efecto real que quieres hacer. Entonces sigamos adelante y establecemos la transición a la propiedad del color de fondo. Y hagámoslo un segundo. Podemos tenerla encima ahora, y vemos que ahora está haciendo ese cambio gradual de blanco a azul. Hagámoslo un poco más rápido. Cámbialo para apuntar, y ahora es un efecto mucho más rápido. Por lo que también esta función de sincronización, y básicamente se puede pasar en un montón de cosas diferentes a esto. Desplázate hacia abajo y puedes ver que tenemos un montón de cosas como Facilidad, facilidad de entrada,
facilidad de salida En este momento, vamos a quedarnos con facilidad. Y si lo ralentizamos de nuevo, te darás cuenta de que no es sólo, ah, transición
suave. Ahora en realidad se acelera en el medio y se ralentiza en el inicio y el final un poco. Entonces cambiemos eso de nuevo. Y ahora que tienes esto implementado, estoy notando que una cosa que se ve un poco rara es que el color de la fuente no está cambiando. Entonces eso es bueno. O ten su clase y agreguen justo ese color de peso que se ve mucho mejor. Pero una cosa que notarás, sobre todo si lo ralentizamos, es que el texto en realidad solo está chasqueando de inmediato. No es animar como el resto del botón, así que una cosa que podemos hacer es pasar un nuevo valor a esta propiedad. Podemos decir color. Mantengámoslo dos segundos. Ease ha cambiado esto de nuevo a 0.2 y se puede ver que ambos están animando juntos. Pero esto es mucho recubrimiento repetido, y obviamente no queremos hacer eso más de lo que tenemos que hacer nunca. Entonces veamos algunas otras maneras. se puede hacer. En realidad puedes pasar,
oh, oh, como una propiedad, y eso apunta a cada una de las posibles propiedades animadas que un elemento puede tener y las anima. Y así ves que ahora sigue funcionando. Ambos están animando al mismo tiempo. Por último, hablemos del último valor lo puede pasar a la transición, y ese es el retraso. Entonces sentémonos un retraso de 0.2 segundos. Y ahora veremos que cuando pasemos el cursor sobre ese botón, en
realidad recoge un segundo antes de que la animación lo patee. Veremos en los próximos ejemplos cómo esto puede ser realmente útil, y eso es todo. Ya terminaste con el primer ejemplo. Puedes seguir metiendo un poco con este código si quieres, o puedes sumergirte directamente en la siguiente lección.
4. Toma menos espacio con efectos de bloqueo de imagen: todo bien. lo que para un segundo ejemplo, se
puede ver que tenemos esta página de productos y cada producto tiene una imagen. Y luego un poco de descripción y un botón de compra. Y básicamente, si tuviéramos un montón de productos en
esta página, esto comenzaría a ocupar mucho espacio. Por lo que queremos condensarlo para que solo veamos las imágenes al principio. Y luego cuando la tenemos sobre las imágenes, en realidad
llegamos a ver las descripciones y eso por botón. Entonces veamos cómo podemos hacer eso, aunque de alguna manera vamos a necesitar contener la descripción dentro de esta imagen y se puede ver la en el HTML que realmente la tenemos configurada para que la imagen del producto y la
descripción del parque sean ambos dentro de esta clase de pulgar. Entonces en primer lugar, sigamos adelante y vamos a poner la clase de pulgar para que tenga una altura de 250 píxeles, y vamos a poner a escondida la gripe por encima. puedes ver ahora que no podemos ver esa descripción, está oculta debajo del corte, así que de alguna manera vamos a necesitar hacerlo para que cuando la tengamos sobre una de estas imágenes , esa descripción Div aparece y se cierne sobre la imagen real. Por lo que vamos a estar necesitando hacer algún posicionamiento a la imagen del producto tive en la descripción
del producto. Y para poder hacer eso, realidad
vamos a querer poner la posición en el pulgar. Porque si estamos metiendo con un posicionamiento absoluto en los's, las clases
infantiles realmente estaban consiguiendo el ish de la gente, entrándolas en relación a todo el documento en lugar de a eso algún día. Si es así, evitemos eso estableciendo la posición aquí en relativa. Por lo que sabemos que vamos a estar haciendo algún posicionamiento tanto en la imagen del producto como en la
descripción del producto . Entonces, en lugar de agregar ese atributo absoluto de posición a ambas clases, vamos a añadirlos a los productos. Entonces vamos a decir, Producto, ambos
van a tener una posición de absoluta. También sabemos que vamos a querer mantener nuestra tasa de posición de imagen donde está. Por lo tanto, pongamos a hablar 20 píxeles. Pero también vamos a necesitar establecer donde es la descripción causa En este momento, descripción está oculta detrás de esa imagen del producto con una parte superior de cero también. Por lo que querías realmente estar fuera de página. Entonces Entonces vamos a darle un valor de 250 píxeles. Y como probablemente recordarán, eso es justo debajo donde se corta el pulgar. Entonces, ¿cómo vamos a lograrlo? Entonces cuando pasamos por encima de estas imágenes se mueve hacia arriba y luego la descripción se mueve hacia arriba para ocupar su lugar, Bueno, puede que
hayas adivinado que vamos a usar algunos hover y vamos a apuntar a la imagen. En primer lugar, vamos a decir imagen y sólo vamos a poner la parte superior en negativo 250 arreglar ALS. Entonces ahora que lo hemos hecho, vemos cuando la tenemos de vuelta, esta imagen se está quitando de la pantalla. Pero descripciones no apareciendo, Así que deshierbe para arreglar eso también. Y sólo vamos a establecer los 20 primeros píxeles ahora las descripciones que aparecen realmente cuando la
tengamos . Entonces eso es bueno. Pero, ¿cómo vamos a animar esto? Ya sabemos de la propiedad de transición, pero vamos a hundirnos realmente rápido sobre dónde queremos agregar esto a ¿Se conoció Anna la imagen y la descripción, pero va a ser una especie de dolor pasar en esa propiedad de transición a ambos clases Así que volvamos a esta clase de producto donde has establecido la posición del dedo del pie absoluto. Y sumemos en una transición ahí y la propiedad, estamos transicionando como top. Vamos a ponernos a eso. Démosle un segundo y pongamos la flexibilización para facilitar. Y ahora cuando tenemos sobre esos donde las cosas, ambas
se están deslizando juntas. Pero esto sigue pareciendo un poco raro. Yo quería realmente parecer que la descripción se está deslizando hacia arriba frente a la imagen del producto . Entonces, ¿cómo podríamos hacer esto? Bueno, podríamos usar diferentes propiedades de transición para hacer que esa clase de descripción se mueva
más rápido que la imagen del producto. Pero eso no es muy eficiente estar agregando eso a dos selectores diferentes. Entonces, en cambio, vamos a apuntar a la imagen, y solo vamos a establecer el valor de retardo de transición en 0.5 segundos, y ahora vemos que se están animando por separado. Aceleremos un poco las cosas. Para que eso sea un poco más limpio le permite la transición retrasada nombrar un segundo y vamos a establecer la transición superior a 0.6 segundos, y ahora es mucho más rápido, y en realidad se puede decir que esta descripción Div está apareciendo en frente a esa imagen. Dave. Siéntete libre de seguir metiendo con este código si quieres. Pero si estás listo, saltemos al tercer ejemplo.
5. Modales animados con Pure HTML /CSS: Muy bien, empecemos con el ejemplo. Tres. Esto parece un poco familiar, ¿
no? Si la tienes del botón, podrás ver que es la misma página que estábamos editando antes. Pero si miramos el HTML, aquí están pasando algunas cosas diferentes. Parece que en realidad hay un formulario en la página en algún lugar. Establezcamos la visibilidad dos visibles solo para que veas cómo se va a ver. Podemos ver que vamos a tener correo electrónico,
dirección, un nombre, un botón de enviar y el botón de ACLU. Pero necesitamos encontrar una manera de hacer que en realidad aparezca este formulario cuando hacemos clic en este botón. Entonces, ¿cómo puedes ir a hacer eso? En primer lugar, vamos a configurar este H ref para que apunte a nuestro def metal. Si alguna vez has hecho vínculos de ira antes, esto es casi lo mismo. Entonces lo hicimos aún sin hacer nada, porque vamos a necesitar que la forma sea demasiado visible cuando sea dirigida. ¿ Cómo podemos hacer eso? Bueno, resulta muy parecido a hover. Puedes seleccionar la superposición de formulario cuando está dirigido, y yo iba a hacer para eso es establecer la visibilidad demasiado visible, y ahora hacemos clic en el botón, nuestro extranjero aparece, y cuando haces clic en cerrar, va lejos. Entonces ahora que tenemos esa puesta en marcha, ¿cómo podemos hacer de esto un efecto de transición? Bueno, intentemos configurarlo como hemos hecho con los otros ejemplos. Se puede ver que en realidad no está haciendo esa transición, y la razón por la que no la está haciendo es porque si lo piensas, ¿cómo podríamos realmente pasar de una visibilidad de visible a una visibilidad de oculto? Cuál es el paso entre su CSS no lo sabe, así que en realidad necesitamos darle algo al enemigo. Y si sabes algo sobre CSS, probablemente
pensarás en la función A pass ity aquí. Por lo tanto, vamos a dar nuestra capacidad de superposición de forma predeterminada de cero. Y vamos a dar a nuestra capacidad de superposición de forma focalizada de qué? Y ninguna mujer haga clic en el botón. Ya veremos. En realidad se desvanece en muy cool, pero eso no es todo lo que queríamos hacer. También queremos deslizarnos hacia abajo cuando hacemos clic en él. Entonces, ¿cómo podemos ir a hacer eso? Bueno, primero, vamos a necesitar establecer esta clase de formulario en relativa. Démosle una posición de relativa y, digamos, su estado inicial para tener una parte superior de 300 píxeles negativos. Entonces de esa manera está totalmente a la altura de la pantalla. Ahora, cuando esa forma excesivamente está dirigida, vamos a querer cambiar la parte superior del formulario y establecerla en cero píxeles. Y luego solo vamos a agregar una clase de transición para formar. Ahora te podemos ver. Al hacer clic en él, realidad
se desliza hacia abajo. Sí, señor. Está bien. Por lo que has completado ejemplo. Tres. Siéntase libre de meterse con la forma un poco más. No olvides guardarlo en tu proyecto y pasemos a nuestro ejemplo final.
6. Codepen Copycat: transformar con CSS: todo bien. Entonces para nuestro cuarto ejemplo, quería intentar implementar algo que en realidad creo que es realmente genial con Code Pin. Notarás que puedes redimensionar estos cuadros, y cuando uno de ellos se vuelve demasiado pequeño, aparece
el texto de encabezado, realidad se hace más pequeño y se mueve hacia ese panel de sitio. Entonces aquí tenemos sólo una página Web realmente simple con algún tipo de texto, y queremos hacerla para que este encabezado haga lo mismo que podría hacer Pen cuando la altura del navegador llega a ser demasiado pequeña. Entonces pensemos en cómo podríamos hacer eso. En primer lugar, empecemos ajustando esta clase de encabezado al estado final donde quieres que esté, y para hacer eso en realidad iban a usar una nueva propiedad llamada Transform. Si nunca has usado transform antes, en realidad
es una propiedad realmente útil que es extremadamente útil siempre que estés trabajando con animaciones. Um, tenga en cuenta los prefijos de proveedor, por
supuesto, cuando lo esté implementando en sus propias páginas Web. Pero de nuevo para esta clase, estoy asumiendo que tienes el navegador más actualizado posible, cualquiera que puedas usar y transformar es compatible con todos los navegadores modernos actualizados sin prefijos de proveedor. Entonces, solo saltemos y empecemos a usarlo. Hay muchos valores posibles diferentes que podemos pasar. Hay dos transformaciones D así como tres transformaciones D, pero vamos a mantenerlo bastante simple para este ejemplo. Entonces primero, vamos a entrar y seleccionar están encabezando, y vamos a empezar a aplicarle propiedades transformadas. Entonces primero sabemos que queremos que gire hacia abajo unos 90 grados. Para ello, sólo
podemos decir 90 el E G para grados, y se puede ver que ya está actualizado en la página que se está girando 90 grados. Pero algo raro está pasando aquí. Te darás cuenta de que en realidad está girando en el centro de esta imagen donde, de
verdad, si queremos que esté bajando a este lado pedacito aquí, realidad
queremos que esté girando desde el principio del elemento. Entonces, ¿cómo podemos hacer eso? En realidad hay una propiedad que podemos usar para establecer el origen de esta transformación. Si lo trabajas todo en programas como Photo Shopper Illustrator, probablemente
sepas de lo que estoy hablando cuando digo establecer el punto de origen para una transformación. Um, pero si no, podremos ver muy pronto aquí. Entonces sigamos adelante y llamemos a esta propiedad de origen transformado, y vamos a ponerla en centro porque queremos centrar la altura. Pero queremos que se deje el aspecto horizontal del mismo. Y ahora se puede ver que en realidad lo ha movido hacia el panel lateral aquí
porque donde estaba transitando desde el centro, ahora
está transitando desde el punto más izquierdo. Para que las púas se vea un poco fuera de lugar ahí, y también podemos ver que este top están aquí sigue mostrando todo su espacio. Y parte de toda la razón para implementar esto es cuando las alturas del navegador son demasiado pequeñas. Queremos estar ahorrando espacio. Entonces sigamos adelante y fijemos la altura del encabezado uno 20 píxeles. Y ahora de esa manera, se quitaron
los espacios. Está bien, así que aún no hemos terminado de transformarnos. Adelante y pasemos otro valor y habilidad por ese poco texto. Ahora mismo. Tiene una escala de uno y la deja simplemente establecer en una escala de 0.5 y ahora es mucho más pequeña. Entonces, por último, necesitamos encontrar una manera de centrar este texto aquí. Obviamente, podríamos hacer eso con algún posicionamiento. Pero en realidad hay una función incorporada en la transformación llamada traducir. Y lo que eso hace es moverse alrededor de un elemento por valores horizontales y verticales, muy parecido a la posición. Entonces solo vamos a llamar, traducir, y vamos a pasar. Digamos sólo 20 píxeles para empezar, y si los comparamos cero y 20 podemos ver que sólo se está moviendo verticalmente. Por ahora, también
queremos moverlo horizontalmente, así que vamos a sumar 25 píxeles negativos. Ahora se puede ver que se ha movido un poco hacia arriba, está bien, así que ahora el texto está centrado horizontalmente, pero aún así queremos que sea una especie de línea a este cuadro de texto aquí verticalmente. Cambiemos eso a 60 bien, así que ahora tenemos el encabezado establecido a donde queremos que vaya cuando la altura del navegador sea
lo suficientemente pequeña . Pero ahora realmente necesitamos agregar de nuevo en los valores por defecto. Entonces hagamos una consulta de medios, y vamos a decir que cuando la pantalla sea más alta que 400 píxeles, vamos a hacer algunos cambios en cada uno. Entonces ya sabemos que básicamente vamos a estar deshaciendo esa transformación que hicimos antes
en el documento. Y así lo que podríamos hacer es seguir adelante y copiar todo esto y pegarlo aquí,
establecer la rotación a cero, ajustar la escala hacia atrás dedo del pie uno y decir que se traducen a cero. Y luego cuando nuestra pantalla es lo suficientemente alta, es de vuelta donde empezó. O para hacer las cosas un poco más simples, simplemente
podemos establecer la transformación en su valor predeterminado y lo mismo está sucediendo. Entonces también, notamos que cuando la pantalla es lo suficientemente alta, esa altura sigue faltando. Entonces sigamos adelante y en eso de nuevo adentro y en realidad podemos hacer lo mismo aquí y sólo la altura inicial. Y ahora lo estamos teniendo entre estos dos estados. Entonces ahora que tenemos esa configuración, podemos hacer algo que probablemente se esté sintiendo un poco familiar para, ya
sabes, y agregar en una transición a cada una. Entonces vamos a transitar todas estas propiedades que estaban cambiando. Démosle 0.38 segundos para hacer eso. Dejemos que se alivie. Ahora. Estamos viendo algo de esa misma funcionalidad que podría pin tiene. En realidad quiero que parezca cuando esto está cambiando que los cuadros de texto realmente se
deslizan hacia arriba. Entonces para hacer eso, juguemos con el relleno alrededor de este grupo de forma aquí. Entonces vamos a agarrar esto del código no en él y dejarlo antes de una consulta de medios. Y lo que quiero hacer es cuando las cosas realmente se derrumbaron así. Yo quiero que ese relleno superior a cero y dejar los 20 pixeles palmaditas en la parte inferior en en el lateral para que sea agradable a la plaza así. Pero cuando se expande que el acariciar para atrás, es ahora. Estamos consiguiendo ese bonito espacio cuando lo tenemos, y cuando no se está colapsando. Añadamos una transición de eso para que parezca que los cuadros de texto se deslizan hacia arriba. Entonces solo vamos a decir transición Patty, Vamos a conseguir 1/2 por segundo y lo dije facilidad. Y ahora en realidad va a parecer que esa caja se está deslizando en la maldita! En base a ese texto moviéndose. Ahí tienes, has completado Ejemplo para el. Ese es el final de los ejemplos oficiales. Pero si quieres jugar un poco más con esto, realidad
vamos a hablar un poco de esta facilidad a la que hemos estado configurando todas tus transiciones. Y algunas formas en las que realmente podemos jugar con eso para conseguir algunos efectos realmente rápidos. Entonces si te interesa esa cabeza a la siguiente sección,
um, pero si no, pero si no, siéntete libre de saltar adelante a la conclusión.
7. ¡Ve tus animaciones con Bezier!: Muy bien, volvamos a nuestro tercer ejemplo y hablemos un poco de este valor de facilidad que hemos estado pasando a la transición. Básicamente, si alguna vez has usado un programa como Aftereffects antes, probablemente reconozcas una curva ocupada y una transición. Tiene esta capacidad para cualquiera que estamos configurando facilidad en realidad estaban especificando uno de los pocos bordillas de A
predeterminadas en CSS. Y esa es facilidad aquí mismo. Tengo facilidad y solo una configuración regular de transición lineal. Veamos cómo se comparan esos,
um, um, lo largo de dos segundos. Como puedes ver, ambos tardan dos segundos en llegar al punto final. Pero con la facilidad, se está acelerando en el medio y disminuyendo al final. Por lo que en realidad de alguna manera parece que se está moviendo más rápido. Ahora podemos hacer muchas cosas realmente geniales con esto y simplemente jugar con él para que podamos establecer algunos valores locos como este donde en realidad se acaba de disparar un
poco su transición . Podemos hacer que se detenga en el medio, pero para nuestro ejemplo medio, en realidad sólo como que quería rebasarse un poco justo hacia el final. Entonces Echemos un vistazo a cómo podría parecer eso. Sí, creo que eso será bastante bonito. Por lo que ahora en realidad podemos simplemente copiar todo este texto saltar de nuevo a nuestro ejemplo, y vamos a reemplazar la animación de forma por ese cubic busier. Y ahora cuando hacemos clic en él, se
puede ver que en realidad se acaba de dispararse un poco fresco. Hay un montón de cosas realmente geniales que puedes hacer con cubic busier, así que definitivamente me siento libre de jugar con esos.
8. Próximos pasos: y eso es todo. Terminas el curso a finales de este mes, en realidad
voy a estar lanzando la segunda parte de este curso, que te va a presentar algunos nuevos conceptos geniales como fotogramas clave, animando gráficos vectoriales escalables y reutilizando animaciones en diferentes partes de su página Web e incluso en diferentes sitios web enteramente. Por lo tanto, mantente atentos para eso. Asegúrate de que me estás siguiendo, y te veré entonces.
AJ Burt, Learning is Living Better
