¿Te ayudamos? 900 49 47 47

Curso de Gráficos vectoriales SVG: ilustrar y animar con código

Curso Online

Domestika

TExto no se de donde sale

foto del centro
foto del centro foto del centro foto del centro foto del centro
Ubicacion

Ciudad (Provincia) Calle Ver mapa Como llegar

Resumen

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.

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.

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

  • 1 Introducción
    • Presentación

    • Influencias

  • 2 SVG Básico
    • 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

  • 3 Herramientas y optimización
    • Editores vectoriales y exportación

    • Organización de SVG

    • Optimización de SVG

  • 4 Incorporando SVG a la web
    • Formas de cargar un SVG en la web

    • Sistemas de iconos

    • SVG responsive

    • Accesibilidad en SVG

    • Soporte en navegadores

  • 5 Efectos en SVG
    • Transformaciones

    • Degradados

    • Patrones

    • Máscaras y clipping paths

    • Filtros

  • 6 Animación en SVG
    • Tipos de animación en SVG

    • Animación con CSS

    • Animación de secuencia

    • Animación de dibujado

    • Animación interactiva

  • 7 Interacción y animación avanzada
    • 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

  • Proyecto final
    • Gráficos vectoriales SVG: ilustrar y animar con código

Comprar 29,90 €

Ver más ...

Curso de Gráficos vectoriales SVG: ilustrar y animar con código

Curso Online

Domestika

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.

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.

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).

30 €

Temario completo de este curso

Unidades

  • 1 Introducción
    • Presentación

    • Influencias

  • 2 SVG Básico
    • 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

  • 3 Herramientas y optimización
    • Editores vectoriales y exportación

    • Organización de SVG

    • Optimización de SVG

  • 4 Incorporando SVG a la web
    • Formas de cargar un SVG en la web

    • Sistemas de iconos

    • SVG responsive

    • Accesibilidad en SVG

    • Soporte en navegadores

  • 5 Efectos en SVG
    • Transformaciones

    • Degradados

    • Patrones

    • Máscaras y clipping paths

    • Filtros

  • 6 Animación en SVG
    • Tipos de animación en SVG

    • Animación con CSS

    • Animación de secuencia

    • Animación de dibujado

    • Animación interactiva

  • 7 Interacción y animación avanzada
    • 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

  • Proyecto final
    • Gráficos vectoriales SVG: ilustrar y animar con código

Comprar 29,90 €

 
ver temario completo
 

Preguntas a exalumnos

Más cursos relacionados de Comunicación

  •  UNIBA Centro Universitario Internacional de Barcelona

    Grado de Diseño

    Carrera universitaria online 5.100 € UNIBA Centro Universitario Internacional de Barcelona

    Objetivos: Obtendrás los conocimientos y destrezas indispensables para plantear, llevar a cabo y gestionar cualquier proyecto de diseño.Dominarás los diferentes lenguajes artísticos, que podrás ...

  •  Intergrupo

    Máster en Diseño Gráfico

    Máster bonificable online Consultar precio Intergrupo

    Este máster pretende formar un nuevo tipo de profesional con vocación por las nuevas tecnologías, aglutinando en un mismo programa de estudios diversas disciplinas del mundo del ...

  •  UADIN

    Máster Executive en Diseño Gráfico Digital

    Máster bonificable online 1.929,50 €2.270 €Descuento UADIN

    Objetivos: * Estudiar los fundamentos del diseño gráfico (plano) y 3d (volumen).* Aprender a crear nuevos documentos con Dreamweaver.* Aprender a utilizar los estilos CSS.* Aprender las bases ...

  •  INESEM -Formación Bonificada para Empresas

    Técnico Certificado en Modelado BIM (Revit + Presto)

    Curso bonificable online 600 € INESEM -Formación Bonificada para Empresas

    Las tecnologías BIM (Building Information Modeling) han brindado la oportunidad a los arquitectos de proyectar estructuras paramétricas anteriormente impensables, pero que hoy coinciden con las ...

  •  Deusto Formación

    Curso Superior de Dibujo Técnico con AutoCAD (avalado por la VIU)

    Curso online Consultar precio Deusto Formación

    Objetivos: •Dominarás las nuevas funcionalidades de AutoCAD. Podrás, además, gestionar tus dibujos y proyectos desde tu smartphone o tablet.•Dominarás los comandos habituales para dibujar líneas, ...

  •  Inesem Business School

    Master en Diseño Editorial

    Máster bonificable online 1.395 € Inesem Business School

    Objetivos: - Gestionar todo tipo de proyectos editoriales- Dominar la gestión de la calidad en productos editoriales.- Adquirir conocimientos profundos sobre el proceso gráfico.- Maquetar todo tipo ...

  •  VISION Y VALOR CONSULTING

    Adobe Illustrator CS6

    Curso online 450 € VISION Y VALOR CONSULTING

    A quién va dirigido: A cualquier trabajador que desee aprender un potente programa de diseño vectorial y poder realizar sus propios logotipos, diseños para publicidad y cualquier tipo de gráfico sea ...

Llamar gratis
Llamar gratis