Gráficos SVG + Javascript
Introduce SVG en tu portfolio.
What you will learn
Trabajar con gráficos svg en archivos html
Bases de JS
Animar gráficos svg desde css y desde js
Crear Gráficos SVG desde Javascript
Importar archivos desde softwares vectoriales como illustrator
Programación modular y orientada a objetos con JS y gráficos vectoriales
Generación procedural de gráficos vectoriales
Mover SVG mediante eventos de teclado
Colisiones entre gráficos creados SVG con formulas que se usan en videojuegos 2D
Why take this course?
🎓 Introduce SVG en tu Portfolio: Aprende a Combinar Gráficos SVG con JavaScript
¿Qué son los gráficos SVG? 🌐
Los gráficos SVG (Scalable Vector Graphics) son una maravilla para la web moderna. Con estos, podemos escalar imágenes a tamaños impresionantes sin perder calidad. Imagina tener una imagen SVG que mide millas sin dejar de verse nítida, mientras que una imagen PNG de alta calidad en el mismo tamaño podría superar los 500Kb de peso y quedar pixeleada si se escala. SVG ofrece una calidad gráfica impecable con un uso de recursos muy eficiente.
¿Cuando debemos usar SVG o PNG? 🤔
PNG es ideal para imágenes donde queremos un realismo o imágenes artísticas, como en los concept arts y portadas de videojuegos AAA. Este formato maneja transparencias muy bien y puede dar una sensación de pintura tradicional similar a lo que se logra con Photoshop. También es común usar PNG en juegos 2D legacy, donde incluso aunque no sea un estilo realista, necesitamos texturas que sean coherentes.
Por otro lado, SVG brilla en aplicaciones web, libros digitales interactivos, casinos virtuales y más. Su ligereza es una ventaja considerable, permitiendo ilustraciones simple con colores planos, aunque también puede manejar gradientes y técnicas de sombreado más complejas. SVG es la elección para cuando quieres un diseño eficiente y ligero que no se pierda a gran escala.
Aprende a Interactuar con tus Diseños SVG 👩💻
Con este curso, te convertirás en un maestro de los gráficos SVG y cómo interactuarlos con JavaScript. Podrás integrar tus diseños hechos en Illustrator, programarlos en HTML y hacerlos interactivos con JavaScript. Cambia los colores de tus gráficos dinámicamente, mueve objetos con un clic del mouse o incluso crea eventos que responden a la entrada del usuario.
¿Para quién es este curso? 🎯
- Conocimientos básicos de HTML: Es fundamental para entender cómo se estructuran y se interactúan los gráficos en la web.
- Interesados en las disciplinas del diseño y desarrollo web: Este curso es para ti si estás interesado en ampliar tus habilidades en este campo.
- Personas con curiosidad por aprender y experimentar: Si quieres más información, te invitamos a ver nuestro video introductorio, que está disponible gratuitamente para todo el mundo y detalla lo que este curso ofrece.
**🔍 ¿Qué te espera en el curso? **
- Fundamentos de SVG: Aprenderás qué es y cómo funciona SVG.
- Integración de SVG en HTML: Descubrirás cómo añadir gráficos SVG a tus proyectos web.
- Manipulación con JavaScript: Dominarás las técnicas para interactuar con estos gráficos utilizando JavaScript.
- Proyectos prácticos: A través de ejercicios concretos, aplicarás lo aprendido en proyectos reales y mejorarás tu carpeta de trabajo profesional.
🛠️ Herramientas y Recursos Incluidos
- Tutoriales paso a paso: Guías claras y detalladas para cada concepto.
- Ejercicios interactivos: Aplicación de lo teorizado en proyectos prácticos.
- Proyecto final: Desarrolla tu propio proyecto que demuestre tus nuevas habilidades.
- Soporte y comunidad: Acceso a un foro o grupo de apoyo donde puedes compartir y resolver dudas con otros estudiantes y expertos en el campo.
¡Inscríbete ya y transforma tus diseños SVG en experiencias web interactivas y dinámicas! 🚀
Screenshots
