 Bienvenidos a la ponencia de Kike Rodríguez. Bueno, Kike Udate, perdón, Kike Upday, como a él le gusta que le llamen. Que es un diseñador web súper profesional y muy especializado en la animación web. Y os va a enseñar la teoría y la práctica de la animación. Así que, adelante, Kike. Buenas tardes, gracias por la presentación. Bueno, muchas gracias por estas palabras, señora Merchem. Ella es el motivo del que he venido aquí, porque ella la que me animó para hacer la presentación. Yo no quería presentar solo una para ver si no me cogían, realmente. Pero, bueno, al final me han cogido. Y luego la otra razón por la que venía era los cuatro finales para conseguir tazas y te voy a decir una cosa. Empezó mal porque he perdido la taza de Lucas Joss. Vamos mal, estoy muy nervioso, una gran pérdida. Y luego, bueno, ahora se explicaré todo el rollo, pero como está ahora muy de moda el tema de la RGPD, yo siempre digo RDPGD, no sé cómo es las letras seguidas, pero sabemos que para las webs hay que aceptar las cookies y todo eso. Entonces, mira, os he traído la presentación offline. O sea, tenemos la online y la offline. Vale, se ve perfectamente. Hemos puesto aquí la presentación. Vamos a hacer animate, animar en WordPress, no code. Entonces, hemos puesto aquí a ver cookies, no se ha puesto, porque venimos de comer y digo, ya va a ser mucha cookie después de comer. Entonces, lo que he puesto es el aviso legal que está aquí. Vale, he votado un gordo para la accesibilidad, no sé si hay una accesibilidad, pero bueno, que lo he puesto gordo aquí grande. Entonces, mira, Tachán, se abre y tenemos un banner de aviso legal. Pero voy a decir una cosa. No, no, sé lo que estáis pensando, estáis pensando un pop-up para el aviso legal, eso se hace en páginas, no se hace en pop-up. Pero claro, si yo hago esto y pongo una página aquí, no podría afardar de la calidad que tengo yo a la área de semanualidades, que está mejor para, he dicho, el plan B que tengo, si no estaré bien lo de las webs, es hacer cosas para niños y tal, ya lo veréis. Vale, voy a leer un poquito, porque claro, también para dejar tranquilo al equipo de WordPress, si hay alguno presente y a los... Es lo que voy a decir. Yo, cookie update, que habéis dicho antes, en pleno uso de mis facultades mentales, se había puesto aquí, pero ha desaparecido, o sea, que supongo que ni las tengo esas. Es algo que no estoy totalmente seguro, o quiero decir, pues si hay un juicio posterior, pues que esto, que sea cimente, de que lo que yo diga aquí, que no quede nada, estaba loco, o sea, que... De claro que deseo dejar constancia de la completa exoneración de cualquier responsabilidad a la comunidad de WordPress, con respecto a las opiniones vertidas por mi persona en este taller. Es posible que algunas de las ideas que presente generen controversia en relación a la optimización web. Al mismo tiempo, quizás os introduzca una o dos ideas, como mucho, que os hagan pensar, ¿vale? Vamos a empezar, a ver, voy para aquí. O no hace falta, las primeras son diapositivas, lo puedo hacer aquí, entre amigos. Mira, vamos a pasar, ya veis aquí, empezábamos fuerte con las animaciones en PowerPoint, he estado peleándome, pues no sé cuántos días. La charla me he preparado poco, la verdad, pero las PowerPoint, vais a flipar, ¿eh? Vamos allí. Este soy yo, ¿vale?, que ya han dicho que soy diseñado, que hago todo muy chulo, súper bien, web animada, así todo esto. Vale, yo, a ver, os voy a explicar, soy diseñado gráfico, eso significa que lo que yo escuente es desde mi punto de vista, o sea, hay gente que es disorrallador, gente que es copy, es de marketing y clavo, cada uno ve el negocio desde su punto de vista, y yo, claro, muchas cosas quiero decir, es basándome en que la imagen para mí es importante, todo el tema del branding. Entonces, yo trabajo como frío con muchos de vosotros, a través de mi web, la de Update, por eso de Kike Update, porque a Kike Rodríguez, sale un torero, un futbolista, un asesino, lo mismo, yo qué sé, mucha gente Rodríguez. Ay, me toca esto, fatal, va a pasar fatal. Soy líder también, sigo siendo líder del elemento de España, digo, sigo siendo, porque no es que hace mucho, es que hace poco, pero ya me han visto disfrazados, me han visto diciendo barbaridades, y continuo estaría siendo líder del elemento de España. Que eso, me gusta últimamente lo que estoy trasciendo mucho, es con la inteligencia artificial para hacer imágenes, porque, claro, para mí es increíble que con lo que me cuesta, a mí en Photoshop, hacer un montaje o qué cosa, pongas un texto y te salga eso como maravilloso, eso es lo que estoy haciendo. Y luego, otra cosa, otro punto importante, que quería olvidar de remarcar, es que cuando hay cumples en el cole de mi hija y todo eso, todo el mundo me pregunta si me dedico a la animación infantil de cumples, incluso estamos dispuestos a apagarme por ello. Entonces, como dirían el LinkedIn, si ve mal esto de la web, a lo mismo, pivoto un poco, me voy hacia rama, pues niños a partir de dos años, les caigo bien. Más pequeños, no, ¿vale? Este es el Twitter que no utilizo casi nada, ahora sí que estoy un poco más activo por esto de WorkCamp, porque digo, voy a hacer brandy y todo eso. Dos visualizaciones, tres visualizaciones. Bueno, pero bueno. Y donde estoy más activo es en la red de LinkedIn, que podéis encontrarme en Voxquigre Update, Uddate, en español, Uddate. Vamos a pasar a la siguiente diapositiva, aquí está, mola esto, ahí como moving movement, en GIF, porque solo acepta GIF, el PowerPoint, nada de PNG, WIFP, todo esto, nada, ni es SVG, no olvidaros. Y el propósito de este taller, no es que de aquí salgáis como comprendiendo toda la animación, como se hace la animación y sabiendo hacerlo, sino, primero bien, todas las versiones que se pueden, cómo se puede utilizar la animación de WordPress, o sea, los distintos formatos, y al mismo tiempo, veríamos un poquito por encima cómo, voy muy rápido. ¡Oh, bien! Vale, gracias. Digo, es cuando dicha, que me toca a mí, y lo digo, vamos a sufrir un poquito, pero bueno, voy a intentar hacerlo más calmado, ¿vale? Sin escribir código, ¿vale? Vamos a pasar, todavía creo que son visuales. Vale, aquí voy a explicar un poco de historia de la animación de donde viene, y es que ya en la prehistoria había un poco de inquietud los cavernícolas en su cueva, pintando animales y todo eso, intentando capturar el movimiento, ¿no? Con varias líneas, a lo mejor, o pusiendo los animales en varias posiciones, como si estuviera caminando, pero aún no dominaban la técnica. Luego tenemos que esperar, hasta el siglo XIX, el principio que empezaron los primeros experimentos con unos objetos para poder reproducir la animación. Pero también era un poco rudimentario, si es el tipo Gothenburg que hay, por ejemplo, como aquí, que luego esa la prefección, cuando se perfeccionó más adelante, que es un tablo que da vuelta, si habéis visto, no siempre, con un caballo, algo que sé que se anima, ¿no? Y al final del siglo XIX, debo recordar que es el 1895, los hermanos Lumiere empezaron, digo, inventaron el cinematógrafo, que el acento me costaba, siempre lo voy a remarcar, porque me costaba un poquito. Y empezaron con la primera máquina que podía grabar y reproducir al mismo tiempo, y ahí un poquito se despegó todo el tema del cine, de la visión de la animación, ¿no? Aquí también, no sé si habéis visto en el telediero este animación del Mickey, que es justo el 1 de enero, perdí a los derechos, ya podéis plagiarlo, venderlo, comercializarlo, o sea, no hay derechos sobre esto, y sobre todo, a lo largo de los 20, 30, 40, Disney tuvo mucha difusión también con el tema de la animación, hasta que lo petó con la sirenita en el 1990 y algo más, y Toy Story, que todo el mundo supone que la recordará. Vamos a pasar al siguiente. Vale, aquí la parte polémica, se me había olvidado que era venida, o sea, no sé si alguien se asustó así de repente, pero para los VPs y todo esto, vamos a hablar un poco del tema controvertido con la animación, ¿no? Que mucha gente dice que es muy pesada, o sea, realmente, después de que los cavernicos estuvieran en su cueva y rompiéndose en la cabeza, ahora tenemos internet, fibra, o sea, megas a chorro hay a tope, pues no se pueden poner cosas que pesen más de 10 casos o algo así, que tampoco es el motivo. Y esto he visto que estaba preparando un especial, Ikea Jiménez, y voy a decir, Ikea Casillas, seguro que no, Ikea Jiménez va a acoger todo el elenco del programa de Cuarto Milenio, va a ir a sus oficinas de Google, y va a estudiar si hay vida más allá de PageSpeed, que creen que es posible, que se pueda comunicar con webs que tengan 20, 30% de esto, de valores que te ponen un número, que claro, con un número que ellos ponen porque quieren, tampoco es una cosa que sea donde fundamentan todo esto, ¿vale? Y lo que quería defender un poquito es que, a ver, es una parte del SEO, no es el total, es la parte de velocidad que es importante, que carguen rápido, solo lo entiendo, pero luego el Pineful, por ejemplo, que tarda en pantalla a cargar, eso también lo recriminan. Cuando yo hago animaciones que, a lo mejor, las cosas se montan y hasta que no viene el último elemento, eso como que penaliza, pero claro, darle una experiencia visual, a lo mejor no significa que eso sea negativo. Después hay que ver que hay muchos tipos distintos de webs, una web de un brand y de una persona que le buscan por su nombre, para veremos uno que se llama Pérez Montserrat, el SEO es muy nicho, la gente va a buscar ese nombre y no va a tener competencia, que tenga un 100% speed, no le va a cambiar realmente que él esté posicionado al primero. Una tienda, a ver, no le mismo vender un libro de un actor conocido, de un autor, que es que pone solo un libro en la cara autuletal y la gente va a buscar el libro que también se va a posicionar a una web que tiene mis productos, que no haría lo que yo hago. Ya me llaman y yo digo, no soy tu hombre, ni tu mujer, se busca alguien que no soy yo. Qué más, y que son otros factores, lo que pueden también, la autoridad, la mejor gente se impone en Instagram y tiene muchas visitas y de ahí deriva la web. O sea, que hay muchas distintas formas de posicionamiento y no todo orientarlo al SEO, el SEM también está ahí, presente y todo esto. Vamos a pasar ya a qué beneficios puede tener si haces web para clientes, cómo introducir animaciones para él. Una cosa importante es diferenciarse, porque ahora mismo está muy saturado el sector, sobre todo porque cada vez es más fácil hacerlo y mucha gente se lo puede auto hacer, que eso está bien, que cada uno tenga un mínimo, por ejemplo, presencia de internet. Pero esto lo que nos puede pasar es que no se a web, quede como en el olvido, comparada con todas las webs que hay. La tuya, si haces una maqueta, una plantilla con fotos normales, pues puede pasar en advertida. Entonces, haciendo este tipo de animaciones o elementos más que son más difíciles de hacer entre comillas o que tienes que ya preocuparte, pues es una forma de diferenciarte. También, la otra parte importante es el branding. Si tú tienes una marca muy potente, en la que también incluso con las animaciones puedes reflejar el espíritu de la marca, por ejemplo, que es una marca moderna, ativa o algo relajante, como puede ser Cristina en una web, algo que te relaja y tal, con animación más serena, pues también es importante con las animaciones. Y otra cosa que puede beneficiarse, que lo que tiene la animación es que tiene una capacidad muy poderosa de contar historias. Historias que pueden ser de marketing o explicar un proceso, un producto, no cómo funciona, eso también lo veremos en algunos ejemplos y eso es importante para el cliente. Después, ¿cómo desarrollador qué beneficios tiene? Volvemos a la diferenciación, es el punto principal, que si todo el mundo hace el mismo tipo de webs y tú consigues que el logo se anime, que la foto venga, no cómo se hace mejor con elementos que es que tú pones, lo animas todo, saco de los textos, todo que venga y ahí un cartuchino. Haces algo mejor más pensado antes, más creativo, también puede hacerte diferenciador y conseguir clientes por ahí, que eso sería más un poquito también el tema de la facturación. Si tú al final estás utilizando WordPress para ganar dinero, porque es desarrollador, una parte importante es cómo aumentar la facturación. Si tú pegando una foto y poniendo un texto, tardas X, el global tú tienes que aclarar el global de horas que haces, pero hasta una animación te va a llevar más tiempo, más tiempo que tienes que facturar, también tienes que en el presupuesto, tienes que incluirlo y después también tienes la capacidad de que sea, como no hay tanta gente que se dedica a hacer animación como otras cosas, como quien hace código o tal, lo que puedes conseguir es entrar en un nicho, en un nicho en el que la gente, pues tú seas más referente, o cuando busquen a alguien que haga esto, solo haya las personas que se dediquen. A mí también me está pasando mucho ahora que hay gente que es desarrolladora, pues también me busca para hacer la parte solo de animación, en la que ellos desarrollan, es como si fuera mi competencia realmente. Y yo solo me dedico a hacer la parte, pues eso de animación, de que ahora os enseñaré también unas de pá de lunas clases en las que cada ejercicio tiene una muestra de cómo hay que tirar la pelota, todo esto, pues se le ha hecho toda esta ejercicio y yo solo ha hecho las animaciones una cien, que digo, estoy hasta la coronilla, de beber pelota agotando. Vamos a ver qué más tenemos aquí. Ahora veremos qué tipo, bueno, yo les ha grupado como a mi rollo, más o menos por el formato que tienen finalmente o cómo se hacen y tal. Y tenemos, primero, las animaciones bitmap, que son las que trabajan con imágenes. Todo el mundo sabe un JPG, un PNG, bueno, JPG no tiene animación, pero un GIF, un PNG, un WP. Después veremos también las vectoriales, que pesan menos y que realmente, o sea, yo sé que se para aquí de código, porque ellos tienen código realmente, pero luego al final acaban en un formato, en SVG o en JSON. O sea, tienen un archivito, no es código suelto. Y luego veremos cómo animar con código, pero, o sea, que al final es código, pero es el software el que te hace que ese código se inyete en la página sin tener que programar. ¿Listo qué animación más chula esta vez? Todo el planeta, esto me estuve peleando con el PowerPoint, pero mil. Las animaciones bitmap, aquí, otra cosa así. Como dice en los principios, toda esta historia que he explicado, a veces para ser ponente o en algún sitio, tienes que explicar cosas de Wikipedia para apreciar que sabes de lo que estás hablando. Este es un ejemplo que voy a decir cuál es el principio de la persistencia retiniana, que es, o voy a explicar que lo he leído en el wiki, de la persistencia de retiniano. Es que tú, cuando ves una imagen y luego la quitas, aún te queda un par de, como, un milisegundos en, digamos, como en la retina, que todo el truco del célebro la mantiene. Y eso es hacer que, a cierta velocidad, tú vayas incorporando imágenes consecutivas, tú las veas como un movimiento en vez de una sucesión de imágenes estáticas. Y eso con eso es lo que también es el principio del cine, la velocidad de los fotogramas y todo eso. Esto, que se me ha olvidado lo primero que voy a explicar, porque la gente piensa que cuando hay que hacer una animación, piensa en Disney que hacen cada movimiento, hacen como 20.000 dibujos. Y no, con dos o tres fotogramas, tú, por ejemplo, está la misma hora que tiene tres fotogramas, a ver, se pueden hacer más y todo eso, pero es un movimiento que ya parece como divertido, tal. No es un fotograma de al milímetro cada elemento, sino que la sucesión de ellos te crea una sensación de movimiento. Esto era lo de los formatos, ¿no? Mejores formatos, sí. Vale, que sin gafas os ha bebo bien, pero mejor, voy a ver, cándome. Entonces, GIF es el formato que siempre hemos visto en los emojis, todas esas cosas cuando envías por móvil. Y que pasa es que el GIF tiene un rateo, como que la imagen no se transparenta bien, aquello de que ves como puntitos, quedan puntitos blancos. Para sé un qué cosa, si es el fondo es blanco y tal, te puede funcionar. Pero los que funcionan bien es el PNG y el WEP, sobre todo el WEP últimamente, porque también está más comprimido. Y aquí es donde se harán. Ahora veremos, luego, ahora ya paso, sí que ha enseñaros un poquito una WEP que hice con GIF estáticos y como lo haremos todo seguido. Entonces, continuo explicando. Después, a ver, que no dejo de lado el tema de la optimización web. O sea, tú lo que no puedes hacer, poner imágenes muy pesadas y todo con la excusa de que no sabes hacer o que no te han pagado tal, sino que hay que reducirlas. Y yo descubrí, primero, cuando descubrí que el PNG se podía animar, descubrí que se podía comprimir también con el señor Panda, que aquí estamos viendo que se puede llegar a niveles de compresión del 69, incluso he escuchado, he visto el 90, el 80, o sea, que puedes cumplir bastante y te ocupa mucho más que imágenes que la gente pone estáticas. O sea, que realmente el peso, en este caso, si tú lo trabajas, puede ser incluso mejor que gente que no ha hecho esa optimización. ¿Cómo se instala luego esto en WordPress? Estas imágenes, sobre todo lo que tienes, la facilidad de subirlas al WordPress, en el sentido de que nada más subirlas, ya puedes trabajarles con cualquier otro tipo de imagen. No necesitas un plugin para subirlas ni para nada, tal cual las pones al repositorio y tú las incorporas en el WordPress. Estas imágenes ya están animadas y funcionan. Vale, ahora vamos a pasar un poquito más al taller, en el sentido de que vamos a enseñar cómo hacer esto. Vale, vamos a ver aquí el Photoshop. Vale, por ejemplo, el tema de esto, en este caso, PNG, porque también podéis ver un web que, en la época que yo lo hice, que hace dos años todavía no estaba muy estandarizado y lo hice en PNG. Podemos conseguir una imagen que no tienes que hacer tú, que puedes hacerla en banco de imágenes o cualquier cosa, y yo lo que puse son capas, o sea, puse capas en la que el fuego estaba en distintas formas, ¿no? Tú haces esto, vas, las portas como PNG, en formato de sacada imagen, la exportación de imagen, y luego vamos al programa que os he dicho antes, que es el de PNG este, no sé si ya tenía abierto, pero vamos aquí, vamos a ver este tag, este, ¿no? Que este puedes hacer eso en varios formatos. El A PNG es el formato PNG animado, que es el que yo hice en principio, podemos hacerlo en los dos, pero vamos a hacerlo en este. Tú, seleccionas las imágenes que teníamos aquí creadas, pues me voy a hacer las imágenes y son estas tres, que yo tengo aquí, las ponemos y le hicimos que la suba, entonces ya las tenemos aquí. Entonces, lo que tenemos también es decirle, va por cada 100 imágenes un segundo, no son milisegundos, tú lo dices, ¿cuál es el de la, o sea, entre una y otra, que es el tiempo que quieres que pase entre ellas, ¿no? Yo supongo esto, 20, apretamos aquí el maque a PNG, y rápidamente el gatik y este nos hace la imagen. ¿Y qué pasa? Vemos que hay un pequeño error, que se están quedando las anteriores, continuan todavía mostrándose, ¿no? Y esto es lo que hay que poner, es este elemento seleccionado que dice que no conserve las frames anteriores, ¿no? Que como que las borra y las borra pasando, pues tal, y era ya la imagen, sale correctamente. Y yo estoy mucho tiempo buscando dónde está el botón de guardar aquí, ¿no? Guarda, quiero guardar. Lo que todo el mundo espera de en Weeks, U-V, o no sé cuál es la palabra de lo que hacen eso. Entonces, lo que tienes que poner es guardar el botón, guardar la imagen, ¿vale? Se ha pasado yo, se ha ahorrado, vamos, media vida aquí. Entonces, vamos aquí, y tú pruebas la velocidad, tú puedes poner, por ejemplo, que tengan 12, aquí las pones en todo el mismo tiempo, ¿no? Pues ahora va más petado, este... Esta vez va a llegar antes. Pero también puedes ponerlas independientemente, pues ponerle que está tarde un poquito más y cada vez que pregues, él realmente te la crea, ¿no ves? Y puede hacer efectos incluso interesantes en cada uno, ¿no? O sea, este, por ejemplo, para como que ha trompicones, ¿no? Y si quieres hacer algo de humor, pues también te podría valer. Entonces, al mismo tiempo, tampoco tienes la opción de guardarlo. O sea, no puedes como... Vale, esto lo quiero guardar para luego modificar algún tiempo. Pues nada, no puedes, como... Todavía han dicho que no. Pero, lo que sí que guardas, o sea, si tú lo guardas tal cual, esto cuando lo guardas, ahora veremos la vuelta dónde está, tú al subirlo, volvemos a subirlo, a ver. Le dices que eso rato no lo voy a entender, o sea, huís o no sé qué, fatal esta gente. Le dices, subo esta y tenemos toda la secuencia que tenemos. ¿Vale? No, es como que él realmente le ale, como cuando ha hecho un gif en el Photoshop. Y haces un maque, esto, makeapng, esto tiene un retraso porque la web tiene un sentido. Pero, bueno, ves, lo hace y lo guarda. Aquí volvías, podíais volver a guardarlo, pero aquí, independientemente, que si que veis que hay distintos algunos que tardan más o menos, podríamos modificarlo y volverlo a tener. ¿Vale? Cuando creamos uno, por ejemplo, como éste, es lo que decía, vamos a guardar aquí, guardar como... ¿Dónde? Esto, lo del vídeo se puede cortar de esta parte, lo de... No lo de guardar, lo de cuando he dicho vídeo que no se podía guardar. ¿No me has dicho que pone guardar? Pero este botón lo más segura es que lo acaben de poner, porque yo no recuerdo, aparte, al final, no sería al principio, o sea, estamos en la misma, o sea, sí, yo tenía razón. No puede ser esto, no puede ser. 300 dice una, cualquiera de los vídeos pone dice, 400J, un botón, está flipado este tío, ¿no? Vale, vamos aquí, podemos guardar como robot. Y luego vamos a la otra web, que es la de APNG este. Utilidades, Workham, la de... Tini, el bonito pandiqui, éste. La han cambiado también, esta era la aplicación también, la han cambiado, es como la otra, que la han modificado y ahora tiene otras cosas. ¿Vale? Y, mira, lo ves, está en concreto y ha pasado de eso, de 400 a 148. ¿Y sabes qué decía yo? Dice, bueno, pero esto va a mejor cumplirme más, entonces yo la guardaba, decía, guardar el robot 2 y la volví a subir, como diciendo, voy a engañarlos, así me la cumpliré más. Y esto muchas veces pasa, que eso es no tanto, pero mira, ya ha calitado como un 13% más. Hay veces que ve, si pone 90 y prefiero, que no pierda calidad y que se conserve como estaba, que no, pues mira, cojo el anterior. Eso por aquí, por ese tema. Y, claro, que también depende de estas imágenes que yo utilizo como pequeñitas, como tal, no es una imagen grande que tú veas en detalle, sino son elementos que están amigados por el medio y tú a lo mejor no te fijas, y claro, si queremos optimizar como alguno que esté por aquí, y lo que quieras optimizar, pues ya está, pues se hace. ¿Y cómo hacemos este elemento? Bueno, éste del robot en concreto, claro, a veces tú no sabes hacer este elemento en 3D y todo eso, entonces, yo lo que descubrí también que es interesante es, a ver, esto es de pago, pero si tú, al final, ganas dinero por decirte con tu trabajo, a lo mejor si, bueno, invertir en una fototeca de estas de, ¿no?, que quedan productos ya hechos y todo eso, no en verdad lo que te gustaría te hacerlo, ¿no? Pues aquí, cuando tú tienes una, lo que sé, pagas una membresía anual, creo que es, entonces, ¿no?, como ese efecto que me has visto, tú vas aquí y lo que yo hago es, como puedes renderizarlo en 3D, voy guardando las vistas, ¿no?, o sea, yo cojo aquí, venga, guardo, primero lo pongo como quiero, pues quiero que esté recto, ¿vale? Y, bueno, ahora no me deja guardarlo, porque ahora no estoy leveado, ¿vale?, pero yo apretaría aquí, digo, descargar de esta vista, ¿vale? Entonces, muevo un poquito con cuidado, que no se cambie para arriba, o sea, que me mantenga donde estaba y voy haciendo, pues, como esta animación, no la voy haciendo, éste lo malo es, es que no se centra, porque está saldo, pero hago toda esta animación y los guardo, y así es como he hecho, por ejemplo, la del robot, sé que gira, cae y todo eso, o sea, que no hace falta que vosotros sepáis. Luego, formas más redumentarias que pueden ser, es que tú lo que puedes hacer efecto es como en Photoshop, este proyecto lo veremos que era un barista, quería que del café como saliera como dibujadito, ¿no? Entonces, digo, ¿cómo hago el año?, porque la ocurrando es como es muy ocurrado hacer todas las fotogramas, y lo que hice es ponerle en Photoshop el ruido... ¿Cómo se llama? O estudiaros en mi vida. El filtro de ruido mediana. Entonces, cada vez le da un valor más alto, entonces lo que hacía es que se iba como perdiendo. Y las imágenes, luego, cuando las veamos sucesivas, parece como que aparezca. Solo hay que controlar cuántas hacer, que no hacer muchas para que no pese mucho, tampoco, y todo esto. Ahora, vamos a ver un ejemplo que es donde yo más aprendí. Yo hice una web para casi para... Primero era para enseñar qué podía hacer, que eso es importante tener un portafolio, y veréis toda la gente dice, ¿cuánto tarde carga? Claro, pero es que lo carga todo al principio. O sea, es como una web entera, imagínate que cargarás una web entera en ahora, porque todos están pop-ups, los proyectos y los carga desde el principio. Entonces, efectos como el botón, si os dais cuenta, tiene como un parpadeo. Este botón de fondo tiene un peneje animado. Entonces, te da la sensación de que puede dar estos elementos, incluso para dar detallitos. Esto también, los bulbs, esto, no sé qué es la bombilla, es también hacer ese efecto. Y aquí, ahora está de moda lo del funco, si todo eso que puedes hacer, porque yo me curré a mano en Photoshop, a lo antiguo en la época mía, ¿vale? Entonces, el que hemos visto, aparece aquí, que es un poco más complejo, porque hay dos gifes, uno encima del otro, porque luego quería que una cosa que se quede la continuada. Y como el gifes, o es loop, o continúa, entonces, se volvería a ver que gira y todo eso, tenía que poner que primero gira, que hacía lo de las letras que van pasando. Bueno, eso, son cosas que tienes que ir pensando como resolverla, sobre todo con animación. Vale, aquí está el famoso cohete, le he quitado lo de extras, pero sería como este, que es como así un poco a lo Pixar. Y bueno, que fuera muy así como una página como si fuera de peli, de Pixar en 3D, el volumen, y esto lo que decía, que también va mucho, porque aquí todos los proyectos se cargan en un pop-up, es más cambiando como de proyectos web y todo esto, a ver como era este que creo que era este aquí o... Ah, porque veo que esto es como aleatorio, no sé ni como lo he hecho. Y, por ejemplo, se hace tiempo, hay Javascript, no sé qué, no tengo ni idea, pero al final lo hice. Poner animación en un pop-up, es una cosa también que puedes experimentar. Eso lo que me ayuda un poquito, yo esto no lo he hecho a ningún cliente, porque le da un patatus y ve, todo el mundo me dice, pero no será como esto, no digo nada. Ni tan colorido tampoco, tan colorido. Pero ese carrusel está en una... Ahora veremos una página de ese carrusel, GIF animados aparece en otro sitio, y el único que quiero dejar también aquí con gracia es lo de mi hija, que le está muy orgulloso de este dinosaurio que hizo ella. Vale, sigamos con la presentación, saltemos a... Las SVG y las Loti, ¿vale? No sé si hemos visto bien la guerra que tiene estos dos, que es esta. Que saber, son tus formatos, que son basados en text, bueno, al final el formato es de texto, tú puedes abrirlo con el notepad y ver lo que está escrito en código, y realmente son muy parecidos. Realmente aquí para saber realmente cuál elegí en tres dos es cómo se crean, es lo como no complicado, ve a mejor si le da mejor una cosa a otra, y es la elección entre elegir un SVG o un Loti. Esto va a cambiar, pero bueno, no puedo contarlo todavía. Me han dicho que no puedo contar. Entonces, con el SVG... No, es que es verdad, me dijo, no, cuentes esto, que hasta marzo no sale. Entonces, no puedo decirlo. SVG, no, pues, a ver, yo estuve prasteando muchos, porque me parecía... ¿Cómo se hace el SVG? Yo programando, ni coño, o sea, que no voy a hacerlo. Entonces, ¿cómo consigo animarlo? Y vi que había varios programas. Estuve testeando y que pasaba, que muchos me la hacían la animación, pero luego cuando guardaba y ponía en el elemento que es cómo trabajo yo o en golpes no se animaba. Algo pasaba, que el código no era compatible. Entonces, de los que yo provee que funciona mejor, este SVGator, que tiene una versión como Freemium, se llama así, que tú puedes hacer varias cosas y luego tiene la de pago. Con la que, claro, si tú vas a hacer trabajar con esto, como pagar por algo que luego te da un rendimiento, pues, bueno, al final es lo que es. Pero con la versión gratuita puedes hacer un montón de cosas, cuesta más, pero para probarlo, por ejemplo, o incluso gratis. O sea, tienes tres exportaciones, que es lo que te cobran cuando no es gratis, por exportaciones, ¿no? Que pues puedo, pues, tres al mes o tres, no sé, cuando escribes. Y se pueden aprovechar. Yo lo digo, que yo, principio, no pago. Si no tengo que pagar, no pago. La aproveché tan bien. ¿Cómo funciona? Es una plataforma que funciona online, que es una página web en la que tú te conectas y ahí es donde haces las animaciones y luego las tienes que exportar. Lo bueno que tiene esta plataforma es que cuando tú las tienes creadas, si tú también tienes redes sociales, tienes un montón de formas de exportarlos, a nivel de, pues, un envidio en GIF, en peneje animado, o sea, que tú puedes ponerlo luego en el Twitter, luego puedes ponerlo en el Facebook, o sea, el formato en GIF, por ejemplo, también, porque a veces el mail no lee los otros formatos, ya puedes exportarlo a muchos privados, ya, como pagando. No, pero algunos formatos, ¿no? El vídeo, creo, no sé qué, y los demás se que puedes, en S.V.G. todo esto puedes. Que bueno, tiene también que hay un montón de tutoriales. Yo aquí nos voy a enseñar cómo hacerlo totalmente, porque es mucho tiempo y hay que dedicar tiempo para aprender, pero sí que es una comunidad que ellos mismos ya crean muchos vídeos en... ¿Cómo se hacen animaciones? No sé qué, ¿cómo subes? ¿Cómo bajas? ¿Cómo una delinia? Aunque ahora veremos un poquito cómo funciona. ¿Cómo se instala S.V.G. Gator en WordPress? Pues, mira, el tema es que realmente impreven la seguridad, problema, bueno, Fernando Teyado sí que hizo un artículo de lo peligroso de los S.V.G. Y es que pueden tener Javascript, o sea, realmente puedes guardar un Javascript y ahí puedes romper la web, puedes hackear la web y todo eso. Entonces, no es que en sí el archivo, el cuchillo, no mata, mata a quien lo usa, por ejemplo, ¿no? Aquí es... Depende de dónde te descargues el S.V.G. Si es un sitio que no es muy de confianza o nada así, una reposición rara o tal, ahí pueden tener algún tipo de hacking, pero si tú generas un S.V.G., pues, como todo, mientras no entren a tu web, o sea, no puedes modificar nada. Claro, entran a tu web, no van a entrar a modificar el S.V.G. Ya te hackean directamente. Entonces, tú para... Lo bloquea WordPress en principio, lo que tienes que hacer es o escribir código en el Funtions PHP, pero en el tema hijo dicen, porque yo eso no puedes escribir nunca, es como una cosa, ¿no?, como erejes y escribes ahí, porque luego se modifica y tal. Eso es lo a gente que sabe, yo nunca he hecho un tema hijo, no sé si esto queda bien decirlo, o se puede borrar también el logo, pero hay que modificar el tema hijo, o de alguna otra cosa que lo que sé, donde sea. O te instalas unos plugins que cargan la web, y claro, pesa un poquito más, pero bueno, que vamos a hacer la vida, no es perfecta. ¿Qué son esto? Él sabe, Save, hot, S.V.G., y el S.V.G. es su porte, que es su porte tal. Entonces, desde ahí ya, pues, como lo activan y puedes instalarlos y, al final, es como subir un archivo también. ¿Qué pasa con el S.V.G. a todos? Lo que sí que ellos, claro, han tenido en cuenta que no, a lo mejor, no es totalmente compatible de todo lo que hacen y yo he metido un S.V.G. y se ve blanco o la página, lo que es debajo del S.V.G. no funciona, es que te maten la página, pero no carga. Entonces, ellos tienen una página que es esta de aquí, en la que tú subes el S.V.G., aquí lo subes y él te lo como codifica, que también puedes hacerlo a mano, pero también un rollo de programador rollo chumo, que no tengo ni idea. Lo subes aquí y te lo convierte, te lo coges aquí, mira, pues este S.V.G. lo convierte, si tal, y te lo pone como guay. Ya me formato que golpes lo acepta, elemento lo acepta, todos lo aceptan. También, esto de la llama, también no, llama que llama. Ah, la llama, se me ha olvidado de la llama que llama, ahora es como tarde, ¿no? Pero que antes yo iba buscando otro segmento, pues separado, con inteligencia artificial, tú puedes decirle, ponme una llama de fuego, y claro, te pone una llama, una llama de fuego, digo, no, llama, no, ponme eso, fuego. Entonces, esto lo recortáis y ponéis varios, por ejemplo, y el efecto que yo he hecho de, porque yo recorté lo de felpa y poquito a poco, buscando imagen internet, pero ahora, claro, es que, no, pues puedes hacer una cosa como superdivertida, coges varias de estas, y las pones como intercaladas y ya te haces efecto como chulo, ¿no? Esto, para que, así, váis, que hay que limitar cuando haces algo en... Llaman, ¿no? Fuego, solo. Y aquí, bueno, pausas al primer de haberlo, ah, y Elementor tiene su propio widget, que no pone, S.V.G. pone de icono, pegados, iconos, que él entiende como S.V.G. Y tú cuando subes un icono ahí, que lo has pasado por el conversor, te funciona como si fuera otro archivo. Ahora, por ejemplo, con lo explicado de cómo sirve los de las animaciones y todo esto, pues en una web que, por ejemplo, lo hice, que, por ejemplo, el título, mira, aparece, ¿no? Factura 0, 0, como cerveza 0, 0, el eslogan en mí, eh, guay, eh, como lo... Cerveza 0, eh, factura 0, 0, no vas a pagar nada. Y puedes explicar cómo funciona esta cosa, ¿verdad? Esto está hecho con ese programa, ¿no? Dice, mira, pues tú tenes solo unas placas, o sea, gente funciona así, tú puedes placas en un sitio y, realmente, lo que haces es como compartes lo que generas con otros edificios. Aquí no es realmente lo que pasa, no hay un cable que conecta los edificios, ellos vierten ese excedente a la red y la red da a los otros edificios ese excedente, por otro lado. Pero, bueno, es una forma fácil, la gente le encanta ver las cosas, o sea, ver la película antes que leerse el libro, eso lo hace todo el mundo. Alguien no sé quién me dijo que te has leído el libro y yo voy a decirles, no he visto la película, pensé que no era... que no, típico, iba a quedar acudre y no lo dije. Aquí, no, por ejemplo, pues cosas, y incluso para decorar, ¿no? No tiene que ser todo explicado. Aquí, pues, qué beso, mira, tienes la fábrica y, claro, con la energía que te da, pues tu cadena de producción y todo eso, pues va a funcionar con esta energía, ¿no? ¿Cómo funciona las comunidades? Pues, bueno, pues llega aquí la electricidad y va pasando a todos los vecinos. ¿Cómo funciona la residencia? Tú tienes una residencia que genera electricidad, que da a la red y en tu ciudad, desde la... eso de energética, distribución energética, te suministran energía. Y, bueno, es esa web que es distinta de la por la que tú también puedes facturar más, puedes crear también más engagement con la gente. Bueno, todo ese rollo. Vamos a crear uno el que hemos visto al principio, ¿vale? Vamos a ver cómo es la aplicación. Creo que da... 200 segundos y lo cojo. Yo cojo todo en el Black Friday, porque es todo más barato el Photoshop todo. Todo, espero que llegue ahí y lo cojo todo. Mi dedo. A ver si tengo suerte y es mi contraseñista, porque quedaría fatal, vale, no. Entonces, veremos cómo hacer esto. Por ejemplo, que es como... Realmente, cuando dice que es rápido, al final, sí que es rápido esta historia, ¿no? Veremos aquí y veis cómo hacer esta animación, ¿no? Realmente, es muy básico cómo funciona. Aquí tenemos a la izquierda... Vale, voy ahí más o menos. Voy muy genial de tiempo. Me flipa ahora. Y más o menos bien de tiempo de vocal. O sea, de tú, voy bien. También voy... Estoy petrando esto. No estaba aquí, veis, peor. ¿Cómo funciona esto? Aquí tenemos a la izquierda todos los elementos. No, como se parece un poco a After Effects si habéis trabajado y todo eso. Y aquí tienes los elementos en la barra de tiempo y aquí como se modifican los valores, como se modifican las cosas. En la versión de Libre, tú tienes que generar todo. No tienes, por ejemplo, lo de subir cosas. Hacen todo limitando para que luego, al final, acabes pagando. Puedes escribir texto, dibujar tú mismo. O sea, si yo dibujara esto aquí, o sea, esto podría haberlo hecho gratis, realmente. Si dibujara todo aquí, yo lo que he hecho es te he dibujado en Illustrator, que para mí es más fácil y luego lo he traído aquí. Que tú vas a la librería, tienes algunos elementos y luego tú lo que puedes es añadir más. Coges, pues, mira, aquí voy a añadir esta historia. Y lo tienes aquí en la biblioteca, ¿vale? Vamos a hacer uno nuevo. Hacen las medidas, todo esto y lo tienes aquí. Entonces, vas a la biblioteca y tú, clízalo con un clicar, se te pone en la pantalla. Voy poniendo los elementos que voy a necesitar. Y luego, al principio, aquí volvamos a los elementos, apretando sobre el canvas, que es como el sobre el lienzo, tú modificas si te has quedado corto o tal, aquí es donde puedes poner las medidas. Y pues, por ejemplo, pues, más corto, porque me falta la pelota todavía, ¿no? No está aquí, la pelota, sí está aquí detrás, ¿vale? Esto se queda como pensando. Se queda como un rodito ahora, ¿eh? Ah, no, espérate, estas cosas del directo. Se ha quedado un rodito, no, que le he puesto que me da tres. Se ha quedado súper pequeñín, ¿vale? Y de eso hoy, pero no ha ajustado bien. Desde aquí, realmente, desde aquí también es como el escritorio, ¿ves? Puede ser como viendolo aquí o al revés, ¿no? Que se vaya como para allá, porque no te dejan como desplazarlo aquí, lo podrías como rellegar realmente, a desplazar con esto de aquí. ¿Vale? ¿Qué pasa aquí? Lo situo todo, ¿vale? Este tendría que estar para arriba. Bueno, esto, ya lo veréis, alinear, no alinear, no, bring to front, todo esto. Ah, esto aquí, no. Arranche, arriba, porque este viene aquí. Aquí se había por ahí algo, ¿no? Saca una línea, que esta línea de donde viene, esta línea. Ay, que se ha movido aquí esto. Bueno, esto vamos a borrarlo a la librería y lo ponemos otra vez, no sé cómo. Porque entonces, cuando tienes varias capas, realmente, cuando se te viene, se te abren así, tú podrías modificar los elementos también por separado. Vamos a ponerlo todo aquí y luego dices, voy a hacerlo pequeño, ¿vale? Error aquí, porque los ve como independientes. Tú lo que puedes hacer en este programa es que los puedes como agrupar, ¿vale? Y cuando son grupos, sí que tú la modificación la haces como entera, ¿vale? La haces de todo el elemento y aquí lo puedo resituar, ¿vale? Entonces, aquí, por ejemplo, queremos hacer ese efecto de la pelota, la sombrita, incluso puedo hacerla con esto, ¿no? Entonces, coges el elemento y le puedes aquí añadir las cosas que os puede hacer, ¿no? Le añado, por ejemplo, una de posición, porque lo que voy a mover de momento es, voy a moverla, ¿no? El aspecto aquí, aspecto, creo que no sé si la he movido todo, la pelota, es la vez si tenías seleccionada la pelota, animar, posición, ¿vale? Y tienes la primera posición que has puesto, ¿no? Por ejemplo, esto es la línea de tiempo que realmente tú la puedes como mover, poner más tiempo o menos, ¿no? Este es como hasta dónde llegará, ¿no? Tres segundos, un segundo. Y aquí es donde lo haces grande, yo solo voy a hacer un segundo, entonces, aquí, lo voy a hacer un poquito más grande para que veamos. Yo a la mitad, más o menos, voy a dejar que llegara abajo, la pongo aquí, vamos aquí abajo, y luego, aquí lo que podemos hacer para no tener que recordar la posición que tiene exactamente, copiamos, copía arriba por el cup, aquí, pegado. Entonces, de momento, no estás haciendo esto, ¿no? Así, ¿visto? Como que es como, ¡uy, qué rápido! Y ha hecho una animación. Pero una cosa que tiene muy chulo esto, es que la animación, lo que tú le estás viendo, no parece realista, porque en la vida real, el coche no para de repente, o no tal, sino que tiene una aceleración. Entonces, aquí, en esta cosa de que ellos tienen, que es este elicono, que es lo chulo, que, entonces, es animación, es una cosa que hay que tener en cuenta como funcionan las aceleraciones. Le dices que vaya, que empiece lento y acabe lento, o que empiece lento y vaya rápido, todas estas cosas, ¿no? Aquí le ponemos que tenga la curva, que empiece lento y luego también acaba rápido, y os veréis que ya, por ejemplo, ya parece como un poquito más tranquilita, ¿no? Pero, bueno, vamos a mejorar un poquito esto. Vamos a hacer que tenga una sombra, primero, que es haciendo aquí un círculo, y luego vamos a poner como una sopa grisita, ¿no? Mira, ya sale grisito, no sé si de porque el último que hice fue esto, y ya se me queda, ¿no? Ahí está donde llega, y ahí está aquí. Brin tu, arranje tu, tu back. Y vamos a hacer que la pelota, cuando llega aquí, al mismo tiempo, sea como elástica, ¿no? Entonces, vamos a ver ahí un poquito antes, cuando está casi tocando aquí. Claro, esto es lo que si me olvido de explicar. Vale, aquí lo que tenemos que poner, este es el axis que es de donde él coge el movimiento, de donde él está cogiendo, ¿no? Y queremos que lo coja de aquí abajo, porque cuando hagamos ese elemento de que se haga grande, que no me lo haga desde aquí, sino que seca de aquí, será de arriba, para aquí. O sea, aquí le añadimos una deformación de la escala, ¿no? Por ejemplo, y decimos, cuando llegue aquí, que creo que debemos tener que ser un poquito más, realmente, más para aquí, a ver, cuando llega. Llega como por aquí, ven, aquí le digo, que estenga la que tenía, digamos que conserve, cuando llegue aquí, se haga esto más grande, a lo mejor no tanto, y luego aquí, volvemos a copiar, y lo volvemos a poner aquí. Uy, me ha pegado eso, no sé qué he hecho aquí. Se le van, y ya está, ¿no? Lo tenemos como este efectito, ¿no? Y volvemos, ahora ya, empieza a ser como, Uy, como más money, ¿no? Como parece aquí. Y volvemos, pero aquí también le podemos decir que esto tenga como un ESEIN, no como era este primero que uno, que le costara entrar, por ejemplo, y otro que le costara salir, así. Y volvemos, animate, este lado, este trozo de aquí, seleccionas y ese auto, ¿no? Y ya tenemos este efecto, ¿no? Pues ya entendemos, imagete que el cliente tuviera este logotipo, que quisiese animarlo, pues esto ya tenemos como animación en SVG, y vamos a ver cómo exportarlo, que es como aquí, a ver. Y sal, no, salvar es salvar en la biblioteca, y exportarlo, podemos exportarlo en SVG, en SVG, luego tiene Android, Macos, todo eso, no sé qué, en video, varios formatos, en GIF también, GIF, PNG, web, P, todo esto, ¿no? Lo que os arrolará ahora, es las tegratis que tenéis, es que tenéis que acordaros, que primero, como queréis hacerlo, en JavaScript o en CCS. Cuando yo le digo que la en CCS, aquí te está diciendo qué comportamientos no puede hacerlos sin JavaScript, ¿no? Te está diciendo que hoy, si haces una cosa de el PAD, o no sé qué, en este sí, en este sí, en otros no, por ejemplo, los filtros que tienen filtros para... por un sitio tiene filtros, eso ya me diréis, no funciona, o sea, significa que tienes que exportarlo como JavaScript, sino, con CCS es lo mejor. Luego, te dice si es infinito, o que solo hago una vez dos veces, le dices, no, quiero que sea infinito. Y, ¿cuándo se carga? Pues se carga como, es claro, cuando no es JavaScript, solo puede ser en la carga, o que el ratón pase por encima, pero si tú le dices que sea en JavaScript, tú puedes cargarlo con el ratón, encima, cuando hagas clic, cuando estás en una parte del 25% del scroll, por ejemplo, o programatics, sí que es una cosa que sacaron, que es como con código, y tal, que de ahí volvemos, estoy perdido, o sea, que no tengo ni idea de cómo funciona eso. Y lo exportas, ¿no? Lo exportamos ahí luego también, te dice, ¿qué quieres enbeber el reproductor que él tiene para ver los SVG? Y entonces esto depende un poquito. Si tú tienes solo uno, lo mejor es enbeberlo, porque solo hace una carga al servidor de ellos, y tal, pero si tú vas a poner pequeñitas 20 animaciones, claro, el que lo cargue cada vez en cada una, hace que cada una pese más, unas 40k más, pues en total puede ser mucho, entonces, recomendaría en ese caso que hay muchas, no enbeberlo, sino que lo lea, y entonces, pero lo lea para todos, ¿no? Y aquí podemos exportar y tal cual, sabe el SVG, y luego te vas a, por ejemplo, lo que tenía abierto, mi página, páginas, vamos por fecha, editar con Elementor, y yo, porque ya la tengo cargada aquí, pero tú puedes hacer un... eso, un nuevo contenedor, y tú le dices que quieres un icono, los iconitos, ¿dónde están aquí? Está aquí uno, un iconito, lo arrastramos tal cual, puedes subirlo o seleccionar la oleoteca, pues yo, lo más seguro, espérate, subí el SVG y lo tengo, este, por ejemplo, tienen ellos, y claro, este, no tengo, pero tiene ellos, pero, por ejemplo, podría ser este, que es de la empresa que tienen, tú le dices un tamaño, tal cual, y ya lo tienes funcionando, o sea, que no es que haya de hacer nada raro, sino que ya funciona totalmente en Elementor, y, pues, no iba tan bien, ahora que me ha acordado que tenía que hacerlo Elementor, ¿eh? Vale, pasamos rápido de la perspectiva, esta, muy bien, se estima Moll, Loti, los Lotis son más complejos de hacer algo mejor, que son archivos que, al final, quedan en JSON, y son también archivos de texto, tú puedes abrirlo y ver el código, y se basan en Javascript, es un rollo, muy bueno, y también es una alternativa a XML, o sea, que se parece realmente al SVG, o sea, son como familiares, aunque aquí ya he puesto enfrentados el parrito del gatito, lo interesante de esto es que se pueden asociar al scroll, o sea, ¿cuál hace el scroll? Que puedas animarlo al mismo tiempo que el scroll, y te hace como gracia que hoy me da, y el usuario, eso le encanta, ¿no? Que tú eres partícipe de la web, y eso es interesante. ¿Cómo se hacen? Yo no he hecho todavía porque, realmente, o se hacen con que yo sea After Effects, pero aprender After Effects para hacer un log y todo esto es realmente un programa complejo, entonces tú haces la admiración, y luego tienes que poner un plugin que te lo exporta en formato SVG. También quedan aquí dos ejemplos, uno que ya tiene Loti Files, que es el sitio de repositorio de Lotis, y también hay uno que se llama bodymoving, que es el que lleva mucho tiempo, que desde Adobe también es gratuito. Hay, desde midfigma, también podéis exportar Lotis, se hacen animaciones, y realmente exportar Lotis que puedes utilizar en la web. Y también ha sacado ahora Loti Files, una plataforma muy sencilla, que, claro, no puedes hacer mejor todo lo que puedes hacer en el otro, el que tú puedes hacer elementos, y tienes también eso hecho rectángulo, solo clicando, perfecto. Tampoco la he tratado mucho, pero volvemos, aquí tiene como las animaciones que tú puedes hacer, no hay que ir a hacer este, le quiero deposición, tenemos un punto, vamos hasta aquí, y le digo, no sé si yo lo moviéndolo, si yo lo moviéndolo, pues mira, ya tienes una animación. Ellos también tienen predefinidas, o sea, yo voy aquí, y desde aquí, en presets, ellos tenían, pues, que aparezca, que no sé cuánto, pues que haga este efecto, aplicar como, de rápido, menos rápido, aplicar al presente. Entonces, él ya me ha metido y me ha hecho esta animación, a este clavo, estoy pensando en otro programa, y me hace como que crece y tal, y luego esto volvemos, lo exportas y ya tienes un loti. Realmente, lo que también puedes hacer mucha gente, que es lo que yo hago, es cogerlos ya hechos, o sea, no tienes ni que hacerlos, te vas a, que eso debe ser la siguiente pantalla, cómo incorporarlos, cómo hacerlos. El elemento tiene su propio widget de loti, en el que tú puedes ponerlos, en Gutenberg, tú puedes ponerlos con el link, por ejemplo, como sufren imagen, o sea, linkarlos, pero no puedes modificarlos, o meter un plugin, el de loti files de bloques, que te mete un bloque de loti files, y tú puedes ahí variar la velocidad a la que se pone, cómo se activa, si se activa con el scroll, si cuando pasas por encima, todo esto. Pero realmente es eso, si tú tienes una cuenta gratuita en loti files, tú puedes poner de los gratuitos, tú buscas, por ejemplo, bicicleta. Bicicleta. Y le dices que lo gratis, autónomos todo por aquí, lo gratis por aquí, dice gratuito, y cómo se bajan, se bajan de una forma como rara, este es el que yo voy a bajar, o sea, que también puedes bajar, puedes aquí y dices, vale, descargar, pero tú tienes que tener como una cuenta, y entonces lo que se descargan es a tu cuenta, ¿no vas aquí? Dices, vale, lo quiero en mi cuenta. Aquí, realmente, también lo puedes modificar, cosas como, en este caso, no sé si todos se pueden hacer, pero más o menos aquí, si por ejemplo, pues, que vaya más rápido, más lento, en algunos casos, te dejan cambiar la paleta de colores, vale, del fondo, incluso de los elementos, o sea, tú esto puedes ponerlo, ¿no? Yo te dejan bajarlo gratuitamente, como que el más pesado, bueno, más pesado, depende de cómo sea, y lo tienes en versiones de pago, en las que tú puedes, de 382, solo a 16, en las que tú puedes descargarlo, ¿no? Los descargas, y luego, pues, no, cuando hay que lo tienes descargado, si tengo mi pantalla de... Elementor, esta todavía no es la de Lotifiles, a ver. La vamos a poner aquí en un momento, vamos a poner un contenedor aquí, a añadir un contenedor para abajo, le decimos que vamos a poner un loti, aquí tenemos, lo arrastramos, lo buscamos que da... Achivo de medios, origen, sí, claro, pero ¿y dónde era que le decía dónde estaba? Aquí, aquí, lo de subirlo. Entonces, yo he subido uno, creo que es este, que es ese que deteníamos, y ya está funcionando. Tú le puedes decir cómo se activa, ¿no? Que se active aquí en ajustes, le voy a decir por un lado, la velocidad que vaya más rápido o menos, que sea con la vista, al hacer clic, que cuando yo haga clic, se active, que sea bucle, o sea, que si es una animación que vaya y viene, pues que se haga bucle, con el scroll, o sea, que con el scroll hagas que se vaya, y puedes sumar dos animaciones que se mueva, y luego que lo animes, animaciones de movimiento, de scroll, y que haga un despreceamiento, por ejemplo, horizontal. Entonces, veis cómo que avanza, pues controlad aquí, eso lo explicaremos un poquito luego, pero cómo se hacen las animaciones, pero podemos hacer que avance también, que continúe. Ejemplos de este sí, creo que no he puesto el repositorio para que se vea de donde se pueden descargar, y luego llegamos a las animaciones CCS y JS, que aquí es la típica incertidumbre, o sea, si yo no sé programar, ¿cómo puedo hacer eso?, todo da cual. Mucha gente que ya esté trabajando con el Elementor, ya lo está haciendo, porque tú cuando pones que haga una animación de entrada con el efecto tal, lo que te hace Elementor es que él te inyecta ese código, y hay un CCS ahí detrás, o sea, no estás haciendo tú, pero te inyecta ese código. ¿Qué pasa con esto? Que es súper rápido, porque solo no es un JPG, no solo son líneas de texto, y entonces es de las formas más rápidas de animar. Elementor, para mí, fue que yo venía de flas y todo eso, fue el que me lo hacía más fácil animar, porque tú te ponían todos los elementos, tú ibas arrastrando y ya conseguías hacer cosas que en WordPress es complicado hacer si no sabes código, pues que las cosas se levanten, se animen, y podemos ver varias formas, que creo que aquí lo explicaba, de cómo se animan, que están aquí, que es, por ejemplo, una imagen, tú puedes darle estados con el ratón, que al pasar el ratón haga cosas, como por ejemplo, que haga un pop-up, un pulsito, todo eso, que haga cosas que están predefinidas, que lo que está haciendo él es que cuando tú lijes aquí, en el menú, él está inyectando ese código en la página. Vale, pues aquí podemos hacer cosas con las imágenes o los botones, que también puedes jugar con él, sobre todo con el Call to Actions, pues que vayan, que la gente vea que cuando estás interactuando, está realmente funcionando. Después tenemos, en avanzado, varias formas, hay varias cosas que han puesto, desde efectos de movimiento, en los que tú tienes efectos de scroll, que yo le digo que pueda rotar horizontal, bueno, que pueda hacer el scroll que se mueva la X en la Y, que se ve aborroso, que pueda rotarlo, que pueda escalarlo, no hay pues hacer cosas como el ejemplo eso, que se escale cuando estás haciendo scroll, otro elemento que gire, vamos aquí, avanzado, efectos de movimiento, entonces scroll, y que esté, rota, ¿vale? Con una potencia en concreto, que rotará más o menos, y podemos hacer efectos interesantes con el scroll, que cuando el internauto vea, pues vea que él también está como interactuando con la página. Y también otra cosa que pusieron es el transformar, que está aquí, la transformación que tú puedes hacer, como efectos, si lo estoy seleccionando, cuando pasas por encima al transformar, puedes hacer que volvemos que rote, y todo eso, pero ya como con el mouse over, ¿no? Y le puedes dar un tiempo, aquí puedes controlar un poquito la duración de lo que quieres que te haga, ¿no? Por ejemplo, la escala, vamos a poner, era este, puedes hacer efectos, pero que tienen también ese efecto que van y vienen, no solo esto. Eso es interesante, incluso, con lo de reflejar. Yo, a veces, tenías que hacer las imágenes, cuando eran un lateral, hacías dos imágenes, pero ahora que hago yo cojo una imagen, y sin animarlo en transformación, le hago lo de reflejar. Entonces, solo haces una imagen de un lado, la otra la refleja, no tienes que copiar dos imágenes o con CCS decirle que te la rote, sino que ya, pues esto me viene bien, sobre todo, para esto, yo siempre tengo que hacer dos imágenes o rotarla, si no sabes, y esto te aumenta, vamos bien de tiempo, pero vamos a cortar. Otra cosa que aquí os enseño un poquito, que es la que comentaba, ¿no? Una web de una persona que sumarca personal, ¿no? ¿Cómo hacer esta historia con Elementor? Fácilmente, entre comillas, que es tener este documento en Photoshop por capas, que lo tenía, no sé si lo llegué aquí, abrí todavía, documentos, y lo que hago es ir pensando en la animación como se va a animar esto, hay que tenerlo en mi clave como animas y tú salvas todas las capas por separado, pues la jarra, el, la taza, todos los elementos, y luego lo que hago en Elementor es que pongo una de fondo, lo que ven este caso sería, pues, solo la imagen de, ahí es esta pantalla, contenedor, vale, porque quería controlarlo, no sé dónde tengo, claro, tengo el círculo, ¿no? Que es la que sé que me va a ocupar todo y lo que me hace es que me guarda ya la relación de lo que, el tamaño que va a tener, ¿no? Ahí sé que esto es el tamaño que va a tener, y todas las demás, no sé si me escuchaba, ahora veo que se me acaba de escuchar más fuerte, y todas las imágenes las pongo encima con un valor absoluto, significa que todas se me están poniendo una encima de otra como con capas, y luego voy cogiendo cada una y le digo el efecto que quiero hacer, pues, mira, esta, la leche, vamos a, efectos de movimiento, y le digo que haga un fade-in, ¿no? o un fade-out, o que haga un efecto de, ¿no? como de que se crece, y lo que hay que hacer aquí es darle un delay, porque, claro, lo que me puedo hacer es que todos los elementos salgan al mismo tiempo, es que ir calculando, haciendo pruebas, aquí vamos a ver, ahora hemos hecho este, el perrete, ¿qué tal? y calculando que cuánto tiempo se retrasa la taza para que pase primero la taza, para que luego llegue el otro, o sea, que no se haga todo el mismo tiempo, porque si no, no tienes realmente una sensación de que las cosas están apareciendo. Tienes que ir calculando, pues eso, sumando, pues, el chico, tanto, el café, lo único que he hecho distinto, que ahora veremos, porque le voy a quitar, no sé si tenía el responsivo aquí, para que veáis qué pasa si no está hecho así, que, mira, lo dejé, creo que para que se vea lo que pasa, entable se ve bien, y luego en móvil se ve bien, porque lo hice. Lo hice, dije, ah, es que luego, y quería montarlo todo desde cero, pero vio que no me va a dar tiempo, y le he hecho taza, taza, grano, era como un grano, ¿no? Que solo es que no le puse nombre, dije, lo ves, las que no le puse nombre, y, entonces, ¿qué pasa? Que veis que el café, o sea, así, realmente el resto de las imágenes, permanecen perfectas en el responsivo, o sea, que la taza, él, se ve tal, pero, ¿qué, luego pasa que a las otras, tienes que ir animando cada elemento por separado, al ponerlo todos con el mismo tamaño, al guardarlos todos, lo que quería hacer es que tú haces grande, pequeña pantalla, y la imagen te queda igual, estos, que para que la imagen no fuera muy grande, el ciclo se hice por separado, porque no tiene que encajar al milímetro, y luego vas aquí y le dices, bueno, pues, a ver, la leche, la leche que estoy tocando, es la leche esto. Le dices que sea más pequeñito, lo ajustas, porque aquí también está ajustado esto, que al final también tuve que ponerlo para arriba, para abajo, lo vas ajustando, y aquí te queda, pero sobre todo, tener la imagen y todas guardarlas, empeneje al mismo tamaño, porque como están puestas una encima de otro, si tú haces pequeño, todas se hacen pequeña, al mismo tamaño, no tienes que ir restituándolas. Vale, esto es como, nuevamente, hago las huevas en las que hay un elemento, que se genera todo entero. Bueno, sí, más o menos, otra vez he recuperado, lo siento, he recuperado otra vez, con la rapidez y tal, un poquito de tiempo otra vez. Y en la web de Pedra de Montserrat, aparte de esto, vemos también lo de la taza, ¿no? Que es como se va montando, se va animando y va quedando este pequeño efecto. Luego, los típicos de Elementor, que pones como para... Cuando alguien conoce Elementor, los mete todos, lo de que suba, que se mueva, pero muenten todos, o sea, esto se mueve, esto llega, esto tal, y la... te va. Ese también, por ejemplo, el de Scroll, que el fade, pues que aparece su foto, y este, no lo recomiendo, y esto es un USB-G animado, que también puedes hacer los USB-G, pues decirle a un trazado, que te lo vaya generando, y queda así como interesantito. Bueno, por ahí, más o menos. Esto con respecto a las de Elementor, ¿vale? Luego, si quieres darle un golpe, lo he practicado, encima de la mesa de la animación, lo que tienes que hacer, es utilizar este software, que se pone como un plugin en WordPress, y lo que te hace es todo orientado a la animación, ¿no? Controlar todo con las librerías GESAP, que lo que hacen es unas librerías de JavaScript, que están orientadas sobre toda la animación, y puedes controlar muchas cosas, ver el tamaño, incluso cosas con 3D, y bueno, realmente es muy interesante, puedes sacarle mucho para animar, puedes hacer cosas muy chulas. ¿Qué es lo que hice? Ya hice un tutorial en su día, el de Logatitos de Cat Wars. ¿Qué es lo que a mí me gusta de MotionPage? ¿Qué es lo que yo creo que no puedes hacer con otros software? Algo así, primero que es más ligero, a lo mejor con otros elementos, ¿no? Tú puedes utilizar WordPress solo y con esto, maquetar con WordPress, no hacer Google Timber, y no necesitas poner el elemento ni nada, con lo que tú maquetas, luego esto abres la página, o sea, ya está creada previamente con otros software, tú abres la página y sobre eso trabajas, o sea, no da igual, tú es el bir de que está hecho con Divi, con Viver, el lobe es el casto, no se vive todavía, y interesante es que él lo que hace es inyectar el código, no tú mueves cositas como a mí me gusta, como en Photoshop, ¿no? Ruedecitas y cosas, poner números y él luego te lo convierte a código, entonces pesa poco, realmente. Recomiendan que no borres el plugin cuando tú haces la tal, porque lo que se asegura es, las librerías estas deje sap y todo eso como cargarlas, pero no es necesario el programa para que funcione. Interacciones con ratón, esto es muy chulo, porque realmente que tú en elemento o igual, que apretes un elemento, un botón, y se mueve a otro, eso es la única forma que puedes hacerlo es con JavaScript, o sea, sabiendo JavaScript, porque tienes que decir clases y todo eso, y aquí es apretar un botón, le dices que cuando se mueva esto, cuando apretes aquí se mueva otra cosa o parezca otra, o una sucesión de animaciones, y claro, esto lo hace muy fácil, le puede hacer cosas interesantes. Tienes un control total de la línea de tiempo, como hemos visto esa animación de la taza en la que yo tenía que ir probando de cuántos milisegundos tarda una animación o otra, en este caso yo veo la línea de tiempo y puedo controlar, y así cuando aparece desaparecer algo, porque ahora veremos que se ve lo que tarda cada uno, y pues hacerlo más grande, más pequeño. Y si sabes código, que no es no code esta animación, digo este taller, pero si sabes código, hay casi las que tú puedes incorporar en código propio, entonces claro, límites solo tienes los que tengas hoy en día, el CCS, el JavaScript o lo que sea, porque tú ahí puedes inyectar cualquier cosa. A ver, si esto veremos que hay los puntos de cómo hacerlo. Entonces, la que hice fue esta web para enseñarlo, que también está bien para que si queréis luego como aprende... Ahí explico un poquito más cómo funciona, pero ya te digo, todo está hecho con este programa, y veis qué cosas se pueden hacer, incluso estas cosas que muchas veces son con widgets, lo de que cuando los otros se abran o se hagan pequeñitos, está hecho con esto, lo que yo aquí estoy aumentando no es la foto, estoy aumentando el tamaño de la... Oye, me habéis escuchado todo el día, ¿no? Estoy aumentando el tamaño del contenedor, entonces como aumento el tamaño del contenedor, los otros se hacen pequeños, y te da sensación como si estuviera como que le dijera a todos que se hagan pequeños o algo así, esto es como pensando cómo puedo hacer que tal, aumenta el contenedor y los demás se hacen pequeñitos. Aquí esto era que ha sido... No, bueno, que aparecían todos o que se podían ir, cuando tú vas, van y vienen, todo esto, que animaciones fijas al scroll, significa que yo, hasta que no termine esta animación, veis, hasta que no termine, no baja la página, o sea, fijarlas, mucha gente les veo que está preguntándole en Facebook y todo cómo se hace esto, y que la gente dice, esto es GESAP, pero claro, dominar este software es muy complicado, yo les digo, no, se es con esto, pero lo bueno es que utilizaras motion page, porque claro, ahí es un botón que apretas, pero controlar esto a nivel de código es muy complejo, cuando tú terminas, pues continúa, animar textos cada uno, esto es lo que os comentaba del botón, veis el ojo del señor esto, del gato Yoda, que cuando pasa por aquí, yo le digo que pasen cosas en otro sitio, esto no se puede hacer con botones que no estés afectando al botón en concreto. Estas las de, bueno, y esto eran varias cosas que hiciera grande un elemento, lo de imágenes a scroll, o sea, que yo puedo controlar esto como un vídeo pueda sacarlo en frames y yo pueda controlar esto totalmente, es totalmente interesante, hay plugins que hacen solo esto y este tiene esta como una cosa ya adquirida, o sea, que tú ya puedes implementarlo. El tema de los botones, que tú aplicas un botón y pasen cosas, no se abren, se cierran que vuelvan atrás, cuando cliques una vez que se abre y cuando tal que se revierta, por ejemplo. Y aquí abajo está el tutorial que hice, por si esto, que al momento se explica un poquito más, pero ahora veremos un poquito cómo se abre, ¿no? Hay que tener claro, porque es muy confuso cuando yo abrí, y dije, esto es para programadores, como el Brix, esto va gente que sabe código. Pero no están así, realmente, porque la gente que también lo hace, yo creo que es muy de código y gato, se va a pensar, yo creo, como a su medida. Es cómo funciona el tema de las animaciones, perdiendo muchas pestañas, salir al escritorio aquí. ¿Qué? Como cuando se instala tú puedes, o cuando tienes todas las páginas, te sale un botoncito arriba que dices, pues mira, editar con Motio Un Page, ¿vale? O tú abres el Motio Un Page y dices, ¿a ver qué página crees que afecte de las que tienes hechas, ¿vale? Así abre. Yo quiero que del tutorial que estamos haciendo hoy, era este, porque este no es una que fuera este, o no sí, este es uno, ¿vale? Y el otro, ¿cuál era? Esto de cosas que, por ejemplo, que estamos viendo, ¿no? Claro, tú ves aquí todo este menú y dices, ¿qué es esto cómo funciona? O sea, ¿cómo un nombre de animación de qué significa? ¿Que puedo hacer una animación o puedo hacer varias animaciones? O sea, ¿esto cuántas animaciones son? Claro, yo veo que muchas se hacen al mismo tiempo, o sea, esto realmente es una o varias, puede ser un grupo, ¿no? Lo que tú sabes que sí que está afectando es que esta animación está afectando a esta página o si apretas este botón la hace como global. Significa que afecta a todos los sitios donde haya esa clase, por ejemplo, ese objeto, si está en todas las páginas, pues está en todas se va a animar. Si no lo clico, se animará solo en esta página cuando aparezca. Entonces, ¿vale? Ya hasta ahí va en un paso, ¿no? Esta página, con este... Luego dices, lo siguiente tienes que elegir el activador, que sea el trigger en inglés o trigger, no sé cómo sé. Que es que cuando se lea la página, eso solo puedes hacerlo cuando estás en la home, porque si cuando se lea, o sea, tú pones algo a la mitad, cuando se lea, ya ha llegado, eso ya está animado. Eso es para las homes. Cuando se va a la página, a veces cuando eso del exit, que quieres que salto en pop-up o así, con clic, o sea, cuando cliques a algún elemento, que es lo que hemos visto de los ojos este, con estar encima o con un movimiento de los últimos que han puesto es con el movimiento del ratón, que trabaja un poco con la posición de está el ratón, o sea, si está cerca para hacer cosas que sigan en el ratón y todo esto, todavía no lo proba mucho. O sea, de activador, que en éstas, por ejemplo, las primeras las queremos que sea en la carga de la página, ¿no? Vale, en Loa, pero antes de la carga o después de la carga. Esto puede afectar, claro, a veces de que las cosas salgan mal en sentido de que si es mejor que sea en algún caso antes de la carga, porque a lo mejor está cargando y cosas cuando ya está cargada, pues no se ven bien, la animación se está descolonizada, esto tiene que ver realmente con lo que tú anime, ¿no? Después o antes de la carga. Sí, no, el avance, lo vamos a explicar. Luego es, vale, se va a hacer antes de la carga y luego ¿a qué elemento se va a hacer? Ahora tengo que seleccionar que es lo que yo quiero animar, ¿no? Y tú puedes apretar este botón, que es como que tú vas por la pantalla y él te va diciendo, puedes seleccionarlo, al aclicar, él te sale que elemento, porque a lo mejor puedes elegirlo por la clase o la idea y tal, eso a lo mejor tienes que tener un poco de conocimiento para saber que es una clase o una idea. Eso, un punto, o sea, un punto tal, es una clase, a este disco, digo a este disco no, al moadilla, el nombre, es una idea, podemos seleccionar. O lo que yo recomiendo es que cuando tú si estás en elemento que ya hemos sacado aquí, pero a ver, reitar con elemento. Ahora se ha hecho más tedioso, en el principio me ha gustado más la parte más cómica, ¿no? ¿No os parece? Ah, que sí, totalmente de acuerdo, y aparte ha pasado mucho tiempo y tal, ya estamos cansados, si queréis plegamos y tal, a ver, así. Vas aquí, esto es muy fácil, aquí donde pone clases y ideas, aquí le digo, vale, quiero que sea el hueso, vale, esto sea el hueso, y lo guardo, y entonces yo cuando vaya aquí a la otra, yo aquí escribo punto hueso, porque es una clase, si hubieras puesto una idea, habría puesto asterisco hueso, vale, y entonces los seleccionas. Vamos a subir esto un poquito. Ah, claro, esto es lo que hace el fluido, es que no sé si le cagó ni siquiera que se hace esto. Ah, vale, porque este es el del ESOEG, perdón, que yo mismo veo mis cosas y yo esto, como aquí lo ha hecho esto, que es este de aquí, vale, que no lo he dicho, creo, para que se hiciera aquí. Ah, no, el life, ¿y dónde está aquí el botón de life? Es como si no hubiera toda la pantalla, claro, como si ahora cuando he puesto lo de la conexión aquí, ui, espérate, me voy a quedar aquí, que no veo de cuando ponían el uslo de la transición de esta quehora, es que en el este, el segundo, aquí puedo playarlo, tiene una cosa, vale, este es el efecto, realmente hay un botón aquí que dice que sea el life, porque esto, en principio, es con el scroll, pero ahora no me lo está haciendo, porque en este activa el botón life, que en la versión mobile este, me ha como desaparecido, vale. Pero es que yo cojo este elemento, quedaremos como se selecciona aquí cuando lo he puesto aquí, este de aquí que lo tengo seleccionado, luego le digo que voy a hacer, ¿no? Que esta, por ejemplo, es un SVG y lo que quiero es como animarlo, ¿vale? Digo, esta de animar, vamos a quitarlo y vamos realmente a seleccionar otra vez, ¿vale? Le digo que no, bueno, le he quitado eso, seleccionado esta, le digo que me haga una animación, vamos aquí y con estos valores, ¿no? Esto es difícil para enseñar lo que tenéis que ver, tutoriales, pero le doy esta valor, ¿vale? Que digo que venga, porque eso también es lioso, lo que venga de aquí significa que viene de aquí y va a su normal, yo puedo decir que venga y vaya, o que en verdad que solo vaya, si tengo un objeto y yo lo que quiero hacer es que ha pasado un ratón, se haga grande, lo que quiero es que vaya grande, no viene de grande, y si es en la carga, lo que quiero es que está pequeñito, yo quiero que venga de grande y venga a su estado natural, lo que quiero decir, al estado que tú lo has puesto en este sitio, no has puesto pequeñito y lo que quiero es que venga de grande. Entonces, aquí lo que está haciéndome es que viene de nada, él me lo anima, ¿sabes? ¿Cómo que me lo crea? Y en principio era scroll, es que hagan, claro, porque he puesto pagelos, aquí estaba jugando con esto y disco en el scroll trigger, ahí me he liado yo, me he pensado que era otra en mi acción. Y cuando tú le pones acceso del scroll, salen estas dos líneas, que son las líneas que tú le dices dónde empieza, o sea, ¿vale? ¿Dónde va a empezar este elemento a animarse? Porque como es el scroll, cuando llegue a qué parte el scroll, le digo que cuando llegue a la esta parte verde, ¿vale? Y te le puedes decir dónde, el objeto, porque pues es que es complicado, pues decirlo sobre todo, por ejemplo, el contenedor o sobre el objeto. Aquí lo estoy diciendo sobre el objeto, es el que quiero que tomes de referencia. Le digo, cuando el objeto esté en la parte de arriba del objeto, llegue aquí a esta línea verde, se anime, y que acabe cuando llega la parte de abajo del elemento, o sea, que estamos la línea de acabar y de empezar. Así puedes controlar, cuando llega al final, es cuando aquí, es cuando ya está llegando como casi al final, ¿no? Es una forma muy chula de hacer esto, de animación SVG, y los controles se llevamos viendo son solo como, a ver, en principio, son como intuitivos, ¿no? Todos estos tienen que experimentar, por ejemplo, como el delite. Tú puedes decirle para que sea más natural y parezca que es como cinético, que haya una aceleración, que cuando yo dejo el ratón, aún veis que hay como un retraso, ¿no? Ese retraso, tú puedes activarlo o dejarlo quieto, ¿vale? No sé que esté enganchado al escurón, tú puedes decir que esté enganchado o no. Si le pongo aquí que sea cero, claro, lo hago tal cual, o sea, no tiene ese destazo de la aceleración. Bueno, todas estas cosas, claro, esto vas aprendiendo cuando vas trabajando, que es lo que recomiendo, o sea, si te enfrentas a esto, tienes que trabajar, trabajar, ver si es en elemento, si es en un selector, o sea, si es arriba, si es abajo, la niña, cuando hacer pruebas de desismas, rápido o menos rápido con esto, y esos son pasos, primero, elegir, como la clase quieres darle, cómo quieres activarlo, si es en scroll veréis que tenéis otros, claro, empiezan a salir otros menús del tipo, pues, claro, scroll, donde, en qué parte, en qué no sé cuánto, qué elemento quieres animar, qué es lo que quieres hacerle, luego podemos darle también, opacidad y que viniera, que eso la viene de cero, ¿no? Que viene de cero, y entonces, realmente, al mismo tiempo, que viene de cero, no sé si en algunos hay que darle el... 10 minutos... Bueno, esto ha sido todo por ahí, amigos. Bueno, no quería explicar mucho más, esto, habéis visto que es complejo, este. Este... Este es difícil, no yo me estoy aclarando este, pero bueno, esto, esto lo lo he explicado, todo lo de así es así, creo que aquí ya casi las conclusiones, mirá, vamos bien, las conclusiones. Vamos allá. Dos minutos, vamos a las conclusiones. ¿Qué es lo que recomiendo yo, al final, para todo esto, ¿vale? Lo primero es pensar la animación, porque a mí se hace todo al tuntún, a que yo puedo animar, lo animo todo, o sea, que... es guay lo de animar, ¿eh? Sí, es muy bueno. Pensarlo, o sea, vale, en la casa, primero se monta el tipo, luego salga el café, porque, claro, es raro que el café esté ya saltando, antes de que él aparezca en escena, que es el protagonista, no sé qué. Para que luego te ayudará para cómo recortarlo, si hay cosas que quieres separar o cosas que no, si hay cosas en el fondo que no se mueven, pégalo todo junto a la misma capa. No animes todos los elementos ni al mismo tiempo, o sea, el tema del delice importante, de que aparezca uno, que luego se retrace, que aparezca otro, o sea, a calcular un poquito, como hemos visto en la línea de... No hemos llegado a ver la línea de tiempo, pero bueno, sí, ahí se veía la línea de tiempo, donde estaban todos los elementos, y van uno a uno pasando. Después, esto me duele esto, pero esto es cierto, o sea, piensa si va a aportar al proyecto o no a la animación, o sea, Amazon o cosas, o una biblioteca, pues no sé, ahí corriendo a la gente, buscando libras, ahí, como un cbg, no tiene sentido. Tiene sentido una marca personal, en algo que sea el Mago Pop, quería poner este ejemplo, os parece como interesante, ¿no? Aparece, os aparece, uah. Le digo, por si queda grabado y tal, Mago Pop. Ah, ahí, Mago Pop. Te hago la web. Y una recomendación es más que no es una cosa, es que miréis mucho, tengáis culturía de cuando veis una animación en una web o algo así, os imagináis cómo puede estar animado, si cuando intentáis botón derecho sí se iguala como un vídeo, o es una imagen, o veis cómo código raro, que es una secuencia de comandos, que puede ser hecho con Motio and Page, o con código puro y duro, y lo que os recomiendo, sobre todo, es que os lancéis a la proyecina y probéis. Vale, y creo que... ¿Cómo vamos de tiempo? Superbien, ¿no? 7.7, vale. O sea, está gustando esta hora, está guapa, ¿no? Casi la mejor de hoy, ¿eh? Casi, pero luego viene la de este chico que hay a quitar, y claro, a los que le gusta el código, pues claro, esto dicen estos dibujos planos. Y sólo me queda decir... A ver si puedo hacerlo, ¿eh? ¿Cómo era? Gracias por asistir o algo así. Gracias a asistir, que la fuerza os acompañe. Powerpoint, ¿eh? Amigos, Powerpoint. ¿Qué me ha costado eso? Gracias, Kike. Ahora vienen las preguntas, ¿no? Ahora viene la relajación. A ver si tienen dudas. Si tienen dudas. ¿Queréis preguntar alguna cosita? No hay dudas, por lo que veo. Muy claro. Ah, mira, espera, que voy para allá. Uy, que este que me iba a preguntar este. A ver qué pregunta. A ver qué pregunta, este. ¿Desde After Effects? Hola, bueno, desde esta mañana que lo he visto en el hotel. Si hemos salido juntos. Dime, ¿qué no sabías? ¿Qué más podría haber preguntado? Una cosa que no me has enseñado todavía. ¿Desde After Effects se puede exportar como SVG? Es lo que comento antes, no sé si es rápido o así, pero... No me queda. Se puede exportar incluyendo un plugin que te hace la exportación. O sea, no que puedes guardar como SVG. Tú añades el BobbyMovin este o WoodyMovin o lotifiles.com.pluginford.elementor. ¿Desde After Effects? Gracias, maestro. Alguna duda. Ah, vale. Hombre, este. Lo hago, sí, pero espera. Hay todos los malos, ¿eh? O sea, mira, una de los otros. Él da ahí. Muy buenas tus ponencias, como siempre. Gracias. Una cosa que quería preguntarte, que sé que la respuesta, pero bueno, quiero que la compartas, con el tema de velocidad... Ah, sabía. Alguien me ha preguntado, ¿esto retras el PSGP? No he dejado claro que sí. No, no, pero... El SVG es menos, pero lo demás, sí. Perdona, esto no es la actitud, sé que... Perdona, de jengumenidad, guapres. Se ha dicho, ha quedado claro al principio, con el aviso legal que esto puede pasar. No, no, pero en ejemplos que he visto, es tú, de páginas que has hecho, que la velocidad de... Ah, la mía, por ejemplo, la propia, ¿no? Sí, sí, que tiene muy buena velocidad en el PSGP. ¿Que tiene o que no? Que tiene, que tiene. Ah, que tienen, por ejemplo, la que hemos visto del Pérez Montserrat, el proyecto este, que está importante, un proyecto personal de marca personal que le ha servido para, él tenía un par de entrevistas para ser embajador de cafés y de tal, y claro, tú vas a ella la entrevista, das tu web y tal. Y es que ahí no es necesitar, sé, pero ahí necesitas que la persona que te ha contratado luego se va a conectar para ver quién eres y qué tal, y ve a eso y digo, este tío maneja aquí. Aparte, realmente, Pérez es importante en Barcelona, es conocido como barista profesional. Pero tenía un A en el GT Metrics, no me parezca que siempre pone muy poquito, va a ser por el GT Metrics, hasta que la chica comunidad ya ha puesto 20.000 plugins de SEO, de... ¿Cuántos gatitos muelen al día? No sé qué. Y ahora tiene B, pero B está bien. B está bien, ¿no? Gracias. Un momentito. El Ángel es el Finsel. Está muy lejos, si no hace falta, mejor está muy lejos. El Finsel. Oye, genial, la presentación, muchas gracias. Parece que estés ahí, tío. Parece que estés por allí, con el audio. ¿Has visto qué maravilla? El Ángel, el Ángel, estás con día ahí. Perdón. Sí, no. Habías dicho que yo no sabía que Figma puede generar ahora... Lotis. Yo he dicho que tú no sabías eso. No, yo no lo sabía. Pero has dicho que ahora... Perdona, yo he escuchado. ¿Tú habías dicho que yo no sabía, como diciendo, me está echando en cara? No, tú sé que sabes de todo. Entonces, sí, que Figma tiene un... el Figma... Figma no sé qué. Yo es que Figma... Es como un plugin, me imagino, algo así. La pregunta es, ¿tú has probado animar cosas con Figma y es más o menos interesante? O solamente la información. Yo creo que... No, yo estoy viviendo el... El Figma, yo en el... Ah, siguiente pa' antes. O sea, la antes... Uy, no vamos a llegar, ¿eh? Hoy al Figma, voy a regresar. Es pa' atrás, pa' atrás. Porque el Figma es antes de Elementor y todo eso. Este es el... Ah, es que estoy al revés otra vez. Aquí está Figma. Sí, la pregunta es si has trasteado con eso. Yo he visto vídeos que han quedado cosas chulas, pero en el momento hasta que no pase otra cosa que tiene que pasar, no voy a hacer lotis. Es un secreto, no te puedo contestar ahora en marzo. Vale. Me llama si te digo. Tienes mi teléfono. Ah, perdonad, que esto que... Quien quiera probar el SVG Gator, luego que me diga directamente a mí cómo puede hacerlo, o sea, que no puedo contarlo ahora, que lo digo luego fuera de la grabación. No, en marzo, no, eso puedo probarlo ya. Si alguien quiere probar el delgatito ese, yo le he puesto el gato porque era... A mí, cuando lo digo, parece que sea... No, SVG Gator, de Gator. Sí, a otra. Lo delgato es que me ha hecho gracia. Gato, SVG Gator. Le dije a ellos y dije, no, les ha hecho gracia. Digo, no sé ni lo que es un gato en español. Sí, hola, buenas tardes. Buenas tardes. Gracias por la charla, porque estaba muy bien. Bueno, vuelta ayer. Yo quería preguntarte a la hora de experimentar por cuál recomendarías empezar a practicar. ¿Por qué modalidad o por qué formato de programa? Es la primera pregunta que me han hecho interesante. Es la mejor pregunta que creo que del día va a pasar. Muchas gracias. También vi tu charla del año pasado para ver cómo se hacen las charlas. Muy interesante la de Brandy, también te felicito. Y la pregunta era, ¿cuál? ¿Qué empezaría? Yo creo que lo primero que empezar... Claro, la gente que ha trabajado con Elementor, muchas de estas cosas ya las he testeado. Y van a venir más cosas en el roadmap. Pone que van a invertir un poquito más de tiempo de los programadores en animar. Y empezar a animar cosas que se muevan, que aparezcan y tal, es una forma interesante de ver también los de los retrasos. El de ley, que no aparezca todo el mismo tiempo, experimentar con eso. Luego, claro, depende si eres diseñador, a lo mejor es interesante el tema del bitmap, por ejemplo, también, hacer una cara que guiñe un ojo, cosas así, que sean muy creativas, también son imágenes, al final, que haces con Photoshop. Y con eso, igual que hemos visto, tú lo que haces es intercalarlas. Es una forma... Controla casi cero, casi solo el tiempo, ¿qué tienes que hacer? Y luego, o sea, lo último, el Motio and Page. Si quieres empezar a hacer algo y salir vivo del intento. Y luego, si te gusta, y luego, si es vectorial, sí que recomendaría probar un poquito el de SVG... No me pagan, ¿eh? Los de ahí. No me habrá quedado claro esto, ¿no? Ni siquiera lo que yo pago. Me he quedado claro. O sea, yo les pago. El SVGator, para trabajar con vectorial, es muy interesante también. A mí me ha gustado mucho para hacer cosas de animaciones de logo, si te lo enseño a una web en la que el logo pase por encima y se forma las letras, gira el logo, me voy a hacer hecho. Y 30k, creo que cúpaba. O sea, que una imagen, un penejeto, cúpama más. Que un SVG animado. No, si... El SVGator, si tú tienes los elementos por separado, que noventa, claro, si son letras separadas, seguro que son elementos en Illustrator o tal, cuando tú se importas, te das importada una carpeta, porque tú has importado realmente un elemento, pero tú eres la carpetita y tienes los elementos que puedes ir. O, globalmente, el grupo, animarlo, no viene todo el grupo y luego las letras por separado se animan. Puedes animarlo y luego exportarlo. Lo bueno es que puedes exportarlo luego a un video... Vale, has hecho el logo, pero luego en el LinkedIn, quiero poner que tengo la nueva web y quiero que el logo se monte. Pues ya lo tienes hecho, eso de exportarlo a video o penejeto o hip o lo que sea. Muy buena tu pregunta, ¿eh? Gracias. Gracias, gracias. Fantástico. ¿Alguna pregunta más? Ay, perdón. ¿Esto es un común laberinto? Lo de los cumples y alguien que está interesado tiene niños. El Zaragoza me queda lejos, pero depende el dinero. Yo tengo una pregunta, pero es más sobre cómo empezaste en esto de la animación, dentro de las web, ¿cómo empezaste? Otra buena, eh, casi te va a quitar el... Casi te va a quitar o estéis a la par, venga, que estéis conocidos también, ese. Pues, mira, yo empecé a trabajar en un estudio de... No, yo cuando terminé la carrera a mí me gustaba mucho el tema online. Yo era diseño gráfico, pero ya cogí como la especialización de una cosa llamada multimedia, no sé qué, hice un CD con director, que sabía un muñequito y hacía, no sé qué, animado también el muñequito, o sea, que ahí está. Entonces empecé a trabajar por una empresa que era filial de Vinicius John and Rowe, que no tenían... En esa época nadie sabía, en las agencias grandes de publicidad, no hacían web, porque no sabían hacer webs. Entonces lo que hacían es sustrataban o tenían un partner que sabía. Y tenían flash instalado, que es lo mejor que ha pasado en mi vida, hasta que he murido. Y allí yo hacía los dibujitos tal y realmente el jefe de la empresa también tenía mucho gusto y me explicó muchas cosas como los tiempos, no sé qué, la velocidad y empecé a hacer webs en flash, todo eso. No ente, yo solo diseñaba y realmente la programación la hacían los chicos y los programadores de aquella época. Y fue con el tiempo que yo, cuando salí de la agencia, esto no voy a explicarlo, porque yo soy buena persona, pero luego los demás, a veces, la sabemos, la multinacionales. Vale, pues eso. Yo me fuiste de freelance, llevo ya más de 15 años en mi carrera profesional, cuando dices más de 15, es que tienes muchos y no quieres decir cuántos. Y empecé a hacerlo yo solo flash, o sea, animar cositas, tal y claro, hasta que llegó, no sé quién, Google dijo otra vez, otro, otra vez el mismo personaje, yo creo que ahí hay puntos en común. Llegó y dijo, ahora no quiero flash, porque te pueden hackear, le digo hackear, te pueden con flash o sin flash. ¿Qué es eso? Pero no le interesaba o algo, quería que fuera a tomar al edad y se fue a azar a gozar, no. A otro sitio. Y ya, pues nada, llegó el mentor, entonces con el elemento fui probando y dije, lo animo todo, los textos vincen todos y lo digo, esto es un mareo, voy a quitar alguna animación. Y luego me intenté, cuando vi que Alberto Perojo, que está aquí entre nosotros, es un inspirador, porque ya hay dos ponencias que ha inspirado. Bravo, Alberto. Ya me estoy pasando, pero ya tranquilo, ya termino. Dijo, oye, ¿por qué haces una charla de animación? Pues no me había dado cuenta hasta entonces que animaba. Te lo digo, de verdad. Dije, coño, que lo está haciendo bien, que la gente se cree que lo hago bien. Entonces dije, pues voy a buscar nicho, voy a buscar nicho. Y pues todos estos programas, pues que uno me empezó, no está aquí, Víctor, pero otro que me dijo, oye, que te he visto que eres VGator, pero que a mí me gusta es el Motio Un Page. Digo, pero tío, eso es como, es monstruo, eso. Yo no me voy a poner tarde un poco, pero me iban tanta gente preguntando, venga, Motio Un Page, Motio Un Page. Motio Un Page, ese VGator, todo esto, es desarrollado, larga la pregunta, mejor, pero bueno. Que eso. Y digo, pues nicho, venga ahí. Y no hemos visto ni lo del Pimpón eso de Paddel. Bueno, verán, Paddel, que tuve ahí la pelota, ahí va así, 100. Para una PP. De Paddel. Ahora pregunta más. Aquí, yo creo, que aquí hemos quedado bien todos. Tenemos un poquito de tiempo, ¿eh? Bueno, pues nada, fantástico, quique. El regalo, oye, se queda ahí regalo, o sea, a ver. La taza no, pero el regalo lo quiero. Bueno, la buena, la aborencia. Y bueno, desde WordPress, o sea, WordPress, perdón, Work and Tragoza 2024. Queremos hacer de este regalito. Muchas gracias, Mio.