Elevator Pitch
En este workshop vamos a explorar distintas formas de incluir animaciones SVG en nuestros proyectos y compartir una amplia variedad de casos de uso para implementar combinándolo con otros lenguajes. El objetivo es que todos se lleven un aprendizaje sin importar el nivel de conocimiento que tengan.
Description
SVG nació finales de los años 90, pero fue un lenguaje ignorado por muchos hasta 2017, cuando volvió en pleno apogeo. Este formato de imagen vectorial cumple con todo lo que necesitamos en la web moderna de hoy: escalabilidad, responsiveness, interactividad, programabilidad y accesibilidad. En este taller intentaremos mostrar una amplia variedad de casos de uso y combinaciones con distintos lenguajes. El índice contempla 3 partes: Introducción: Qué es SVG, beneficios, sintaxis, cómo escribir código SVG simple, principales tags y atributos. Ejemplos: Cómo editar y animar SVG, desde Illustrator al código, herramientas y tips para compresión y optimización, atributos para animar con HTML5, CSS, SASS y JS que nos puedan ayudar a construir una mejor UX. Live coding de ejemplos. Cierre: Tips de accesibilidad, otras formas de animar SMIL y GSAP.
Notes
Se requieren conocimientos básicos de HTML y CSS. Se usará Codepen para live coding y para quienes quieran forkear los ejemplos.