Cómo integrar gráficos vectoriales en un programa de JavaScript

Además de poder dibujar gráficos basados en píxeles a través de JavaScript usando la API de Canvas, también puede usar JavaScript para crear gráficos vectoriales.

Uno de los formatos más conocidos, que ha vuelto a celebrar gracias a HTML5 en particular, es el formato SVG. SVG es un lenguaje de marcado basado en XML para describir gráficos vectoriales bidimensionales. Para ello, la especificación correspondiente (www.w3.org/TR/SVG2/) proporciona varios elementos tales como , , , , y para definir formas geométricas.

Puede crear gráficos SVG manualmente, pero esto suele ser bastante tedioso, especialmente cuando se trata de crear gráficos más complicados. Es más fácil crear gráficos apropiados en uno de los numerosos programas vectoriales disponibles, exportarlos a formato SVG (los programas como Adobe Illustrator, Inkscape y otros similares suelen ofrecer esa opción) y luego usarlos en la página web adecuada. Puede ver un ejemplo simple de un documento SVG a continuación: un círculo blanco sobre un fondo negro.

<svg xmlns="http://www.w3.org/2000/svg">

<rect width="100%" height="100%" fill="#000000" />

<circle id="circle" cx="100" cy="100" r="80" fill="#ffffff" />

</svg>

Integrando SVG en HTML

Para integrar SVG en HTML, tiene varias opciones, las más importantes se describen brevemente en las siguientes secciones.

Integración a través del elemento

Aquí, el archivo SVG correspondiente simplemente se vincula a través del origen atributo de la elemento (ver abajo). Los navegadores que pueden manejar SVG mostrarán el documento SVG vinculado en el lugar apropiado en el HTML.

Sin embargo, los enlaces definidos dentro del contenido SVG no son compatibles con este tipo de integración. Lo mismo se aplica al código JavaScript que aparece dentro del documento SVG. Este código no será interpretado ni ejecutado.

<!DOCTYPE html>

<html>

<head lang="en">

...

</head>

<body>

<img src="https://blog.sap-press.com/example.svg" alt="SVG-Grafik" width="500" height="500" >

</body>

</html>

Integración a través del elemento </h3> <p><span style="color: black;">Los archivos SVG también se pueden definir como la fuente del contenido de </span><span style="color: black;"><iframe> </span><span style="color: black;">elementos (como se muestra a continuación). Luego, el archivo SVG se muestra dentro del iFrame. A diferencia de la integración a través de </span><span style="color: black;"><img> </span><span style="color: black;">elemento, este tipo de integración interpreta enlaces dentro del contenido SVG y también ejecuta cualquier <span style="color: #0600ff;"><a rel="nofollow noopener" target="_blank" href="https://learning.sap-press.com/general-computing-for-developers-and-administrators#javascript" style="color: #0600ff;">JavaScript</a></span> que pueda existir.</span></p> <p><span style="color: black;"> </span></p> <p><code><span style="color: black;"><!DOCTYPE html></span></code></p> <p><code><span style="color: black;"><html></span></code></p> <p><code><span style="color: black;"><head lang="en"></span></code></p> <p><code><span style="color: black;"> ...</span></code></p> <p><code><span style="color: black;"></head></span></code></p> <p><code><span style="color: black;"><body></span></code></p> <p><code><strong><span style="color: black;"> <iframe src="https://blog.sap-press.com/example.svg" width="500" height="500" scrolling="no" ></span></strong></code></p> <p><code><strong><span style="color: black;"> </span></strong></code></p> <p><code><strong><span style="color: black;"> <img src="https://blog.sap-press.com/example.tif" width="500" height="500" alt="Alternative PNG image"></span></strong></code></p> <p><code><strong><span style="color: black;"> </iframe></span></strong></code></p> <p><code><span style="color: black;"></body></span></code></p> <p><code><span style="color: black;"></html></span></code><strong><span style="color: black;"> </span></strong></p> <h3 style="font-size: 20px;">Integración a través del elemento <objeto></h3> <p><span style="color: black;">También puede integrar archivos SVG como objetos multimedia usando el </span><span style="color: black;"><objeto> </span><span style="color: black;">elemento (ver abajo). Para navegadores más antiguos que no pueden mostrar SVG, también puede especificar contenido alternativo, como una imagen alternativa, entre la apertura y el cierre. </span><span style="color: black;"><objeto> </span><span style="color: black;">etiquetas</span></p> <p><span style="color: black;"> </span></p> <p><span style="color: black;">Similar a la integración a través de la </span><span style="color: black;"><iframe> </span><span style="color: black;">elemento, este tipo de integración interpreta enlaces dentro del contenido SVG, y JavaScript también es compatible.</span></p> <p><span style="color: black;"> </span></p> <p><code><span style="color: black;"><!DOCTYPE html></span></code></p> <p><code><span style="color: black;"><html></span></code></p> <p><code><span style="color: black;"><head lang="en"></span></code></p> <p><code><span style="color: black;"> ...</span></code></p> <p><code><span style="color: black;"></head></span></code></p> <p><code><span style="color: black;"><body></span></code></p> <p><code><strong><span style="color: black;"> <object data="http://blog.sap-press.com/example.svg" width="500" height="500" ></span></strong></code></p> <p><code><strong><span style="color: black;"> </span></strong></code></p> <p><code><strong><span style="color: black;"> <img src="https://blog.sap-press.com/example.tif" width="500" height="500" alt="Alternative PNG image"></span></strong></code></p> <p><code><strong><span style="color: black;"> </object></span></strong></code></p> <p><code><span style="color: black;"></body></span></code></p> <p><code><span style="color: black;"></html></span></code><strong><span style="color: black;"> </span></strong></p> <h3 style="font-size: 20px;">Integrando como imagen de fondo a través de CSS</h3> <p><span style="color: black;">También se pueden utilizar archivos SVG (rodeados de </span><span style="color: black;">URL()</span><span style="color: black;">) como un valor para el </span><span style="color: black;">antecedentes </span><span style="color: black;"><span style="color: #0600ff;"><a rel="nofollow noopener" target="_blank" href="https://learning.sap-press.com/general-computing-for-developers-and-administrators#css" style="color: #0600ff;">CSS</a></span> propiedad (como se muestra a continuación). En este caso, el contenido del archivo SVG se utiliza como imagen de fondo para el elemento (o elementos) correspondiente seleccionado por la regla CSS respectiva. Sin embargo, los enlaces dentro del contenido SVG y el código JavaScript no se interpretarán.</span></p> <p><span style="color: black;"> </span></p> <p><code><span style="color: black;"><!DOCTYPE html></span></code></p> <p><code><span style="color: black;"><html></span></code></p> <p><code><span style="color: black;"><head lang="en"></span></code></p> <p><code><span style="color: black;"> ...</span></code></p> <p><code><span style="color: black;"></head></span></code></p> <p><code><span style="color: black;"><body></span></code></p> <p><code><strong><span style="color: black;"> <div style="background: url(example.svg); width: 500px; height: 500px" ></div></span></strong></code></p> <p><code><span style="color: black;"></body></span></code></p> <p><code><span style="color: black;"></html></span></code><strong><span style="color: black;"> </span></strong></p> <h3 style="font-size: 20px;">Definición en línea en HTML</h3> <p><span style="color: black;">Una característica particularmente conveniente es el hecho de que SVG también se puede definir directamente «en línea» dentro del código HTML (como se muestra en la siguiente lista). Luego, el navegador interpreta el SVG en su lugar, por lo que también se interpretan los enlaces y JavaScript.</span></p> <p><span style="color: black;"> </span></p> <p><code><span style="color: black;"><!DOCTYPE html></span></code></p> <p><code><span style="color: black;"> </span></code></p> <p><code><span style="color: black;"><html></span></code></p> <p><code><span style="color: black;"><head lang="en"></span></code></p> <p><code><span style="color: black;"> ...</span></code></p> <p><code><span style="color: black;"></head></span></code></p> <p><code><span style="color: black;"><body></span></code></p> <p><code><strong><span style="color: black;"> <svg id="svg" version="1.1"</span></strong></code></p> <p><code><strong><span style="color: black;"> baseProfile="full"</span></strong></code></p> <p><code><strong><span style="color: black;"> width="500" height="500"</span></strong></code></p> <p><code><strong><span style="color: black;"> xmlns="http://www.w3.org/2000/svg"></span></strong></code></p> <p><code><strong><span style="color: black;"> <rect width="100%" height="100%" /></span></strong></code></p> <p><code><strong><span style="color: black;"> <circle id="circle" cx="100" cy="100" r="80" /></span></strong></code></p> <p><code><strong><span style="color: black;"> </svg></span></strong></code></p> <p><code><span style="color: black;"></body></span></code></p> <p><code><span style="color: black;"></html></span></code></p> <p><strong><span style="color: black;"> </span></strong></p> <h2>Cambiar la apariencia de los elementos SVG con CSS</h2> <p><span style="color: black;">Los elementos individuales dentro de un documento SVG se pueden diseñar usando CSS, aunque las propiedades no son las mismas que las que usa al diseñar elementos HTML. Para ver una selección de elementos permitidos, consulte la siguiente tabla. También puede encontrar una lista completa en la especificación SVG en </span><span style="color: #0600ff;"><em><a rel="nofollow noopener" target="_blank" href="http://www.w3.org/TR/SVG2/styling.html" style="color: #0600ff;">www.w3.org/TR/SVG2/estilo.html</a></em></span><span style="color: black;">.</span></p> <p><span style="color: black;"> </span></p> <p><img decoding="async" src="https://blog.sap-press.com/hs-fs/hubfs/2286_table_11_015.png?width=1148&height=1076&name=2286_table_11_015.png" alt="Selección de varias propiedades CSS para SVG" width="1148" height="1076" loading="lazy" style="height: auto; max-width: 100%; width: 1148px;" srcset="https://blog.sap-press.com/hs-fs/hubfs/2286_table_11_015.png?width=574&height=538&name=2286_table_11_015.png 574w, https://blog.sap-press.com/hs-fs/hubfs/2286_table_11_015.png?width=1148&height=1076&name=2286_table_11_015.png 1148w, https://blog.sap-press.com/hs-fs/hubfs/2286_table_11_015.png?width=1722&height=1614&name=2286_table_11_015.png 1722w, https://blog.sap-press.com/hs-fs/hubfs/2286_table_11_015.png?width=2296&height=2152&name=2286_table_11_015.png 2296w, https://blog.sap-press.com/hs-fs/hubfs/2286_table_11_015.png?width=2870&height=2690&name=2286_table_11_015.png 2870w, https://blog.sap-press.com/hs-fs/hubfs/2286_table_11_015.png?width=3444&height=3228&name=2286_table_11_015.png 3444w" sizes="(max-width: 1148px) 100vw, 1148px"/></p> <p><span style="color: black;"> </span></p> <p><span style="color: black;">Aquí hay un ejemplo en el que el SVG de arriba está diseñado con CSS.</span></p> <p><span style="color: black;"> </span></p> <p><code><span style="color: black;">rect {</span></code></p> <p><code><strong><span style="color: black;"> stroke-width: 4;</span></strong></code></p> <p><code><strong><span style="color: black;"> fill: #FFFFFF;</span></strong></code></p> <p><code><strong><span style="color: black;"> stroke: #3080D0;</span></strong></code></p> <p><code><span style="color: black;">}</span></code></p> <p><code><strong><span style="color: white;">11</span></strong></code></p> <p><code><span style="color: black;">#circle:hover {</span></code></p> <p><code><span style="color: black;"> cursor: pointer;</span></code></p> <p><code><span style="color: black;">}</span></code></p> <p><code><span style="color: black;"> </span></code></p> <p><code><span style="color: black;">#circle {</span></code></p> <p><code><span style="color: black;"> fill-opacity: 0.5;</span></code></p> <p><code><span style="color: black;"> stroke-width: 4;</span></code></p> <p><code><span style="color: black;"> fill: #3080D0;</span></code></p> <p><code><span style="color: black;"> stroke: #3080D0;</span></code></p> <p><code><span style="color: black;">}</span></code></p> <p><code><span style="color: black;">#circle.active {</span></code></p> <p><code><span style="color: black;">fill: #000000;</span></code></p> <p><code><span style="color: black;">}</span></code></p> <p><code><span style="color: black;"> </span></code></p> <p><code><span style="color: black;">text {</span></code></p> <p><code><span style="color: black;"> fill: #FFFFFF;</span></code></p> <p><code><span style="color: black;"> font-family: sans-serif;</span></code></p> <p><code><span style="color: black;">}</span></code></p> <p><strong><span style="color: black;"> </span></strong></p> <h2>Manipulación del comportamiento de los elementos SVG a través de JavaScript</h2> <p><span style="color: black;">No solo puede diseñar los elementos en un documento SVG usando CSS, también puede acceder a elementos individuales usando JavaScript, modificarlos, agregar nuevos elementos y básicamente realizar todas las demás operaciones DOM que ya conoce.</span></p> <p><span style="color: black;"> </span></p> <p><span style="color: black;">Como ejemplo de esto, describiremos dos casos de uso: primero, cómo agregar detectores de eventos a elementos SVG individuales usando JavaScript, y segundo, cómo cambiar dinámicamente la posición de un elemento gráfico usando JavaScript.</span><span style="color: black;"> </span></p> <h3 style="font-size: 20px;">Registro de un detector de eventos para elementos SVG</h3> <p><span style="color: black;">El siguiente ejemplo de código contiene un ejemplo de registro de detectores de eventos en elementos SVG. Aquí el incrustado </span><span style="color: black;"><svg> </span><span style="color: black;">se accede primero al elemento a través del </span><span style="color: black;">getElementById() </span><span style="color: black;">método y luego el </span><span style="color: black;"><círculo> </span><span style="color: black;">elemento se determina a través de una nueva llamada de este método (esta vez en el </span><span style="color: black;"><svg> </span><span style="color: black;">elemento encontrado). Después de eso, se registran tres oyentes de eventos diferentes a través del </span><span style="color: black;">agregarEventListener() </span><span style="color: black;">método: el detector de eventos para el </span><span style="color: black;">hacer clic </span><span style="color: black;">El evento se llama cuando el </span><span style="color: black;"><círculo> </span><span style="color: black;">se hace clic en el elemento, y los detectores de eventos para el </span><span style="color: black;">ratón sobre </span><span style="color: black;">y </span><span style="color: black;">ratón fuera </span><span style="color: black;">los eventos se llaman cada vez que el puntero del mouse se mueve sobre o lejos de ese elemento. En ambos casos, el </span><span style="color: black;">activo </span><span style="color: black;">La clase CSS se cambia de un lado a otro y, por lo tanto, se cambia el color de relleno.</span></p> <p><span style="color: black;"> </span></p> <p><code><span style="color: black;">'use strict';</span></code></p> <p><code><span style="color: black;">function init() {</span></code></p> <p><code><strong><span style="color: black;"> const svgDocument = document.getElementById('svg');</span></strong></code></p> <p><code><strong><span style="color: black;"> const circle = svg.getElementById('circle');</span></strong></code></p> <p><code><strong><span style="color: black;"> circle.addEventListener</span></strong><span style="color: black;">('click', (e) => {</span></code></p> <p><code><span style="color: black;"> console.log('Hello World');</span></code></p> <p><code><span style="color: black;"> });</span></code></p> <p><code><strong><span style="color: black;"> circle.addEventListener</span></strong><span style="color: black;">('mouseover', (e) => {</span></code></p> <p><code><span style="color: black;"> circle.classList.toggle('active');</span></code></p> <p><code><span style="color: black;"> });</span></code></p> <p><code><strong><span style="color: black;"> circle.addEventListener</span></strong><span style="color: black;">('mouseout', (e) => {</span></code></p> <p><code><span style="color: black;"> circle.classList.toggle('active');</span></code></p> <p><code><span style="color: black;"> });</span></code></p> <p><code><span style="color: black;">}</span></code></p> <p><code><span style="color: black;"> </span></code></p> <p><code><span style="color: black;">window.addEventListener('DOMContentLoaded', init);</span></code><strong><span style="color: black;"> </span></strong></p> <h3 style="font-size: 20px;">Elementos SVG que cambian dinámicamente</h3> <p><span style="color: black;">Los elementos SVG, por supuesto, también se pueden cambiar dinámicamente a través de JavaScript, por ejemplo, la posición del </span><span style="color: black;"><círculo> </span><span style="color: black;">elemento. Para este propósito, el HTML/SVG primero se amplía con dos controles deslizantes, como se muestra aquí.</span></p> <p><span style="color: black;"> </span></p> <p><code><span style="color: black;"><!DOCTYPE html></span></code></p> <p><code><span style="color: black;"><html></span></code></p> <p><code><span style="color: black;"><head lang="en"></span></code></p> <p><code><span style="color: black;"> <meta charset="UTF-8"></span></code></p> <p><code><span style="color: black;"> <title>SVG example</title></span></code></p> <p><code><span style="color: black;"> <link rel="stylesheet" href="http://blog.sap-press.com/styles/styles.css"></head></span></code></p> <p><code><span style="color: black;"><body></span></code></p> <p><code><span style="color: black;"> <script src="https://blog.sap-press.com/scripts/main.js"></script></span></code></p> <p><code><span style="color: black;"> <svg id="svg" version="1.1"</span></code></p> <p><code><span style="color: black;"> baseProfile="full"</span></code></p> <p><code><span style="color: black;"> width="500" height="500"</span></code></p> <p><code><span style="color: black;"> xmlns="http://www.w3.org/2000/svg"></span></code></p> <p><code><span style="color: black;"> <rect width="100%" height="100%" /></span></code></p> <p><code><span style="color: black;"> <circle id="circle" cx="100" cy="100" r="80" /></span></code></p> <p><code><span style="color: black;"> </svg></span></code></p> <p><code><strong><span style="color: black;"> <div>X: <input id="sliderX" type="range" min="1" max="500" value="100" /> </div></span></strong></code></p> <p><code><strong><span style="color: black;"> <div>Y: <input id="sliderY" type="range" min="1" max="500" value="100" /> </div></span></strong></code></p> <p><code><span style="color: black;"></body></span></code></p> <p><code><span style="color: black;"></html></span></code></p> <p><strong><span style="color: black;"> </span></strong></p> <p><span style="color: black;">Luego, un detector de eventos para el </span><span style="color: black;">cambio </span><span style="color: black;">evento se agrega a cada control deslizante (ver más abajo), dentro del cual el </span><span style="color: black;">moverCírculo() </span><span style="color: black;">se llama la función. Esta función espera los siguientes parámetros: primero, una especificación de posición y segundo, una especificación sobre la dirección (horizontal o vertical o x o y). En base a esto, o bien el </span><span style="color: black;">cx </span><span style="color: black;">atributo (coordenada x del centro del círculo) o el </span><span style="color: black;">cy </span><span style="color: black;">El atributo (coordenada y del centro del círculo) se actualiza en consecuencia. El círculo se mueve inmediatamente a la posición correspondiente en el área de dibujo.</span></p> <p><strong><span style="color: black;"> </span></strong></p> <p><code><span style="color: black;">'use strict';</span></code></p> <p><code><span style="color: black;">function init() {</span></code></p> <p><code><span style="color: black;"> const sliderX = document.getElementById('sliderX');</span></code></p> <p><code><span style="color: black;"> const sliderY = document.getElementById('sliderY');</span></code></p> <p><code><span style="color: black;"> sliderX.addEventListener('change', (e) => {</span></code></p> <p><code><span style="color: black;"> moveCircle(e.target.value, 'x');</span></code></p> <p><code><span style="color: black;"> });</span></code></p> <p><code><span style="color: black;"> sliderY.addEventListener('change', (e) => {</span></code></p> <p><code><span style="color: black;"> moveCircle(e.target.value, 'y');</span></code></p> <p><code><span style="color: black;"> });</span></code></p> <p><code><span style="color: black;">}</span></code></p> <p><code><span style="color: black;"> </span></code></p> <p><code><span style="color: black;">function moveCircle(value, direction) {</span></code></p> <p><code><span style="color: black;"> const svgDocument = document.getElementById('svg');</span></code></p> <p><code><span style="color: black;"> const circle = svgDocument.getElementById('circle');</span></code></p> <p><code><strong><span style="color: black;"> circle.setAttribute('c' + direction, value);</span></strong></code></p> <p><code><span style="color: black;">}</span></code></p> <p><code><span style="color: black;"> </span></code></p> <p><code><span style="color: black;">window.addEventListener('DOMContentLoaded', init);</span></code></p> <p><span style="color: black;"> </span></p> <p><em>Nota del editor</em>: Esta publicación ha sido adaptada de una sección del libro. <em><span style="color: #0600ff;"><a rel="nofollow noopener" target="_blank" href="https://www.sap-press.com/javascript_5554/?utm_source=sappressblog&utm_medium=referral&utm_campaign=Blogs&utm_term=2286_chapter11&utm_content=2286" style="color: #0600ff;">JavaScript: la guía completa</a></span> </em>por Felipe Ackermann.</p> </div> <p><script type="rocketlazyloadscript">(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><br /> <br /><br /> <br /><a href="http://blog.sap-press.com/how-to-integrate-vector-graphics-in-a-javascript-program" target="_blank" rel="noopener">Source link </a></p> <br class="clear"/> <div class="post-excerpt post-tag"> <a href="https://s4pcademy.com/tag/como/"><i class="far fa-bookmark"></i>como</a><a href="https://s4pcademy.com/tag/graficos/"><i class="far fa-bookmark"></i>gráficos</a><a href="https://s4pcademy.com/tag/integrar/"><i class="far fa-bookmark"></i>integrar</a><a href="https://s4pcademy.com/tag/javascript/"><i class="far fa-bookmark"></i>JavaScript</a><a href="https://s4pcademy.com/tag/programa/"><i class="far fa-bookmark"></i>programa</a><a href="https://s4pcademy.com/tag/vectoriales/"><i class="far fa-bookmark"></i>vectoriales</a> </div><br class="clear"/> </div> <div class="post-related"> <h3>Artículos relacionados</h3><br class="clear"/> <div class="one-third ">  <div id="post-11480" class="post-11480 post type-post status-publish format-standard has-post-thumbnail hentry category-technical-articles tag-como tag-complemento tag-cpq tag-instrucciones tag-paso tag-sap tag-script tag-usar"> <div class="post-wrapper grid-layout has-featured-img"> <a class="post-related-link" href="https://s4pcademy.com/como-usar-el-complemento-sap-cpq-script-instrucciones-paso-a-paso/"></a> <img src="https://s4pcademy.com/wp-content/uploads/2023/03/6598e4adb687871bd390e4c487f1fe21-610x524.png" class="post-related-featured-img" alt=""/> <div class="post-header-wrapper"> <div class="post-detail single-post"> <span class="post-info-cat"> <a href="https://s4pcademy.com/category/technical-articles/">Technical Articles</a> </span> </div> <div class="post-header grid related"> <h6><a href="https://s4pcademy.com/como-usar-el-complemento-sap-cpq-script-instrucciones-paso-a-paso/" title="Cómo usar el complemento SAP CPQ Script: instrucciones paso a paso">Cómo usar el complemento SAP CPQ Script: instrucciones paso a paso</a></h6> </div> </div> </div> </div>  </div> <div class="one-third ">  <div id="post-8437" class="post-8437 post type-post status-publish format-standard has-post-thumbnail hentry category-product-information category-sap-hana-spatial-services tag-aplicaciones tag-como tag-dentro tag-espaciales tag-gestion tag-hana tag-las tag-los tag-parte tag-sap tag-servicios tag-transporte tag-utilizan"> <div class="post-wrapper grid-layout has-featured-img"> <a class="post-related-link" href="https://s4pcademy.com/como-se-utilizan-los-servicios-espaciales-de-sap-hana-dentro-de-las-aplicaciones-de-sap-parte-1-gestion-de-transporte-de-sap/"></a> <img src="https://s4pcademy.com/wp-content/uploads/2022/12/HSS_TM-610x610.png" class="post-related-featured-img" alt=""/> <div class="post-header-wrapper"> <div class="post-detail single-post"> <span class="post-info-cat"> <a href="https://s4pcademy.com/category/product-information/">Product Information</a>  ·  <a href="https://s4pcademy.com/category/sap-hana-spatial-services/">SAP HANA spatial services</a> </span> </div> <div class="post-header grid related"> <h6><a href="https://s4pcademy.com/como-se-utilizan-los-servicios-espaciales-de-sap-hana-dentro-de-las-aplicaciones-de-sap-parte-1-gestion-de-transporte-de-sap/" title="Cómo se utilizan los servicios espaciales de SAP HANA dentro de las aplicaciones de SAP: parte 1 (Gestión de transporte de SAP)">Cómo se utilizan los servicios espaciales de SAP HANA dentro de las aplicaciones de SAP: parte 1 (Gestión de transporte de SAP)</a></h6> </div> </div> </div> </div>  </div> <div class="one-third last">  <div id="post-11444" class="post-11444 post type-post status-publish format-standard has-post-thumbnail hentry category-technical-articles tag-aplicacion tag-como tag-configurar tag-detalles tag-elements tag-fiori tag-inbox tag-objetos tag-pagina tag-sap tag-una"> <div class="post-wrapper grid-layout has-featured-img"> <a class="post-related-link" href="https://s4pcademy.com/como-configurar-una-pagina-de-objetos-de-fiori-elements-como-una-pagina-de-detalles-de-la-aplicacion-sap-my-inbox/"></a> <img src="https://s4pcademy.com/wp-content/uploads/2023/03/Picture1-119-610x610.png" class="post-related-featured-img" alt=""/> <div class="post-header-wrapper"> <div class="post-detail single-post"> <span class="post-info-cat"> <a href="https://s4pcademy.com/category/technical-articles/">Technical Articles</a> </span> </div> <div class="post-header grid related"> <h6><a href="https://s4pcademy.com/como-configurar-una-pagina-de-objetos-de-fiori-elements-como-una-pagina-de-detalles-de-la-aplicacion-sap-my-inbox/" title="Cómo configurar una página de objetos de Fiori Elements como una página de detalles de la aplicación SAP My Inbox">Cómo configurar una página de objetos de Fiori Elements como una página de detalles de la aplicación SAP My Inbox</a></h6> </div> </div> </div> </div>  </div> </div> </div>  <div class="fullwidth-comment-wrapper sidebar theme-border"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Deja tu comentario <small><a rel="nofollow" id="cancel-comment-reply-link" href="/como-integrar-graficos-vectoriales-en-un-programa-de-javascript/#respond" style="display:none;">Cancelar la respuesta</a></small></h3><form action="https://s4pcademy.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Tu dirección de correo electrónico no será publicada.</span> <span class="required-field-message">Los campos obligatorios están marcados con <span class="required"></span></span></p><p class="comment-form-comment input-wrapper"><label for="comment">Comentario</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" class="input-effect"></textarea><span class="focus-border"></span></p><p class="comment-form-author input-wrapper"><label for="author">Nombre</label> <span class="required"></span><input id="author" name="author" type="text" value="" size="30" aria-required="true" class="input-effect" /><span class="focus-border"></span></p> <p class="comment-form-email input-wrapper"><label for="email">Email</label> <span class="required"></span><input id="email" name="email" type="text" value="" size="30" aria-required="true" class="input-effect" /><span class="focus-border"></span></p> <p class="comment-form-url input-wrapper"><label for="url">Website</label><input id="url" name="url" type="text" value="" size="30" class="input-effect" /><span class="focus-border"></span></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Guarda mi nombre, correo electrónico y web en este navegador para la próxima vez que comente.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Publicar el comentario" /> <input type='hidden' name='comment_post_ID' value='8240' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </div> <div class="post-navigation previous"> <a href="https://s4pcademy.com/c_s4cpr_2208-certificacion-comience-su-carrera-como-asociado-de-sap-preparacion-erp/"> <div class="navigation-post-content"> <div class="post-featured-image static"> <div class="post-featured-image-hover lazy"> <img src="https://s4pcademy.com/wp-content/uploads/2022/12/C_S4CPR_2208-Certification-Take-Practice-Test-Exams-to-Start-Your-SAP-Career-610x400.png" class=" smoove" alt=""/> </div> </div> <h7>C_S4CPR_2208 Certificación: comience su carrera como asociado de SAP | Preparación ERP</h7> </div> <div class="navigation-anchor"> Previo </div> </a> </div> <div class="post-navigation next"> <a href="https://s4pcademy.com/c_brsom_2020-conviertase-en-sap-brsom-associate-con-practice-test-preparacion-erp/"> <div class="navigation-post-content"> <div class="post-featured-image static"> <div class="post-featured-image-hover lazy"> <img src="https://s4pcademy.com/wp-content/uploads/2022/12/Passing-the-Associate-Level-SAP-C_BRSOM_2020-Exam-Is-Easy-with-Practice-Tests-610x400.png" class=" smoove" alt=""/> </div> </div> <h7>C_BRSOM_2020: Conviértase en SAP BRSOM Associate con Practice Test | Preparación ERP</h7> </div> <div class="navigation-anchor"> Siguiente </div> </a> </div> </div> </div>  </div> <br class="clear"/> </div> </div> <div id="footer-wrapper"> <div data-elementor-type="wp-post" data-elementor-id="3274" class="elementor elementor-3274"> <section class="elementor-section elementor-top-section elementor-element elementor-element-add91cb elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="add91cb" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-f9607ea" data-id="f9607ea" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <section class="elementor-section elementor-inner-section elementor-element elementor-element-8e007a2 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="8e007a2" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-fdf209a" data-id="fdf209a" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-6bc7d2f elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="6bc7d2f" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="divider.default"> <div class="elementor-widget-container"> <style>/! elementor - v3.9.1 - 14-12-2022 / .elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#2c2c2c;--divider-icon-size:20px;--divider-element-spacing:10px;--divider-pattern-height:24px;--divider-pattern-size:20px;--divider-pattern-url:none;--divider-pattern-repeat:repeat-x}.elementor-widget-divider .elementor-divider{display:flex}.elementor-widget-divider .elementor-dividertext{font-size:15px;line-height:1;max-width:95%}.elementor-widget-divider .elementor-dividerelement{margin:0 var(--divider-element-spacing);flex-shrink:0}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{display:flex;margin:0;direction:ltr}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{align-items:center}.elementor-widget-divider--view-line_icon .elementor-divider-separator:after,.elementor-widget-divider--view-line_icon .elementor-divider-separator:before,.elementor-widget-divider--view-line_text .elementor-divider-separator:after,.elementor-widget-divider--view-line_text .elementor-divider-separator:before{display:block;content:"";border-bottom:0;flex-grow:1;border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-dividersvg:first-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-left .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-left .elementor-dividerelement{margin-left:0}.elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-dividersvg:last-of-type{flex-grow:0;flex-shrink:100}.elementor-widget-divider--element-align-right .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-right .elementor-dividerelement{margin-right:0}.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--separator-type-pattern{--divider-border-style:none}.elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,.elementor-widget-divider--separator-type-pattern:not([class=elementor-widget-divider--view]) .elementor-divider-separator{width:100%;min-height:var(--divider-pattern-height);-webkit-mask-size:var(--divider-pattern-size) 100%;mask-size:var(--divider-pattern-size) 100%;-webkit-mask-repeat:var(--divider-pattern-repeat);mask-repeat:var(--divider-pattern-repeat);background-color:var(--divider-color);-webkit-mask-image:var(--divider-pattern-url);mask-image:var(--divider-pattern-url)}.elementor-widget-divider--no-spacing{--divider-pattern-size:auto}.elementor-widget-divider--bg-round{--divider-pattern-repeat:round}.rtl .elementor-widget-divider .elementor-divider__text{direction:rtl}.e-con-inner>.elementor-widget-divider,.e-con>.elementor-widget-divider{width:var(--container-widget-width);--flex-grow:var(--container-widget-flex-grow)}</style> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-e9d26b3" data-id="e9d26b3" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-2fe36f5 elementor-widget elementor-widget-heading" data-id="2fe36f5" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="heading.default"> <div class="elementor-widget-container"> <style>/! elementor - v3.9.1 - 14-12-2022 / .elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}</style><h3 class="elementor-heading-title elementor-size-default">Madrid</h3> </div> </div> <div class="elementor-element elementor-element-d34b827 elementor-widget elementor-widget-text-editor" data-id="d34b827" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <style>/! elementor - v3.9.1 - 14-12-2022 / .elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style> <p>Calle Eloy Gonzalo, 27<br />Madrid, Madrid.<br />Código Postal 28010</p> </div> </div> </div> </div> </div> </section> </div> </div> <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-b8bb9b5" data-id="b8bb9b5" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <section class="elementor-section elementor-inner-section elementor-element elementor-element-0832275 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0832275" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-e20522a" data-id="e20522a" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-2762659 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="2762659" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="divider.default"> <div class="elementor-widget-container"> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-33b31be" data-id="33b31be" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-5c76789 elementor-widget elementor-widget-heading" data-id="5c76789" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h3 class="elementor-heading-title elementor-size-default">México</h3> </div> </div> <div class="elementor-element elementor-element-fd6b0b2 elementor-widget elementor-widget-text-editor" data-id="fd6b0b2" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Paseo de la Reforma 26<br />Colonia Juárez, Cuauhtémoc<br />Ciudad de México 06600</p> </div> </div> </div> </div> </div> </section> </div> </div> <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-4ba6261" data-id="4ba6261" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <section class="elementor-section elementor-inner-section elementor-element elementor-element-cbe1ee7 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="cbe1ee7" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-de2f54b" data-id="de2f54b" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-6eed60f elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="6eed60f" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="divider.default"> <div class="elementor-widget-container"> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-b44a800" data-id="b44a800" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-46c7813 elementor-widget elementor-widget-heading" data-id="46c7813" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h3 class="elementor-heading-title elementor-size-default">Costa Rica</h3> </div> </div> <div class="elementor-element elementor-element-49c9717 elementor-widget elementor-widget-text-editor" data-id="49c9717" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Real Cariari<br />Autopista General Cañas, <br />San José, SJ 40104</p> </div> </div> </div> </div> </div> </section> </div> </div> <div class="elementor-column elementor-col-25 elementor-top-column elementor-element elementor-element-6d133ed" data-id="6d133ed" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <section class="elementor-section elementor-inner-section elementor-element elementor-element-ea87079 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="ea87079" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-22f3534" data-id="22f3534" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-34630bf elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="34630bf" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="divider.default"> <div class="elementor-widget-container"> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-d8721d9" data-id="d8721d9" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-cb60404 elementor-widget elementor-widget-heading" data-id="cb60404" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h3 class="elementor-heading-title elementor-size-default">Perú</h3> </div> </div> <div class="elementor-element elementor-element-06d1e82 elementor-widget elementor-widget-text-editor" data-id="06d1e82" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Av. Jorge Basadre 349<br />San Isidro<br />Lima, LIM 15073</p> </div> </div> </div> </div> </div> </section> </div> </div> </div> </section> <section class="elementor-section elementor-top-section elementor-element elementor-element-e77192c elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="e77192c" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-42a9251" data-id="42a9251" data-element_type="column" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-5b308e6 elementor-shape-circle elementor-widget__width-auto elementor-grid-0 e-grid-align-center elementor-widget elementor-widget-social-icons" data-id="5b308e6" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="social-icons.default"> <div class="elementor-widget-container"> <div class="elementor-social-icons-wrapper elementor-grid"> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-twitter elementor-repeater-item-10f63aa" target="_blank"> <span class="elementor-screen-only">Twitter</span> <i class="fab fa-twitter"></i> </a> </span> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-linkedin elementor-repeater-item-a9fc5ce" target="_blank"> <span class="elementor-screen-only">Linkedin</span> <i class="fab fa-linkedin"></i> </a> </span> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-fbe6ab2" target="_blank"> <span class="elementor-screen-only">Instagram</span> <i class="fab fa-instagram"></i> </a> </span> </div> </div> </div> <div class="elementor-element elementor-element-01821a2 elementor-widget elementor-widget-heading" data-id="01821a2" data-element_type="widget" data-settings="{"avante_ext_is_scrollme":"false","avante_ext_is_smoove":"false","avante_ext_is_parallax_mouse":"false","avante_ext_is_infinite":"false","avante_ext_link_sidemenu":"false"}" data-widget_type="heading.default"> <div class="elementor-widget-container"> <span class="elementor-heading-title elementor-size-default">Copyright 2022 | All Right Reserved.</span> </div> </div> </div> </div> </div> </section> </div> </div> <a id="go-to-top" href="javascript:;"><span class="ti-arrow-up"></span></a> </div> <style> #single, #ct-ultimate-gdpr-cookie-modal-body h1, #ct-ultimate-gdpr-cookie-modal-body h2, #ct-ultimate-gdpr-cookie-modal-body h3, #ct-ultimate-gdpr-cookie-modal-body h4, #ct-ultimate-gdpr-cookie-modal-body h5, #ct-ultimate-gdpr-cookie-modal-body h6 { color: #595959; } </style> <div id="ct-ultimate-gdpr-cookie-popup" class="ct-ultimate-gdpr-cookie-bottomPanel ct-ultimate-gdpr-cookie-popup-modern ct-ultimate-gdpr-cookie-popup-button-rounded" style="background-color: #6b6d7e;color: #ffffff;bottom: 0px; width: 100%; border-radius: 0; background-image:url( ); background-size:cover; background-position: 100%; "> <div class='ct-container ct-ultimate-gdpr-cookie-popup-bottomPanel'> <div id="ct-ultimate-gdpr-cookie-content" > Cookies Para que este sitio funcione adecuadamente, a veces instalamos en los dispositivos de los usuarios pequeños ficheros de datos, conocidos como cookies. La mayoría de los grandes sitios web también lo hacen. </div> <div class='ct-ultimate-gdpr-cookie-buttons ct-clearfix'> <div id="ct-ultimate-gdpr-cookie-accept" class="cookie-buttons" style="border-color: #ffffff; background-color: #ec3c5b; color: #ffffff;"> <span class='fa fa-check ct-ultimate-gdpr-button-icon-left'></span>Aceptar </div> <div id="ct-ultimate-gdpr-cookie-change-settings" class="cookie-buttons" style="border-color:#ffffff;background-color:#ec3c5b;color:#ffffff"> Cambiar ajustes <span class='fa fa-cog ct-ultimate-gdpr-button-icon-right'></span> </div> </div> <div class="ct-clearfix"></div> </div> </div> <div id="ct-ultimate-gdpr-cookie-open" class="ct-ultimate-gdpr-trigger-modal-round" style="background-color: #000000;color: #ffffff; bottom: 20px; left: 20px;right: auto; top: auto;"> <span class="fa fa-cog" aria-hidden="true"></span> <span class="sr-only">Configuración de Cookie Box</span> </div> <div id="ct-ultimate-gdpr-cookie-open" class="ct-ultimate-gdpr-trigger-modal-round" style="background-color: #000000;color: #ffffff; bottom: 20px; left: 20px;right: auto; top: auto;"> <span class="fa fa-cog" aria-hidden="true"></span> <span class="sr-only">Configuración de Cookie Box</span> </div> <div id="ct-ultimate-gdpr-cookie-modal" class="ct-ultimate-gdpr--Groups-5">  <div class="ct-ultimate-gdpr-cookie-modal-content ct-ultimate-gdpr-cookie-modal-content-single"> <div id="ct-ultimate-gdpr-cookie-modal-close"></div> <div id="ct-ultimate-gdpr-cookie-modal-body" class="ct-ultimate-gdpr-slider-not-block"> <div style="color:#797979"> <h2>Ajustes de privacidad</h2> <div class="ct-ultimate-gdpr-cookie-modal-desc"> Decida qué cookies quiere permitir. Puede cambiar estos ajustes en cualquier momento. Sin embargo, esto puede hacer que algunas funciones dejen de estar disponibles. Para obtener información sobre eliminar las cookies, por favor consulte la función de ayuda de su navegador. Aprenda más sobre las cookies que usamos. </div> <h3>Con el deslizador, puede habilitar o deshabilitar los diferentes tipos de cookies:</h3> </div> <form action="#" class="ct-ultimate-gdpr-cookie-modal-single" > <ul> <li><label for="cookie0"> <img class="ct-svg" src="https://s4pcademy.com/wp-content/plugins/ct-ultimate-gdpr/assets/css/images/block-all.svg" style="width: 60px;" alt="Bloquear todas"> </label> <span>Bloquear todas</span> <input type="radio" name="radio-group" id="cookie0" value="1" class="ct-ultimate-gdpr-cookie-modal-single-item" /></li> <li><label for="cookie5"> <img class="ct-svg" src="https://s4pcademy.com/wp-content/plugins/ct-ultimate-gdpr/assets/css/images/essential.svg" style="width: 60px;" alt="Essentials"> </label> <span>Essentials</span> <input type="checkbox" name="radio-group" id="cookie5" value="5" class="ct-ultimate-gdpr-cookie-modal-single-item" checked /></li> <li><label for="cookie6"> <img class="ct-svg" src="https://s4pcademy.com/wp-content/plugins/ct-ultimate-gdpr/assets/css/images/functionality.svg" alt="Funcionalidad"> </label> <span>Funcionalidad</span> <input type="checkbox" name="radio-group" id="cookie6" value="6" class="ct-ultimate-gdpr-cookie-modal-single-item" /></li> <li><label for="cookie7"> <img class="ct-svg" src="https://s4pcademy.com/wp-content/plugins/ct-ultimate-gdpr/assets/css/images/statistics.svg" alt="Análisis"> </label> <span>Análisis</span> <input type="checkbox" name="radio-group" id="cookie7" value="7" class="ct-ultimate-gdpr-cookie-modal-single-item" /></li> <li><label for="cookie8"> <img class="ct-svg" src="https://s4pcademy.com/wp-content/plugins/ct-ultimate-gdpr/assets/css/images/targeting.svg" alt="Publicidad"> </label> <span>Publicidad</span> <input type="checkbox" name="radio-group" id="cookie8" value="8" class="ct-ultimate-gdpr-cookie-modal-single-item" /></li> </ul> </form> <div class="ct-ultimate-gdpr-cookie-modal-single-wrap"> <div class="ct-ultimate-gdpr-cookie-modal-single-wrapinner"> <div class="ct-ultimate-gdpr-cookie-modal-single-wrapinner--title"> <div class="title-block"> <h4 style="color: #595959;">Este sitio web hará:</h4></div> <div class="title-block"> <h4 style="color: #595959;">Este sitio web no:</h4> </div> <div class="ct-clearfix"></div> </div>  <div class="ct-ultimate-gdpr-cookie-modal-single-wrapinner--info"> <div class="ct-ultimate-gdpr-cookie-modal-singleinfo--desc" id="desc-left"> <ul class="ct-ultimate-gdpr-cookie-modal-slider-able" style="color: #797979;"> <li class="essentials"> Esencial: recuerde su configuración de permiso de cookie</li> <li class="essentials"> Esencial: Permitir cookies de sesión</li> <li class="essentials"> Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas</li> <li class="essentials"> Esencial: haga un seguimiento de lo que ingresa en un carrito de compras</li> <li class="essentials"> Esencial: autentica que has iniciado sesión en tu cuenta de usuario</li> <li class="essentials"> Esencial: recuerda la versión de idioma que seleccionaste</li> <li class="functionality"> Functionality: Remember social media settings</li> <li class="functionality"> Functionality: Remember selected region and country</li> <li class="analytics"> Analytics: Keep track of your visited pages and interaction taken</li> <li class="analytics"> Analytics: Keep track about your location and region based on your IP number</li> <li class="analytics"> Analytics: Keep track of the time spent on each page</li> <li class="analytics"> Analytics: Increase the data quality of the statistics functions</li> <li class="advertising"> Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.</li> <li class="advertising"> Advertising: Gather personally identifiable information such as name and location</li> </ul> </div> <div class="ct-ultimate-gdpr-cookie-modal-single__info--desc" id="desc-right"> <ul class="ct-ultimate-gdpr-cookie-modal-slider-not-able" style="color: #797979;"> <li>Recuerde sus detalles de inicio de sesión</li> <li class="essentials"> Esencial: recuerde su configuración de permiso de cookie</li> <li class="essentials"> Esencial: Permitir cookies de sesión</li> <li class="essentials"> Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas</li> <li class="essentials"> Esencial: haga un seguimiento de lo que ingresa en un carrito de compras</li> <li class="essentials"> Esencial: autentica que has iniciado sesión en tu cuenta de usuario</li> <li class="essentials"> Esencial: recuerda la versión de idioma que seleccionaste</li> <li class="functionality"> Functionality: Remember social media settings</li> <li class="functionality"> Functionality: Remember selected region and country</li> <li class="analytics"> Analytics: Keep track of your visited pages and interaction taken</li> <li class="analytics"> Analytics: Keep track about your location and region based on your IP number</li> <li class="analytics"> Analytics: Keep track of the time spent on each page</li> <li class="analytics"> Analytics: Increase the data quality of the statistics functions</li> <li class="advertising"> Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.</li> <li class="advertising"> Advertising: Gather personally identifiable information such as name and location</li> </ul> </div> <div class="ct-clearfix"></div> </div> </div> </div> <div class="ct-ultimate-gdpr-cookie-modal-btn save"> <a href="#">Guardar y cerrar</a> </div> </div> </div> </div> <script type="rocketlazyloadscript" data-rocket-type="text/javascript"> (function () { var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; })(); </script> <link rel='stylesheet' id='elementor-frontend-css' href='https://s4pcademy.com/wp-content/plugins/elementor/assets/css/frontend-lite.min.css?ver=3.9.1' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-3072-css' href='https://s4pcademy.com/wp-content/uploads/elementor/css/post-3072.css?ver=1671180728' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-3153-css' href='https://s4pcademy.com/wp-content/uploads/elementor/css/post-3153.css?ver=1671180728' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-3274-css' href='https://s4pcademy.com/wp-content/uploads/elementor/css/post-3274.css?ver=1671180728' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='elementor-icons-css' href='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=1671180728' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-27-css' href='https://s4pcademy.com/wp-content/uploads/elementor/css/post-27.css?ver=1671180728' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='swiper-css' href='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/avante-elementor/assets/css/swiper.css?ver=1671180728' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='justifiedGallery-css' href='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/avante-elementor/assets/css/justifiedGallery.css?ver=1671180728' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='flickity-css' href='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/avante-elementor/assets/css/flickity.css?ver=1671180728' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='avante-elementor-css' href='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/avante-elementor/assets/css/avante-elementor.css?ver=1671180729' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='avante-elementor-responsive-css' href='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/avante-elementor/assets/css/avante-elementor-responsive.css?ver=1671180729' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-pro-css' href='https://s4pcademy.com/wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css?ver=3.7.7' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='font-awesome-5-all-css' href='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=1671180729' type='text/css' media='all' /> <link rel='stylesheet' id='font-awesome-4-shim-css' href='https://s4pcademy.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.9.1' type='text/css' media='all' /> <link rel='stylesheet' id='google-fonts-1-css' href='https://fonts.googleapis.com/css?family=Cabin%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&display=auto&ver=6.1.1' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-icons-shared-0-css' href='https://s4pcademy.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='elementor-icons-fa-brands-css' href='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/brands.min.css?ver=1671180729' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='elementor-icons-fa-solid-css' href='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css?ver=1671180729' type='text/css' media='all' /> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-includes/js/comment-reply.min.js?ver=6.1.1' id='comment-reply-js' defer></script> <script type='text/javascript' id='ct-ultimate-gdpr-cookie-popup-js-extra'> / <![CDATA[ / var ct_ultimate_gdpr_cookie = {"ajaxurl":"https:\/\/s4pcademy.com\/wp-admin\/admin-ajax.php","readurl":"https:\/\/s4pcademy.com\/como-integrar-graficos-vectoriales-en-un-programa-de-javascript\/","readurl_new_tab":"off","consent":"","reload":"","consent_expire_time":"1711520530","consent_time":"1679984530","consent_default_level":"2","consent_accept_level":"5","age_enabled":"5","display_cookie_always":null,"cookie_reset_consent":null}; / ]]> / </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/ct-ultimate-gdpr/assets/js/cookie-popup.js?ver=1670869062' id='ct-ultimate-gdpr-cookie-popup-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/ct-ultimate-gdpr/assets/js/jquery.base64.min.js?ver=3.8' id='ct-ultimate-gdpr-base64-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-includes/js/imagesloaded.min.js?ver=4.1.4' id='imagesloaded-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-includes/js/masonry.min.js?ver=4.2.2' id='masonry-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/avante-elementor/assets/js/jquery.lazy.js?ver=1670869062' id='lazy-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='lazy-js-after'>window.addEventListener('DOMContentLoaded', function() { jQuery(function( $ ) { jQuery("img.lazy").each(function() { var currentImg = jQuery(this); jQuery(this).Lazy({ onFinishedAll: function() { currentImg.parent("div.post-featured-image-hover").removeClass("lazy"); currentImg.parent(".tg_gallery_lightbox").parent("div.gallery_grid_item").removeClass("lazy"); currentImg.parent("div.gallery_grid_item").removeClass("lazy"); } }); }); }); });</script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/avante-elementor/assets/js/modulobox.js?ver=1670869062' id='modulobox-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/avante-elementor/assets/js/jquery.parallax-scroll.js?ver=1670869062' id='parallax-scroll-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/avante-elementor/assets/js/jquery.smoove.js?ver=1670869062' id='smoove-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/avante-elementor/assets/js/parallax.js?ver=1670869062' id='parallax-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/avante-elementor/assets/js/jquery.sticky-kit.min.js?ver=6.1.1' id='sticky-kit-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='sticky-kit-js-after'>window.addEventListener('DOMContentLoaded', function() { jQuery(function( $ ) { jQuery("#page-content-wrapper .sidebar-wrapper").stick_in_parent({ offset_top: 100 }); if(jQuery(window).width() < 768 || is_touch_device()) { jQuery("#page-content-wrapper .sidebar-wrapper").trigger("sticky_kit:detach"); } }); });</script> <script type='text/javascript' id='avante-elementor-js-extra'> / <![CDATA[ / var tgAjax = {"ajaxurl":"https:\/\/s4pcademy.com\/wp-admin\/admin-ajax.php","ajax_nonce":"96a5665b8c"}; / ]]> / </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/avante-elementor/assets/js/avante-elementor.js?ver=1670869062' id='avante-elementor-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=1670869062' id='swv-js' defer></script> <script type='text/javascript' id='contact-form-7-js-extra'> / <![CDATA[ / var wpcf7 = {"api":{"root":"https:\/\/s4pcademy.com\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":"1"}; / ]]> / </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/cache/min/1/wp-content/plugins/contact-form-7/includes/js/index.js?ver=1670869062' id='contact-form-7-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js?ver=2.7.0-wc.7.2.0' id='jquery-blockui-js' defer></script> <script type='text/javascript' id='wc-add-to-cart-js-extra'> / <![CDATA[ / var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%&elementor_page_id=8240","i18n_view_cart":"Ver carrito","cart_url":"https:\/\/s4pcademy.com","is_cart":"","cart_redirect_after_add":"no"}; / ]]> / </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=7.2.0' id='wc-add-to-cart-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js?ver=2.1.4-wc.7.2.0' id='js-cookie-js' defer></script> <script type='text/javascript' id='woocommerce-js-extra'> / <![CDATA[ / var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%&elementor_page_id=8240"}; / ]]> / </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=7.2.0' id='woocommerce-js' defer></script> <script type='text/javascript' id='wc-cart-fragments-js-extra'> / <![CDATA[ / var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%&elementor_page_id=8240","cart_hash_key":"wc_cart_hash_3e33afc5dbf33c9715fb4060ca2dc3b1","fragment_name":"wc_fragments_3e33afc5dbf33c9715fb4060ca2dc3b1","request_timeout":"5000"}; / ]]> / </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=7.2.0' id='wc-cart-fragments-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.2' id='jquery-ui-core-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-includes/js/jquery/ui/effect.min.js?ver=1.13.2' id='jquery-effects-core-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/avante-elementor/assets/js/tweenmax.min.js?ver=6.1.1' id='tweenmax-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/themes/avante/js/waypoints.min.js?ver=6.1.1' id='waypoints-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/themes/avante/js/jquery.stellar.min.js?ver=6.1.1' id='stellar-js' defer></script> <script type='text/javascript' id='avante-custom-plugins-js-extra'> / <![CDATA[ / var avantePluginParams = {"backTitle":"Back"}; / ]]> / </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/cache/min/1/wp-content/themes/avante/js/core/custom_plugins.js?ver=1670869062' id='avante-custom-plugins-js' defer></script> <script type='text/javascript' id='avante-custom-script-js-extra'> / <![CDATA[ / var avanteParams = {"menulayout":"leftalign","fixedmenu":"1","footerreveal":"","headercontent":"content","lightboxthumbnails":"thumbnail","lightboxtimer":"7000"}; / ]]> */ </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/cache/min/1/wp-content/themes/avante/js/core/custom.js?ver=1670869062' id='avante-custom-script-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/themes/avante/js/jquery.tooltipster.min.js?ver=6.1.1' id='tooltipster-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='tooltipster-js-after'>window.addEventListener('DOMContentLoaded', function() { jQuery(function( $ ) { jQuery(".demotip").tooltipster({ position: "left", multiple: true, theme: "tooltipster-shadow", delay: 0 }); }); });</script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/cache/min/1/wp-content/themes/avante/modules/kirki/assets/webfont.js?ver=1670869062' id='webfont-loader-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='webfont-loader-js-after'> WebFont.load({google:{families:['Roboto:400,500', 'Cabin:700,600']}}); </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/elementor/assets/lib/font-awesome/js/v4-shims.min.js?ver=3.9.1' id='font-awesome-4-shim-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.7.7' id='elementor-pro-webpack-runtime-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.9.1' id='elementor-webpack-runtime-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.9.1' id='elementor-frontend-modules-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.13.9' id='regenerator-runtime-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0' id='wp-polyfill-js'></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-includes/js/dist/hooks.min.js?ver=4169d3cf8e8d95a3d6d5' id='wp-hooks-js'></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-includes/js/dist/i18n.min.js?ver=9e794f35a71bb98672ae' id='wp-i18n-js'></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='wp-i18n-js-after'> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='elementor-pro-frontend-js-before'> var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/s4pcademy.com\/wp-admin\/admin-ajax.php","nonce":"e38bde9fc0","urls":{"assets":"https:\/\/s4pcademy.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/s4pcademy.com\/wp-json\/"},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"}},"woocommerce":{"menu_cart":{"cart_page_url":"https:\/\/s4pcademy.com","checkout_page_url":"https:\/\/s4pcademy.com","fragments_nonce":"f4b9cf6130"}},"facebook_sdk":{"lang":"es_ES","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/s4pcademy.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}}; </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.7.7' id='elementor-pro-frontend-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver=4.0.2' id='elementor-waypoints-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='elementor-frontend-js-before'> var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Compartir en Facebook","shareOnTwitter":"Compartir en Twitter","pinIt":"Pinear","download":"Descargar","downloadImage":"Descargar imagen","fullscreen":"Pantalla completa","zoom":"Zoom","share":"Compartir","playVideo":"Reproducir v\u00eddeo","previous":"Anterior","next":"Siguiente","close":"Cerrar"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"M\u00f3vil","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"M\u00f3vil grande","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tableta","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tableta grande","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Port\u00e1til","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Pantalla grande","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.9.1","is_static":false,"experimentalFeatures":{"e_dom_optimization":true,"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"a11y_improvements":true,"additional_custom_breakpoints":true,"e_import_export":true,"e_hidden_wordpress_widgets":true,"theme_builder_v2":true,"landing-pages":true,"elements-color-picker":true,"favorite-widgets":true,"admin-top-bar":true,"kit-elements-defaults":true,"page-transitions":true,"notes":true,"form-submissions":true,"e_scroll_snap":true},"urls":{"assets":"https:\/\/s4pcademy.com\/wp-content\/plugins\/elementor\/assets\/"},"settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description","woocommerce_notices_elements":[]},"post":{"id":8240,"title":"C%C3%B3mo%20integrar%20gr%C3%A1ficos%20vectoriales%20en%20un%20programa%20de%20JavaScript%20-%20S4PCADEMY","excerpt":"","featuredImage":"https:\/\/s4pcademy.com\/wp-content\/uploads\/2022\/12\/How-to-Integrate-Vector-Graphics-in-a-JavaScript-Program.pngkeepProtocol-1024x315.png"}}; </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.9.1' id='elementor-frontend-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://s4pcademy.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.7.7' id='pro-elements-handlers-js' defer></script> <script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body> </html>