Codificación creativa: animación de SVG con códigos CSS sencillos

1. ¡Hola! Introducción a las clases: ¿ Alguna vez has querido hacer tus diseños vivos o tal vez has oído hablar de la codificación creativa, pero no has tenido oportunidad de profundizar más? Hola. Mi nombre es Agan. Me encanta mostrarte algo muy emocionante. Animando SVG con un simple CSS. No puedo esperar para mostrarte la magia que viene de SVG y CSS combinados. CSS es un lenguaje de codificación. Puedes darle estilo a los sitios web con él. Se pueden hacer las animaciones. Si bien SVG es un formato gráfico vectorial. Si no tienes experiencia en codificación no te preocupes trato de explicarlo todo paso a paso, para que puedas seguir las clases. 2. Objetivos de las clases: El objetivo del curso es mostrar a todos los interesados en la codificación de diseño gráfico que SVG y CSS combinados juntos son grandes herramientas para hacer divertidos elementos animados en la Web. No tienes que ser desarrollador o diseñador con experiencia para hacer uso de él y aprovechar al máximo. El resultado final del curso serán gráficos animados codificados por usted mismo. El código está destinado a personas a las que le gusta la codificación, diseñadores que les gustaría animar, hacer proyectos vectoriales con el código, todos los que le gusta crear cosas en la computadora y Web. 3. Herramientas: Para estas clases, vamos a usar un par de herramientas. En primer lugar, tu navegador favorito y sus herramientas de desarrollo. Las herramientas de desarrollo son parte de cada navegador web y te ayudan a depurar tu código. Te mostraré más tarde cuándo encontrarlos. Segunda herramienta, es un editor de código. Si aún no has usado ninguno de ellos, te recomendaría Atom o Sublime Text. Actualmente, utilizo Atom. Es editor gratuito que puedes descargar desde atom.io y está disponible para todos los sistemas. El último que necesitamos es el archivo SVG. Encontrarás los archivos SVG en el paquete que comparto contigo. 4. Materiales: Recuerda descargar el paquete con todos los materiales como archivos HTML, las soluciones a mis retos, y los archivos SVG. Estamos bajo tu sección de proyectos y a la derecha puedes ver archivos adjuntos. Por favor descargue este paquete. El paquete consta de varias carpetas. Tienes plantilla HTML, que básicamente es una plantilla HTML simple donde puedes pegar tu código SVG. También puedes ver archivos SVG, por lo que diferentes gráficos SVG que he preparado especialmente para ti. Se pueden animar algunas cosas por ahí. Tenemos dinero, ojo, y algunas otras cosas. Tienes también ejercicio ocular y el ejercicio que te estoy explicando en el video incluyendo feliz-cara, tienes la solución al ojo-ejercicio y puedes echar un vistazo a otras divertidas animaciones SVG para inspiraciones. 5. Introducción al SVG: Antes de empezar a incursionar en el código, vamos a averiguar más sobre SVG. SVG es sinónimo de gráficos vectoriales escalables. Se trata de un formato de imagen vectorial basado en XML. Hoy SVG se utiliza para todo. Desde logotipos, iconos, iconográficos hasta contenido animado. SVG puede ser controlado por CSS; lo que vamos a aprovechar en nuestras clases. Como se mencionó SVG es gráficos vectoriales. Significa que es crujiente y hermoso sin importar cuáles sean las resoluciones. Se puede cambiar su altura y anchura, y no afectará su calidad. Entonces, resumir las características clave de SVG son; SVG es escalable, escala hacia arriba y hacia abajo sin perder calidad, SVG es gráficos vectoriales, SVG es cristalino, SVG es controlado por CSS, lo que nos facilita para divertirse e implementar algunos efectos simples pero llamativos. 6. Introducción a CSS (solo para no codificadores): Esta lección del curso está enfocada personas que no han tenido la experiencia codificando en CSS. Si ya estás familiarizado con el estilo de los elementos en el sitio web, puedes saltarte esta parte de las clases. Entonces, empecemos con la pregunta, ¿qué es CSS? CSS es Hojas de Estilo en Cascada. Es un lenguaje de hoja de estilo utilizado para peinar los elementos de tu página web, los cuales se colocan gracias al HTML. CSS describe cómo deben colocarse los elementos, cómo deben verse, etcétera. También podemos animar los elementos, que es lo que nos enfocaremos durante estas clases. Entonces, ¿qué pasa con la sintaxis CSS? En el lado derecho, tienes el archivo CSS. Un conjunto de reglas CSS consta de un selector y un bloque de declaración. El selector, en realidad selecciona el contenido que quieres darle estilo, se pinta al elemento HTML. Entonces, en este caso queremos darle estilo P, que significa párrafos y en nuestro HTML, está en el lado izquierdo. Se puede ver que tenemos párrafos. P aquí, y P como selector en hoja de estilos. El bloque de declaración consta de una o más declaraciones, y están separadas por punto y coma. Por favor, recuerda sobre ellos. Toda declaración consiste en la propiedad y su valor. Entonces, por ejemplo tamaño de fuente, color, margin-top y text-align son propiedades, y tienen su valor definido. Existen diferentes tipos de selectores. En primer lugar es el selector de elementos que selecciona elemento en función del nombre del elemento en HTML. Es lo que ya estaba mencionando. Aquí tenemos el selector de elementos P, y selecciona todas las P, todos los párrafos en documento HTML. Entonces, en nuestro caso todos los párrafos tendrán tamaño de fuente 15 píxeles, color rosa, margen superior 30 por ciento, y se alinearán al centro.Se puede ver que los párrafos son de color rosa, y se alinean centrados. Otro selector es el selector de clases, que vamos a utilizar muy a menudo en nuestro curso. Entonces, por favor mantente enfocado. El selector de clases, dentro de aquí, selecciona elementos del atributo de clase específico. Para seleccionar elementos con una clase específica, hay que escribir un punto, y el nombre de la clase. En documento HTML tienes que agregar clase de atributo, y nombre, lo agregas para la clase en CSS, así que resáltalo. El párrafo con el código de clase resaltado tiene ahora un fondo gris claro. Podemos cambiarlo a diferente color. El último sector es el selector de ID, dentro de aquí. El ID de un elemento debe ser único dentro de una página. Por lo tanto, el selector de ID utilizado para seleccionar un elemento único en todo el sitio web. Para seleccionar un elemento del ID específico, escribimos un hash, y luego el nombre del ID. Entonces, aquí si queremos tener el encabezado, con un tamaño de fuente mayor, podemos agregar atributos ID, y el nombre de este ID. Entonces, tenemos la intro. Si refrescamos la página podemos ver que encabezamiento tiene intro de ID. Gracias a esto nuestro texto tiene un tamaño de fuente 20 pixels. Entonces, para la revisión rápida, mencionamos tres sectores diferentes en CSS; elementos, selector de clases, y selector de ID. En este curso vamos a utilizar el selector de clases muy a menudo. Recuerda que dot significa clase y después de punto necesitamos definir el nombre de la clase en archivo CSS. En HTML tenemos que añadir al elemento dado, el atributo de clase, y el nombre de la clase. Por supuesto que podemos agregar clases a múltiples elementos. 7. Código SVG: Echemos un vistazo al código SVG. Podemos abrir cada archivo SVG en editor de código, y podemos ver qué hay por ahí. Estoy usando Atom, y como pueden ver, tenemos un código SV. Como se mencionó, SVG cuenta con Formato Gráfico Vectra basado en XML. Es similar al HTML. Si estás familiarizado con la sintaxis, puedes ver sus similitudes. Tenemos diferentes elementos como círculo y camino, y describen nuestra forma. Entonces, abramos SVG en el navegador web y veamos cómo se renderice. Si abrimos herramientas de desarrollo, puedes inspeccionar cada elemento de SVG. ¿ Por qué es tan guay? La mayor ventaja de ello es que podemos aplicar estilos y cambiarlo, podemos animar algunos elementos u ocultarlos, nos da toneladas de posibilidades sobre todo cuando combinamos código SVG con animaciones CSS simples. ¿ Cómo hacerlo? Vamos a echar un vistazo a la siguiente lección.. 8. Incrustación de SVG en documentos HTML: En realidad hay varias formas de incrustar SVG al archivo HTML. Será whizzing uno que nos permita utilizar la animación CSS muy fácilmente. Tenemos índice, y tenemos emptystyles.css. Para adjuntar hoja de estilo a nuestro documento HTML, necesitamos agregar etiqueta de enlace. Como puedes ver lo estamos haciendo referencia al directorio donde están nuestros estilos. Nuestros estilos están en carpeta CSS. Entonces, por eso tenemos este camino. Por supuesto, tenemos que guardarlo. Si refrescamos la página no pasa nada porque el documento HTML está en blanco. Vamos a copiar todo el contenido y pegarlo entre el texto corporal. Podemos quitar las dos primeras líneas porque no son necesarias. Vamos a refrescar la página. Como puede ver, nuestro archivo SVG está incrustado en el documento. Si desea cambiar el tamaño de la misma, puede agregar la clase, podemos eliminar ID, y en lugar de mirar clase por ejemplo, copiar pegar. Por lo que ahora, somos capaces de agregar nueva clase a nuestra hoja de estilo CSS. No recuerden, cómo debemos construir este tipo de selector. Bueno, la clase siempre empieza con un punto luego el nombre, “Cara Feliz”. Como puedes ver editor codificado que tu ya nos da algunas pistas con respecto al enlace. Está bien. Entonces, definamos la altura. Por ejemplo, queremos tenerlo como 500 píxeles. Vamos a refrescar la página. Como puede ver, el tamaño del archivo SVG ha cambiado. 9. Animaciones en CSS: Centrémonos ahora en Animación CSS. A pesar de que es un tema bastante complejo, estaremos usando sólo alguna parte del mismo. Si quieres saber más, hay toneladas de diferentes clases y cursos. Te voy a mostrar las cosas más útiles con respecto a las Animaciones CSS. Por lo que definimos Animación CSS en nuestro archivo styles.css en esta hoja de estilo. Por lo que creamos animación CSS mediante el uso de palabra clave que es fotogramas clave. A los fotogramas clave le sigue el nombre sencillo. Por ejemplo, agreguemos rebote. Cada animación consta de puntos de ruptura. Significa que definimos el progreso de la animación por porcentajes. Tenemos cero, tenemos por ejemplo la animación media vieja, y lo que está pasando ahí fuera, y el último punto. Por supuesto, puedes definir diferentes números lo que sea dependiendo de lo que quieras lograr. Porque es animación de rebote, nos gustaría que nuestra cara feliz estuviera rebotando. Rebotando se mueve arriba y abajo. Entonces aprendamos sobre la transformación. Transform es una propiedad CSS, y como puedes ver como Atom nos está dando una pista, hay diferentes opciones que puedes implementar a tus gráficos, como rotar, como escala. También podrías usar translate en diferentes ejes. Tenemos X, Y, y Z. Si te gustaría mover algo a derecha e izquierda, usaremos translate X. Si te gustaría rebotar algo arriba y abajo, usaríamos translate Y. Digamos que nos gustaría para tener nuestra cara feliz rebotando por 50 píxeles. Podemos por ahora deshacernos de los puntos de rotura vacíos. Se crea la animación, así que echemos un vistazo a nuestro índice HTML. Tenemos nuestro archivo SVG que está aquí, y tenemos cara feliz de clase. Queremos añadir a esta clase la animación. Entonces, volvamos a los estilos. Entonces tenemos nuestra animación ya creada, pero aún no se ejecuta, pasa nada, vamos a comprobar. El rostro feliz, no se mueve. Tenemos que añadir la animación a nuestro selector. Por lo que como se mencionó, ya tenemos la clase creada. Recuerda que la clase comienza con un punto en un archivo CSS. Aquí tenemos nuestro nombre. Entonces, ¿cómo ejecutamos la animación? Tenemos que añadir la propiedad CSS que es nombre de animación. Nuestro nombre de animación es bounce. Posteriormente, tenemos que definir la duración de la animación. Tengamos un segundo. Por supuesto, puedes crear otros tiempos como cinco medio segundo como los que aguantarían 500 milisegundos, pero nuestra animación tendrá una duración de un segundo. El último importante es el conteo de iteración de animación. Entonces cuántas veces se repetirá la animación. Para nosotros, nos gustaría tenerlo infinito. Nuestra cara está rebotando, y vamos a comprobarlo con herramientas de desarrollo. Entonces, este es nuestro elemento el cual tiene cara feliz, y este elemento tiene animación que encontrar. Si lo desmarcamos, se ejecutará la animación. Significa que se comenta esta línea de código. Entonces, navegador web que lo leerá. Por supuesto, podemos crear animaciones más complejas. Vamos a crear otro punto de ruptura. También podemos usar transform, y podemos escalar el elemento. Uno representa un 100 por ciento. Entonces, el elemento sigue siendo el mismo. Si queremos tenerlo grande en un 50 por ciento, tenemos que agregarle cinco. Significa 150 por ciento. También podemos rotar el elemento 10 grados. Recuerda que definimos la rotación por grados. Está bien. Vamos a ahorrar. Recuerda lo de guardar, y actualicemos nuestro índice HTML. Wow! Esta animación es abundante, pero puedes experimentar con ella. 10. Animación de partes seleccionadas de gráficos SVG: En la lección anterior, estábamos animando todo el elemento SVG. Como puedes ver la clase se agrega a la etiqueta SVG. Entonces, toda la cara feliz estaba rebotando. ¿ Qué hay de animar una parte en particular? Echemos un vistazo. El resultado final que nos gustaría lograr son las partes del ojo que se mueven. Como se puede ver, la parte blanca es estable, y sólo el centro del ojo se está moviendo. Entonces, empecemos con el principio. En el paquete que estoy compartiendo con ustedes, hay carpeta de ejercicios oculares. Puedes dejarlo caer sobre átomo, y se abrirá. Tenemos índice, y estilos CSS. En el índice, como ya ves, hay código SVG. Entonces, se debe generar el ojo. Abrámoslo. El ojo está estable, no se mueve. Por lo tanto, necesitamos agregar animación CSS en esta hoja de estilos. Nuestra hoja de estilo ya tiene algunos estilos básicos que agrega color rosa en nuestro fondo, y establece el tamaño para el ojo. Para que puedas agregar tus estilos por debajo de la línea 20. Está bien. Nos gustaría que esta parte se moviera. Entonces usemos inspeccionar. Como se puede ver, este g significa grupo. Se trata de elemento de grupo. Ya tiene su ID, pero tal vez podamos agregar clase. Vamos a encontrarlo en el HTML. Este es este grupo. Estoy comentando : “Esta es la parte que se va a animar”. Podemos agregar “Centro”, para agregar la clase “Eye center”, y debemos agregar esta clase a CSS. Pero lo que tendría que hacer ahora mismo, es diferenciar la animación. Si recuerdas, el ojo se movía un poco a la izquierda, un poco a la derecha, hacia el fondo, y se estaba haciendo más grande. Entonces, intentemos en él este tipo de movimientos. Vamos a crear animación, recordemos que empieza con fotogramas clave, MoveEye. Recuerda que si te gustaría tener más de una palabra, la mejor jugada es usar estuche de camello. Está bien. Entonces, digamos que al 20 por ciento le gustaría traducir, en el eje x a la izquierda, así que menos 50 píxeles, y en un 40 por ciento le gustaría bajar. Entonces transformarse. TranslateY menos 30 pixels. Solo estoy adivinando los números por ahora, lo comprobará pronto. A mí me gustaría escalarlo también, un 20 por ciento digamos. Estamos ahorrando, y refrescantes. Como se puede ver nada está pasando. El motivo por el que es eso, es que debemos ejecutar las animaciones. Por lo que debemos agregar esto a nuestro centro ocular. Nombre de animación, MoveEye, animación-duración un segundo, y animación-iteración-recuento infinito. Guarda, y refresca la página. Como puedes ver la animación es demasiado rápida, y también se debe cambiar el número de píxeles. A lo mejor podemos cambiar esto al 20 por ciento, y al 10, y cambiar la animación-duración a tres segundos. Esto es mucho mejor ahora mismo. También podemos sintonizar un poco esto. Por lo que la escala sería de 15 por ciento, y la duración será de cuatro segundos, también cambiaré ese punto de ruptura a 60 por ciento. A ver. Nos estamos acercando. Es bastante similar, ¿verdad? También podemos hacer desaparecer este círculo. Vamos a averiguarlo. Bueno, mientras se mueve, es bastante difícil conseguirlo, así que comentemos la animación por un segundo. Encontremos, lo tenemos, casi ahí. Por lo que este círculo define este círculo blanco en el ojo, éste. También podemos agregar el 'Plus other” llegar a indexar HTML, y agregar clase. Aquí ya está la clase STO. O podemos añadir otro después del espacio. Entonces digamos, puedes encontrar una solución a este reto en el paquete, los resultados de los ojos. 11. CodePen, una herramienta útil: Algo que me gustaría mencionar es que la plataforma Codepen. Si no te gusta trabajar en archivos HTML usando Code Editor, puedes usar Codepen. Se trata de una plataforma donde la gente crea fragmentos cortos. Simplemente echemos un vistazo. Hacemos clic en nuevo lápiz y tenemos ventana HTML, CSS y JS. Entonces, trabajemos en el ejemplo. Puedes tomar el archivo SVG elegido y abrirlo en átomo. Copiamos todo el código SVG y lo pegamos en HTML. Como se puede ver, se genera el SVG. Podemos agregar la clase, tipo de cara. Se crea una clase en la ventana CSS. Como se puede ver, todo se está actualizando. Entonces, es muy fácil trabajar. Por supuesto, aquí podemos crear animación. Establecer el punto de ruptura, la opacidad cambiaría a cero, y por supuesto necesitamos aplicar la animación, y la animación funciona. Puedes guardar el código haciendo clic en Guardar, y tienes la URL, que puedes compartir conmigo en el proyecto de clase. Te estoy deseando todo lo mejor y manteniendo los dedos cruzados para tus proyectos. Hazme saber cómo es tu trabajo con animaciones como SVG y CSS. ¡Buena suerte! 12. Proyectos de la clase: Para el proyecto de clase se anima a todos a seleccionar gráficos de un vector en formato SVG y crear su propia animación. Los archivos SVG están disponibles en el paquete. Los diseñadores también son bienvenidos a usar su propia obra de arte SVG. Descarga los archivos del curso en la pestaña Tu proyecto. Se coloca en el lado derecho. Aplica tu propia animación CSS al archivo SVG elegido. Tú decides qué se animará. Muéstranos tu trabajo compartiendo fragmentos de código, captura de pantalla, o videos, o puedes enviar un enlace al Codepen que creaste. Siéntase libre de hacer cualquier pregunta en la sección de comunidad. Buena suerte. Que las animaciones CSS y SVG estén contigo.