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

5.0
2 opiniones
  • Siempre me ha gustado mucho tomar los cursos en esta plataforma ya que considero que siempre se esmeran en generar contenido bastante práctico. Los profesores explican mediante vídeos y al final de cada tema debes completar un ejercicio. También hay un proyecto final.
    |
  • Me agrado bastante el haber comprado curso ya que me la he pasado muy bien. El curso ha sido bastante inspirador gracias a que cuenta con un docente que sabe cómo motivarte. Tengo muchas ganas de seguir investigando por mi propia cuenta sobre este tema.
    |

Curso

Online

¡72% de ahorro!
11 € IVA inc.

Más información

¿Necesitas un coach de formación?

Te ayudará a comparar y elegir el mejor curso para ti y a financiar tu matrícula en cómodos plazos.

900 49 49 40

Llamada gratuita. Lunes a Viernes de 9h a 20h.

Descripción

  • Tipología

    Curso

  • Metodología

    Online

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.

Instalaciones y fechas

Ubicación

Inicio

Online

Inicio

Fechas a elegirMatrícula cerrada

A tener en cuenta



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

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


Realizarás una ilustración con elementos vectoriales animados. El tema es libre y puedes hacer un proyecto tan simple o complejo como quieras poniendo en prácticas las herramientas que has visto durante el curso.



Una vez que solicites información por medio del catálogo de Emagister.com el centro se pondrá en contacto contigo para informarte del proceso de matriculación.


Preguntas & Respuestas

Añade tu pregunta

Nuestros asesores y otros usuarios podrán responderte

Déjanos tus datos para recibir respuesta

Sólo publicaremos tu nombre y pregunta

Opiniones

5.0
  • Siempre me ha gustado mucho tomar los cursos en esta plataforma ya que considero que siempre se esmeran en generar contenido bastante práctico. Los profesores explican mediante vídeos y al final de cada tema debes completar un ejercicio. También hay un proyecto final.
    |
  • Me agrado bastante el haber comprado curso ya que me la he pasado muy bien. El curso ha sido bastante inspirador gracias a que cuenta con un docente que sabe cómo motivarte. Tengo muchas ganas de seguir investigando por mi propia cuenta sobre este tema.
    |
100%
5.0
excelente

Valoración del curso

Lo recomiendan

Valoración del Centro

Blanca Peralta

5.0
09/12/2021
Sobre el curso: Siempre me ha gustado mucho tomar los cursos en esta plataforma ya que considero que siempre se esmeran en generar contenido bastante práctico. Los profesores explican mediante vídeos y al final de cada tema debes completar un ejercicio. También hay un proyecto final.
¿Recomendarías este curso?:

i. P.

5.0
05/12/2021
Sobre el curso: Me agrado bastante el haber comprado curso ya que me la he pasado muy bien. El curso ha sido bastante inspirador gracias a que cuenta con un docente que sabe cómo motivarte. Tengo muchas ganas de seguir investigando por mi propia cuenta sobre este tema.
¿Recomendarías este curso?:
*Todas las opiniones recogidas por Emagister & iAgora han sido verificadas

Logros de este Centro

2021

Todos los cursos están actualizados

La valoración media es superior a 3,7

Más de 50 opiniones en los últimos 12 meses

Este centro lleva 6 años en Emagister.

Materias

  • Gráficos
  • Gráficos vectoriales
  • Etiquetas de línea
  • Atributos básicos
  • Atributo viewbox
  • Editores vectoriales
  • Sistemas de iconos
  • Soporte en navegadores
  • Animación de secuencia
  • Animación de dibujado

Temario

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 €

Más información

¿Necesitas un coach de formación?

Te ayudará a comparar y elegir el mejor curso para ti y a financiar tu matrícula en cómodos plazos.

900 49 49 40

Llamada gratuita. Lunes a Viernes de 9h a 20h.

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

11 € IVA inc.