Actualiza tu sitio web personal: cómo animar un botón de Me gusta

1. Introducciones: ¿ Qué hace que un sitio web se vea bien? ¿ Cómo puedes usar las animaciones para involucrarte mejor con tu público? Qué se involucra en el diseño y la interfaz de usuario intuitiva. Bienvenido a Aprender Haciendo: animando un botón like. En este curso aprenderemos cómo podemos convertir un botón simple en uno animado. Hola, mi nombre es Jude sub y llevo más de ocho años haciendo sitios web y una interfaz de usuario sencilla. Aprenderemos juntos sobre cómo utilizar HTML, CSS y JavaScript para hacer divertidas micro interacciones y una interfaz de usuario fresca. cuando terminemos, habremos aprendido a usar iconos de fuentes personalizados, escuchar el clic del usuario y manipular el DOM para mostrar nuestras animaciones geniales. Dicho esto, deberías tener algunos conocimientos muy básicos de HTML, CSS, y JavaScript. Pero no te preocupes, te estaré guiando a lo largo de la distancia. Con eso, empecemos. Hagamos que la interfaz de usuario impresionante lo aplaste. 2. Descarga de VS-Code Editor: Antes de empezar, descarguemos un editor de texto. A mí me gusta VSCode, ya verás aquí arriba, tengo uno disponible. Adelante y abramos nuestro navegador y en la barra de búsqueda, vamos a escribir código visual studio. Ahora, adelante y dar click en este enlace. Ahora, estoy usando Windows, pero si estás usando Mac o cualquier otro sistema operativo, siéntete libre de descargar los binarios que sean apropiados para el sistema operativo, así que solo tienes que dar click aquí y allá lo tienes. Ahora, adelante y haga clic en “Descargar” y debería aparecer la descarga. No voy a pasar por este proceso de configuración porque ya tengo uno disponible. Nuevamente, siéntete libre de hacer saltos y unirte a mí, estamos usando Visual Studio Code. Nos vemos en el siguiente video. 3. Configuración de servidor vivo: Ahora que tenemos instalado código de Visual Studio, sigamos adelante y personalizarlo. Una de las formas que puedes hacer eso es encontrar este pequeño botón llamado Extensiones. Vamos a agregar uno llamado Live Server. En la búsqueda, tecleemos Live Server, y en la parte superior de aquí, sigamos adelante el botón de instalación. Puede que tome un poco, pero una vez que termine, quiere presionar el botón de recarga aquí mismo. Lo que hace Live Server es que nos permite desarrollarnos localmente y ver las cosas cambian instantáneamente en nuestro navegador. Bastante astante. 4. Cómo empezar un servidor en vivo: Genial. Ahora que hemos instalado Live Server, sigamos adelante y veamos cómo funciona. Vamos a explorar. Notarás que está pidiendo nuestra carpeta de espacio de trabajo. Entonces sigamos adelante y sumamos uno. Ya he creado una carpeta de habilisshare dentro de mis documentos para que puedas tener la estructura que quieras, pero voy a usar esto y dice que es habilisshare. Voy a añadir un nuevo archivo y vamos a llamar a este index.html. Ahora, VS Code está equipado con Emmet. Entonces usemos eso. Vamos a escribir en html:5 y golpear “Enter”. Ahora tenemos un plato de hervir HTML llevar que nos da de forma gratuita. Adelante y teclea ahora, Hola, Mundo y golpea “Guardar”. Vamos a dar click en ahora “Ver” paleta de comandos, luego abrir en vivo y notarás que ya está autocompletado para nosotros. Servidor, abierto con Live Server. Te darás cuenta de que ahora tenemos un Live Server de nuestro desarrollo local. Déjame minimizar esto realmente rápido, solo un poquito más. Genial. Una cosa que puedes hacer es escribir en, Esto es una prueba, y golpear de nuevo “Guardar”. Observe que vemos que los cambios aparecen instantáneamente sin tener que pulsar “Refresh”, esa es una característica inteligente. Déjame seguir adelante y teclear h2, Esto es genial. Golpea “Guardar”. Notarás que Live Server recoge los cambios, y es por eso que realmente recomiendo usar Live Server para el desarrollo local. 5. Agregar un botón básico: Para el primer proyecto, quiero dedicar un poco más de tiempo describir mi proceso de pensamiento cuando abordo un problema de diseño. Algo que sabemos es que un botón me gusta es técnicamente una casilla de verificación. Sigamos adelante y solo hagamos un HTML básico. Vamos a hacer es deshacernos de esto y tipeo menos que signo, entrada, tipo igual a comillas, “casilla de verificación”. Vamos a cerrarlo agregando una slash y luego un signo mayor que. Ahora, si pulsamos “Guardar” en este momento, notarás que todo lo que obtenemos es una casilla de verificación, pero eso no es bastante descriptivo; ¿para qué sirve la casilla de verificación? Vamos a seguir adelante y sumar, Como nosotros y luego golpear “Guardar”. Ahora sabemos por qué está ahí la casilla de verificación, y si bien es muy básico, los próximos videos lo vamos a dar estilo y le agregaremos algunas funcionalidades. 6. Estudio de casos de proyecto de botones: Para nuestro primer proyecto, vamos a empezar realmente simple. Vamos a ver el botón Like de Instagram como una inspiración, al hacer clic en él, se pone rojo y llena el corazón. Esa es una retroalimentación visual realmente buena. Pero y si pudieras animarlo y pulsarlo cuando el usuario hace clic en él. Eso es lo que vamos a tratar de hacer. Vamos a usar HTML, CSS, y JavaScript para que cuando el usuario haga clic en él, pulse. Si no has tocado ninguna de esas tecnologías, podría sonar un poco desalentador. Pero no te preocupes, por eso estoy aquí. Te veré en el siguiente video. 7. Agregar una hoja de estilo externa: Genial. Ahora que tenemos nuestro normalizador, ahora podemos tener un CSS que sea consistente en todos nuestros navegadores. Otra cosa que tenemos que hacer ahora es agregar realmente el estilo. Adelante y hagamos eso. Te darás cuenta de que crearemos un nuevo archivo y llamaremos al style.css. Dentro de nuestro style.css, voy a seguir adelante y hacer una regla simple para html y va a cambiar el color a jitomate. Muy bien, y después, vamos a golpear “Guardar” y cambiar a nuestro Index.html y voy a copiar esto y tenemos que asegurarnos de no llamarlo normalizar, sino más bien style.css. Una vez que lo hagas y golpees “Save” notarás que los colores sí de hecho cambian a jitomate. Te darás cuenta de que en realidad he puesto style.css debajo de normalize.css. Eso es realmente importante porque quieres normalizar realmente normalizar primero y luego nuestros estilos. 8. Uso de fuentes para íconos: En qué diseño, hay múltiples formas de hacer las cosas. Una de las formas en que podríamos haber agregado un corazón fue a través de CSS, pero voy a crear una nueva carpeta y vamos a usar una fuente. Vamos a crear un directorio de fuentes, y te darás cuenta de que aquí no hay nada, y en realidad estamos pretendiendo conseguir uno de me gusta mi Fontello. Adelante y escribe Fontello en tu barra de búsqueda. Te darás cuenta de que se tarda un poco en cargarse. Hay una fuente Awesome Font, y te darás cuenta de estos dos. Ahí hay un corazón y el corazón vacío. Voy a seguir adelante y seleccionar esos dos y descargarlo. No tengo que descargar toda la Font Awesome, y notarás que está dentro de la unidad zip, y voy a seguir adelante y abrirme a través del Visual Explorer y hacer clic derecho en esto y golpear revelar en Explorer. Te darás cuenta aquí tenemos un directorio que es similar en las mismas líneas. Voy a seguir adelante y arrastrar estos a mi carpeta de fuentes, y te darás cuenta ahí está. Volvamos a compartir habilidades y golpear CSS. En nuestro disco zip, voy a golpear la carpeta CSS, y solo necesito este de aquí y se la muevo a ti, CSS, y te darás cuenta que tengo los tres ahora. Perfecto. Déjame seguir adelante y cerrar estos dos, y notarás en el directorio de fuentes que en realidad está vacío. Asegúrate de presionar este botón de actualización, y ahí tienes. Todo está poblado correctamente. Adelante y abramos nuestro Fontello CSS. Te darás cuenta de todos estos CSS que obtenemos de forma gratuita. Hace referencia a los archivos de fuentes y va hacia abajo. Estas son las clases que necesitarás recordar cuando en realidad declaramos los iconos del corazón. Volvamos a index.html y vamos a necesitar referenciarlo porque es un CSS externo. Voy a seguir adelante e incluirlo por la abreviatura Emmett, y está en directorio actual, carpeta CSS, y el nombre es fontello.css, déjame seguir adelante y golpear save. Realmente no verás nada de inmediato. Vamos a necesitar agregar una etiqueta I y seguir adelante y escribir en clase es igual a colon colon. Vamos a llamar a este icono dash heart, y de nuevo, eso son referencias el fontello.css, y te darás cuenta por aquí tenemos los tres. Ahora si queremos el vacío, sólo vamos a seguir adelante y hacer ícono corazón vacío oops, mal escrito esa T, quitar la otra T, golpear guardar, y ahí tienes. Vemos ambos corazones, el lleno y el vacío. Nuevamente, elegí la ruta de la fuente. Hay muchas otras formas en que podrías haber hecho esto, pero sentí que la ruta de la fuente era la más fácil. Enfriar. Nos vemos en el siguiente. 9. Usar CSS "pulse" un corazón: Por ahora mucho de lo que hemos estado haciendo, fue sólo un trabajo puramente de configuración. Pero ahora estamos listos, tenemos Fontello, tenemos nuestro normalizado, y tenemos nuestro style.css. Sigamos adelante y eliminemos el tipo de entrada. Lo que queremos hacer ahora es crear un contenedor. Vamos a crear un div y crear una clase llamada contenedor. Genial. Lo que vamos a hacer es mover estos tipos dentro de nuestro contenedor div que está formateado un poco. Se ve un poco más limpio. Está bien, arregla este poquito, y aquí está, bueno, genial. Ahora todo está alineado y vamos a pegarle guardar. Notarás que el índice se ve bien. Sí creamos una clase de contenedor, así que vamos a cambiar a style.css, y vamos a eliminar esto. Lo que vamos a hacer es crear esta clase de contenedor y añadir una pantalla, un flex. Una vez que golpees Save, notarás que un jitomate rojo se ha ido, pero vamos a seguir adelante y también cambiar nuestro corazón icono, para que cuando vuelvas a agregar el color jitomate, te darás cuenta de que sí tenemos el corazón lleno y es dentro icono corazón y nota nuestros colores ahí, genial. Ahora vamos a añadir un efecto pulsante. Vamos a crear una clase llamada pulso, y vamos a añadir la animación y el nombre será pulso. El tiempo, vamos a hacerlo 0.3 segundos, y vamos a tener que correr infinitamente. Podemos quitar todo lo demás aquí, genial. Lo que queremos hacer es crear esta animación de pulso, vamos a añadir un fotograma clave en fotogramas clave, y lo vamos a llamar pulso. Ups, deshazte de ese periodo. Dentro de nuestros tirantes rizados, vamos a sumar un porcentaje. Empecemos con cero por ciento, y básicamente, vamos a sumar transformación: escala. Vamos a tenerla puesta en una, no olvides el punto y coma. Lo vamos a terminar para la misma transformación exacta. Sigamos adelante y agreguemos transformada de nuevo y escalarla a una. Pero en el medio, vamos a tener al 50 por ciento. Adelante y sumamos el 50 por ciento, y vamos a modificar un poco esto. Añadamos transformación de nuevo, escala de colon, y esta vez vamos a hacer 1.3 punto y coma. Te vas a dar cuenta de que acabo de golpear Save, pero en realidad no pasa nada ni siquiera con mi animación de pulso. Nos pusimos al infinito, pero nota nuestra clase aquí para el ojo, se llama Icon heart, pero lo que tenemos que hacer es agregarle pulso. Hagámoslo, y ahí lo tienes, está pulsando ahora, es porque hemos agregado la clase de pulso a nuestra etiqueta i. Sigamos adelante y hagamos eso ahora mismo en nuestro índice. Voy a añadir pulso, pulsa Guardar, y ahí tienes un corazón pulsante. Esta va a ser una lección clave para animar en los futuros videos. Nos vemos en el siguiente. 10. Cómo manipular el DOM: Lo siguiente que queremos hacer es manipular el DOM. Por DOM me refiero al Modelo de Objetos de Documento. Vamos a querer específicamente apuntar a este corazoncito. ¿ Cómo hacemos eso? Bueno, vamos a necesitar JavaScript. Una de las pocas formas en que puedes hacer eso es hacer clic derecho y presionar este “Inspeccionar” o Control+Mayús+I o Comando+Mayús+I, y notarás que hay este botón de consola. Esto nos permite escribir algún objetivo de JavaScript. Primero descubramos. esto lo llamamos icon-heart, y vamos a dar click en “Consola” y vamos a escribir document.QuerySelector. Asegúrese de que la S esté en mayúscula. Abrir paren, cotización simple, punto porque es una clase a la que vamos a apuntar, icon-heart, y terminar cita y paréntesis. Ver, tenemos una referencia ahora a nuestra clase de corazón icono. Esta será la base de cómo podemos usar JavaScript para modificar el DOM. Incluso puedes seguir adelante aquí y dar click en la flecha pequeña y verás que todo el DOM está listado. Lo que queremos hacer es quitar la pausa. Yo lo voy a hacer directamente y te darás cuenta de que la animación se detiene. Ahora sabemos hacer referencia al DOM. Esto será fundamental para el próximo video donde realmente usaremos JavaScript para eliminarlo. 11. Agregar un Javascript externo: En esta ocasión quiero hablar de cómo podemos agregar JavaScript externamente. Anteriormente, hablamos de la manipulación DOM y cómo podemos hacerlo a través de JavaScript. Vamos a empezar por eliminar el primer ícono. Ahora nos queda con el corazón vacío. Vamos a querer agregar una etiqueta de script, pero vamos a agregarla justo encima de la etiqueta de cuerpo final. Element nuevamente tiene esto disponible, pero puedes teclearlo todo el camino. Antes de seguir adelante y escribir algo, realmente vamos a necesitar crear una carpeta. Vamos a llamarlo Scripts. Dentro de Scripts, vamos a crear un nuevo archivo y vamos a nombrar este main.js. Voy a hacer algo realmente simple, console.log ('esto es script java! ') y voy a guardar esto. Vamos a volver a nuestro index.html. Ahora que tenemos un lugar al que podemos referirnos, vamos a mirar el directorio actual y está dentro de Scripts. Se llama main.js y golpea “Guardar”. Nada debería cambiar. Voy a darle a “Consola”. Ahí vas. Tenemos ahora una referencia a este main.js porque lo hemos agregado en nuestro index.html. 12. Conjuntar un corazón básico: En esta lección, vamos a armar todo lo que hemos aprendido hasta ahora en uno. Ahora mismo queremos que este corazón cambie. Actualmente está en vacío, pero si quitamos el modificador vacío, ahora tenemos el corazón lleno. Ahora, definitivamente podríamos apuntar a corazón icono vacío, pero eso nos va a causar algunos problemas. Me gustaría crear un js-heart. Lo que esto nos permite hacer es objetivo sin preocuparnos por el ícono de clase real. Estamos de vuelta en nuestro js principal, voy a deshacerme de la declaración de la consola y conseguir una referencia a nuestro HeartDom es igual document.QuerySelector ( 'js-heart '); nuevo, voy a moverlo un poco. El motivo por el que hacemos esto es que queremos conseguir una referencia al HeartDom, y voy a ir a escribir un comentario respecto a eso. Genial. Lo siguiente que queremos hacer es agregar un oyente de eventos. Vamos a escribir un comentario rápido, crear un oyente onclick, y luego vamos a añadir el HeartDom, y de nuevo tenemos la referencia del mismo. Adelante con el.on-click= (event) =>, que es igual a mayor que signo, y luego un corsé rizado, y si no lo sabías, esta es la forma ES6 de escribir una función. Lo siguiente que vamos a necesitar es una variable me gusta, para comprobar si al usuario le había gustado o no anteriormente. Sigamos adelante y creemos eso ahora mismo. Let like es igual a falso. Básicamente, lo estamos inicializando a falso. Vamos a escribir un comentario al respecto. Vamos a decir inicializado a falso. Probablemente ayuda a ser un poco más descriptivo, inicializado como falso. Específicamente esto es cuando el usuario no ha seleccionado. Genial. Ahora que hemos creado la variable me gusta, cuando el usuario hace clic en ella, queremos que la variable me gusta realmente se voltea. ¿Cómo hicimos eso? Agregamos el signo de exclamación y a la variable le gustó de nuevo, básicamente una forma lujosa de alterar lo similar. Ten esto en cuenta que esta es pequeña manera de voltear una variable. Como pueden ver aquí, estoy agregando el signo de exclamación que básicamente significa lo contrario de lo que es actualmente. A continuación, vamos a comprobar si me gusta está establecido en un valor veraz. Vamos a tener Target.ClassList. Asegúrate de que la L esté en mayúscula.remove ('icon-corazón-vacío'); nuevo esto lo volteará para que eliminemos el iconheart. Pero ten en cuenta el objetivo aquí, en realidad voy a definir eso. Tendremos target= event, desde el objeto de evento, dot CurrentTarget, la T en mayúscula para Target. El CurrentTarget contra propiedad de objeto de evento que tenemos pasando hacia adelante y vamos a hacer una const porque no va a estar cambiando. Seamos un poco más descriptivos. Este objetivo es básicamente en lo que hicimos clic. Nosotros lo firmamos aquí. Vamos a escribir algún comentario al respecto. Esto es en lo que hicimos clic. Genial. Nuevamente, usamos un objetivo para básicamente eliminar el ícono antiguo y vamos a añadir uno nuevo con ClassList. agregar y ahora necesitamos definir la clase que usamos, que es iconheart y genial. Tenemos quitar el vacío y sumamos en el relleno. Necesitamos ahora lo contrario. Hagamos más tirantes rizados ahí dentro. En realidad vamos a copiar estas dos líneas y pegarlas aquí y yo sólo debería voltear el remove en el anuncio. Hagámoslo. Eliminar ahora se convierte en agregar y agregar se convierte en eliminar. Otra cosa que me gusta hacer es ser más consistente. Vamos a mover la función de quitar hacia arriba y el anuncio está debajo de ella. Ahora es congruente con las declaraciones anteriores. Sólo para asegurarnos de que entendemos lo que está pasando, voy a escribir algunos comentarios. Para el primer caso, quitamos el corazón vacío si le gusta, y agregamos el corazón lleno. En realidad vamos a hacer lo contrario cuando al usuario no le ha gustado. Sigamos adelante y peguémoslo aquí y cambiemos eso a corazón lleno. Si no le gusta, queremos agregar el corazón vacío. Perfecto. Sólo para una revisión rápida de nuevo, base de la variable me gusta, básicamente vamos a alterar los corazones y eso es lo que acabamos de hacer. Vamos a refrescarnos y, ahí funciona. Ahora no es realmente buena retroalimentación porque realmente quiero que ese cursor te muestre un dedo puntero. Lo que vamos a hacer es crear una clase de corazón que básicamente incluya en sí mismo un puntero de cursor. Vamos a hacer eso. Voy a escribir iconheart y empezar con un corsé rizado. En realidad, déjame ir con el corazón y vamos a escribir en cursor puntero y esto nos permite volver a nuestro archivo indexado y vamos a agregar en nuestra clase de corazón. En cualquier momento que lo volteemos, vamos a ver un puntero de cursor, así. Perfecto. Ahora es realmente buena retroalimentación porque ahora un usuario puede saber, si paso el cursor sobre él, en realidad puedo cambiarlo. 13. Animación de el corazón con JavaScript: Ahora que somos capaces de activar un corazón, así, lo que realmente queremos hacer es que pulsen una vez que un usuario hace clic en él. Sigamos adelante y saltemos a nuestro main.js. La forma sencilla de hacer las cosas es realmente simplemente agregar la clase de pulso. Hagámoslo ahora mismo. Es posible que te sientas tentado a seguir adelante y quitar la clase de pulso cuando ya no es luz. Pero nos va a dar un efecto ligeramente indeseable. Mira esto. Voy a golpear “Guardar” y saltar nuevo a nuestro navegador. Eso no es lo que queremos. No queremos que pulse para siempre, queremos dar click en él una vez y tener un pulso. Lo que vamos a hacer es ir adelante y quitar el pulso que pensamos que lo iba a quitar después de un diferente. En cambio vamos a empezar con el HeartDom y adjuntar, y añadir un EventListener, y vamos a escuchar un final de animación. Una vez que termine la animación, queremos que el corazón quite la clase de pulso. Adelante y pasemos en el evento a través de la función de flecha, y lo que vamos a hacer es seguir adelante y apuntar al objeto del evento. Entonces vamos a querer acceder al objetivo actual del objeto de evento, y lo que queremos hacer es quitar la clase de pulso. Hagámoslo, .ClassList.Remove, y vamos a escribir en pulso porque esa es la clase que queremos quitar del DOM. Genial. Adelante y comentemos eso. Vamos a escribir quitar la clase de pulso una vez que termine. Genial. Vamos a darle a “Guardar” y comprobarlo. Espera, ¿qué está pasando aquí? Bueno, si vuelves a nuestro style.css, notarás que nuestra clase de pulso en realidad se ha puesto en infinito. Vamos y quítate eso, guarde y pruébalo una vez más. Perfecto. Pulsa exactamente una vez. Cuando mires al DOM Inspector, notarás que parpadea rápidamente la clase de pulso y luego se quita, y eso es porque adjuntamos el EventListener al HeartDom, escuchando el final de animación. Esta va a ser la base de muchas de nuestras animaciones en el futuro. Buen trabajo en el primer proyecto. 14. Conclusión: Este tutorial de animación fue bastante sencillo. No obstante, los principios de apuntar a una cúpula, agregar un oyente de eventos para el final de animación y escuchar la interacción de un usuario como un clic se pueden usar para crear animaciones complejas. Espero que esto te haya sido de ayuda.