Javier Usobiaga –Diseñador Web y cofundador junto a Marta Armada del estudio Swwweet– te enseñará a sacarle el máximo partido al formato SVG (Scalable Vector Graphics) un tipo de archivo vectorial para uso en navegadores que surge como alternativa a los archivos JPG, PNG y GIF y que se caracteriza por ser escalable, interactivo y responsive. Descubrirás sus efectos, filtros y animaciones y lograrás crear ilustraciones y piezas animadas con código HTML, CSS y JavasScript.
Javier también imparte en Domestika el curso Introducción al Desarrollo Web Responsive con HTML y CSS, en el que podrás aprender los fundamentos del Desarrollo Web Frontend, conocimientos que te vendrán muy bien como base para aprovechar al máximo este curso de gráficos vectoriales SVG.
Emagister S.L. (responsable) tratará tus datos personales con la finalidad de gestionar el envío de solicitudes de información y comunicaciones promocionales de formación con tu consentimiento. Ejerce tus derechos de acceso, supresión, rectificación, limitación, portabilidad y otros, según se indica en nuestra política de privacidad.
Objetivos
Comenzarás conociendo el trabajo y las influencias en el mundo del SVG de Javier Usobiaga. A continuación entenderás cómo funciona el formato SVG en su forma más básica para poder alterarlo y optimizarlo. Para ello, empezarás escribiendo un gráfico básico sin editores visuales solo con el editor de código, descubrirás cómo aplicar estilos a través de atributos y CSS, sabrás cómo funcionan las etiquetas de línea, polilínea y polígono y las etiquetas de trazo que permiten crear infinidad de curvas, rectas y puntos. También verás los atributos viewbox que permiten realizar ventanas virtuales (delimitar la parte visible de un gráfico y hacer zoom) y las etiquetas de texto. Una vez que conozcas las herramientas básicas será el momento de aprender a usar otras herramientas de optimización como los editores vectoriales y herramientas de código con las que lograrás agrupar, definir y reutilizar elementos SVG con el fin de ahorrarte muchas líneas de código. La siguiente fase será incorporar SVG a la web, para ello, Javier te explicará formas de cargar un SVG (imagen de contenido, imagen de fondo, con JavaScript…), su aplicación respecto a los sistemas de iconos, su papel en la web responsive, consejos para mejorar la experiencia en lectores de pantalla y cómo optimizar el formato SVG en todos los navegadores. Seguidamente descubrirás los efectos en SVG (transformaciones, degradados, patrones, máscaras y filtros) y los tipos de animación (con CSS, de secuencia, de dibujado e interactiva) incluyendo algunas animaciones avanzadas como las realizadas con JavasScript, las aplicadas a checkbox animados, las mutaciones o morphings y las animaciones a lo largo de un trazo.
A quién va dirigido
A programadores, diseñadores, ilustradores y cualquier persona que tenga interés por el diseño y curiosidad a la hora de desarrollar nuevos proyectos con HTML y CSS.
Requisitos
Se requieren conocimientos básicos previos de HTML y CSS. Respecto a los materiales y herramientas que necesitarás para realizar el curso, deberás contar con un ordenador, un editor de código y un editor de gráficos vectoriales (como Illustrator, Sketch, Inkscape o similares).
Temario completo de este curso
Unidades
Presentación
Influencias
Etiquetas y atributos básicos
Estilos en SVG
Etiquetas de línea, polilínea y polígono
Etiqueta de trazo (path)
El atributo viewbox
Etiquetas de texto
Editores vectoriales y exportación
Organización de SVG
Optimización de SVG
Formas de cargar un SVG en la web
Sistemas de iconos
SVG responsive
Accesibilidad en SVG
Soporte en navegadores
Transformaciones
Degradados
Patrones
Máscaras y clipping paths
Filtros
Tipos de animación en SVG
Animación con CSS
Animación de secuencia
Animación de dibujado
Animación interactiva
Animación con JavaScript
Librerías de JavaScript para animación
Checkbox animado
Mutación (morphing) en SVG
Animación a lo largo de un trazo
Inspiración
Gráficos vectoriales SVG: ilustrar y animar con código
Comprar 29,90 €