PortalStudio
OIM Ecosystem

Español

English

Español

English

Appearance

Casos de Uso del Ecosistema y Banderas de Control ​

El ecosistema OIM ofrece medios interactivos ligeros, accesibles y fácilmente adaptables a diversas necesidades de negocio. En lugar de requerir motores pesados de prueba interactiva dentro de las páginas de documentación, esta guía proporciona ejemplos de código completos y listos para producción, acompañados de diagramas arquitectónicos para cada caso de uso real.

1. Casos de Uso en Producción ​

A. Comercio Electrónico Interactivo (Shoppable Media) ​

En el e-commerce convencional, las imágenes son planas y no admiten interacción selectiva. OIM convierte los banners en micro-tiendas interactivas donde cada producto etiquetado puede ser pulsado de forma independiente para mostrar detalles o iniciar la compra.

text
┌────────────────────────────────────────────────────────┐
│ Capa +1: Slots Interactivos Dinámicos                  │
│  [ Etiqueta Sudadera: 89,00 € ] ──> Clic ──> oim:action│
│  [ Etiqueta Zapatillas: 140 € ] ──> Clic ──> oim:action│
├────────────────────────────────────────────────────────┤
│ Capa 0: Separador (simbólica, no almacena nada)        │
├────────────────────────────────────────────────────────┤
│ Capa −1: Imagen horneada de alta resolución            │
│  (Fotografía sin alterar: modelo con los productos)    │
└────────────────────────────────────────────────────────┘

Código de Implementación Completo: ​

html
<!-- Banner de Compra HTML -->
<oim-player
  id="hero-banner"
  src="/media/store/autumn-lookbook.oim.png"
  lang="es"
  fit="contain">
</oim-player>

<script>
  const player = document.getElementById('hero-banner');

  // Interceptar clics interactivos sobre productos
  player.addEventListener('oim:action', (event) => {
    const { name, slot, action } = event.detail;

    if (name === 'add_to_cart') {
      event.preventDefault(); // Detener navegación por defecto
      cartService.addItem({
        sku: slot.customData?.sku || slot.id,
        price: slot.customData?.price,
        title: slot.content?.es || 'Artículo de Tienda'
      });
      showCartToast(`¡${slot.content?.es} añadido al carrito!`);
    }
  });
</script>

B. Campañas de Marketing Globales Multilingües ​

Los equipos de marketing tradicionalmente diseñan, traducen y suben decenas de variantes estáticas en JPG o WebP para cada país. OIM simplifica esto en un único archivo con diccionarios de traducción integrados.

text
                  ┌── [lang="en"] ──> "Summer Flash Sale: 50% Off"
[ único .oim ]  ──┼── [lang="es"] ──> "Venta Flash de Verano: 50% Dto"
                  └── [lang="fr"] ──> "Vente Flash d'Été: -50%"

Código de Implementación Completo: ​

html
<!-- Banner Localizado con Selector de Idioma -->
<div class="banner-wrapper">
  <oim-player
    id="global-campaign"
    src="/media/campaigns/promo-2026.oim.png"
    lang="es">
  </oim-player>

  <!-- Controles Externos de Idioma -->
  <div class="lang-controls">
    <button onclick="switchLang('en')">English</button>
    <button onclick="switchLang('es')">Español</button>
    <button onclick="switchLang('fr')">Français</button>
  </div>
</div>

<script>
  function switchLang(locale) {
    const player = document.getElementById('global-campaign');
    // Cambio instantáneo de idioma sin recargar la imagen
    player.setLang(locale);
  }
</script>

C. Tematización Adaptativa con Dynamic Colors ​

Permite que las imágenes promocionales armonicen de forma natural con los temas claro y oscuro de la aplicación o sitio web, sin tener que rasterizar nuevamente los gráficos.

text
Variables CSS del Sitio          Slots con Dynamic Colors en .oim
--oim-color-primary: #f59e0b ──> [ Titular con Color de Marca ]
--oim-color-surface: #121316 ──> [ Fondo de la Tarjeta/Slot   ]
--oim-color-text:    #f3f4f6 ──> [ Texto de Llamada a Acción  ]

Código de Implementación Completo: ​

html
<style>
  /* Tokens de tema de la aplicación anfitriona */
  :root[data-theme="dark"] {
    --oim-color-primary: #f59e0b;
    --oim-color-surface: #18191d;
    --oim-color-text: #f3f4f6;
  }
  :root[data-theme="light"] {
    --oim-color-primary: #d97706;
    --oim-color-surface: #ffffff;
    --oim-color-text: #111827;
  }
</style>

<!-- Archivo Adaptativo al Tema -->
<oim-player
  src="/media/graphics/dashboard-hero.oim.png"
  allow-dynamic-colors="true">
</oim-player>

D. Historias de Vídeo Interactivas y Ramificación Narrativa (.ovm) ​

Para tutoriales interactivos, publicidad no lineal y narrativas donde el usuario toma decisiones, .ovm combina vídeo estándar MP4/WebM con puntos de elección sincronizados fotograma a fotograma.

text
00:00 ─── Intro de Vídeo ─── 00:15 ─── [ Punto de Elección: ¿Izquierda o Derecha? ]
                                         ├── Opción A ──> Salta a 00:16 (Ruta A)
                                         └── Opción B ──> Salta a 00:45 (Ruta B)

Código de Implementación Completo: ​

html
<ovm-player
  id="interactive-story"
  src="/media/video/interactive-demo.ovm"
  autoplay
  controls>
</ovm-player>

<script>
  const ovm = document.getElementById('interactive-story');

  ovm.addEventListener('ovm:branch', (e) => {
    console.log('El usuario eligió la ruta:', e.detail.branchId);
  });
</script>

2. Banderas de Control y Optimización de Rendimiento ​

<oim-player> incluye atributos declarativos para activar o desactivar subsistemas opcionales según el dispositivo, los requerimientos de accesibilidad o el diseño de la interfaz.

Desactivación de Micro-Animaciones Lottie (allow-lottie="false") ​

Cuando se muestran cientos de archivos en una cuadrícula infinita o se orienta a teléfonos móviles con batería reducida, es posible desactivar el motor interno de Lottie:

html
<!-- Omite completamente la carga y ejecución del motor Lottie -->
<oim-player
  src="/media/cards/product-grid-item.oim.png"
  allow-lottie="false">
</oim-player>
  • Impacto en Memoria: Ahorra aproximadamente 60 KB de memoria por cada instancia del reproductor.
  • Impacto en CPU: Cero sobrecarga de bucles de animación en reposo.

Reducción de Movimiento por Accesibilidad (disable-animations="true") ​

Para cumplir con estándares WCAG 2.2 y respetar la preferencia de usuarios con reducción de movimiento en su sistema operativo:

html
<!-- Detiene ondas de texto, oscilaciones y rebotes elásticos -->
<oim-player
  src="/media/banners/announcement.oim.png"
  disable-animations="true">
</oim-player>

Desactivación de Acciones en Tarjetas de Enlace (disable-actions="true") ​

Al incrustar un <oim-player> dentro de una tarjeta con etiqueta de enlace (<a>) que ya gestiona la navegación:

html
<a href="/productos/sudadera" class="product-card">
  <!-- Desactiva la captura interna de clics para evitar conflictos con el enlace -->
  <oim-player
    src="/media/products/hoodie.oim.png"
    disable-actions="true">
  </oim-player>
  <h3>Sudadera Urbana Clásica</h3>
</a>

Activación de Zoom de Inspección (allow-zoom="true") ​

Para infografías técnicas detalladas, esquemas o galerías de arte:

html
<!-- Habilita zoom mediante pellizco táctil o rueda de ratón en escritorio -->
<oim-player
  src="/media/diagrams/system-architecture.oim.png"
  allow-zoom="true"
  min-zoom="1.0"
  max-zoom="4.0">
</oim-player>

3. Resumen de Atributos de Configuración ​

AtributoValores AdmitidosPor DefectoImpacto Arquitectónico
allow-lottie"true" | "false""true"En "false", omite el motor Lottie y ahorra memoria/CPU
disable-animations"true" | "false""false"En "true", renderiza todas las capas en reposo estático (WCAG)
disable-actions"true" | "false""false"En "true", se ignoran las zonas interactivas de clic y hover
allow-zoom"true" | "false""false"En "true", habilita controles de zoom y paneo táctiles
allow-dynamic-colors"true" | "false""true"En "false", ignora variables CSS y conserva los hex originales
auto-rotate-langnumber | "false""false"Con milisegundos (ej. 3000), rota los idiomas automáticamente
mode"full" | "image""full"En modo "image", opera como imagen rasterizada pura