Domina los Inputs: Números, Eventos y Tablas Entrada-Salida

hace 1 año

★★★★★Valoración: 4.81 (9449 votos)

En el vasto mundo del desarrollo web y las matemáticas, el concepto de "input" o entrada juega un papel fundamental. Desde los formularios interactivos que encontramos en sitios web hasta las operaciones matemáticas que aprendemos desde pequeños, entender cómo funcionan los inputs y cómo interactuamos con ellos es crucial. En este artículo, exploraremos en detalle los inputs numéricos en HTML, los eventos que se disparan al interactuar con ellos y las tablas de entrada-salida, una herramienta matemática simple pero poderosa.

What is the event for typing in input? — The input event fires when the value of an , element has been changed as a direct result of a user action (such as typing in a textbox or checking a checkbox). The event also applies to elements with contenteditable enabled, and to any element when designMode is turned on. Jan 8, 2024</figcaption></figure> <div class="post-index"><span>Índice de Contenido<span class="btn-show"><label class="checkbox"><input type="checkbox"/ ><span class="check-table" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="6 15 12 9 18 15" /></svg></span></label></span></span> <ul id="index-table" > <li> <a href="#inputs_numericos_en_html_control_y_validacion" title="Inputs Numéricos en HTML: Control y Validación">Inputs Numéricos en HTML: Control y Validación</a> <ul > <li> <a href="#validacion_automatica_asegurando_la_calidad_de_los_datos" title="Validación Automática: Asegurando la Calidad de los Datos">Validación Automática: Asegurando la Calidad de los Datos</a> </li> <li> <a href="#atributos_clave_personalizando_la_entrada_numerica" title="Atributos Clave: Personalizando la Entrada Numérica">Atributos Clave: Personalizando la Entrada Numérica</a> </li> <li> <a href="#ejemplo_practico_inputs_numericos_en_accion" title="Ejemplo Práctico: Inputs Numéricos en Acción">Ejemplo Práctico: Inputs Numéricos en Acción</a> </li> </li> </ul> </div><h2><span id="inputs_numericos_en_html_control_y_validacion">Inputs Numéricos en HTML: Control y Validación</span></h2> <p>Cuando hablamos de formularios web, el elemento <code><input type="number"></code> se convierte en nuestro aliado para recoger información numérica de los usuarios. Este tipo de input no solo presenta una interfaz amigable para ingresar números, sino que también incorpora mecanismos de <b>validación</b> integrados que nos ahorran mucho trabajo. Veamos en detalle sus características y cómo podemos aprovecharlas al máximo.</p><h3><span id="validacion_automatica_asegurando_la_calidad_de_los_datos">Validación Automática: Asegurando la Calidad de los Datos</span></h3><p>Una de las ventajas principales del <code><input type="number"></code> es su capacidad de <b>validar automáticamente</b> que la entrada del usuario sea efectivamente un número. Si el usuario intenta ingresar texto, símbolos o cualquier carácter no numérico, el input se marcará como inválido. Esta validación se activa de inmediato, proporcionando una retroalimentación visual instantánea al usuario y previniendo errores antes de enviar el formulario.</p><figure id="attachment_3459" aria-describedby="caption-attachment-3459" style="width: 700px" class="wp-caption aligncenter"><img decoding="async" loading="lazy" class="size-full wp-image-3459" src="https://kaboomeventos.com.ar/wp-content/uploads/angular2-events-4.avif" alt="How to use events in Angular?" width="700" height="972" srcset="https://kaboomeventos.com.ar/wp-content/uploads/angular2-events-4.avif 700w, https://kaboomeventos.com.ar/wp-content/uploads/angular2-events-4-216x300.jpg 216w" sizes="auto, (max-width: 700px) 100vw, 700px"/><figcaption id="caption-attachment-3459" class="wp-caption-text">Event binding in Angular is achieved by putting the event name in parenthesis () in the HTML template. This links the event (like a button click, or mouse move) to a function in your component's TypeScript file.</figcaption></figure><p>Además de la validación numérica básica, este tipo de input considera el estado vacío como válido por defecto, a menos que se especifique el atributo <code>required</code>. Al agregar <code>required</code> al input, obligamos al usuario a ingresar un valor numérico, evitando envíos de formularios incompletos. Esto es especialmente útil para campos obligatorios en un formulario.</p><h3><span id="atributos_clave_personalizando_la_entrada_numerica">Atributos Clave: Personalizando la Entrada Numérica</span></h3><p>El <code><input type="number"></code> no se limita a la validación básica; ofrece una serie de <b>atributos</b> que permiten personalizar y refinar la experiencia del usuario y la calidad de los datos recogidos. Algunos de los atributos más importantes son:</p><div class="ads-asap ads-asap-aligncenter"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2076771654377276" data-ad-slot="4149035554" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});</script></div><ul><li><strong><code>step</code></strong>: Este atributo define los incrementos o decrementos permitidos al usar las flechas del input numérico o al interactuar con él mediante teclado. Por ejemplo, <code>step="10"</code> restringirá los valores válidos a múltiplos de 10. Esto es ideal para situaciones donde solo se permiten ciertos intervalos numéricos.</li><li><strong><code>min</code></strong>: Establece el valor mínimo aceptable para el input. Cualquier valor inferior a <code>min</code> se considerará inválido.</li><li><strong><code>max</code></strong>: Define el valor máximo permitido. Valores superiores a <code>max</code> también se marcarán como inválidos.</li></ul><p>La combinación de estos atributos nos permite crear inputs numéricos altamente <b>personalizados</b> y adaptados a las necesidades específicas de nuestro formulario. Podemos controlar rangos de valores permitidos, asegurar que los usuarios ingresen datos dentro de un espectro lógico y guiar la entrada de información de manera precisa.</p><h3><span id="ejemplo_practico_inputs_numericos_en_accion">Ejemplo Práctico: Inputs Numéricos en Acción</span></h3><p>Veamos un ejemplo en HTML que ilustra el uso de estos atributos y cómo se combinan para crear un input numérico robusto:</p><pre><code><form> <div> <label for="globos">Número de globos a ordenar (múltiplos de 10):</label> <input id="globos" type="number" name="globos" step="10" min="0" max="100" required /> <span class="validity"></span> </div> <div> <input type="submit" /> </div> </form> </code></pre><p>En este ejemplo, hemos creado un input numérico para solicitar la cantidad de globos a ordenar. Hemos utilizado los atributos:</p><ul><li><code>step="10"</code>: Para asegurar que solo se permitan múltiplos de 10.</li><li><code>min="0"</code>: Para evitar cantidades negativas.</li><li><code>max="100"</code>: Para limitar la cantidad máxima a 100.</li><li><code>required</code>: Para hacer que este campo sea obligatorio.</li></ul><p>Además, se utiliza CSS para mostrar iconos de validación visual (un aspa "&#œ–;" para inválido y un tic "&#œ“;" para válido) junto al input, proporcionando una retroalimentación clara al usuario sobre la validez de su entrada.</p><pre><code>div { margin-bottom: 10px; } input:invalid + span::after { content: "&#œ–;"; padding-left: 5px; } input:valid + span::after { content: "&#œ“;"; padding-left: 5px; } </code></pre><p>Este ejemplo demuestra cómo podemos combinar HTML y CSS para crear <b>formularios</b> más accesibles y fáciles de usar, guiando al usuario a ingresar datos correctos y válidos.</p><h2>El Evento 'input': Interacción Dinámica en Tiempo Real</h2><p>Más allá de la validación, los inputs son elementos interactivos que generan <b>eventos</b> cuando el usuario interactúa con ellos. Uno de los eventos más importantes y versátiles es el evento <code>input</code>. Este evento se dispara <b>cada vez que el valor de un elemento <code><input></code>, <code><select></code> o <code><textarea></code> cambia</b> como resultado directo de una acción del usuario. Esto incluye teclear en un campo de texto, marcar una casilla de verificación o seleccionar una opción de un menú desplegable.</p><p>El evento <code>input</code> es particularmente útil para crear <b>interfaces dinámicas</b> y reactivas. Podemos utilizar JavaScript para escuchar este evento y ejecutar acciones en tiempo real a medida que el usuario interactúa con el formulario. Algunas aplicaciones comunes del evento <code>input</code> incluyen:</p><ul> <li><strong>Validación en tiempo real</strong>: Mostrar mensajes de error o advertencia inmediatamente después de que el usuario ingresa un valor inválido, sin necesidad de esperar a la validación del formulario al enviarlo.</li> <li><strong>Filtrado y búsqueda instantánea</strong>: Actualizar listas de resultados o sugerencias a medida que el usuario escribe en un campo de búsqueda.</li> <li><strong>Cálculos dinámicos</strong>: Realizar cálculos y mostrar resultados actualizados automáticamente al cambiar los valores de los inputs.</li> <li><strong>Previsualización en tiempo real</strong>: Mostrar una previsualización de cómo se verá un texto o una imagen a medida que el usuario modifica los inputs relacionados.</li></ul><p>El evento <code>input</code> se ha convertido en un estándar web bien establecido y <b>funciona en la mayoría de los navegadores modernos</b> y dispositivos. Su amplia compatibilidad y su capacidad para capturar cambios en tiempo real lo convierten en una herramienta fundamental para el desarrollo web interactivo y la creación de experiencias de usuario más fluidas y atractivas.</p><h2>Tablas de Entrada-Salida: La Lógica Detrás de los Números</h2><p>Cambiando de contexto, pero manteniendo la idea de "input" y "output", nos adentramos en el mundo de las <b>tablas de entrada-salida</b>. Estas tablas, también conocidas como tablas de funciones, son herramientas matemáticas que ilustran la relación entre conjuntos de números que siguen una misma <b>regla</b> o patrón.</p><p>Una <b>tabla de entrada-salida</b> se compone de dos columnas principales: la columna de "Entrada" (Input) y la columna de "Salida" (Output). La columna de entrada contiene los números iniciales, y la columna de salida muestra los resultados de aplicar una regla matemática específica a cada número de entrada.</p><p>La <b>regla</b> es la operación matemática que se aplica consistentemente a todos los números de entrada para obtener los números de salida correspondientes. Esta regla puede ser simple, como "sumar 3", o más compleja, involucrando varias operaciones. Lo importante es que la regla se mantenga constante para todas las filas de la tabla.</p><h3>Ejemplo de Tabla de Entrada-Salida con Suma</h3><p>Veamos un ejemplo sencillo de una tabla de entrada-salida donde la regla es "sumar 5":</p><table> <thead> <tr> <th>Entrada</th> <th>Salida</th> </tr> </thead> <tbody> <tr> <td>2</td> <td>7</td> </tr> <tr> <td>10</td> <td>15</td> </tr> <tr> <td>25</td> <td>30</td> </tr> </tbody></table><p>En esta tabla, para cada número de la columna "Entrada", se le suma 5 para obtener el número correspondiente en la columna "Salida". Por ejemplo:</p><ul> <li>Entrada: 2, Regla: + 5, Salida: 7</li> <li>Entrada: 10, Regla: + 5, Salida: 15</li> <li>Entrada: 25, Regla: + 5, Salida: 30</li></ul><h3>Aplicaciones de las Tablas de Entrada-Salida</h3><p>Las tablas de entrada-salida son una herramienta fundamental en matemáticas, especialmente en la introducción al concepto de funciones. Permiten a los estudiantes visualizar y comprender cómo una <b>operación matemática</b> transforma un conjunto de números en otro conjunto siguiendo una regla consistente. Son útiles para:</p><ul> <li><strong>Identificar patrones numéricos</strong>: Al observar las relaciones entre las columnas de entrada y salida, se pueden descubrir patrones y reglas matemáticas.</li> <li><strong>Resolver problemas</strong>: Si se conoce la regla, se pueden completar valores faltantes en la tabla. Si no se conoce la regla, se puede deducir observando los pares de entrada y salida.</li> <li><strong>Introducción a funciones</strong>: Las tablas de entrada-salida son una representación concreta y visual del concepto abstracto de función matemática, donde una entrada se transforma en una salida mediante una regla.</li></ul><h2>Preguntas Frecuentes sobre Inputs y Tablas de Entrada-Salida</h2><dl> <dt><strong>¿Cuál es la diferencia entre <code><input type="number"></code> y otros tipos de input?</strong></dt> <dd>El <code><input type="number"></code> está específicamente diseñado para recoger valores numéricos y ofrece validación automática y atributos para refinar la entrada numérica. Otros tipos de input, como <code>text</code> o <code>email</code>, están diseñados para diferentes tipos de datos y tienen validaciones específicas.</dd> <dt><strong>¿Cuándo debo usar el evento <code>input</code> en JavaScript?</strong></dt> <dd>Utiliza el evento <code>input</code> cuando necesites reaccionar en tiempo real a los cambios en los inputs del usuario, como para validación instantánea, búsqueda dinámica o cálculos automáticos.</dd> <dt><strong>¿Qué tipo de reglas se pueden usar en las tablas de entrada-salida?</strong></dt> <dd>Las reglas en las tablas de entrada-salida pueden ser operaciones matemáticas simples (suma, resta, multiplicación, división) o más complejas, incluso combinaciones de varias operaciones. La clave es que la regla sea consistente para todos los pares de entrada y salida.</dd></dl><h2>Conclusión</h2><p>Tanto los <b>inputs numéricos</b> en HTML como las <b>tablas de entrada-salida</b> son herramientas esenciales en sus respectivos campos. Los inputs numéricos nos permiten crear formularios web robustos y fáciles de usar, mientras que las tablas de entrada-salida nos ayudan a comprender y visualizar las relaciones matemáticas entre números. Dominar ambos conceptos nos proporciona una base sólida para el desarrollo web interactivo y la comprensión de principios matemáticos fundamentales. ¡Explora y experimenta con ellos para descubrir todo su potencial!</p></p></h2></p> </div> <div class="social-buttons flexbox"> <a title="Facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://kaboomeventos.com.ar/input-number-events/" class="asap-icon-single icon-facebook" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"/></svg></a> <a title="Facebook Messenger" href="fb-messenger://share/?link=https://kaboomeventos.com.ar/input-number-events/" class="asap-icon-single icon-facebook-m" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"/><path d="M8 13l3 -2l2 2l3 -2"/></svg></a> <a title="X" href="https://twitter.com/intent/tweet?text=Domina los Inputs: Números, Eventos y Tablas Entrada-Salida&url=https://kaboomeventos.com.ar/input-number-events/" class="asap-icon-single icon-twitter" target="_blank" rel="nofollow noopener" viewBox="0 0 24 24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4l11.733 16h4.267l-11.733 -16z"/><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"/></svg></a> <a title="Pinterest" href="https://pinterest.com/pin/create/button/?url=https://kaboomeventos.com.ar/input-number-events/&media=https://kaboomeventos.com.ar/wp-content/uploads/input-number-events-1-150x150.jpg" class="asap-icon-single icon-pinterest" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="8" y1="20" x2="12" y2="11"/><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7"/><circle cx="12" cy="12" r="9"/></svg></a> <a title="WhatsApp" href="https://wa.me/?text=Domina los Inputs: Números, Eventos y Tablas Entrada-Salida%20-%20https://kaboomeventos.com.ar/input-number-events/" class="asap-icon-single icon-whatsapp" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9"/> <path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1"/></svg></a> <a title="Tumblr" href="https://tumblr.com/widgets/share/tool?canonicalUrl=https://kaboomeventos.com.ar/input-number-events/" class="asap-icon-single icon-tumblr" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 21h4v-4h-4v-6h4v-4h-4v-4h-4v1a3 3 0 0 1 -3 3h-1v4h4v6a4 4 0 0 0 4 4"/></svg></a> <a title="LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&url=https://kaboomeventos.com.ar/input-number-events/&title=Domina los Inputs: Números, Eventos y Tablas Entrada-Salida" class="asap-icon-single icon-linkedin" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="16" height="16" rx="2"/><line x1="8" y1="11" x2="8" y2="16"/><line x1="8" y1="8" x2="8" y2="8.01"/><line x1="12" y1="16" x2="12" y2="11"/><path d="M16 16v-3a2 2 0 0 0 -4 0"/></svg></a> <a title="Telegram" href="https://t.me/share/url?url=https://kaboomeventos.com.ar/input-number-events/&text=Domina los Inputs: Números, Eventos y Tablas Entrada-Salida" class="asap-icon-single icon-telegram" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4"/></svg></a> <a title="Email" href="mailto:?subject=Domina los Inputs: Números, Eventos y Tablas Entrada-Salida&body=https://kaboomeventos.com.ar/input-number-events/" class="asap-icon-single icon-email" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3 7 12 13 21 7"/></svg></a> <a title="Reddit" href="http://reddit.com/submit?url=https://kaboomeventos.com.ar/input-number-events/&title=Domina los Inputs: Números, Eventos y Tablas Entrada-Salida" class="asap-icon-single icon-reddit" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 8c2.648 0 5.028 .826 6.675 2.14a2.5 2.5 0 0 1 2.326 4.36c0 3.59 -4.03 6.5 -9 6.5c-4.875 0 -8.845 -2.8 -9 -6.294l-1 -.206a2.5 2.5 0 0 1 2.326 -4.36c1.646 -1.313 4.026 -2.14 6.674 -2.14z"/><path d="M12 8l1 -5l6 1"/><circle cx="19" cy="4" r="1"/><circle cx="9" cy="13" r=".5" fill="currentColor"/><circle cx="15" cy="13" r=".5" fill="currentColor"/><path d="M10 17c.667 .333 1.333 .5 2 .5s1.333 -.167 2 -.5"/></svg></a> </div><ul class="single-nav"> <li class="nav-prev"> <a href="https://kaboomeventos.com.ar/para-para-anime-eventos/" >AnimeCon Argentina 2024: La Guía Definitiva del Evento</a> </li> <li class="nav-next"> <a href="https://kaboomeventos.com.ar/event-flow-template/" > Flujo de Eventos Impecable: Clave del Exito </a> </li> </ul> <div class="ads-asap ads-asap-aligncenter"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2076771654377276" data-ad-slot="4149035554" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div class="related-posts"> <article class="article-loop asap-columns-3"> <a href="https://kaboomeventos.com.ar/de-que-se-trata-el-evento-la-hora-del-planetga/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://kaboomeventos.com.ar/wp-content/uploads/de-que-se-trata-el-evento-la-hora-del-planetga-1-400x267.jpg');" class="article-image"></div> </div> <p class="entry-title">Hora del Planeta: Un Llamado Global por el Medio Ambiente</p> </a> </article><article class="article-loop asap-columns-3"> <a href="https://kaboomeventos.com.ar/mh-world-event-quest/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://kaboomeventos.com.ar/wp-content/uploads/event-calendar-monster-hunter-world-4-400x267.jpg');" class="article-image"></div> </div> <p class="entry-title">Desbloquea las Misiones de Evento en Monster Hunter Wilds</p> </a> </article><article class="article-loop asap-columns-3"> <a href="https://kaboomeventos.com.ar/how-to-start-a-charity-fundraiser-event/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://kaboomeventos.com.ar/wp-content/uploads/how-to-hold-a-fundraising-event-400x267.jpg');" class="article-image"></div> </div> <p class="entry-title">Organiza un Evento Benéfico Exitoso: Guía Paso a Paso</p> </a> </article><article class="article-loop asap-columns-3"> <a href="https://kaboomeventos.com.ar/cafe-para-eventos/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://kaboomeventos.com.ar/wp-content/uploads/cafe-para-eventos-2-400x267.jpg');" class="article-image"></div> </div> <p class="entry-title">¿Cuánto café para 50 personas? Guía fácil y precisa</p> </a> </article><article class="article-loop asap-columns-3"> <a href="https://kaboomeventos.com.ar/evento-met-gala/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://kaboomeventos.com.ar/wp-content/uploads/evento-met-gala-3-400x267.jpg');" class="article-image"></div> </div> <p class="entry-title">MET Gala: La Noche Más Importante de la Moda y el Arte</p> </a> </article><article class="article-loop asap-columns-3"> <a href="https://kaboomeventos.com.ar/describing-past-events/" rel="bookmark"> <div class="article-content"> <div style="background-image: url('https://kaboomeventos.com.ar/wp-content/uploads/redes-400x267.webp');" class="article-image"></div> </div> <p class="entry-title">Descripción Impactante de Experiencias Pasadas</p> </a> </article> </div> </article> </main> <div class="footer-breadcrumb"> <div class="breadcrumb-trail breadcrumbs"><ul class="breadcrumb"><li ><a href="https://kaboomeventos.com.ar/" rel="home" itemprop="item"><span itemprop="name">Inicio</span></a></li><li ><a href="https://kaboomeventos.com.ar/category/eventos/" itemprop="item"><span itemprop="name">Eventos</span></a></li><li ><span itemprop="name">Domina los Inputs: Números, Eventos y Tablas Entrada-Salida</span></li></ul></div> </div> <span class="go-top"><span>Subir</span><i class="arrow arrow-up"></i></span> <script id="asap-scripts-js" defer src="https://kaboomeventos.com.ar/wp-content/themes/asap/assets/js/asap.vanilla.min.js?ver=01170124"></script><script id="asap-menu-js" defer src="https://kaboomeventos.com.ar/wp-content/themes/asap/assets/js/menu.min.js?ver=02270623"></script><script type="speculationrules">{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/asap/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}</script><script type="text/javascript" src="/k.js"></script> </body></html> <!-- El peso se redujo un 3.23% -->