{"id":752,"date":"2023-07-26T03:17:40","date_gmt":"2023-07-26T03:17:40","guid":{"rendered":"https:\/\/cursos.misblogs.site\/?p=752"},"modified":"2023-07-26T03:17:42","modified_gmt":"2023-07-26T03:17:42","slug":"graficos-vectoriales-svg-ilustrar-y-animar-con-codigo","status":"publish","type":"post","link":"https:\/\/cursos.misblogs.site\/index.php\/graficos-vectoriales-svg-ilustrar-y-animar-con-codigo\/","title":{"rendered":"Gr\u00e1ficos vectoriales SVG: ilustrar y animar con c\u00f3digo"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Aprende a trabajar con ilustraciones vectoriales en tus p\u00e1ginas web, de la l\u00ednea a la animaci\u00f3n interactiva<\/h2>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-25\"><a class=\"wp-block-button__link has-vivid-purple-background-color has-background\" href=\"https:\/\/domestika.sjv.io\/9gEdWY\" style=\"border-radius:100px\" target=\"_blank\" rel=\"noreferrer noopener\">Ir al curso<\/a><\/div>\n<\/div>\n\n\n\n<p>Javier Usobiaga \u2013Dise\u00f1ador Web y cofundador junto a Marta Armada del estudio Swwweet\u2013 te ense\u00f1ar\u00e1 a sacarle el m\u00e1ximo 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\u00e1s sus efectos, filtros y animaciones y lograr\u00e1s crear ilustraciones y piezas animadas con c\u00f3digo HTML, CSS y JavasScript.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class='embed-container'><iframe loading=\"lazy\" title=\"Gr\u00e1ficos vectoriales SVG: ilustrar y animar con c\u00f3digo - Un curso de Javier Usobiaga\" src=\"https:\/\/player.vimeo.com\/video\/207619948?dnt=1&amp;app_id=122963\" width=\"1920\" height=\"1080\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\"><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-25\"><a class=\"wp-block-button__link has-vivid-purple-background-color has-background\" href=\"https:\/\/domestika.sjv.io\/9gEdWY\" style=\"border-radius:100px\" target=\"_blank\" rel=\"noreferrer noopener\">Ir al curso<\/a><\/div>\n<\/div>\n\n\n\n<p>Javier tambi\u00e9n imparte en Domestika el curso\u00a0\u00abIntroducci\u00f3n al Desarrollo Web Responsive con HTML y CSS\u00bb, en el que podr\u00e1s aprender los fundamentos del Desarrollo Web Frontend, conocimientos que te vendr\u00e1n muy bien como base para aprovechar al m\u00e1ximo este curso de gr\u00e1ficos vectoriales SVG.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets8.domestika.org\/course-images\/000\/029\/418\/29418-big.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 aprender\u00e1s en este curso online?<\/h3>\n\n\n\n<p>Comenzar\u00e1s conociendo el trabajo y las influencias en el mundo del SVG de Javier Usobiaga.<\/p>\n\n\n\n<p>A continuaci\u00f3n entender\u00e1s c\u00f3mo funciona el formato SVG en su forma m\u00e1s b\u00e1sica para poder alterarlo y optimizarlo. Para ello, empezar\u00e1s escribiendo un gr\u00e1fico b\u00e1sico sin editores visuales solo con el editor de c\u00f3digo, descubrir\u00e1s c\u00f3mo aplicar estilos a trav\u00e9s de atributos y CSS, sabr\u00e1s c\u00f3mo funcionan las etiquetas de l\u00ednea, polil\u00ednea y pol\u00edgono y las etiquetas de trazo que permiten crear infinidad de curvas, rectas y puntos. Tambi\u00e9n ver\u00e1s los atributos viewbox que permiten realizar ventanas virtuales (delimitar la parte visible de un gr\u00e1fico y hacer zoom) y las etiquetas de texto.<\/p>\n\n\n\n<p>Una vez que conozcas las herramientas b\u00e1sicas ser\u00e1 el momento de aprender a usar otras herramientas de optimizaci\u00f3n como los editores vectoriales y herramientas de c\u00f3digo con las que lograr\u00e1s agrupar, definir y reutilizar elementos SVG con el fin de ahorrarte muchas l\u00edneas de c\u00f3digo.<\/p>\n\n\n\n<p>La siguiente fase ser\u00e1 incorporar SVG a la web, para ello, Javier te explicar\u00e1 formas de cargar un SVG (imagen de contenido, imagen de fondo, con JavaScript\u2026), su aplicaci\u00f3n respecto a los sistemas de iconos, su papel en la web responsive, consejos para mejorar la experiencia en lectores de pantalla y c\u00f3mo optimizar el formato SVG en todos los navegadores.<\/p>\n\n\n\n<p>Seguidamente descubrir\u00e1s los efectos en SVG (transformaciones, degradados, patrones, m\u00e1scaras y filtros) y los tipos de animaci\u00f3n (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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfCu\u00e1l es el proyecto del curso?<\/h3>\n\n\n\n<p>Realizar\u00e1s una ilustraci\u00f3n con elementos vectoriales animados. El tema es libre y puedes hacer un proyecto tan simple o complejo como quieras poniendo en pr\u00e1cticas las herramientas que has visto durante el curso.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets7.domestika.org\/course-images\/000\/029\/417\/29417-big.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfA qui\u00e9n est\u00e1 dirigido este curso online?<\/h3>\n\n\n\n<p>A programadores, dise\u00f1adores, ilustradores y cualquier persona que tenga inter\u00e9s por el dise\u00f1o y curiosidad a la hora de desarrollar nuevos proyectos con HTML y CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Requisitos y materiales<\/h3>\n\n\n\n<p>Se requieren conocimientos b\u00e1sicos previos de HTML y CSS.<\/p>\n\n\n\n<p>Respecto a los materiales y herramientas que necesitar\u00e1s para realizar el curso, deber\u00e1s contar con un ordenador, un editor de c\u00f3digo y un editor de gr\u00e1ficos vectoriales (como Illustrator, Sketch, Inkscape o similares).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets6.domestika.org\/course-images\/000\/029\/416\/29416-big.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprende a trabajar con ilustraciones vectoriales en tus p\u00e1ginas web, de la l\u00ednea a la animaci\u00f3n interactiva<\/p>\n","protected":false},"author":1,"featured_media":753,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[95,96,109,4,113],"tags":[],"class_list":["post-752","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cursos_en_espanol","category-domestika","category-javascript","category-programacion","category-web"],"_links":{"self":[{"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/posts\/752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/comments?post=752"}],"version-history":[{"count":1,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/posts\/752\/revisions"}],"predecessor-version":[{"id":754,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/posts\/752\/revisions\/754"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/media\/753"}],"wp:attachment":[{"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/media?parent=752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/categories?post=752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/tags?post=752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}