ES3036268T3 - Display rendering method and system - Google Patents

Display rendering method and system

Info

Publication number
ES3036268T3
ES3036268T3 ES18842835T ES18842835T ES3036268T3 ES 3036268 T3 ES3036268 T3 ES 3036268T3 ES 18842835 T ES18842835 T ES 18842835T ES 18842835 T ES18842835 T ES 18842835T ES 3036268 T3 ES3036268 T3 ES 3036268T3
Authority
ES
Spain
Prior art keywords
content
image
experience
substitution
percentage
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
ES18842835T
Other languages
English (en)
Inventor
Edouard Mercier
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ogury France
Original Assignee
Ogury France
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ogury France filed Critical Ogury France
Application granted granted Critical
Publication of ES3036268T3 publication Critical patent/ES3036268T3/es
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/117—Tagging; Marking up; Designating a block; Setting of attributes
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

La invención proporciona un método para generar una representación dinámica de la pantalla en el área de visualización de un dispositivo inteligente. Este método comprende los siguientes pasos: proporcionar un contenido principal desde una fuente para su visualización en el área de visualización; mostrar dicho contenido principal; proporcionar datos de entrada para provocar un movimiento del contenido principal mostrado en el área de visualización; proporcionar al menos un contenido alternativo distinto del contenido principal, en respuesta a una variable de entrada de sustitución en combinación con parámetros de sustitución integrados en dicho contenido principal y asociados a dicho contenido alternativo; sustituir dinámicamente al menos un elemento del contenido principal por un elemento modificado que contenga al menos parte de dicho contenido alternativo; y mostrar dicho contenido principal con el elemento modificado. La invención también proporciona sistemas, dispositivos inteligentes y contenido digital asociados. Su aplicación se centra en nuevos tipos de animaciones relacionadas con imágenes al desplazarse por el contenido. (Traducción automática con Google Translate, sin valor legal)

Description

DESCRIPCIÓN
Método y sistema de representación de visualización
Campo de la invención
Esta invención se refiere al campo de la representación visual digital ("experiencias de usuario") basada en imágenes y vídeo y, más particularmente, a métodos implementados por ordenador que ofrecen experiencias de usuario digitales con imágenes animadas basadas en información de entrada que comprende el desplazamiento del usuario final por una página web o una aplicación móvil nativa, y/o la orientación del dispositivo en el caso de un teléfono inteligente, tableta o cualquier dispositivo equipado con un giroscopio, y/o detección de la posición del usuario.
Antecedentes de la invención
Se conocen diversas representaciones de visualización dinámicas para contenidos que contienen imágenes en pantallas de ordenador.
Determinadas técnicas implican un tratamiento determinado de una imagen de un contenido mientras se encuentra en el área de visualización (normalmente una ventana o marco dedicado de la pantalla), en adelante "ventanas gráficas". Por ejemplo, se sabe que genera un efecto de desplazamiento distinto en una imagen visualizada, diferente del desplazamiento de todo el contenido. El documento US2014040423A1 describe sistemas, métodos y aparatos que incluyen un método que identifica cuándo un elemento de contenido que se presentó a un usuario en asociación con un espacio en un recurso no es visible para el usuario, en el que el espacio que presenta el elemento de contenido no es visible total o parcialmente como resultado de la actividad del usuario. El método incluye además recibir una solicitud para proporcionar un elemento de contenido alternativo que se presentará al usuario cuando la actividad del usuario permita la representación del espacio y entregar el elemento de contenido alternativo a un dispositivo asociado con el usuario en respuesta a la solicitud.
Compendio de la invención
La presente invención tiene como objetivo ampliar las posibilidades de visualización dinámica en dicho marco y también permitir que los contenidos promocionales sean accesibles de una manera atractiva pero miniinvasiva. Con este fin, se proporciona, según un primer aspecto, un método para generar una representación de visualización dinámica en un área de visualización de un elemento de visualización de un dispositivo inteligente según la reivindicación 1.
Las características preferidas pero opcionales del método incluyen las siguientes características, tomadas individualmente o en cualquier característica técnicamente compatible:
* dicho contenido alternativo comprende al menos uno entre un elemento de contenido proporcionado por una segunda fuente y un elemento de contenido incorporado en dicho contenido principal.
* dicho contenido alternativo comprende al menos una imagen fija o un conjunto de imágenes animadas proporcionadas por un servidor que es capaz de cambiar el tamaño y/o formatear dicha o dichas imágenes. * dicho elemento del contenido principal comprende una imagen principal, y dicha sustitución dinámica comprende una transición dinámica desde dicha imagen principal mediante el uso de al menos parte de dicho contenido alternativo y basándose en las variaciones de la variable de sustitución.
* dicha transición dinámica se basa en un contenido alternativo que cambia dinámicamente.
* dichos parámetros de sustitución comprenden un tipo de transición.
* dichas partículas pertenecen a un grupo que comprende imágenes fijas, imágenes animadas, formas y texto. * dichos parámetros de sustitución comprenden valores de orden para transformar dinámicamente dichas partículas en un orden dado.
* dicha variable de sustitución se deriva de la posición actual de una parte determinada del contenido principal en relación con el área de visualización cuando el contenido se mueve dentro del área de visualización en respuesta a los datos de entrada.
* dicho elemento del contenido principal es una imagen o un puntero a una imagen, incorporado en el contenido principal.
* dicha etapa de sustitución dinámica comprende proporcionar sustituciones de elementos predeterminadas para valores dados de la variable de sustitución, y comprende además una etapa de interpolación entre dichas sustituciones de elementos predeterminadas para un valor intermedio de la variable de sustitución.
* dichos parámetros de sustitución comprenden al menos un tipo de curva de interpolación.
* dichos parámetros de sustitución comprenden al menos un rango de representación, y donde el que el método comprende una etapa de comparación de la variable de sustitución con los límites del rango.
* dicha variable de sustitución se deriva de datos seleccionados en un grupo que comprende datos de entrada de usuario y datos de tiempo.
* el método comprende una etapa de anular selectivamente una variable de sustitución relacionada con el tiempo con una variable de sustitución relacionada con la entrada del usuario.
* dichos datos de entrada de usuario se seleccionan en un grupo que comprende datos para el desplazamiento del contenido, datos de posición o movimiento del usuario y datos de posición o movimiento del dispositivo inteligente causados por un usuario.
* dichos datos de entrada de usuario comprenden datos de desplazamiento de contenido, dicho contenido alternativo comprende un contenido de vídeo y dicha sustitución dinámica comprende la exploración de dicho contenido de vídeo en respuesta a la variación de la variable de sustitución.
* dicho contenido principal comprende un contenido marcado, tal como un contenido HTML.
* dichos parámetros de sustitución están incorporados en dicho contenido marcado en asociación con al menos una etiqueta de imagen (<IMG>) del elemento en dicho contenido principal.
* la etapa de sustitución dinámica comprende una etapa inicial de sustitución de dicha etiqueta de imagen por una etiqueta de contenido de imagen (<CANVAS>) dentro de la cual se realiza la sustitución dinámica. * dicha etapa de sustitución dinámica se realiza mediante un paquete de programa de representación dedicado descargado de una fuente asociada con el contenido principal.
Según un segundo aspecto, se proporciona un sistema para la representación dinámica de pantallas según la reivindicación 10.
Las características preferidas pero opcionales del sistema incluyen las siguientes características, tomadas individualmente o en cualquier característica técnicamente compatible:
* dicho contenido alternativo comprende al menos uno entre un elemento de contenido proporcionado por una segunda fuente y un elemento de contenido incorporado en dicho contenido principal.
* dicho contenido alternativo comprende al menos una imagen fija o un conjunto de imágenes animadas proporcionadas por un servidor que es capaz de cambiar el tamaño y/o formatear dicha o dichas imágenes. * dicho elemento del contenido principal comprende una imagen principal, y dicho motor de representación es capaz de generar una transición dinámica a partir de dicha imagen principal mediante el uso de al menos parte de dicho contenido alternativo y basándose en las variaciones de la variable de sustitución.
* dicha transición dinámica se basa en un contenido alternativo que cambia dinámicamente.
* dichos parámetros de sustitución comprenden un tipo de transición.
* dichas partículas pertenecen a un grupo que comprende imágenes fijas, imágenes animadas, formas y texto. * dichos parámetros de sustitución comprenden valores de orden para transformar dinámicamente dichas partículas en un orden dado.
* dicha variable de sustitución se deriva de la posición actual de una parte determinada del contenido principal en relación con el área de visualización cuando el contenido se mueve dentro del área de visualización en respuesta a los datos de entrada.
* dicho elemento del contenido principal es una imagen o un puntero a una imagen, incorporado en el contenido principal.
* dicho motor de representación es capaz de realizar una sustitución dinámica que depende de dicho tipo de animación de transición y que varía gradualmente con el valor de la característica de visualización.
* dicho motor de representación es capaz, a partir de sustituciones de elementos predeterminados para valores dados de la variable de sustitución, de interpolar entre dichas sustituciones de elementos predeterminados para un valor intermedio de la variable de sustitución.
* dichos parámetros de sustitución comprenden al menos un tipo de curva de interpolación.
* dichos parámetros de sustitución comprenden al menos un rango de representación, y donde el método comprende una etapa de comparación de la variable de sustitución con los límites del rango.
* dicha variable de sustitución se deriva de datos seleccionados en un grupo que comprende datos de entrada de usuario y datos de tiempo.
* el motor de representación es capaz de anular selectivamente una variable de sustitución relacionada con el tiempo con una variable de sustitución relacionada con la entrada del usuario.
* dichos datos de entrada de usuario se seleccionan en un grupo que comprende datos para el desplazamiento del contenido, datos de posición o movimiento del usuario y datos de posición o movimiento del dispositivo inteligente causados por un usuario.
* dichos datos de entrada de usuario comprenden datos de desplazamiento de contenido, dicho contenido alternativo comprende un contenido de vídeo y dicha sustitución dinámica comprende la exploración de dicho contenido de vídeo en respuesta a la variación de la variable de sustitución.
* dicho contenido principal comprende un contenido marcado, tal como un contenido HTML.
* dichos parámetros de sustitución están incorporados en dicho contenido marcado en asociación con al menos una etiqueta de imagen (<IMG>) del elemento en dicho contenido principal.
* dicho motor de representación es capaz de sustituir en dicha etiqueta de imagen una etiqueta de contenido de imagen (<CANVAS>) dentro de la cual se realiza la sustitución dinámica.
* dicho motor de representación es un paquete de programa de representación dedicado descargado de una fuente asociada con el contenido principal.
Se proporciona además un dispositivo inteligente con capacidad de representación de pantalla según la reivindicación 13.
Este dispositivo se puede utilizar además para definir un sistema tal como se ha definido anteriormente, que incluye de manera no limitante sus características opcionales.
También se proporciona un contenido digital marcado según la reivindicación 14.
En aspectos preferidos pero no limitantes:
* dichos parámetros de sustitución comprenden un tipo de sustitución y parámetros de representación de sustitución.
* dichos parámetros de sustitución están contenidos en un área etiquetada asociada al elemento visualizable.
Breve descripción de los dibujos
Otras características, objetivos y ventajas de la presente invención se pondrán más claramente de manifiesto a partir de la siguiente descripción detallada de una realización preferida de la misma.
En los dibujos:
La Fig. 1 es un diagrama de bloques de una arquitectura general basada en ordenador para implementar la presente invención,
la Fig. 1 BIS ilustra cinco modos de representación de un servicio "RePictur"TM disponible en el mercado, la Fig. 2 ilustra cómo las diferentes entidades relacionadas con la visualización implicadas en la presente invención están conectadas entre sí,
la figura 3 ilustra el comportamiento de un dispositivo de desplazamiento usado en la presente invención, la figura 4 ilustra la determinación de un porcentaje de visibilidad del elemento,
la figura 5 ilustra la determinación de un porcentaje de desplazamiento de elementos,
las figuras 6 a 8 ilustran el cálculo de un porcentaje de desplazamiento de elementos en ciertas condiciones específicas,
la figura 9 ilustra el cálculo de un porcentaje del rango de desplazamiento de un elemento,
la figura 10 es un flujo de trabajo de una variable de estado de "carga" útil en la presente invención, la figura 11 ilustra una "pegatina" que se puede visualizar en determinadas circunstancias,
las figuras 12A-12E ilustran diferentes representaciones de texto que pueden implementarse en la presente invención.
la figura 13 ilustra los principios del redimensionamiento de imágenes promocionales,
las figuras 14A y 14B son flujos de trabajo de una variable de estado de "visualización" útil en la presente invención para experiencias de usuario del tipo "superposición" y "sobrevuelo",
la figura 15 es un flujo de trabajo de una variable de estado de "extensión" útil en la presente invención, las figuras 16-19 ilustran el cálculo de un valor de "compensación" útil en una visualización dinámica de imágenes "superpuestas",
las figuras 20A-20N ilustran diferentes representaciones de visualización en una experiencia de usuario de "superposición vertical",
las figuras 21A-21F ilustran diferentes representaciones de visualización en una experiencia de usuario de "superposición horizontal",
la figura 22 ilustra un flujo de trabajo para la determinación de una condición de "Promoción",
las figuras 23-26 ilustran los principios de la animación de transición de "opacidad", "gris", pixelación y "ruido", respectivamente,
la figura 24BIS muestra una ecuación implicada en una determinada animación de transición,
las figuras 27A-27M ilustran diferentes representaciones de visualización en una experiencia de usuario de "sobrevuelo vertical",
las figuras 28A-28F ilustran diferentes representaciones de visualización en una experiencia de usuario de "sobrevuelo horizontal",
la figura 29 ilustra el cálculo de un estado de "visualización de sobrevuelo" en función del porcentaje de desplazamiento,
la figura 30 ilustra un esquema de representación en una determinada condición de un "estado de visualización",
las figuras 31A-31K ilustran diferentes representaciones de visualización en una experiencia de usuario "substicial vertical",
las figuras 32A-32D ilustran diferentes representaciones de visualización en una experiencia de usuario "substicial horizontal",
la figura 33 muestra un flujo de trabajo para la determinación de una variable de estado de "Extensión",
las figuras 34A-34G ilustran diferentes representaciones de visualización en una experiencia de usuario "lenticular",
las figuras 35A-35E ilustran diferentes representaciones de pantalla en una experiencia de usuario en forma de "scrolltoon",
las figuras 36A-36F ilustran diferentes representaciones de pantalla en una experiencia de usuario "scravelling".
Descripción detallada
Haciendo referencia primero a la figura 1, la presente invención se implementa preferiblemente en una arquitectura en la que un dispositivo inteligente (ordenador de escritorio, portátil, tableta, phablet, teléfono inteligente, etc.) tiene los medios de procesamiento habituales, medios de almacenamiento, una pantalla de visualización y dispositivos de entrada (pantalla táctil, panel táctil, ratón, etc.).
El dispositivo inteligente tiene capacidades de comunicación para conectarse a varios tipos de servidores.
En la presente especie, un servidor de contenido es capaz de proporcionar contenidos que incluye imágenes ilustrativas, y dichos contenidos (por ejemplo, noticias, documentales, etc.) se pueden ver en la pantalla del dispositivo inteligente desplazándose de manera progresiva por el contenido (en general, verticalmente de arriba a abajo).
La arquitectura comprende además un servidor (en lo sucesivo, "servidor RePictur" o "servidor de redimensionamiento") capaz de cambiar el tamaño y reformatear los archivos de imagen sobre la marcha, preferiblemente sin tener que cargar primero el archivo de imagen completo.
El servidor RePictur se comunica con un servidor denominado "ReDisplay", que es la parte fundamental para implementar las representaciones de visualización dinámicas según la invención, como se explicará a continuación.
El servidor rePictuR almacena las imágenes alternativas, tales como imágenes promocionales, que se visualizarán dinámicamente en el dispositivo inteligente, también almacena los programas (programas de JavaScript en la presente implementación) que se proporcionarán al dispositivo inteligente para la ejecución de las representaciones dinámicas de visualización en dichos dispositivos inteligentes, y controla el cambio de tamaño y reformateo de dichas imágenes alternativas al canalizarlas a través del servidor rePictuR según sea necesario.
I - Introducción
1) Prólogo: la tecnología rePictuR
Algunas experiencias o representaciones visuales de usuario (es decir, una sustitución dinámica de elementos en un contenido principal) descritas en esta especificación se basan en una tecnología que permite cambiar dinámicamente el tamaño de una "imagen original", es decir, un mapa de bits formado por píxeles codificados en varios formatos, a otra forma de esta imagen original que denominamos la "imagen deseada", según especificaciones que indican sus dimensiones, ancho y alto, su modo de representación y su formato codificado. En nuestro caso, esta tecnología es rePictuR, una solución de software como servicio (SaaS) disponible en www.repictur.com, que calcula la imagen deseada a través de un servicio web de Internet, tomando como parámetros la URL de Internet de la imagen original, las dimensiones deseadas y el formato de imagen deseado, como JPEG, PNG, WebP, GIF y GIF animado.
Los modos de representación de rePictuR, denominados parámetro "representar", porque es importante a la hora de detallar la forma en que funciona la experiencia de reDiplay, se explican a continuación con referencia a la figura 1:
• "recortar": la imagen original se redimensionará de forma homogénea de modo que una de sus dimensiones sea igual a la dimensión deseada correspondiente; si la otra dimensión de esta imagen redimensionada es mayor que su contraparte de la dimensión deseada, se recortará de modo que el centro de píxeles de la imagen redimensionada y de la imagen recortada sean idénticos, lo que implica que se descartarán algunos bordes horizontales o verticales. La relación de aspecto de la imagen original se conserva en la imagen deseada.
• "bandeja de entrada": se cambiará el tamaño de la imagen original para que la imagen deseada sea lo más grande posible para cumplir con el rectángulo definido por las dimensiones solicitadas. La relación de aspecto de la imagen original se conserva en la imagen deseada;
• "mapa" la imagen original se estirará o aplastará para llenar exactamente las dimensiones deseadas si es necesario. La relación de aspecto de la imagen original puede que no se conserve en la imagen deseada.
• "llenar": se cambiará el tamaño de la imagen original de modo que la imagen deseada sea lo más grande posible para cumplir con el rectángulo definido por las dimensiones solicitadas, sin que el espacio esté ocupado por la imagen rellenándose con un fondo. La relación de aspecto de la imagen original se conserva en la imagen deseada, pero aparecerán franjas horizontales izquierda y derecha o verticales superiores e inferiores.
• "bandeja de salida": se cambiará el tamaño de la imagen original de modo que la imagen deseada tendrá una dimensión igual a las dimensiones deseadas correspondientes, siendo la otra dimensión mayor o igual a su dimensión deseada correspondiente. La relación de aspecto de la imagen original se conserva en la imagen deseada.
La plataforma rePictuR garantiza un servicio web HTTP principal que toma la URL de la imagen original, sus especificaciones deseadas, es decir, sus dimensiones, formato..., y genera la imagen deseada como respuesta de solicitud HTTP. rePictuR ofrece un SDK de JavaScript que calcula la URL de la imagen deseada mediante una función que toma las especificaciones como parámetros: una vez calculada, esta URL se puede invocar para invocar el servicio web y, por lo tanto, recuperar el mapa de bits de la imagen deseado.
Alternativamente, se podrían utilizar otros servicios comerciales que proporcionen el cambio de tamaño de las imágenes originales a los formatos deseados, como imgix (www.imgix.com) o Cloudinary (cloudinary.com). La principal diferencia con el servicio rePictuR es que rePictuR realiza este servicio sin necesidad de cargar previamente la imagen original en el servidor del servicio, esto se hace "sobre la marcha", lo que facilita el proceso.
2) Implementación de programas informáticos
Los programas informáticos involucrados en los procesos descritos en este documento se entregan como una biblioteca, comúnmente denominada "Kit de Desarrollo de Software" (SDK), que se puede rechazar de tres formas:
1. una biblioteca de JavaScript, que se entrega como un único archivo "redisplay.js ", que está dedicado al navegador de Internet, que se importa en el código fuente HTML de una página web, mediante la tradicional declaración de importación asíncrona <script type="text/javascript" src="redisplay.js"></script>;
2. una biblioteca de Android escrita en el lenguaje Java, que se entrega como un archivo estándar Java ARchive (JAR) "redisplay-android.jar", que se importa al código fuente de un proyecto de aplicación móvil. Esta biblioteca recurre principalmente al componente de vista gráfica WebView de Android, capaz de ejecutar código HTML5: al ejecutar y visualizar las experiencias, carga dinámicamente la biblioteca de JavaScript anterior desde un servidor, para reutilizar la mayor cantidad de código posible y reducir el código nativo dedicado. Esto implica que la biblioteca es una biblioteca híbrida que combina código Java y JavaScript;
3. Una biblioteca de iOS escrita en el lenguaje Swift, que se entrega como un archivo estándar "redisplayios.framework" de iOS Framework, que se importa al código fuente de un proyecto de aplicación móvil. Esta biblioteca principalmente reordena el componente de visualización gráfica iOS UIKit UIWebView, capaz de ejecutar código HTML5: al ejecutar y visualizar las experiencias, carga dinámicamente la biblioteca de JavaScript anterior desde un servidor, para reutilizar la mayor cantidad de código posible y reducir el código nativo dedicado. Esto implica que la biblioteca es una biblioteca híbrida que combina código Swift y JavaScript.
Como se ha dicho, una peculiaridad de las bibliotecas móviles de Android e iOS es que reutilizan el código de la biblioteca de JavaScript y solo actúan como una capa delgada entre la aplicación nativa de alojamiento y la ejecución de JavaScript en una vista interna del navegador de Internet.
3) Principios generales
Las diversas experiencias descritas en este documento están diseñadas para ejecutarse en cualquier dispositivo equipado con un navegador de Internet que admita el estándar HTML5 (o superior), equipado con una pantalla digital, táctil o equipado con un ratón o una almohadilla que permita desplazar hacia arriba y hacia abajo el contenido de una página web o una aplicación móvil, que aquí se denomina "desplazador". Cada experiencia visualiza un contenido visual (imagen) en la pantalla, incorporado en el contenido de una página web o una aplicación móvil, que se anima según el movimiento de desplazamiento vertical aplicado por el usuario final al contenido a través del desplazador, o siguiendo la orientación del dispositivo en caso de que esté equipado con un giroscopio u otro detector de movimiento. De manera más general, se pueden usar varios datos de entrada para controlar la representación de la animación, incluido el tiempo.
4) "Experiencia": definición
Una experiencia de usuario o simplemente "experiencia" consiste en visualizar en un navegador de Internet o una aplicación móvil una o más imágenes dentro de los límites de un marco en una pantalla digital de cualquier dispositivo inteligente (un ordenador, un teléfono inteligente, una tableta o cualquier dispositivo) equipado con dicha pantalla. La forma en que se representan las imágenes en el marco depende de una variable de sustitución, por ejemplo, la posición vertical del marco dentro de su contenido envolvente, el movimiento del dispositivo siempre que esté equipado con un giroscopio u otros estímulos de entrada, o bien el tiempo, mientras está visible, parcial o totalmente, en la pantalla, y del contenido alternativo de diversas naturalezas. Por lo tanto, además de visualizar imágenes o sustituirlas, una experiencia puede reproducir una animación gráfica sobre el marco y puede visualizar textos, formas, imágenes y movimientos sobre él, que pueden cambiar con el tiempo. La experiencia se compone de todas las cosas que ocurren dentro de su marco.
5) La relación entre entidades
La figura 2 muestra cómo las entidades mencionadas anteriormente, es decir, la pantalla digital, el navegador de Internet o la ventana de la aplicación móvil, el contenido, el desplazador, la ventana gráfica, el contenido visible, el "contenido no visible" y el marco, están vinculadas entre sí. La ventana gráfica es el espacio físico de la pantalla digital que visualiza la parte del contenido según la posición del "desplazador": dado que la altura del contenido puede sobredimensionar la altura de la ventana gráfica, solo visualiza el contenido visible, a diferencia del contenido no visible, que puede visualizarse progresivamente en la ventana gráfica a medida que el usuario final se desplaza hacia arriba o hacia abajo a través del desplazador. Las imágenes se visualizan dentro de los límites del marco.
Algunas de estas entidades se describen ahora con mayor detalle.
a) El desplazador
Haciendo referencia ahora a la figura 3, el desplazador es el dispositivo que permite cambiar el fragmento vertical del contenido que se visualiza en la ventana gráfica (en caso de que el contenido sea superior a la altura de la ventana gráfica). Como se indicó anteriormente, se activa mediante un evento táctil de dispositivos equipados con pantallas táctiles, o mediante un ratón, una almohadilla o cualquier dispositivo que normalmente permita desplazar el contenido verticalmente.
La "posición" del desplazador es un número que tiene un valor mínimo cuando el fragmento del contenido que se visualiza en la ventana gráfica llega a la parte superior del contenido, y tiene un valor máximo cuando el fragmento del contenido que se visualiza en la ventana gráfica llega a la parte inferior del contenido. Aquí se centra en la posición vertical del desplazador e ignora su posible posición horizontal si el ancho del contenido es mayor que el ancho de la ventana gráfica y, por lo tanto, se supone que el ancho del contenido y el de la ventana gráfica son iguales. En una modalidad alternativa, se podría usar un desplazador horizontal además del desplazador vertical o en lugar de él.
b) Los porcentajes de visibilidad, visualización y desplazamiento de un elemento (características de visualización)
Para realizar las experiencias, el sistema y el método se basan en tres métricas con respecto a un elemento presente en un contenido que se visualiza en una ventana gráfica con un desplazador, a saber:
• el elemento "porcentaje de visibilidad": indica qué parte de la superficie total del elemento es visible en la ventana gráfica;
• el elemento "porcentaje de desplazamiento": indica cuánto se ha desplazado el elemento dentro de la ventana gráfica.
• el elemento "porcentaje de visualización": es una combinación de las dos métricas anteriores, que permite definir una función continua que tenga en cuenta la posición exacta del elemento dentro de la ventana gráfica y si está intersecando dicha ventana gráfica.
Estas métricas se expresan en porcentaje, de modo que 0 significa 0% y 100 significa 100%.
El SDK de JavaScript de la invención ofrece tres métodos correspondientes que calculan esos tres porcentajes, que se utilizan ampliamente en sí mismos, así como métodos que exponen los resultados almacenados en memoria intermedia de estos cálculos, para evitar volver a calcularlos a menos que la posición vertical del elemento haya cambiado o la altura de la ventana gráfica haya cambiado.
i) El elemento porcentaje de visibilidad
Haciendo referencia ahora a la figura 4, este porcentaje oscila entre 0 cuando el elemento está totalmente fuera de la ventana gráfica y 100 cuando está totalmente visible en la ventana gráfica. Es igual a la relación entre la superficie visible del elemento y su superficie total. Tenga en cuenta que si la altura del elemento es mayor que la altura de la ventana gráfica, su porcentaje de visibilidad siempre será inferior a 100. En el caso contrario, el porcentaje de visibilidad es positivo e inferior a 100 cuando interseca el borde superior o inferior de la ventana gráfica.
ii) El elemento porcentaje de desplazamiento
Volviendo ahora a las figuras 5-8, hay tres casos para calcular este porcentaje.
1. La altura del elemento es inferior a la altura de la ventana gráfica: cuando el elemento es totalmente visible en la pantalla, es decir, su porcentaje de visibilidad es igual a 100, lo que implica que su borde inferior esté por encima del borde inferior de la ventana gráfica y el borde superior del elemento esté por debajo del borde superior de la ventana gráfica, su valor es igual a la distancia entre el borde inferior del elemento y el borde inferior de la ventana gráfica, dividida por otra altura, que es la altura de la ventana gráfica menos la altura del elemento, y el resultado se multiplica por 100 para obtener un porcentaje. Para los demás casos, cuando su borde inferior está por debajo o alineado con el borde inferior de la ventana gráfica, su valor es 0; cuando su borde superior está por encima o alineado con el borde superior de la ventana gráfica, su valor es 100 (véase la figura 6).
2. La altura del elemento es mayor que la altura de la ventana gráfica: cuando el borde inferior está por debajo del borde inferior de la ventana gráfica y su borde superior por encima del borde superior de la ventana gráfica, el valor es igual a la distancia entre el elemento y los bordes superiores de la ventana gráfica, dividida por una altura, que es la altura del elemento menos la altura de la ventana gráfica, el resultado se multiplica por 100 para obtener un porcentaje. Para los otros casos, cuando el borde inferior está por encima del borde inferior de la ventana gráfica, su valor es 100; cuando su borde superior está por debajo del borde superior de la ventana gráfica, su valor es 0 (véase la figura 7).
3. La posición del elemento dentro del contenido impide que su borde inferior se alinee con el borde inferior de la ventana gráfica o que su borde superior se alinee con el borde superior de la ventana gráfica, lo que ocurre cuando, respectivamente, el elemento está muy cerca de la parte superior del contenido o muy cerca de la parte inferior del contenido: en esos casos, se calcula un valor virtual que reemplaza la parte superior o inferior de la ventana gráfica y se aplica la fórmula expresada en el caso 1 o 2, según la altura del elemento en comparación con la nueva altura de la ventana gráfica virtual, para calcular el valor.
a. Cuando la parte inferior del elemento no puede alcanzar el borde inferior de la ventana gráfica, el valor virtual es un fondo virtual, que es igual a la distancia entre el borde inferior de la ventana gráfica y el borde inferior del elemento cuando el valor del desplazamiento es mínimo, es decir, ha alcanzado la parte superior del contenido (véase la figura 8a).
b. Cuando la parte superior del elemento no puede alcanzar el borde superior de la ventana gráfica, el valor virtual es una parte superior virtual, que es igual a la distancia entre el borde superior de la ventana gráfica y el borde superior del elemento cuando el valor del desplazamiento es máximo, es decir, ha llegado al final del contenido.
(véase la figura 8b).
iii) El elemento porcentaje de visualización
Mientras que el porcentaje de visibilidad indica cuánto está visible el elemento en su ventana gráfica y el porcentaje de desplazamiento indica cuánto se ha desplazado verticalmente el elemento, el porcentaje de visualización es una combinación de estos dos porcentajes y permite conocer con precisión la posición del elemento dentro de la ventana gráfica. Va de -100 a 200 y ofrece una función continua que varía con la posición de desplazamiento vertical del elemento.
Caso común
En el caso más común, es decir, cuando la altura del elemento es inferior a la altura de la ventana gráfica y cuando la posición del elemento dentro del contenido no impide que su borde inferior se alinee con el borde inferior de la ventana gráfica o que su borde superior se alinee con el borde superior de la ventana gráfica. 1. el porcentaje de visualización es igual a -100 cuando el borde superior del elemento toca el borde inferior de la ventana gráfica, es decir, cuando el elemento está destinado a empezar a ser visible desde abajo, es decir, cuando el porcentaje de visibilidad es igual a 0;
2. el porcentaje de visualización es igual al porcentaje de visibilidad menos 100, es decir, superior a -100 e inferior a 0, siempre que intercepte el borde inferior de la ventana gráfica, es decir, mientras aparezca desde abajo;
3. el porcentaje de visualización es igual a 0 cuando el borde inferior del elemento está alineado con el borde inferior de la ventana gráfica, es decir, cuando los porcentajes de visibilidad alcanzan el 100 por primera vez mientras aparecen desde abajo;
4. el porcentaje de visualización es igual al porcentaje de desplazamiento, es decir, superior a 0 e inferior a 100, siempre que el porcentaje de visibilidad sea igual a 100;
5. el porcentaje de visualización es igual a 100 cuando el borde superior del elemento se alinea con el borde superior de la ventana gráfica, es decir, cuando los porcentajes de desplazamiento alcanzan el valor 100 por primera vez mientras aparecen desde abajo.
6. el porcentaje de visualización es igual a 200 menos el porcentaje de visibilidad, es decir, superior a 100 e inferior a 200 siempre que intercepte el borde superior de la ventana gráfica, es decir, mientras desaparezca por la parte superior;
7. el porcentaje de visualización es igual a 200 cuando el borde inferior del elemento está alienado con el borde superior de la ventana gráfica, es decir, cuando los porcentajes de visibilidad alcanzan el 0 por primera vez mientras desaparecen por arriba.
Este porcentaje permite conocer con precisión la posición del elemento dentro de la ventana gráfica mientras intercepta la superficie de la ventana gráfica.
En resumen, si denominamos "porcentajeVisualización" al porcentaje de visualización, "porcentajeVisibilidad" al porcentaje de visibilidad y "porcentajeDesplazamiento" al porcentaje de desplazamiento:
1. porcentajeVisualización = porcentajeVisibilidad - 100 cuando porcentajeDesplazamiento <= 0,
2. porcentajeVisualización = porcentajeVisibilidad cuando porcentajeDesplazamiento >= 0,
3. porcentajeDesplazamiento = 200 - porcentajeVisibilidad cuando porcentajeDesplazamiento >= 100 Casos particulares
En otros casos, es decir, cuando la altura del elemento es mayor o igual a la altura de la ventana gráfica, y/o cuando la posición del elemento dentro del contenido impide que su borde inferior se alinee con el borde inferior de la ventana gráfica o que su borde superior esté alineado con el borde superior de la ventana gráfica, el porcentaje de visualización se calcula de la siguiente manera:
• se realiza el siguiente cálculo:
porcentajeVisibilidadPotencial = porcentajeVisibilidad / porcentajeVisibilidadMáximo donde porcentajeVisibilidadMáximo es el valor máximo que puede alcanzar porcentajeVisibilidad y, a continuación: 1. cuando porcentaje de desplazamiento > 0 y se porcentaje de desplazamiento < 100, porcentajeVisualización = porcentajeDesplazamiento,
2. cuando porcentaje de desplazamiento <= 0, porcentajeVisualización = porcentajeVisibilidad potencia -100,
3. cuando porcentaje de desplazamiento >= 100, porcentajeVisualización = 200 porcentajeVisibilidad Potencial.
Esto garantiza que el porcentaje de visualización sea una función continua.
iv) El elemento porcentaje de rango de desplazamiento
Haciendo referencia ahora a la figura 9, el SDK ofrece una función que calcula un valor denominado el elemento "porcentaje de rango de desplazamiento", un número flotante entre 0 y 100: toma como parámetros el porcentaje de desplazamiento del elementoporcentajeDesplazamientoy un rango de desplazamiento, que es un par de dos enteros entre 0 y 100, el segundo,porcentajeMáximo es mayor que el primero, porcentajeMínimo,y genera un valorporcentajeRangoDesplazamiento igual a ”Math.min(1, Math.max(0, porcentajeDesplazamiento- porcentajeMínimo)/(porcentajeMáximo - porcentajeMínimo))" donde "Math.min" y "Math.max" generan, respectivamente, el valor más bajo y el mayor de dos números dados.
Este porcentaje de rango de desplazamiento introduce el concepto de bordes virtuales superior e inferior de la ventana gráfica y determina dónde se encuentra el elemento entre esos bordes virtuales superiores e inferiores. c) La etiqueta HTML "<img>"
Para que una página web pueda ejecutar una experiencia, debe incorporar el SDK de JavaScript correspondiente, mediante una sentencia normal de "secuencia de comandos" de importación asincrónica de HTML5. Una vez hecho esto, tan pronto como el navegador de Internet haya cargado el documento, se ejecutará la fase de inicialización del SDK. Esta fase de inicialización consiste en analizar el documento. Durante esta fase de inicialización, la forma en que el SDK de JavaScript determina si se debe ejecutar una experiencia y dónde se debe ejecutar consiste en analizar el Modelo de Objetos de Documentos (DOM) HTML (véase https://www.w3.org/TR/WD-DOM/introduction.html) y detectar los nodos HTML "<img>" que cumplen ciertos criterios: por cada etiqueta HTML "<img>" que cumpla estos criterios, el SDK inicializará y ejecutará una experiencia. Estos criterios se describirán a continuación. Entre los criterios, el elemento HTML "<img>" debe hacer referencia a una entidad de descripción de la experiencia. Cada etiqueta "<img>" coincidente es en realidad un "marcador de posición" para una experiencia, lo que permite utilizar una etiqueta HTML integrada para insertar experiencias en una página HTML.
d) La descripción de la experiencia
A cada experiencia se le adjunta un conjunto de parámetros que indican cuándo debe visualizarse, es decir, las condiciones que deben cumplirse para que se represente en el contenido, la forma en que se visualiza, es decir, su diseño gráfico, la forma en que se comporta según la posición del desplazador, el estado del giroscopio u otros estímulos de entrada, y la forma en que las animaciones se ejecutan en el marco de la experiencia a medida que cambian esas entradas, es decir, los textos y las formas que se representan.
Estos parámetros se capturan en una entidad denominada "descripción", que es un documento descrito en formato JSON mediante una gramática específica, que se normaliza y se hace corresponder en los lenguajes Java y JavaScript. La descripción de una experiencia consiste en una serie de pares clave-valor: la clave es el nombre del parámetro y el valor es su valor, que puede ser de uno de los siguientes tipos:
• un entero,
• un número flotante,
• un booleano (valor "verdadero" o "falso"),
• una cadena,
• un objeto JSON, en cuyo caso este objeto sigue las mismas reglas que para el valor aquí descrito. Algunos parámetros tienen valores predeterminados implícitos declarados en la gramática, otros son opcionales y otros son obligatorios.
Al hacer referencia a cada parámetro, puede denominarse indistintamente "parámetro", "atributo" o "propiedad". En particular, cuando se menciona brevemente el parámetro "attr" de una experiencia, se entiende el parámetro "attr" de su descripción.
El sistema y el método de la invención ofrecen, por lo tanto, un formalismo que permite declarar el comportamiento de la experiencia y su representación en una unidad autodescriptiva, basada en un documento textual y estructurado, y el motor de representación es responsable de interpretar esta descripción en tiempo real. Esto ofrece un nuevo dispositivo para que los diseñadores digitales diseñen experiencias sin ningún trabajo de programación para representar (o "reproducir") las experiencias en una variedad de soportes digitales. La invención proporciona así un nuevo tipo de "jugador": su SDK actúa como un reproductor de vídeo, pero en lugar de representar un fotograma de vídeo a lo largo del tiempo, representa un fotograma que se calcula en función de su descripción y de un porcentaje de animación (que se describirá a continuación).
Además, para garantizar que las descripciones de experiencias heredadas puedan seguir utilizándose con versiones del SDK que no admiten su "versiónEsquema", la invención también puede implementar un servicio web administrativo que tome una cadena de descripción de la experiencia como parámetro y devuelva la misma descripción semántica que migró a la última versión del esquema. Esto permite solucionar cualquier problema de compatibilidad con versiones anteriores.
e) La descripción de las "versiones de esquema", la gramática y el control de versiones del SDK
Cada descripción de representación incluye una propiedad "versiónEsquema", que es un entero que indica la versión de la descripción del esquema con la que cumple: a medida que la gramática de la descripción de la experiencia evoluciona con el tiempo, dado que la implementación puede introducir nuevos conceptos y nuevas funciones, el esquema se versiona junto con los analizadores de JavaScript y Java.
Del mismo modo, el SDK de JavaScript, que en una modalidad particular es el núcleo de la implementación, también está versionado y admite descripciones de experiencias que tengan una "versiónEsquema" que pertenezca a un rango de versiones del esquema, por motivos de compatibilidad con versiones anteriores.
f) La descripción de la experiencia propiedad de "tipo"
Cada descripción comprende una propiedad de "tipo", que es una cadena que puede tomar un valor entre varios valores, y en la presente realización: "superposición" (la "Superposición"), "sobrevolar" (el "Sobrevuelo"), "substicial" (el "Substicial"), "lenticular" (el "Lenticular"), "scrolltoon" (el "Scrolltoon") y "scravelling" (el "Scravelling"), este tipo que describe la naturaleza de la experiencia:
Cada uno de estos seis modelos de experiencias, que se describirán en detalle a continuación, ofrece características adicionales de representación y comportamiento específicas, que se pueden ver como formatos.
Los modelos "Lenticular", "Scrolltoon" y "Scravelling" proporcionan funciones que complementan el modelo "Substicial", lo que significa que todas las funciones integradas de esos modelos pueden traducirse al modelo "Substicial" mediante el uso de partículas de "imagen" o "movimiento" y estableciendo su parámetro de "porcentaje" en 100. Estas tres experiencias se introdujeron porque el esquema de descripción y el SDK no podían proporcionar una forma genérica de lograr su comportamiento y representación, ya que las versiones anteriores del SDK solían codificar rutinas que lograban esas características específicas: a medida que el SDK y el esquema de descripción evolucionaron, esas características se generalizaron e introdujeron, de modo que ahora se puede utilizar el modelo "Substicial" en su lugar con los ajustes apropiados.
Por lo tanto, excepto en los casos específicos de los modelos "Superposición" y "Sobrevuelo", que ofrecen un comportamiento específico al incluir la imagen "<img>" natural definida mediante su atributo "src", la invención ofrece una forma universal de describir las experiencias mediante el modelo "Substicial".
g) Los criterios "<img>" y la declaración descriptiva
Como se indicó anteriormente, el SDK escanea todo el documento HTML entrante para buscar el contenido "<img>" y crea una experiencia para los que cumplen ciertos criterios. Para que una experiencia se cargue con respecto a su contenido "<img>", este último debe cumplir al menos una de las siguientes condiciones, a saber:
• declara el atributo HTML nativo "src", que define la URL de la imagen (esta URL comienza con una cadena de prefijo correspondiente a la dirección del servidor de imágenes dedicado) y que contiene el identificador de experiencia. Ventajosamente, la invención ofrece una oficina administrativa que puede almacenar una descripción de la experiencia asociada a un identificador, junto con una imagen correspondiente a una vista previa de su representación, es decir, un mapa de bits correspondiente a la representación de la experiencia para un porcentaje de visualización específico; esta oficina administrativa es interoperable a través de una Interfaz de Programación de Aplicaciones (API) expuesta por los servicios web HTTP: el identificador proporcionado ubicado en la URL "src" debe corresponder a una descripción de la experiencia que debe haberse importado previamente. La invención también incluye un servidor HTTP que proporciona servicios web, recibe la solicitud HTTP resultante iniciada por el agente de usuario del navegador de Internet y es responsable de devolver una imagen de Gráficos Vectoriales Escalables (SVG), que cumple con la v i .1 de SVG, que contiene y visualiza un mapa de bits (mediante una etiqueta "<image>") correspondiente al contenido visual de la experiencia, junto con la cadena JSON de descripción de la experiencia, envuelta en una etiqueta "<foreignObject>" SVG. Con este modo de declaración, la experiencia depende de un servidor adicional, pero por otro lado basta con proporcionar un atributo HTML normal para declarar la identidad de la experiencia. Además, cuando la descripción de la experiencia se ha declarado previamente, se puede visualizar una vista previa de la experiencia en el lado del usuario final mientras se carga la experiencia, y la descripción de la experiencia se recupera en la misma solicitud HTTP única;
• declara un atributo HTML específico "redisplay-desc", cuyo valor es el contenido de la descripción de la experiencia en línea, es decir, su cadena JSON. Al usar comillas simples (') para delimitar el atributo HTML, la cadena JSON se puede alinear gracias a las comillas dobles (") que se escaparán de forma segura. De esta forma, la descripción de la experiencia se puede ubicar directamente dentro de la página HTML mediante un atributo HTML no estándar y no se necesita un servidor específico para almacenarla;
• declara un atributo HTML específico "redisplay-params", que es una cadena JSON que representa los parámetros de integración. En cuanto al atributo "redisplay-desc", este atributo se puede delimitar con una sola comilla. En ese caso, este objeto JSON debe contener una propiedad "experienceld", que es el identificador de una experiencia que se ha cargado previamente en la oficina administrativa, tal y como se describe en el primer caso: el SDK solicitará a la oficina administrativa, mediante una solicitud HTTP y un servicio web dedicado, que devuelva la descripción de la experiencia. De esta forma, la descripción de la experiencia se puede ubicar de forma remota en la oficina administrativa, y la integración de la experiencia requiere el uso de un atributo HTML no estándar;
• declara el mismo atributo HTML específico "redisplay-params" que en el caso anterior, excepto que el objeto JSON debe contener una propiedad "descriptionUrl", que es una URL de cadena a la que se puede acceder mediante una solicitud HTTP y que devuelve la descripción de la experiencia. El SDK recuperará la descripción de la experiencia a través de esta solicitud HTTP y añadirá parámetros de consulta, como el atributo "id" de la experiencia, que habilita desde el lado del servidor, junto con las cabeceras de solicitud HTTP habituales "Origin" y "Referer" para saber qué descripción de experiencia ofrecer. De esta forma, la descripción de la experiencia se encuentra de forma remota en cualquier servidor, y este servidor puede ofrecer cualquier experiencia de forma dinámica en función de su ubicación de integración, ya que la integración de la experiencia requiere el uso de un atributo HTML no estándar;
• declara el mismo atributo HTML específico "redisplay-params" que en el caso anterior, excepto que el objeto JSON debe contener una propiedad "getDescription", que es una cadena correspondiente a una función de JavaScript que devuelve la descripción de JSON. El SDK recuperará la descripción de la experiencia invocando esta función. De esta forma, la descripción de la experiencia se encuentra localmente en la página HTML y se proporciona mediante una función personalizada, ya que la integración de la experiencia requiere el uso de un atributo HTML no estándar.
En todos los casos, el SDK puede validar opcionalmente de forma dinámica la descripción recuperada mediante una propiedad booleana "validate" que pertenezca al objeto JSON "redisplay-params": si está habilitado, antes de cargar la experiencia, el SDK comprobará que tiene la sintaxis adecuada, es decir, que es un objeto JSON válido y que cumple con la gramática de descripción correspondiente a su "versiónEsquema" declarada. Además, el SDK inspeccionará y comprobará cada parámetro de la descripción, es decir, que sea del tipo correcto, que sea válido y coherente, que esté presente cuando sea obligatorio; de lo contrario, la experiencia no se cargará. Esto ofrece un proceso de verificación preliminar.
La simplicidad del SDK de JavaScript dentro de una página HTML, junto con los diversos modos de integración de una experiencia, hacen que la disponibilidad de la solución según la invención sea versátil y universal, para responder a la mayoría de los casos de uso. En particular, dado que una experiencia puede integrarse mediante un elemento HTML normal y simple y especificarse mediante su atributo "src" incorporado, la tecnología puede integrarse en cualquier Sistema de Gestión de Contenido (CMS) HTML que ofrezca la posibilidad de insertar una imagen HTML normal y permitir que el usuario final declare el atributo "src".
e) Los SDK de iOS y Android
La presente invención puede proporcionar un SDK para iOS® y Android®, que permiten ejecutar todas las experiencias dentro de una aplicación móvil nativa desarrollada con los marcos clásicos de los sistemas operativos iOS® y Android®.
Sin embargo, para compartir la mayor cantidad de código posible entre el SDK de JavaScript utilizado para ejecutar las experiencias en un navegador de Internet (de escritorio, portátil o móvil) y las aplicaciones móviles nativas, los SDK de iOS y Android utilizan y se basan preferentemente en el SDK de JavaScript. Esto se hace mediante el uso de los elementos gráficos "UIWebView" nativos de iOS y "WebView" de Android, que actúan como navegadores HTML que visualizan el contenido dentro del espacio gráfico que se les ha asignado. Para ello, el SDK móvil introduce un elemento de widget gráfico "reDisplayView", que contiene un UIWebView para iOS y un WebView para Android: este componente contiene el código que inyecta el SDK de JavaScript en el UIWebView o WebView integrado y que ejecuta la fase de inicialización con un parámetro de indicador especial que indica al SDK de JavaScript que se está ejecutando en una aplicación móvil.
Los SDK de iOS y Android incluyen métodos que permiten integrar este widget reDisplayView dentro de un "UICollectionView" de iOS o un "RecyclerView" de Android, es decir, dentro de widgets gráficos que pueden desplazarse verticalmente tan pronto como la altura del contenido que visualizan supera la altura de su ventana gráfica. Este elemento gráfico del widget se denomina aquí "ContentView".
El widget reDisplayView crea dinámicamente un documento HTML que incorpora el SDK de JavaScript en el nodo "<head>", y cuyo nodo "<body"> solo está compuesto por un único elemento HTML "<img>" que posee un atributo "redisplay-params" que contiene los parámetros de la experiencia.
El widget reDisplayView también garantiza un puente de comunicación entre el SDK de JavaScript y el código nativo: ciertos mensajes pueden transmitirse del código JavaScript al código nativo y viceversa. Estos mensajes permiten al SDK de JavaScript:
• conocer la ventana gráfica del widget ContentView,
• conocer la altura del widget ContentView,
• conocer la posición de desplazamiento vertical del widget reDisplayView dentro de su widget ContentView,
• enviar señales para solicitar al código nativo que establezca la altura de reDisplayView de forma dinámica,
• pedir al código nativo que almacene y recupere de forma persistente objetos JSON identificados por una clave de cadena,
• enviar una señal al código nativo para abrir un cuadro de diálogo.
Los tres primeros mensajes permiten al SDK de JavaScript calcular una posición virtual del nodo "<img>", como si estuviera alojado en un documento HTML que contiene un nodo "<div>" vacío cuya altura es igual a la posición de desplazamiento vertical de reDisplay y seguido de un nodo "<div>", ocho de los cuales son iguales a la altura de ContentView menos la altura de reDisplayView, menos la primera altura "<div>". Con esta posición virtual, desde el punto de vista del código JavaScript ejecutado en el widget reDisplayView, el documento HTML se comporta como el widget ContentView.
II - Principios comunes a todas las experiencias
En esta sección se explican los mecanismos comunes a todas las experiencias. Se hará referencia a ello en otras partes de la descripción.
1) El estado de "carga"
Tan pronto como los parámetros de la experiencia se hayan analizado correctamente, se comprobarán y, si no los cumplen, la experiencia se cancela, lo que significa que no se visualizará. Si se cumplen los parámetros de la experiencia, se crea en la memoria un "controlador" de objetos interno que representa la experiencia, responsable de organizar la experiencia del usuario.
Para ello, el SDK mantiene un estado de "carga" interno para la experiencia, a fin de realizar un seguimiento del progreso y el estado de la carga interna.
A continuación se muestran los distintos estados del estado de "carga", tal como se muestra en la figura 11, donde el "marco" debe entenderse como el "marco de la imagen de ilustración", la "imagen" como la "imagen de ilustración" en el caso de las experiencias de "Superposición" y "Sobrevuelo". Para otras experiencias, el "marco" mencionado en esa sección es el "lienzo" y la "imagen" es la "fuente principal" de la experiencia:
1. "Ninguna": este es el primer estado de la experiencia, siempre y cuando no haya empezado a cargarse. El parámetro de la experiencia "cargaAuto", que es booleano, indica si debe empezar a cargarse tan pronto como se analice la experiencia o si debe esperar a que el marco esté visible, es decir, cuando el porcentaje de visibilidad al desplazarse por el marco sea superior a 0. Para ello, el objeto controlador identifica el desplazador del contenido del envoltorio para escucharlo más tarde en la posición de desplazamiento vertical, y monitorea esa posición durante toda la vida útil de la experiencia.
2. "Cargando": este es el estado de la experiencia tan pronto como comience a cargarse.
a. El SDK espera a que se descargue la imagen en primer lugar: si la carga falla porque una respuesta HTTP indica un error o porque se ha agotado el tiempo de espera (establecido por el navegador web), el estado pasa al estado "Fallido".
b. De lo contrario, si la experiencia incluye una imagen promocional, el SDK comenzará a descargarla, con las especificaciones de dimensiones correctas y con un tiempo de espera establecido en el tiempo de espera predeterminado del navegador. Si la descarga falla por cualquier motivo, el estado pasa al estado "Fallido".
c. De lo contrario, el SDK comienza a descargar la imagen "reminder.icon" si este parámetro está definido; de lo contrario, pasa a la siguiente etapa. La imagen de recordatorio se descarga a través del servicio de cambio de tamaño de rePictuR con el parámetro "representar" establecido en "bandeja de entrada" y con las dimensiones configuradas en 80x80 píxeles. Si la descarga falla por cualquier motivo, el estado pasa al estado "Fallido".
d. De lo contrario, el SDK comienza a descargar los archivos de animación a los que se hace referencia mediante los parámetros "Animations.firstClick" y "Animations.secondClick" si están definidos; de lo contrario, pasa a la siguiente etapa. Si la descarga falla por cualquier motivo, el estado pasa al estado "Fallido".
e. De lo contrario, el SDK comienza a descargar las fuentes a las que se hace referencia mediante los parámetros "texts [] .fontURL", si los hay; de lo contrario, pasa a la siguiente etapa. Si la descarga falla por cualquier motivo, el estado pasa al estado "Fallido".
f. De lo contrario, el SDK comienza a descargar las imágenes y los movimientos a los que se hace referencia mediante los parámetros "images [] .url" y "motions [] .url" a través del servicio de cambio de tamaño de rePictuR; de lo contrario, pasa a la siguiente etapa. Si la descarga falla por cualquier motivo, el estado pasa al estado "Fallido".
g. Si todas esas descargas se realizaron correctamente (tenga en cuenta que la memoria intermedia del navegador se puede usar para evitar volver a descargar los archivos existentes), el estado de la experiencia pasa al estado "Cargado".
3. "Cargado": este estado indica que todos los recursos necesarios se han descargado y están disponibles para que se ejecute toda la experiencia. La experiencia comprueba si el porcentaje de visibilidad de desplazamiento del marco es positivo. En ese caso, pasa al estado "EntreCargadoyListo". Si, en este momento, el porcentaje de visibilidad del desplazamiento es igual a 0, el SDK supervisará la posición del desplazador y, cada vez que cambie el valor de este valor, comprobará la posición del desplazador: tan pronto como pase a ser positivo, el estado pasa a "EntreCargadoyListo". Esta monitorización de la posición del desplazador es necesaria para determinar el comportamiento de la experiencia.
4. "EntreCargadoyListo": el objeto gestor de experiencias crea un lienzo HTML5. Las dimensiones de este lienzo dependen de la experiencia, que detallamos más adelante al describir cada experiencia. Luego, el gestor reemplaza el elemento HTML "img" con ese lienzo recién creado, que se utilizará exclusivamente para representar la experiencia a partir de este momento. Se realiza una primera representación de la experiencia, justo antes de reemplazar el elemento "img" por el lienzo, para ofrecer una transición fluida al usuario final, para que no pueda detectar el intercambio de nodos HTML. Al final de este proceso, la experiencia pasa al estado "Listo".
5. "Listo": a partir de ese momento, el SDK comienza a escuchar la posición del desplazador o la orientación del giroscopio: la experiencia se representará en el lienzo HTML5 creado anteriormente, cuyo tamaño puede cambiar. En el caso de la experiencia Superpuesta, el estado de "visualización" pasa a "enElemento". En el caso de la experiencia Sobrevuelo, el estado de "visualización" puede cambiar a "enElemento", "TransiciónAPromoción" o "Promoción", según la posición del desplazador. El valor de este estado ya no cambiará.
6. "Fallido": este estado está ahí para tener en cuenta cualquier problema que pueda haber ocurrido antes de que la experiencia alcance el estado "Listo". El valor de este estado ya no cambiará.
2) Visualización de pegatinas
Si el parámetro "tienePegatina" de la experiencia, que es un booleano, se establece en "true", la experiencia visualiza un icono de pegatina, por ejemplo, como se muestra en la Fig. 11, en la esquina superior derecha del marco superpuesto, que actúa como una marca de agua para el presente producto. Se debe poder hacer clic en este icono, que se visualiza sobre el marco superpuesto y abrir un cuadro de diálogo al hacer clic en él, que ofrece información sobre el producto.
Sin embargo, en caso de que la experiencia tenga un estado de "extensión", cuando su valor sea igual a "Abriendo" o "Cerrando", la pegatina no debería visualizarse. Además, si la experiencia tiene un estado de "visualización", si su valor se establece en "TransiciónAPromoción" o "TransiciónAElemento", tampoco debería visualizarse. Esas especificaciones evitan que el lector se distraiga.
3) Motor de representación de partículas
El SDK según la invención ofrece un motor que representa textos, formas, imágenes y movimientos sobre el marco en el que se visualiza la experiencia: esos elementos se denominan elementos de contenido o "partículas". Las partículas son parámetros de la experiencia.
En las siguientes secciones, "anchoMarco" y "altoMarco" designan respectivamente el ancho y el alto del marco.
a) El porcentaje de animación
Estas partículas se describen y representan según una entrada, que es el "porcentaje de animación". Este porcentaje de animación es un número flotante que debe ser mayor o igual a -100 e inferior o igual a 200. Dado que la representación de una partícula depende del porcentaje de animación, el hecho de que el valor porcentual de la animación pueda variar con el tiempo permite diseñar y declarar animaciones en esas partículas, lo que contribuye a una animación más general asociada a la experiencia.
El valor porcentual de la animación depende de la forma en que esté configurada la experiencia actualmente, es decir, de su "modo":
• cuando se establece en "desplazamiento", el porcentaje de animación es igual al porcentaje de visualización, lo que permite diseñar una experiencia que siga la posición del desplazador, generando así un efecto de movimiento de desplazamiento;
• cuando se establece en "congelado", el porcentaje de animación es fijo, cuyo valor se define mediante un atributo declarado en la descripción de la experiencia, en un valor porcentual establecido entre -100 y 200, lo que permite diseñar experiencias cuya representación sea fija;
• cuando se establece en "tiempo", el porcentaje de animación es igual a un valor igual a "min (100, duración* 100/duración Animación)" ("min" es la función "mínimun" lógica entre dos valores), donde "duración" es el tiempo transcurrido en milisegundos desde que se produjo un "evento desencadenante" y "duraciónAnimación" es un entero positivo que indica en milisegundos cuánto debe durar la animación. La detección del "evento desencadenante" se supervisa en tiempo real y su cálculo se configura mediante un atributo de "conditions" (las explicaciones se proporcionan a continuación). De esta manera, se diseña la experiencia para ejecutar animaciones, cuyo desplazador de progreso aumenta automáticamente con el tiempo;
• cuando se establece en "en-desplazamiento", el porcentaje de animación es igual a "desplazamientoVertical * 100/ desplazamientoVerticalAnimación", donde "desplazamientoVertical" es la cantidad de movimiento de desplazamiento vertical, expresado en píxeles, que ha realizado el usuario final mientras el puntero del desplazamiento está colocado sobre el marco de la experiencia y "desplazamientoVerticalAnimación" es un entero positivo que indica cuánto desplazamiento vertical se debe utilizar de forma acumulativa para tener en cuenta que el porcentaje de animación es igual a 100. De esta manera, se diseña la experiencia para proponer al usuario final un efecto de animación de exploración;
• cuando se establece en "manual", el porcentaje de animación se calcula mediante una función externa, que proporciona el integrador a través de un nombre de función de JavaScript dedicado declarado en el atributo "redisplay-params" del elemento HTML "img" correspondiente a la experiencia. El motor de representación del SDK invoca este método de devolución de llamada en tiempo real y debería devolver un valor entre -100 y 200 de forma constante. De esta manera, se diseña la experiencia de modo que su progresión de animación depende totalmente de una rutina personalizada extranjera: la rutina que calcula el porcentaje de animación puede estar vinculada a cualquier entrada, como el sensor giroscópico, la fecha y la hora, la geolocalización detallada o cualquier algoritmo personalizado creado por el integrador. Además, de esta manera, el elemento "img" HTML de experiencia utilizado como marcador de posición puede colocarse en cualquier parte del contenido, moverse, normalmente cuando está en el flujo de contenido, o ser fijo, por ejemplo, superpuesto o incluso en filigrana, lo que amplía considerablemente los casos de uso de integración de la invención.
b) El proceso de experiencia, bloques de ejecución y las pistas
Durante la vida útil de una experiencia, su "modo" puede variar según la hora o las entradas del usuario final: el atributo "process" declarado en la descripción de la experiencia indica los distintos modos que el motor debe ejecutar uno tras otro mediante el atributo "process.scores": cada "bloque de ejecución" indica su atributo "conditions", que es una expresión lógica que se evalúa en tiempo real e indica si el bloque de ejecución debe empezar.
Además, el bloque de ejecución contiene un atributo "trackld", que es un identificador de cadena que indica en qué "pista" se definen las partículas del bloque de ejecución para el bloque de ejecución: la descripción de la experiencia contiene los atributos "tracks", que son una serie de atributos de "pista". Cada pista declara un atributo identificador "id" y los atributos "texts", "shapes", "images" y "motion", que son partículas. De esta manera, a cada bloque de ejecución se adjuntan instrucciones de representación, la "pista", reunidas en declaraciones de partículas distintas y específicas. El hecho de que las pistas se declaren de forma independiente y se haga referencia a ellas mediante el atributo "trackld" permite reutilizar la misma pista para diferentes bloques de ejecución.
Como se ha mencionado, el bloque de ejecución anterior "conditions" es una expresión booleana: toma como argumentos los siguientes parámetros: "porcentajeVisibilidad", "porcentajeDesplazamiento", "porcentajeVisualización", "duraciónEnMilisegundosInactivo" (que es la duración en milisegundos desde que el desplazamiento vertical del usuario final no ha cambiado) y "duraciónEnMilisegundosVisualización", que es la duración acumulada de los marcos temporales, mientras que el "porcentajeVisibilidad" es igual a 100, es decir, el marco de experiencia es totalmente visible.
Tenga en cuenta que esos parámetros podrían ampliarse.
Tan pronto como la evaluación de la expresión de condiciones devuelva "true", se considerará que el bloque de ejecución se ha iniciado, el bloque de ejecución anterior se detiene y el motor envía simultáneamente un "evento desencadenante" para el bloque de ejecución recién iniciado. A partir de este momento, se considera que el bloque de ejecución está en marcha, y un bloque de ejecución se está ejecutando como máximo al mismo tiempo.
Gracias a la declaración de múltiples bloques de ejecución que el motor SDK inicia uno tras otro en función de las condiciones en tiempo real, la experiencia puede diseñarse a fin de proporcionar una serie de experiencias internas sucesivas e interrumpibles para el usuario final que se comportan y reaccionan de manera diferente a los estímulos del usuario final y al tiempo, por un lado, y que se representan de manera totalmente diferente por el otro, porque su representación depende de las partículas del bloque de ejecución definidas en su pista asociada. Además, gracias al modo "manual" de bloque de ejecución, el responsable de la integración puede configurar libremente la progresión de la animación en tiempo real, lo que permite mezclar situaciones en las que el SDK calcula el porcentaje de animación de forma totalmente autónoma, o cuando este cálculo se define mediante una rutina personalizada, pero también mezclar el posicionamiento y el anclaje del elemento HTML "img" que se utiliza como marcador de experiencia.
c) La representación de partícula
En un momento dado, como se explicó anteriormente, solo se tienen en cuenta las partículas correspondientes al bloque de ejecución actual para que la experiencia esté dentro de su marco.
Estas partículas se representan según el porcentaje de animación, es decir, su posición, tamaño, color, opacidad y orientación dependen de ese valor. Cada partícula puede adoptar uno de dos estados que indican cómo debe representarse, correspondiendo cada estado a un valor porcentual de visualización, y el motor es responsable de calcular el estado de la partícula para un valor porcentual de visualización diferente de cualquiera de los dos estados mediante una interpolación matemática.
La representación de partículas se realiza en la penúltima etapa del proceso de representación de la experiencia, es decir, después de que las imágenes de la experiencia se hayan visualizado en el marco, pero antes de las animaciones de hacer clic para abrir o hacer clic para actuar, de modo que estos últimos queden superpuestos.
d) El atributo "order"
A cada partícula se le asigna un atributo de "order", que permite al motor calcular el orden en el que se deben representar todas las partículas y, por lo tanto, proporciona un mecanismo de representación adicional basado en capas. El motor utiliza este valor para saber en qué orden deben visualizarse las partículas, sea cual sea su tipo: itera sobre todas las partículas, representa cada una de ellas secuencialmente, la que tenga el valor más bajo se representará primero.
e) Los atributos "from" y "to" (umbrales de representación)
Para que el motor de representación del SDK calcule el estado de la partícula en función del porcentaje de animación, cada partícula recibe dos referencias mediante los atributos "from" y "to", que son dos objetos JSON que tienen la misma estructura e indican, respectivamente, los estados inicial y final de su representación: este objeto de estado de objeto JSON contiene atributos que son todos valores numéricos, como su posición, dimensiones, orientación, opacidad y color. En el caso del color, se puede considerar como un triple de valor numérico, siendo cada color de canal, es decir, rojo, verde y azul, un valor numérico.
Los parámetros "from" y "to" siempre contienen al menos el parámetro interno "percentage": es un número que va de -100 a 200, lo que representa un porcentaje de visualización. El "from" y el "to" contienen otros atributos que describen el estado de la representación de las partículas: cuando el porcentaje de visualización es igual a "percentage", la partícula se representa según su estado correspondiente.
• Cuando el porcentaje de visualización es igual al valor "from.percentage", que es un número entero que oscila entre -100 y 200, la partícula se visualiza en el marco con los parámetros definidos en el objeto "from".
• Cuando el porcentaje de visualización es igual al valor "to.percentage", que es un número entero que oscila entre -100 y 200, la partícula se visualiza en el marco con los parámetros definidos en el objeto "to".
• Cuando el porcentaje de visualización es superior a "from.percentage" e inferior a "to.percentage", el representador calcula el estado de la partícula según los atributos definidos en los parámetros "from" y "to" como una interpolación entre sus valores "from" y "to", definidos por el atributo "interpolator" de la partícula (cuya explicación se proporciona a continuación).
• Cuando el porcentaje visualizado es inferior a "from.percentage" o cuando es mayor que "to.percentage", la partícula no se representa.
Para posicionar la partícula en el marco, cada estado define un "punto de referencia", a través de sus coordenadas "x" e "y", junto con la forma en que se utilizará este "punto de referencia" al visualizar la partícula: por lo tanto, el estado contiene los siguientes atributos:
• "x": un número flotante, interpretado como un porcentaje, que indica el porcentaje horizontal del ancho del marco que se utiliza para calcular la posición horizontal del "punto de referencia" de la partícula, desde el borde izquierdo del marco. A partir de este valor, calculamos la "abscisa" igual a x * anchoMarco/100;
• "xAlign": una cadena que toma un valor entre "inicio", "medio" y "final", lo que indica cómo se debe interpretar el valor "x" anterior:
<o>cuando "xAlign" es igual a "inicio", la partícula se visualizará a la derecha de "abscisa", lo que permite establecer una alineación horizontal a la izquierda;
<o>cuando "xAlign" es igual a "medio", el centro de la partícula se visualizará en "abscisa", lo que permite centrarla horizontalmente;
<o>cuando "xAlign" es igual a "final", la partícula se visualizará a la izquierda de "abscisa", lo que permite establecer una alineación horizontal derecha;
• "y": un número flotante, interpretado como un porcentaje, que indica el porcentaje vertical de la altura del marco que se utiliza para calcular la posición vertical del "punto de referencia" de la partícula, desde el borde superior de la experiencia. A partir de este valor, calculamos la "ordenada" igual a y * altoMarco/100; • "yAIign": una cadena que toma un valor entre "inicio", "medio" y "final", que indica cómo se debe interpretar el valor "y" anterior:
<o>cuando "yAlign" es igual a "inicio", la partícula se visualizará debajo de la "ordenada", lo que permite establecer una alineación vertical superior;
<o>cuando "yAlign" es igual a "medio", el centro de la partícula se visualizará en "ordenada", lo que permite centrarla verticalmente;
<o>cuando "yAlign" es igual a "final", la partícula se visualizará por encima de la "ordenada", lo que permite establecer una alineación vertical inferior.
Cada estado también define los siguientes atributos:
• "rotation": un número flotante, expresado en grados, que representa el ángulo entre la línea base horizontal de la partícula y el eje de abscisas, que se utilizará al visualizar la partícula;
• "alpha": un número flotante entre 0 y 100, que indica la transparencia de la partícula. 0 significa 0%, es decir, que la partícula es totalmente transparente y, por lo tanto, no visible una vez visualizada, 100 significa 100%, es decir, que la partícula es totalmente opaca.
La forma en que se expresan el tamaño y el color de la partícula depende de la naturaleza de la partícula. f) Los interpoladores
El SDK define los interpoladores, que son funciones matemáticas que toman un número entre 0 (0%) y 100 (100%) como entrada y que generan un número:
1. cuando la entrada es igual a 0, la salida debe ser igual a 0,
2. cuando la entrada es igual a 100, la salida debe ser igual a 100,
Cada función es continua. Cada interpolador recibe un nombre entre los valores "lineal", "EaseInQuart", "EaseOutQuart", "EaseInOutQuart", "EaseInOutQuad", "EaseInOutback", "EaseNBackoutQuad", "EaselNQuadOutback", "EaselNoutSine", "EaselNoutCubic", "EaseInOutCubic" OutCubic", "EaseOutCirc", "EaseOutQuad", "EaseOutSmooth", "EaseOutSmoothBack", "EaseOutSmoothBack", "EaseOutElastic", "EaseOutBounce" correspondientes a un CSS función de temporización de animación. una implementación adicional puede proporcionar que las cuatro coordenadas cúbicas de la curva de Bézier se introduzcan para calcular la interpolación.
Se puede definir un interpolador para cada partícula y, cuando no está definido, se selecciona el "linear" como valor implícito predeterminado, siendo el interpolador "linear" la función de identidad. Como se explicó anteriormente, el interpolador se usa para calcular el estado de una partícula que consta de dos estados definidos, cada estado corresponde a un valor porcentual de visualización y se define mediante los atributos "from" y "to". Cuando el porcentaje de visualización es superior o igual a "from.percentage" e inferior o igual a "to.percentage", el porcentaje utilizado para calcular el estado de los atributos de las partículas se calcula con la fórmula "function ((porcentajeVisualización- from.percentage)/(to.percentage - from.percentage))", donde "function" es la función correspondiente al interpolador.
Dados los estados definidos "from" y "to" para una partícula y un porcentaje de visualización superior o igual a "from.percentage" e inferior o igual a "to.percentage", el motor de representación del SDK calculará los valores de cada valor numérico de sus atributos de la partícula mediante la aplicación de la función de interpolación: para el atributo "attr", su valor calculado será igual a "(1 - interpolador) * from.attr interpolador * a.attr". De esta forma, el SDK puede calcular y, a continuación, representar cada partícula para cualquier valor porcentual visualizado. g) Los textos
Por "texto" se entiende una serie de caracteres que se visualizan de izquierda a derecha, utilizando una fuente específica para su representación.
El parámetro de experiencia "texts" es una matriz de objetos JSON que describen cada texto. A continuación se muestran los atributos de un único elemento de "text", además de los atributos "order", "interpolator", "from" y "to" comunes a todas las partículas:
• "text": se trata de una cadena de caracteres que representa el texto que se va a visualizar;
• "fontUrl": esta es la ubicación en Internet de la fuente utilizada para representar el texto. Los formatos admitidos son WOFF, WOFF2, OTF, TTF. Durante la fase de carga de la experiencia, el SDK descarga la definición de fuente si aún no está disponible en la memoria intermedia del navegador de Internet.
Los parámetros "from" y "to" contienen los siguientes parámetros internos:
• "textSize": un número flotante nulo o positivo que indica qué tan alto o ancho se visualiza el texto, según el parámetro "TextSizeComputation";
• "textSizeComputation": una cadena que toma un valor entre "completo Horizontal", "únicoHorizontal", "completoVertical" y "únicoVertical", que indica cómo se debe interpretar el valor "textSize" anterior:
<o>cuando "textSizeComputation" es igual a "completo Horizontal", se calculará la altura del texto de modo que el ancho del texto que se visualiza en el marco sea igual a textSize * anchoMarco/100;
<o>cuando "textSizeComputation" es igual a "únicoHorizontal", se calculará la altura del texto de modo que el ancho del texto que se visualiza en el marco de cada carácter de texto sea igual a textSize * anchoMarco/100;
<o>cuando "textSizeComputation" es igual a "completoVertical", la altura del texto es igual a textSize * altoMarco/100;
<o>cuando "textSizeComputation" es igual a "únicoVertical", la altura del texto es igual a textSize * anchoMarco/100;
• "textColor": una cadena que representa un color rojo-verde-azul-alfa, expresado en el modelo de color RGB (véase https://en.wikipedia.org/wiki/RGB_color_model), que indica el color que se utilizará al visualizar el texto.
h) Las formas
Una "forma" debe entenderse como una forma geométrica regular.
El parámetro de experiencia "shapes" es una matriz de objetos JSON que describen cada forma: las formas posibles son, por ejemplo, rectángulos, elipses y líneas poligonales. Aquí están los atributos de un elemento de "shape" único, además de los atributos "order", "interpolator", "from" y "to" comunes a todas las partículas:
• "shape": se trata de una cadena que representa el tipo de forma y que tiene un valor entre "rectángulo", "elipse" y "polilínea".
Los parámetros "from" y "to" contienen los siguientes parámetros internos, además de los atributos "percentage", "x", "y", "xAlign", "yAlign", "rotation" y "opacity":
• "ancho": cuando la forma no es una "polilínea", un número flotante positivo o nulo que es el porcentaje del ancho del marco para indicar el ancho de la forma. A partir de este valor, se calcula un ancho de forma igual a ancho * anchoMarco/100;
• "alto": cuando la forma no es una "polilínea", un número flotante positivo o nulo que es el porcentaje del alto del marco para indicar el alto de la forma. A partir de este valor, se calcula una altura de forma igual a alto * altoMarco/100;
• "vértices": cuando la forma es una "polilínea", una serie de números flotantes de abscisas y ordenadas, expresados respectivamente con respecto a la anchura y la altura del marco, que definen los vértices de las líneas poligonales, un segmento que se visualiza entre dos vértices consecutivos;
• "color": una cadena que representa un color rojo-verde-azul-alfa, expresado en el modelo RGBColor, que indica el color que se utilizará al visualizar la forma.
i) Las imágenes
Una "imagen" debe entenderse como un mapa de bits, es decir, una serie de píxeles en un marco rectangular, teniendo cada píxel un color expresado en el modelo de color RGBA.
El parámetro de experiencia "imágenes" es una matriz de objetos JSON que describe cada imagen. Aquí están los atributos de un elemento de "imagen" único, además de los atributos "order", "interpolator", "from" y "to" comunes a todas las partículas:
• "url": se trata de una cadena que es la URL en la que se define la imagen y se puede acceder a ella.
Durante la fase de carga de la experiencia, el SDK descarga esta imagen a través de la plataforma rePictuR, si aún no está disponible en la memoria intermedia del navegador de Internet, al tiempo que conserva la relación entre ancho y alto de la imagen original;
• "format": una cadena que indica en qué formato se debe recuperar la imagen, siendo los posibles valores "JPEG", "PNG", "WEBP" y "GIF";
• "quality": un número entero comprendido entre 1 y 100, que indica la calidad de la imagen en el caso de un formato sin pérdidas, es decir, para "JPEG" y "WEBP";
• "sizeComputation": una cadena que indica cómo se calcularán las dimensiones de la imagen, que puede tomar el valor "horizontal" o "vertical".
Los parámetros "from" y "to" contienen los siguientes parámetros internos, además de los atributos "percentage", "x", "y", "xAlign", "yAlign", "rotation" y "opacity":
• "size": un número flotante nulo o positivo que es el porcentaje del ancho del marco cuando "SizeComputation" es igual a "horizontal" o de la altura del marco cuando "SizeComputation" es igual a "vertical", para indicar las dimensiones de la imagen. A partir de este valor, se calcula una dimensión igual a "size * dimensión/100", donde "dimensión" es igual a "anchoMarco" o "altoMarco" según "sizeComputation", que se pasa al servidor de cambio de tamaño de rePictuR al recuperar la imagen.
En las figuras 12A-12E se ilustran diversas representaciones que implican texto y rectángulos.
j) Los movimientos
Un "movimiento" debe entenderse como una serie de fotogramas ordenados de las mismas dimensiones, siendo cada fotograma un mapa de bits que es una serie de píxeles en un fotograma rectangular, teniendo cada píxel un color expresado en el modelo de color RGBA. El movimiento se puede plasmar mediante una imagen GIF animada o mediante cualquier vídeo, sea cual sea su formato y codificación. El motor del SDK solo representará un fotograma del movimiento. El cálculo del fotograma seleccionado se define mediante el atributo de estado "motionCursor", que ofrece una experiencia de barrido de vídeo a medida que el usuario final se desplaza verticalmente.
El parámetro de experiencia "motions" es una matriz de objetos JSON que describen cada movimiento. Aquí están los atributos de un elemento de "motion" único, además de los atributos "order", "interpolator", "from" y "to" comunes a todas las partículas:
• "url": se trata de una cadena que es la URL en la que se define el activo movimiento y se puede acceder a ella. Durante la fase de carga de la experiencia, el SDK la descarga a través de la plataforma rePictuR,
• si aún no está disponible en la memoria intermedia del navegador de Internet, que cambia el tamaño de todos sus fotogramas y conserva la relación entre ancho y alto del movimiento original. En el caso de un vídeo, el rePictuR también lo codifica en el formato compatible con el navegador;
• "sizeComputation": una cadena que indica cómo se calcularán las dimensiones del movimiento, que puede tomar el valor "horizontal" o "vertical".
Los parámetros "from" y "to" contienen los siguientes parámetros internos, además de los atributos "percentage", "x", "y", "xAlign", "yAlign", "rotation", "opacity":
• "size": un número flotante nulo o positivo que es el porcentaje del ancho del marco cuando "SizeComputation" es igual a "horizontal" o de la altura del marco cuando "SizeComputation" es igual a "vertical", para indicar las dimensiones del movimiento. A partir de este valor, se calcula una dimensión igual a "size * dimensión/100", donde "dimensión" es igual a "anchoMarco" o "altoMarco" según "sizeComputation", que se pasa al servidor de cambio de tamaño de rePictuR al recuperar la imagen.
• "motionCursor": un número flotante entre 0 y 100, que indica el marco de movimiento utilizado al representar el movimiento. Si el movimiento está compuesto por N fotogramas, el fotograma seleccionado será el que esté en la posición "N * (motionCursor/ 100)".
k) Un ejemplo de descripción de una experiencia
Para ilustrar todos los parámetros de descripción de la experiencia, a continuación se muestra un ejemplo de descripción de una experiencia, que implica una descripción de la experiencia que cumple con la "versiónEsquema" 8, que es un Substicial, compuesto por 1 bloque de ejecución y 1 pista con 1 capa, en la que se declaran 1 partícula de texto, 2 partículas en forma de rectángulo, 1 partícula de imagen y 1 partícula de movimiento.
{
"modelVersion": 8,
"type": "understitial",
''sources": [ { "url":
"http://shared.koppasoft.com/patent/nature.jpg" } ],
"format": "JPEG", "percentage": 80, "actionürl":
"https://www.koppasoft.com",
"process":
{
"scores": [ { "id": "default", "mode": "scrolling", "programs": [
{ "trackld": "default" } ] } ]
},
"tracks":
[
{
"id": "default",
"layers":
[
{
"depth": 1,
"texts":
[
{
"order": 2, "text": "TEXT", "font": "reDisplay", "fontUrl": "https://storage.googleapis.com/understitieltest/Digitalt.ttf",
{
l) Las métricas de uso
El SDK según la invención monitoriza en tiempo real la posición del marco de experiencia en su ventana gráfica, así como las interacciones del usuario final: esto es necesario para su proceso de representación interno y para reaccionar adecuadamente a los estímulos de entrada del usuario final.
El SDK aprovecha esta supervisión en tiempo real y puede recopilar y enviar eventos de métricas para cada experiencia. También es posible suscribirse a todos esos eventos, excepto al de "Solicitud", que se activa en el servidor, mediante un mecanismo de devolución de llamada de JavaScript que permite suscribirse en tiempo real a esos eventos: esto permite conectar las métricas a cualquier sistema de análisis externo al que el integrador pueda necesitar recurrir.
A continuación se muestran los eventos que se activan para una experiencia durante su ciclo de vida:
• "Solicitud": este evento se desencadena en el servidor, no en el SDK, cuando el servidor de oficina administrativa recibe una solicitud para entregar la descripción de la experiencia.
• "Carga": este evento se activa tan pronto como la experiencia se haya cargado correctamente. Este evento se activa independientemente de si la experiencia está visible en su ventana gráfica o no. Sin embargo, si la experiencia no se carga, no se activará.
• "Visualización": este evento se activa tan pronto como el marco de experiencia esté visible al menos un porcentaje determinado en su ventana gráfica. Este porcentaje se define en la descripción de la experiencia mediante el atributo "metrics.displayPercentage". De esta forma, el diseñador de la descripción de la experiencia puede indicar que la experiencia se habrá "visualizado" al usuario final siempre que haya sido visible un mínimo de su superficie.
• "Vista": este evento se activa tan pronto como la experiencia esté completamente visible al menos durante un tiempo determinado en su ventana gráfica. Esta duración se define en la descripción de la experiencia mediante el atributo "metrics.viewDurationLnMilliseconds". De esta forma, el diseñador de la descripción de la experiencia puede indicar que la experiencia habrá sido "vista" por el usuario final, siempre que haya estado totalmente visible durante un tiempo mínimo.
• "Desplazar": este evento se activa en cuanto el usuario final se desplaza hacia arriba y hacia abajo mientras la experiencia está visible en su ventana gráfica. Por el momento, este informe de comportamiento no se puede personalizar. De esta forma, podemos detectar si el usuario final ha estado "jugando" con la experiencia.
• "Abierto": este evento se activa tan pronto como el usuario final hace clic en el marco de la experiencia, siempre que se defina el atributo "actionUrl" de la experiencia. De esta forma, podemos registrar cuándo el usuario final ha abierto el contenido detrás de la experiencia.
El hecho de que la descripción de la experiencia ofrezca la oportunidad de indicar qué porcentaje de su marco debe visualizarse y el tiempo mínimo durante el cual es totalmente visible para el usuario final, permite definir los criterios de rendimiento.
Una vez que esos eventos se han activado y recopilado localmente, se envían a la oficina administrativa a través de un servicio web. Este último almacena todos esos eventos.
En los SDK móviles y de JavaScript, cuando el dispositivo no tiene conexión a Internet, los eventos se almacenan localmente y se devuelven una vez que se restablece la conexión a Internet. Además, para minimizar el consumo del dispositivo (CPU, ancho de banda), puede ocurrir que los eventos se envíen por lotes.
m) Acción de clic
Si se define el parámetro "actionUrl" de la experiencia, cuando el usuario final haga clic en el marco, el SDK abrirá el contenido relacionado con la URL a la que hace referencia el parámetro "actionUrl", a través de una nueva pestaña del navegador de Internet o de una pantalla de aplicación móvil dedicada si la ActionUrl es un "enlace profundo". Cualquier animación de clic para pasar a la acción existente se detiene inmediatamente.
5) Principios comunes a las experiencias de usuario de "Superpuesto" y "Sobrevuelo"
A continuación se describirán varias experiencias. Entre esas experiencias, las experiencias "Superpuesto" y "Sobrevuelo" consisten en visualizar una parte de una "imagen promocional" sobre una imagen "ilustrativa". En este párrafo, nos centramos en la forma en que se gestiona la imagen promocional, los estados del flujo de trabajo de la experiencia y la forma en que se visualiza, para evitar que se repita este proceso cuando las describamos. Por lo tanto, se hará referencia a las tres próximas secciones al describir las experiencias "Superpuesto" y "Sobrevuelo". En consecuencia, no es necesario leerlos ahora, sino leerlos cuando se hace referencia a ellos.
6) Gestión de imágenes promocionales
La imagen de la ilustración se define mediante un elemento HTML nativo "img", por lo que es responsabilidad del navegador de Internet cargarla.
La imagen promocional se define a través de su URL, mediante el parámetro "source".
En la mayoría de los casos, las dimensiones de la imagen promocional pueden no ser las mismas que las de la ilustración: la experiencia utilizará el servicio rePictuR con el parámetro "render" establecido en "bandeja de salida" para recuperar una forma de la imagen promocional con el mismo ancho o la misma altura que la imagen de la ilustración, y la otra dimensión mayor o igual, que denominamos "imagen promocional redimensionada". Hay dos casos:
• o la proporción ancho/alto de la imagen de la ilustración es mayor o igual a la proporción ancho/alto de la imagen promocional: en ese caso, que se denominará caso de "proporción mayor", la imagen promocional redimensionada tendrá el mismo ancho que la imagen de la ilustración y una altura mayor;
• o la proporción ancho/alto de la imagen de la ilustración es menor o igual a la proporción ancho/alto de la imagen promocional: en ese caso, que se denominará caso de "proporción menor", la imagen promocional redimensionada tendrá el mismo ancho que la imagen de la ilustración y una anchura mayor;
Ambos casos se ilustran en la figura 13.
Esto significa que la imagen promocional redimensionada tendrá una superficie mayor o igual que la imagen de la ilustración, pero se garantiza que una de sus dimensiones sea igual a su dimensión correspondiente en la imagen de la ilustración. En consecuencia, cuando la imagen de la ilustración se sustituya o sobrescriba por la imagen promocional redimensionada, solo se visualizará un fragmento de la misma, dado que la experiencia mantendrá exactamente el mismo espacio que la imagen de la ilustración para visualizar la imagen promocional redimensionada
Durante el resto de la descripción de la experiencia, llamaremos "imagen superpuesta" a esta "imagen promocional redimensionada" por motivos de brevedad, y al marco que inicialmente envolvía la imagen de la ilustración como "marco superpuesto".
7) Estados de flujo de trabajo de experiencia
Además del estado de "carga" común descrito anteriormente, el SDK mantiene dos estados internos adicionales para la experiencia, los estados de "visualización" y "extensión", a fin de determinar qué posible transición de estado del flujo de trabajo se puede aplicar para encarnar la experiencia, una vez que se haya cargado correctamente.
El lienzo HTML5 creado tiene las mismas dimensiones que el elemento HTML "img", que es la imagen de la ilustración.
a) el estado de "visualización"
Para la experiencia de "superposición" que se describe a continuación, a continuación se muestran los posibles valores del estado de "visualización", como se ilustra en la figura 14A.
1. "Ninguna": este es el estado inicial, que permanece mientras el estado de "carga" no sea igual a "Listo". Tan pronto como el estado de "carga" sea igual a "Listo", el estado pasa a "enElemento".
2. "enElemento": este estado indica que la imagen de la ilustración se visualiza exclusivamente en el marco superpuesto. Tan pronto como se cumplan las condiciones requeridas, descritas en la sección "Condiciones requeridas para la animación de transición de apariencia", para que se ejecute la animación de transición de experiencia, el estado pasa a "TransiciónAPromoción".
3. "TransiciónAPromoción": este estado es un estado transitorio durante la animación de transición de la experiencia que se reproduce, que se explica en la sección "Animaciones de transición de aparición y desaparición de imágenes superpuestas". Una vez finalizada la animación, el estado pasa a "EnPromoción".
4. "EnPromoción": este estado indica que se está visualizando la superposición de experiencias. Tan pronto como se cumplan las condiciones necesarias, que se describen en la sección "Acción de cierre de la promoción abierta", su estado pasa al estado "TransiciónAElemento".
5. "TransiciónAElemento": este estado es un estado transitorio durante la animación de transición de la experiencia que se explica en la sección "Animaciones de transición de aparición y desaparición de imágenes superpuestas". Tan pronto como se complete la animación, el estado vuelve a "EnElemento".
Para la experiencia "Sobrevuelo", estos son los posibles valores del estado de "visualización", como se ilustra en la figura 14B.
1. "Ninguna": este es el estado inicial, que permanece mientras el estado de "carga" no sea igual a "Listo". Tan pronto como el estado de "carga" sea igual a "Listo", el estado pasa a otro estado, entre los tres valores siguientes.
2. "EnElemento": este estado corresponde a la situación en la que la imagen de la ilustración se visualiza exclusivamente en el marco superpuesto. Este estado permanece mientras 0 < porcentajeVisibilidad < porcentajeInicio o porcentajeFin < porcentajeVisibilidad < 100.
3. "TransiciónAPromoción": este estado corresponde a la situación en la que la imagen de la ilustración se visualiza parcialmente pero no cubre por completo el marco superpuesto. Este estado permanece mientras porcentajeInicio < porcentajeVisibilidad < porcentajeMásBajo o porcentajeMásAlto < porcentajeVisibilidad < porcentajeFin.
4. "EnPromoción": este estado corresponde a la situación en la que la imagen de la ilustración cubre totalmente el marco superpuesto. Este estado permanece mientras porcentajeMásBajo < porcentajeVisibilidad < porcentajeMásAlto.
b) El estado de "extensión"
A continuación se muestran los posibles valores del estado de "extensión", como se ilustra en la figura 15.
1. "Ninguna": este es el estado inicial, que permanece mientras el estado de "visualización" no sea igual a "EnPromoción". Cuando el estado se establece o se restablece a ese valor, la animación clic para abrir se ejecuta una vez, tal y como se describe en la sección "Animación clic para abrir promoción". Tan pronto como el usuario final realiza una acción específica descrita en la sección "Animación de apertura de la promoción", el estado pasa a "Abriendo".
2. "Abriendo": se trata de un estado transitorio que dura mientras se esté ejecutando la animación, descrita en la sección "Animación de apertura de la promoción". Una vez completado, el estado pasa al estado "Abierto".
3. "Abierto": se trata de un estado que permanece mientras el usuario final no haya realizado ninguna acción, descrita en la "Acción de cierre de la promoción", para cerrar la promoción abierta; en este último caso, pasa a "Cerrando". Tan pronto como la experiencia alcance ese estado, se ejecutará una animación con un clic para actuar, tal y como se describe en la sección "Animación clic para actuar promoción". El usuario final puede realizar una acción específica descrita en la sección "Acción de clic en la promoción".
4. "Cerrando": se trata de un estado transitorio que dura mientras se esté ejecutando la animación, descrita en la sección "Animación de cierre de promoción abierta". Una vez finalizada esta animación, el estado vuelve a "Ninguna".
8) Visualización dinámica de imagen superpuesta
Cuando el estado de "visualización" es "EnPromoción" y el estado de "extensión" es "Ninguno", la imagen superpuesta se visualiza sobre la imagen de la ilustración y su superficie cubre totalmente el marco superpuesto: decimos que la "promoción es visible". Tenga en cuenta que cada píxel que tenga algo de transparencia en la imagen de promoción permitirá ver el píxel de la imagen de la ilustración que se encuentra actualmente debajo de ella. Esto significa que la imagen de la ilustración se reemplaza por una parte de la imagen superpuesta, y esta parte depende dinámicamente de la posición del desplazador. De hecho, la experiencia mide en tiempo pseudoreal, escuchando los eventos que revelan un cambio en la posición vertical del desplazador, el porcentaje de desplazamiento de los fotogramas superpuestos: •
• en el caso de una "proporción mayor", la parte visualizada tendrá el mismo ancho que la ilustración, su "compensación" vertical se calculará proporcionalmente al porcentaje de desplazamiento (véanse las figuras 16 y 17);
• en el caso de la "proporción menor", la parte visualizada tendrá la misma altura que la ilustración, su "compensación" horizontal se calculará proporcionalmente al porcentaje de desplazamiento (véanse las figuras 18 y 19).
El valor de este "compensación" depende de dos números extraídos del parámetro "scrollRanges", que es una matriz de números crecientes que van del 0 al 100, que denominamos "porcentajeMínimo" y "porcentajeMáximo", siendo "porcentajeMáximo" mayor que "porcentajeMínimo":
• en el caso de la experiencia de superposición, el Porcentaje mínimo y el Porcentaje máximo son el primer y el segundo valor de los parámetros "ScrollRanges" (que solo contienen esos dos valores);
• en el caso de la experiencia Sobrevuelo, el porcentaje mínimo es el "porcentajeInferior" y el porcentaje máximo es el "porcentajeSuperior".
El valor de esta compensación se establecerá en 0 cuando el porcentaje de desplazamiento sea igual a 0, cuando el porcentaje de desplazamiento sea igual a 100, su valor será igual a la diferencia entre la dimensión de la superposición y la dimensión de las imágenes de ilustración. La dimensión a tener en cuenta será el ancho en el caso de la proporción mayor y la altura en el caso de la proporción más pequeña; llamemos "compensaciónMáxima" a este valor. Para un porcentaje de desplazamiento superior a 0 e inferior a 100, el valor de compensación es una interpolación lineal de los dos valores anteriores, es decir, compensación= (porcentajeDesplazamiento-porcentajeMínimo)/(porcentajeMáximo-porcentajeMínimo) * compensaciónMáxima.
Mientras el estado de "extensión" esté establecido en "Ninguno", la imagen superpuesta siempre se visualizará dentro del marco de la imagen de la ilustración, lo que significa que se truncará si sus dimensiones lo superan.
9) Animación "clic para abrir" promoción
Tan pronto como el estado de "visualización" sea "EnPromoción" y el estado de "extensión" sea "Ninguno", lo que implica que la imagen promocional cubra totalmente el marco de la ilustración, se ejecutará una animación de "clic para abrir" una vez sobre el marco superpuesto.
Esta animación se define mediante el parámetro "animations", que contiene dos atributos:
• "firstClick": este atributo es la URL de la animación que se va a descargar y que se utilizará para la presente animación. Si no se define, se utilizará una animación predeterminada ubicada localmente en el SDK;
• "secondClick": este atributo es la URL de la animación que se va a descargar y que se utilizará para que la animación se ejecute si el usuario final ha tocado el marco superpuesto mientras el estado de "extensión" de la experiencia está establecido en "Abierto". Si no se define, se usará una animación predeterminada ubicada localmente en el SDK.
Como se mencionó anteriormente, la experiencia habrá descargado previamente la definición de animación "firstClick": esta animación se describe en un formato JSON diseñado en la biblioteca bodymovin de JavaScript (véase https://github.com/bodymovin/bodymovin, publicada con una licencia del MIT), que puede interpretar una animación de Adobe After Effects (véase http://www.adobe.com/products/aftereffects.html), previamente traducida mediante el complemento Lottie (véase https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e). Tenga en cuenta que esta animación debe haberse descargado antes de que el estado de la experiencia cambie al estado "Listo". Esta animación es ejecutada por el motor de ejecución de la biblioteca bodymovin, configurado de modo que en cada fotograma de animación que visualiza una función de devolución de llamada del SDK específica se invoca para borrar y visualizar la visualización del marco superpuesto, a fin de evitar cualquier problema de sobrescritura de la animación.
10) Animación de apertura de la promoción
Mientras la imagen superpuesta se visualice y cubra totalmente el marco de la ilustración, es decir, su estado de "visualización" es igual a "EnPromoción" y su estado de "extensión" igual a "Ninguno", si el usuario final hace clic en ella tocando una pantalla táctil o mediante un dispositivo señalador, la experiencia la abrirá, para visualizar completamente la imagen de la promoción, en el caso de una proporción mayor. En el caso de que la proporción sea menor, el efecto de esta acción pasará directamente a la secuencia de clics en la promoción descrita en la sección "Clics en promociones". Durante esta animación, el estado de "visualización" permanece igual al de "EnPromoción", pero el estado de "extensión" pasa a "Abriendo" y, una vez completado, a "Abierto".
El contenido que se encuentra por encima y por debajo del marco superpuesto se empujará hacia arriba y hacia abajo para aumentar la altura del marco superpuesto, mientras que la posición del desplazador se actualizará de modo que el centro de la superposición esté en el centro de la ventana gráfica. Este proceso se realizará progresivamente a través de una transición suave durante la cual se activará un evento a intervalos regulares y se le asignará un parámetro de "tiempo". Si "N+1" es el número de esos eventos y "duración" es la duración de esta transición expresada en milisegundos, cada evento se activará cada "duración/N" milisegundo, activándose inicialmente un primer evento; si "i" es un ordinal entre 0 y N, para el iésimo evento, su valor de "tiempo" es igual a "i * (100/N)". Durante esta transición:
• la altura del marco superpuesto comienza desde su valor inicial "alturaInicial", en el primer evento, hasta un valor final, "alturaFinal", en el último enésimo evento. Si "alturaImagenSuperpuesta" es la altura de la imagen superpuesta, alturaFinal= math.min((100 - porcentajeLibre) * alturaVentanaGráfica, alturaImagenSuperpuesta), donde "porcentajeLibre" es un parámetro de experiencia, un número mayor o igual a 0 e inferior a 100, que permite evitar que el marco ocupe demasiado espacio vertical. Para el evento "i", su altura será igual a "alturaInicial+ (alturaFinal- alturaInicial) * (i)", de modo que el valor sea una interpolación lineal;
• la posición del desplazador comienza desde su valor inicial "posiciónInicial", en el primer evento, hasta que un valor "posiciónFinal", como la imagen superpuesta, se centra verticalmente, en el último enésimo evento. Para el evento "i", su valor será igual a "posiciónInicial (posiciónFinal- posiciónInicial) * (i)", de modo que el valor sea una interpolación lineal;
11) Animación "clic para actuar" promoción
Tan pronto como la promoción esté abierta, es decir , el estado de "visualización" sea "enPromoción" y el estado de "extensión" sea "Abierto", siempre que se defina el parámetro de experiencia "actionUrl", una animación de "clic para actuar" se repite sin cesar sobre el marco superpuesto. Esta animación se ejecuta en la misma biblioteca bodymovin. La naturaleza de esta animación se define mediante el atributo "SecondClick" descrito en la sección "Animación clic para abrir promoción". Esta animación pide al usuario final que vuelva a hacer clic en el marco superpuesto para redirigirlo al contenido alojado en la URL definida por el parámetro "actionUrl".
12) Acción de clic de promoción
Tan pronto como la promoción esté abierta, es decir, el estado de "visualización" sea "EnPromoción" y el estado de "extensión" sea "Abierto", la experiencia proporciona el mecanismo descrito en la sección general "Acción al hacer clic".
Cuando el usuario final vuelve a centrarse en la experiencia, es decir, si la experiencia se ejecuta a través de un navegador de Internet cuando la pestaña seleccionada es la que abarca la experiencia original, si la experiencia se ejecuta a través de una aplicación móvil nativa cuando el usuario final vuelve a la pantalla en la que se visualizó originalmente la experiencia, la experiencia pasará a la secuencia descrita en la sección "Animación de cierre de la promoción abierta", como si se hubiera realizado una acción visual para cerrarla y proporcionar el efecto que la experiencia se reanude.
13) Acción de cierre de promoción abierta
Tan pronto como la promoción esté abierta, es decir, el estado de "visualización" sea "EnPromoción" y el estado de "extensión" sea "Abierto", si el valor del desplazamiento cambia, la experiencia iniciará la animación descrita en la "Animación de cierre de la promoción abierta". La animación clic para actuar promoción se detiene inmediatamente. Por lo tanto, la experiencia permite al usuario final reanudar su experiencia de lectura de contenido digital sin tener que hacer clic en ningún lugar, sino simplemente desplazándose verticalmente.
14) Animación de cierre de promoción abierta
Cuando se inicia esta animación, el estado de "extensión" se establece en "Cerrando" y, cuando la animación se completa, su estado vuelve a establecerse en "Ninguno" y el estado de "visualización" se establece en "enElemento".
Esta animación es la inversa de la "animación de apertura de promoción", es decir, el marco superpuesto se reducirá progresivamente hasta alcanzar las mismas dimensiones que la imagen de la ilustración, desplazando el contenido de la parte superior del marco superpuesto hacia abajo y el contenido de la parte inferior hacia arriba para rellenar el espacio que antes ocupaba, mientras que, al mismo tiempo, se ejecutará la "animación de transición de desaparición de imágenes superpuestas", para proporcionar una transición fluida al estado original de la ilustración.
Una vez que se vuelve a visualizar la imagen de la ilustración, se visualiza como si no se hubiera visualizado ninguna imagen superpuesta, excepto si tiene un parámetro de "recordatorio", tal como se describe en la sección "Visualización de recordatorio".
La imagen superpuesta ya no se visualizará, es decir, el estado de "visualización" de la experiencia permanecerá en el estado "enElemento", siempre que el porcentaje de visibilidad de la imagen de la ilustración sea superior a 0, es decir, mientras el usuario final pueda ver un solo píxel de la misma en la ventana gráfica. En cuanto este porcentaje sea igual a 0, la experiencia podrá volver a ejecutarse. El parámetro "cuentaVisualizaciónMáxima", que es un entero positivo, controla el número de veces que se puede producir la experiencia: cada vez que la experiencia comienza a ejecutarse, un contador interno (que empieza por el valor 0) aumenta en 1 y, cuando este contador supera este parámetro, la experiencia no se ejecutará más, siempre que no se vuelva a cargar el contenido.
15) Visualización de recordatorio
Si se establece el parámetro "recordatorio" de la experiencia, así como "actionUrl", y se define su atributo "reminder.icon", que es la URL de una imagen, la experiencia visualiza esta imagen (descargada anteriormente durante la fase de carga) sobre el marco superpuesto de la esquina inferior derecha cuando el estado "visualizar” se establece en "enElemento" y si pasó por el estado "enPromoción" en el pasado. El usuario final debe poder hacer clic en esta imagen de recordatorio y, si hace clic en su región, la experiencia realizará la acción descrita en la sección "Clic en promoción". Esta función permite al usuario final ver el contenido de la "ActionUrl".
III - La experiencia "Superpuesto"
1) Perspectiva general
Esta experiencia visualiza una "imagen promocional" encima de una "imagen de ilustración"; su parámetro de "type" es "superposición". La imagen de ilustración se visualiza inmediatamente en el contenido y, según las condiciones, una parte de la imagen promocional aparecerá sobre la imagen de ilustración, ajustándose exactamente al marco de la ilustración, cubriéndolo por completo, con una animación de transición y permanecerá visualizada durante un período de tiempo específico, la posición que se visualiza cambiará mientras cambia la posición del desplazador y, finalmente, desaparecerá con una animación de transición si la posición del desplazador no cambia durante un período de tiempo determinado. Cuando se visualiza la imagen promocional, el usuario final puede hacer clic en ella (mediante un evento en la pantalla táctil o un clic del ratón), lo que la ampliará y revelará todo su contenido. Si el usuario final vuelve a hacer clic en él mientras está expandida, se abrirá un contenido. De lo contrario, si el usuario final no realiza ninguna acción, la imagen promocional desaparecerá y se sustituirá por la imagen de la ilustración inicial, con un recordatorio opcional.
La forma en que se gestiona la imagen promocional se describe en la sección "Gestión de imágenes promocionales".
2) Representación
Dos representaciones ejemplares de esta experiencia, es decir, "Superposición vertical" y "Superposición horizontal", se muestran en las figuras 20A-20N y 21A-21F de los dibujos, respectivamente.
3) Estados de carga y flujo de trabajo
La forma en que se carga la experiencia y la descripción de los estados y el flujo de trabajo relacionado se describen en la sección anterior "Estados de flujo de trabajo de experiencia".
4) Animaciones de transición para la aparición y desaparición de la imagen superpuesta
La experiencia ejecuta dos animaciones opuestas que se basan en dos imágenes, etiquetadas como "primera imagen" y "segunda imagen":
1. antes de visualizar la imagen de promoción, en las condiciones descritas en la sección "Condiciones requeridas para la animación de transición de aparición", la primera imagen es la imagen de ilustración, la segunda imagen es la imagen superpuesta y esta animación se denomina "animación de transición de aparición";
2. y antes de dejar de visualizar la imagen de la promoción, es decir, volver a visualizar la imagen de la ilustración, en las condiciones descritas en la sección "Cierre visible de la promoción", la primera imagen es la imagen superpuesta y la segunda es la imagen de ilustración, y esta animación se denomina "animación de transición de desaparición".
Consideramos la imagen superpuesta y no la imagen de promoción completa, porque solo la imagen superpuesta tiene las mismas dimensiones que la imagen de ilustración y el marco superpuesto. Esto implica que, durante la animación, se monitoriza la posición del desplazador y se calcula la parte de la imagen superpuesta que se tendrá en cuenta con el mismo desplazamiento que el descrito en la sección "Visualización dinámica de imágenes promocionales".
Las dos animaciones son iguales, lo único que cambia es el orden de las dos imágenes en las que se basan y su duración, la segunda se establece preferiblemente en un valor más corto para que el usuario final pueda volver más rápidamente a la imagen de la ilustración.
5) Condiciones requeridas para la animación de transición de aparición
Para que se ejecute la animación de transición de aparición, es decir, su estado de "visualización" sea igual al de "EnPromoción", se deben cumplir ciertas condiciones, que se describen mediante los parámetros de experiencia, como se ilustra en la figura 22.
1. la duración mínima que debe visualizarse la imagen de la ilustración en la pantalla, expresada en milisegundos, que se denomina parámetro "VisualizaciónMínimaIlustraciónEnMilisegundos", abreviado como "DuraciónMínima": mientras no se alcance esta duración, la imagen de ilustración permanecerá visible y la imagen promocional no se revelará al usuario final;
2. el porcentaje de la ilustración que estará visible en la ventana gráfica, expresado en porcentaje de su superficie, que se denomina parámetro "porcentajeActivación": al calcular cuánto tiempo se ha visualizado, si su porcentaje de visibilidad es mayor o igual a ese valor umbral, aumentará el contador de duración.
Tan pronto como se cumplan todas las condiciones anteriores, el estado de "visualización" pasa a ser "TransiciónAPromoción" y se ejecuta una animación de transición que inicialmente visualiza la ilustración y, finalmente, visualiza la imagen superpuesta. Al final de esta animación, el estado de "visualización" es "EnPromoción" y el estado de "extensión" es "Ninguno".
6) La animación de transición
a) Descripción general de la animación de transición
Esta animación de transición depende de un parámetro, denominado parámetro "transición".
Al ejecutar la animación de transición, el SDK calcula su "representación", que es el resultado visual del estado de la animación en cada etapa, que consiste en un mapa de bits de imagen de las mismas dimensiones que el marco superpuesto, denominado "imagen representada de animación", es decir, una serie de colores de píxeles organizados en una cuadrícula de filas y columnas, que se visualizan sobre el marco superpuesto, previamente borrado en cada representación. A cada píxel se le asigna el valor tradicional rojo-azul-verde-alfa que va de 0 a 255, lo que indica que el píxel tiene un valor "alfa", que es el factor de transparencia/opacidad. El alfa de un píxel va desde 0, lo que significa que es totalmente transparente y, por lo tanto, invisible, lo que implica que el fondo en el que se visualiza es totalmente visible, hasta 1, lo que significa que es totalmente opaco y, por lo tanto, eclipsa totalmente el fondo en el que se visualiza. La transparencia es lo opuesto a la opacidad.
Esta "imagen representada por animación" es el resultado de la visualización en un marco del mismo tamaño que el marco superpuesto inicializado con píxeles transparentes, de la primera imagen a la que se aplica una transformación y, a continuación, de la visualización de la segunda imagen a la que se aplica otra transformación, dependiendo las dos transformaciones del porcentaje de progreso.
Para ejecutar la animación de transición, se establece un temporizador para que un evento se active a intervalos regulares, cada evento permite calcular la representación: a este evento se le asigna un valor de "porcentaje de progreso", denominado "porcentajeProgreso", que va desde 0, el inicio de la animación, hasta 1, la finalización de la animación, y este parámetro se incrementa proporcionalmente en el tiempo.
La duración de esta animación se puede personalizar mediante un parámetro denominado "duraciónTransiciónEnMilisegundos": se realiza un nuevo cálculo de la imagen representada en animación a 60 Hz (para garantizar un efecto visual fluido), por lo tanto, el número de representaciones aumentará linealmente con este parámetro de duración.
Hay cinco valores diferentes disponibles para el parámetro "animación" que describimos.
• "ninguno": no se ejecutará ninguna animación y la segunda imagen reemplazará repentinamente a la primera imagen. En ese caso específico, no se utiliza ningún temporizador.
• "opacidad": la animación consiste en visualizar la primera imagen con una opacidad decreciente, es decir, desvaneciéndose, mientras que, al mismo tiempo, la superposición se visualiza sobre la segunda con una opacidad creciente.
• "gris": la animación consiste en visualizar la primera imagen con un tono de gris que aumenta progresivamente mientras su opacidad disminuye, es decir, se desvanece, hasta que solo se visualiza en tonos grises, mientras que, al mismo tiempo, la segunda imagen se visualiza con un tono de gris decreciente y una opacidad creciente.
• "pixelación": la animación consiste en visualizar la primera imagen con un efecto de pixelación creciente mientras su opacidad disminuye, es decir, se desvanece, mientras que, al mismo tiempo, se visualiza la segunda imagen con un efecto de pixelación decreciente y una opacidad creciente. • "ruido": la animación consiste en visualizar la primera imagen con un efecto de ruido creciente mientras su opacidad disminuye, es decir, se desvanece, mientras que, al mismo tiempo, se visualiza la segunda imagen con un efecto de ruido decreciente y una opacidad creciente.
b) La animación de transición "Opacidad"
Para esta animación de transición, las imágenes se visualizan con una opacidad, denominada "opacidad". Para la primera imagen, la fórmula es la siguiente:
• opacidad = 1 - porcentaje de progreso.
En cuanto a la segunda imagen, la fórmula es:
• opacidad = porcentaje de progreso
La figura 23 muestra diferentes ejemplos de animaciones de transición de opacidad.
c) Animación de transición gris
Para esta animación de transición, las imágenes se visualizan con una opacidad, denominada "opacidad", y un tinte gris, denominado "porcentajeGris": este es el mismo proceso que en la animación de "opacidad", más un efecto gris. El efecto gris convierte cada valor de píxel Pf(c, r) de una imagen en un valor nuevo, según la siguiente fórmula:
Pf (c,r) = (Por(,c,r) F r,Pog(c,r) F a,Pob(c,r) F b¡Poa(c,r)), donde
c es la columna de este píxel,
r su fila,
P<o>(c, r), P<og>(c, r), P<o>(c, r) y P<oa>(c, r) respectivamente el valor de los canales rojo, verde, azul y alfa de píxeles, F<r>= (mean - P<or>(c, r)) x porcentajeGris,
F<g>= (mean - P<og>(c, r)) x porcentajeGris,
F<b>= (mean - P<ob>(c, r)) x porcentajeGris,
mean es el valor promedio de los canales rojo, verde y azul de los píxeles, es decir, mean = (P<o>(c, r) P<og>(c, r) P<ob>(c, r)) -f 3.
Para la primera imagen, la fórmula es la siguiente:
• opacidad = 1 - porcentaje de progreso.
• porcentajeGris = Math.min(1, porcentajeProgreso * 2),
lo que implica que la primera imagen se muestre totalmente en gris desde la mitad de la animación.
En cuanto a la segunda imagen, la fórmula es:
• opacidad = porcentaje de progreso
• porcentajeGris = Math.min (0, 1- porcentajeProgreso * 2),
lo que implica que la segunda imagen se muestre totalmente en gris desde la mitad de la animación.
La figura 24 muestra diferentes ejemplos de animaciones de transición de gris.
d) Animación de transición de pixelación
La pixelación de una imagen es un proceso de dos pasos, que se utiliza para esta animación y que ahora explicamos.
El primer paso consiste en considerar una imagen, denominada "imagen de entrada", con dimensiones (ancho, alto) en píxeles y asumir que el ancho y el alto son números enteros y reducirla en un factor entero positivo (normalmente una potencia de 2, es decir, factor = 2<n donde>n es un entero positivo, y normalmente el ancho y el alto son múltiplos de factores), es decir, visualizará en un marco de dimensiones (ancho -f factor, altura) -f factor), que produce una nueva imagen denominada "imagen de tamaño reducido": dado que las dimensiones de la imagen reducida son más pequeñas (un factor<2>más pequeñas) cuando el ancho y la altura son múltiplos de factores) que las de la imagen, sus valores de píxeles se interpolan según la fórmula que se muestra en la figura 24BIS, donde:
P<down>(c, r) es el valor de píxel de la imagen reducida en la posición (c, r), c<E>[1,Math ceil(ancho-ffactor)], r E[0,Math.ceil(altura-ffactor)],
siendo c la columna de este píxel,
rsu fila,
Pinput(i, j)es el valor de los píxeles de la imagen de entrada en la posición(i, j)y
count=(cmax - cxfactor)x(rmax-rxfactor)es el número de píxeles del píxel interpolado. Esta fórmula calcula la media de los píxeles de la imagen alrededor de su vecindad.
El segundo paso visualiza la imagen reducida en un marco de las mismas dimensiones que la imagen, lo que produce una "imagen ampliada": dado que la imagen a escala superior es mayor que la imagen a escala inferior (un factor<2>más grande) cuando el ancho y el alto son múltiplos del factor), su valor de píxeles se interpola según la siguiente fórmula:
PUp (i ,j) — P¿own(Math. f lo o r ( í<-5->f a c to r ) , Math. f loor(J f a c to r ) ) donde Math.floor(x) es el valor entero del suelo de x, siendo P<up>(i, j) el valor del píxel en la posición (i, i), c<E>[1,ancho], rE[1,alto].
Este proceso de pixelación proporciona el efecto visual de que la imagen de entrada se ha ampliado con una pérdida de resolución.
El efecto de animación visualiza las dos imágenes con una "opacidad" y un efecto de pixelación con un "factor": este es el mismo proceso que la animación de "opacidad", además de un efecto de pixelación. Para la primera imagen, la fórmula es la siguiente:
• opacidad = 1 - porcentaje de progreso;
• factor = Math.round (Math.max (1, Math.min (bordeMáximoPixel, bordeMáximoPixel * ((1 - porcentaje) * 2)))), lo que implica que la pixelación de la primera imagen sea máxima desde la mitad de la animación. Para la segunda imagen, la fórmula es la siguiente:
• opacidad = porcentaje de progreso;
• factor = Math.round (Math.max (1, Math.min (bordeMáximoPixel, bordeMáximoPixel * (porcentaje * 2))), lo que implica que la pixelación de la segunda imagen ya no se aplica desde la mitad de la animación.
La figura 25 muestra diferentes ejemplos de animaciones de transición de pixelación.
e) Animación de transición de ruido
Para esta animación de transición, las imágenes se visualizan con una opacidad, denominada "opacidad", y un factor de ruido, denominado "porcentajeRuido": este es el mismo proceso que en la animación de "opacidad", más un efecto de ruido.
El efecto de ruido con el valor porcentajeRuido convierte cada valor de píxel P<f>(c, r) de una imagen en un valor nuevo, según la siguiente fórmula: P<f>(c, r) = (R<r>, R<g>, R<b>, P<oa>(c, r)), donde c es la columna de este píxel, r su fila, P<o>(c, r), P<og>(c, r), P<ob>(c, r) respectivamente el valor de los canales rojo, verde y azul del píxel,<r r>= P<o>(c, r) (aleatorio - P<o>(c, r)) x porcentajeRuido, R<g>= P<og>(c, r) (aleatorio - P<og>(c, r)) x porcentajeRuido, R<b>= P<ob>(c, r) (aleatorio - P<ob>(c, r)) x porcentajeRuido, donde aleatorio es un número entero aleatorio que oscila entre 0 y 255 que se calcula para cada píxel, lo que produce un efecto de ruido.
Para la primera imagen, la fórmula es la siguiente:
• opacidad = 1 - porcentaje de progreso;
• porcentajeRuido = Math.min(1, porcentajeProgreso * 2),
lo que implica que el ruido de la primera imagen es nulo desde la mitad de la animación.
En cuanto a la segunda imagen, la fórmula es:
• opacidad = porcentaje de progreso;
• porcentajeRuido = Math.min(0,1 - porcentajeProgreso * 2),
lo que implica que el ruido de la segunda imagen es nulo desde la mitad de la animación.
La figura 26 muestra diferentes ejemplos de animaciones de transición de ruido.
7) Visualización dinámica de imágenes promocionales
Una vez finalizada la animación de transición de apariencia anterior, es decir, el estado de "visualización" es "EnPromoción" y el estado de "extensión" es "Ninguno", la imagen superpuesta se visualiza sobre la imagen de la ilustración. La forma en que se visualiza la imagen superpuesta sobre la imagen de la ilustración se describe en la sección "Visualización dinámica de imágenes superpuestas".
8) Visualización de pegatinas
Esta experiencia integra la "pegatina" descrita anteriormente en la sección "Visualización de pegatinas". 9) Animación clic para abrir promoción
Esta experiencia integra una animación clic para abrir promoción, tal como se describe en la sección anterior "Animación clic para abrir promoción", dedicada a las experiencias Superpuesto y Sobrevuelo.
10) Condiciones de cierre de la promoción visible
El parámetro "VisualizaciónMinimaPromociónEnMilisegundos" de esta experiencia es un entero positivo expresado en milisegundos, que afecta a las condiciones para que la experiencia cierre la promoción visible.
Una vez que la promoción esté visible, es decir, que el estado de "visualización" sea "EnPromoción" y el estado de "extensión" sea "Ninguno", hay tres condiciones en las que la experiencia permanece visible, es decir, en el mismo estado:
1. siempre que el usuario final mantenga un toque en la pantalla en el caso de los dispositivos con pantalla táctil,
2. siempre que el marco superpuesto esté visible en la pantalla, es decir, su visibilidad de desplazamiento sea superior a 0,
3. siempre que se produzcan dos eventos consecutivos de cambio de posición del desplazador con un intervalo de tiempo inferior al parámetro "VisualizaciónMinimaPromociónEnMilisegundos".
En cuanto deje de cumplirse al menos una de esas condiciones, la promoción visible se cerrará tal y como se describe en la sección "Cierre de la promoción visible".
Estas condiciones garantizan que la promoción se muestre mientras el usuario final se desplace verticalmente y esté visible en la pantalla, y al menos durante un tiempo mínimo, para que pueda reconocerla.
11) Cierre de la promoción visible
El estado de "visualización" pasa a "TransiciónAElemento", se reproduce la animación de desaparición descrita en la sección "Animaciones de transición de aparición y desaparición de imágenes superpuestas" y el estado de "visualización" vuelve a "EnElemento". Si se está ejecutando la animación de hacer clic para abrir la promoción, se detiene inmediatamente, antes de que comience la animación anterior.
Es posible que aparezca un recordatorio sobre la imagen de la ilustración, tal y como se describe en la sección "Visualización de recordatorio" anterior.
12) Animación de apertura de la promoción
Esta experiencia integra una animación clic para abrir promoción, tal como se describe en la sección anterior "Animación clic para abrir promoción", dedicada a las experiencias Superpuesto y Sobrevuelo.
13) Animación "clic para actuar" promoción
Esta experiencia integra una animación clic para actuar promoción, tal como se describe en la sección anterior "Animación clic para abrir promoción", dedicada a las experiencias Superpuesto y Sobrevuelo.
14) Acción de clic de promoción
Esta experiencia integra un mecanismo de acción de clic en promociones, tal y como se describe en la sección anterior "Acción de clic en promociones" dedicada a las experiencias Superpuesto y Sobrevuelo.
15) Acción de cierre de promoción abierta
Esta experiencia integra un mecanismo de acción de cierre de promoción, tal y como se describe en la sección anterior "Acción de cierre de promoción abierta" dedicada a las experiencias Superpuesto y Sobrevuelo. 16) Animación de cierre de promoción abierta
Esta experiencia integra un mecanismo de acción de cierre de promoción, tal y como se describe en la sección anterior "Acción de cierre de promoción abierta" dedicada a las experiencias Superpuesto y Sobrevuelo. 17) Visualización de recordatorio
Esta experiencia integra un mecanismo de visualización de recordatorios, tal como se describió anteriormente en la sección "Visualización de recordatorios" dedicada a las experiencias Superpuesto y Sobrevuelo.
IV - La experiencia "Sobrevuelo"
1) Perspectiva general
Al igual que en la "Superpuesto", esta experiencia visualiza una "imagen promocional" encima de una "imagen de ilustración". Su parámetro "tipo" es igual a "sobrevuelo". La imagen de la ilustración se visualiza inmediatamente en el contenido y, a medida que el usuario final se desplace hacia arriba o hacia abajo por el contenido, una parte de la imagen promocional aparecerá sobre la imagen de la ilustración y se ajustará exactamente a la anchura o la altura del marco de la ilustración. La parte de la imagen promocional que se visualiza aumentará a medida que el marco de la ilustración se centre verticalmente en el contenido del envoltorio y, mientras la imagen promocional no cubra completamente el marco de la imagen de la ilustración, se le puede aplicar un filtro gráfico. Cuando el marco está centrado verticalmente sobre el contenido, lo cubre por completo y, en ese caso, el usuario final puede hacer clic en él (mediante un evento de pantalla táctil o un clic del ratón), lo que lo ampliará y revelará todo su contenido. Si el usuario final vuelve a hacer clic en él mientras está expandido, se abrirá un contenido. Si el usuario final vuelve a desplazarse mientras la imagen promocional está expandida, la imagen promocional desaparece y aparece un recordatorio opcional.
La forma en que se gestiona la imagen promocional se describe anteriormente en la sección "Gestión de imagen promocional".
2) Representación
Dos representaciones ejemplares de esta experiencia, es decir, "Sobrevuelo vertical" y "Sobrevuelo horizontal", se muestran en las figuras 27A-20M y 28A-28M de los dibujos, respectivamente.
3) Estados de carga y flujo de trabajo
La forma en que se carga la experiencia y a descripción de los estados y flujos de trabajo relacionados se describió anteriormente en la sección "Estados de flujo de trabajo de experiencia".
4) Visualización dinámica de imagen promocional
Una parte de la imagen superpuesta se visualizará sobre la imagen de la ilustración según la posición del desplazador.
La parte de la imagen superpuesta depende del porcentaje de desplazamiento del marco de la imagen de la ilustración, denominado "porcentajeDesplazamiento", como se muestra en la figura 29, y del parámetro de experiencia "rangosDesplazamiento", que es una matriz de cuatro números crecientes, que representan porcentajes, que pertenecen al rango [0, 100].
1. el primer número se denomina "PorcentajeInicial” cuando el " porcentajeDesplazamiento" es inferior a ese valor, la imagen superpuesta no se muestra, lo que corresponde al estado "display" establecido en "OnElement";
2. el segundo número se denomina " PorcentajeInferior": a. cuando el porcentaje de desplazamiento es mayor o igual que el "PorcentajeInicial" pero menor que el "PorcentajeInferior", la imagen superpuesta "parte superior" se muestra sobre la imagen de la ilustración, lo que corresponde al estado de "visualización" definido como "TransiciónaPromoción"; b. cuando el porcentaje de desplazamiento es mayor o igual que el " PorcentajeInferior", pero menor o igual que el valor " PorcentajeSuperior ", la "parte central" de la imagen superpuesta se muestra sobre todo el marco de la imagen de la ilustración, lo que corresponde al estado de "visualización" configurado como "EnPromoción";
3. cuando el tercer número se denomina "PorcentajeSuperior” el tercer número se denomina "PorcentajeSuperior" (porcentaje superior): cuando el porcentaje de desplazamiento es mayor que el "PorcentajeSuperior" pero menor o igual que el valor "PorcentajeFinal", la "parte inferior" de la imagen superpuesta se muestra sobre la imagen de la ilustración, lo que corresponde al estado de "visualización" definido como "Transiciónapromoción”;
4. el cuarto número se denomina "PorcentajeFinal”. el cuarto número se denomina "PorcentajeFinal": cuando el Porcentaje de desplazamiento es superior a ese valor, la imagen superpuesta no se muestra, lo que corresponde al estado "visualización" configurado como "EnElemento".
4) Estado de visualización “EnElemento”
Cuando el estado de "visualización" se establece en "EnElemento", la imagen superpuesta no se visualiza en absoluto, por lo que el usuario final solo ve la imagen de la ilustración.5
5) Estado de visualización "EnPromoción"
Cuando el estado de "visualización" se establece en "EnPromoción", la forma en que se visualiza la imagen superpuesta sobre la imagen de la ilustración se describe anteriormente en la sección "Visualización dinámica de imágenes superpuestas".
6) Estado de visualización "TransiciónAPromoción"
Cuando el estado de "visualización" se establece en "TransiciónAPromoción", la imagen superpuesta solo cubrirá una parte de la imagen de la ilustración, como se muestra en la figura 30: se visualiza sobre él desde una compensación con respecto al marco superpuesto (llamémoslo "compensaciónImpresión"), que es vertical en el caso de una "proporción mayor" (recuerde que esto ocurre cuando la proporción ancho/alto de la imagen es mayor en la ilustración que en la promoción) y que es horizontal en el caso de "proporción más pequeña". Este valor de "compensaciónImpresión" se calcula de la siguiente manera:
• compensaciónImpresión = dimensiónMarco - (porcentajeDesplazamiento: porcentaje Inicial)/(porcentajeInferior: porcentaje Inicial) * dimensiónMarco cuando porcentajeVisibilidad <= porcentajeInferior,
• compensaciónImpresión = -dimensiónSuperpuesto (porcentajeFinalporcentajeDesplazamiento)/(porcentajeFinal- porcentajeSuperior) * dimensiónMarco cuando porcentajeVisibilidad >= porcentajeSuperior,
donde "dimensiónMarco " y "dimensiónSuperpuesto " son respectivamente el alto del marco superpuesto y el alto de superposición en caso de una situación de "mayor proporción", el ancho del marco superpuesto y el ancho de superposición en caso contrario.
Además, la experiencia aplica en esta parte de superposición uno de los cuatro filtros descritos en la sección "Animaciones de transición de aparición y desaparición de imágenes superpuestas" dedicada a la experiencia de superposición, a saber, un efecto de opacidad, gris, pixelación o ruido. El parámetro "porcentajeProgreso" se define de la siguiente manera:
• porcentajeProgreso= (porcentajeDesplazamiento - porcentaje Inicial) / (porcentajeInferior -porcentajeInicial) cuando porcentajeVisibilidad <= porcentajeInferior ,
• porcentajeProgreso= (porcentaje Final - porcentajeDesplazamiento / (porcentaje Final -porcentajeSuperior) cuando porcentajeVisibilidad >= porcentajeSuperior.
7) Visualización de pegatinas
Esta experiencia integra la "pegatina" descrita anteriormente en la sección "Visualización de pegatinas". 8) Animación clic para abrir promoción
Esta experiencia integra una animación clic para abrir promoción, tal como se describe en la sección anterior "Animación clic para abrir promoción", dedicada a las experiencias Superpuesto y Sobrevuelo.
9) Animación de apertura de la promoción
Esta experiencia integra una animación de apertura de promoción, tal como se describe en la sección anterior "Animación de apertura de promoción", dedicada a las experiencias Superpuesto y Sobrevuelo.
10) Animación clic para actuar promoción
Esta experiencia integra una animación clic para actuar, tal como se describe en la sección anterior "Animación clic para actuar promoción", dedicada a las experiencias Superpuesto y Sobrevuelo.
11) Acción de clic de promoción
Esta experiencia integra un mecanismo de acción de clic en promoción, tal y como se describe en la sección anterior "Acción de clic en promoción" dedicada a las experiencias Superpuesto y Sobrevuelo.
12) Acción de cierre de promoción abierta
Esta experiencia integra un mecanismo de acción de cierre de promoción, tal y como se describe en la sección anterior "Acción de cierre de promoción abierta" dedicada a las experiencias Superpuesto y Sobrevuelo.
13) Animación de cierre de promoción abierta
Esta experiencia integra un mecanismo de acción de cierre de promoción, tal y como se describe en la sección anterior "Acción de cierre de promoción abierta" dedicada a las experiencias Superpuesto y Sobrevuelo. 14) Visualización de recordatorio
Esta experiencia integra un mecanismo de visualización de recordatorios, tal como se describió anteriormente en la sección "Visualización de recordatorios" dedicada a las experiencias Superpuesto y Sobrevuelo.
V - La experiencia "Substicial"
1) Perspectiva general
Esta experiencia visualiza una parte de una "imagen", que depende de la posición del desplazador, es decir, a medida que el usuario final desplaza hacia arriba y hacia abajo el contenido en el que se visualiza. Su parámetro "tipo" es igual a "substicial". En cualquier momento, el usuario final puede hacer clic en él, lo que lo ampliará y revelará todo su estado. Si el usuario final vuelve a hacer clic en él mientras está expandido, se abrirá un contenido. Si el usuario final vuelve a desplazarse mientras la imagen está expandida, la imagen se reduce de nuevo a su tamaño original y aparece un recordatorio opcional.
Esta experiencia es muy similar a la de las experiencias Superpuesto y Sobrevuelo cuando su estado de "visualización" es "EnPromoción", si consideras que la "imagen" está "superpuesta": en el caso de la representación de Substicial, no hay ninguna imagen promocional, sino solo una imagen, pero la forma en que se visualiza esta imagen es muy similar a la forma en que se visualiza la imagen promocional o superpuesta de Superpuesto y Sobrevuelo. Del mismo modo, se puede hacer clic en la "imagen" y ampliarla para que se muestre por completo, se vuelva a hacer clic y se cierre.
La imagen de la experiencia se define a través de su URL, mediante el parámetro "fuente", lo que significa que el SDK no tiene en cuenta el atributo "img" "src", que no debe definirse para evitar que se produzca un efecto de parpadeo cuando el SDK sustituya este elemento HTML por el lienzo HTML recién creado.
2) Representación
Dos representaciones ejemplares de esta experiencia, es decir, "Substicial vertical" y "Substicial horizontal", se muestran en las figuras 31A-31K y 32A-32D de los dibujos, respectivamente.
3) Estados de carga y flujo de trabajo
El SDK mantiene el estado de "carga" común descrito anteriormente en la sección "El estado de "carga"". El lienzo HTML5 creado tiene el mismo ancho "anchoImagen" que el elemento HTML "img", y su altura es igual al anchoImagen * porcentaje, donde el "porcentaje" es un parámetro dedicado a la experiencia Substicial, un número mayor que 0 y menor o igual a 100. Esto significa que la altura del marco del lienzo que se utiliza para visualizar la experiencia es menor que la altura de la imagen.
Siempre que el "porcentaje" sea inferior a 100, en cuyo caso la experiencia no ofrece ninguna función de extensión, el SDK mantiene otro estado de "extensión" adicional interno para la experiencia, que indica si está extendida.
A continuación se muestran los posibles valores del estado de "extensión", como se ilustra en la figura 33. 1. "Ninguno": este es el estado inicial, que permanece mientras el estado de "carga" no sea igual a "Listo". Cuando el estado se establece o resetea a un valor, una animación de clic para abrir se ejecuta una vez, como se describe anteriormente en la sección "Animación clic para abrir". Tan pronto como el usuario final haga clic en la imagen, que se describe en la sección "Animación de apertura", el estado pasa a "Abriendo".
2. "Abriendo": se trata de un estado transitorio que dura mientras se esté ejecutando la animación, descrita en la sección "Animación de apertura". Una vez completado, el estado pasa al estado "Abierto".3 3. "Abierto": se trata de un estado que permanece mientras el usuario final no haya realizado ninguna acción, descrita en la "Acción de cierre", para cerrar la promoción abierta; en este último caso, pasa a "Cerrando". Tan pronto como la experiencia alcance ese estado, se ejecutará una animación de clic para actuar, tal y como se describe en la sección "Animación clic para actuar". El usuario final puede realizar una acción específica descrita en la sección "Acción de clic".
4. "Cerrando": se trata de un estado transitorio que dura mientras se esté ejecutando la animación, descrita en la sección "Animación de cierre". Una vez finalizada esta animación, el estado vuelve a "Ninguna". 4) Visualización dinámica de imágenes
La parte de la imagen que se visualiza, es decir, que se visualiza sobre el marco, depende de la posición del desplazador, un parámetro de experiencia "porcentajeGravedad" que es un número que pertenece a ]0, 100[ que representa el porcentaje desde el borde superior de la imagen donde se supone que se encuentra su centro de gravedad visual, y del parámetro "rangos de Desplazamiento", que es una matriz de tres números crecientes que representan porcentajes, que pertenece a [0, 100]. La experiencia visualiza una especie de efecto de paralaje vertical:
1. el primer número se denomina "porcentajeMínimo": cuando el porcentajeDesplazamiento es inferior a ese valor, la imagen se visualizará sobre el marco de forma fija para que el borde inferior de la imagen coincida con el borde inferior del marco del lienzo;
2. el segundo número se denomina "porcentajeCentro":
a. cuando el porcentajeDesplazamiento es mayor o igual que el "porcentajeMínimo" pero inferior al "porcentajeCentro", la "parte superior" de la imagen se visualiza con una compensación vertical igual a (porcentaje de Desplazamiento - porcentaje mínimo) / (porcentajeCentro: porcentaje Mínimo) * porcentajeGravedad * altoImagen, de modo que, cuando el porcentaje de Desplazamiento es igual a porcentajeCentro, la parte de visualización de la imagen se centre verticalmente en su gravedad declarada; b. cuando el porcentajeDesplazamiento es mayor o igual que "porcentajeCentro" pero menor o igual que el valor "porcentajeMáximo" siguiente, la "parte inferior" de la imagen se visualiza con una compensación vertical igual a (((porcentajeDesplazamiento - porcentajeCentro) / (porcentaje Máximo -porcentajeCentro)) * (1 - porcentajeGravedad ) porcentajeGravedad ) * altoImagen;
3. el tercer número se denomina "porcentajeMáximo": cuando el porcentajeDesplazamiento es mayor a ese valor, la imagen se visualizará sobre el marco de forma fija de modo que el borde superior de la imagen coincida con el borde superior del marco del lienzo.
5) Visualización de pegatinas
Esta experiencia integra la "pegatina" descrita anteriormente en la sección "Visualización de pegatinas”. 6) Animación clic para abrir
(Nota: en esta experiencia y en las siguientes, la mención sobre el estado de "visualización" debe ignorarse aquí y la "superposición" debe considerarse como la "imagen".)
Esta experiencia integra una animación clic para abrir promoción, similar a las experiencias Superpuesto y Sobrevuelo, descrita en la sección anterior "Animación clic para abrir promoción".
7) Animación de apertura
Esta experiencia integra una animación de apertura de promoción, similar a las experiencias Superpuesto y Sobrevuelo, descrita en la sección "Animación de apertura de promoción".
8) Animación clic para actuar
Esta experiencia integra una animación clic para actuar, similar a las experiencias Superpuesto y Sobrevuelo, descrita en la sección anterior "Animación clic para actuar promoción".
9) Acción de clic
Esta experiencia integra un mecanismo de clic, similar al de las experiencias Superpuesto y Sobrevuelo, que se describen en la sección "Acción de clic de promoción".
10) Acción de cierre
Esta experiencia integra un mecanismo de acción de cierre de promoción, similar a usado en las experiencias Superpuesto y Sobrevuelo tal como se describe en la sección anterior "Acción de cierre de promoción abierta".
11) Animación de cierre
Esta experiencia integra un mecanismo de acción de cierre, similar al usado en las experiencias Superpuesto y Sobrevuelo descritas anteriormente en la sección "Animación de cierre de promoción abierta".
12) Visualización de recordatorio
Esta experiencia integra un mecanismo de visualización de recordatorios, similar al que se utiliza en las experiencias Superpuesto y Sobrevuelo y que se describe en la sección "Visualización de recordatorios". Debe tenerse en cuenta aquí que un estado virtual de "visualización" se estableció en "enElemento" y pasó por el estado "enPromoción" si y solo si el estado de "extensión" pasó por el estado "Abierto".
VI - La experiencia de usuario "lenticular"
1) Perspectiva general
Esta experiencia consiste en reproducir el efecto lenticular físico (por ejemplo, como se describe en https://en.wikipedia.org/wiki/Lenticular_lens), es decir, que la imagen que se visualiza al usuario final cambia progresivamente a medida que el usuario la mira desde diferentes ángulos. Su parámetro "tipo" es igual a "lenticular". Esta experiencia utiliza la orientación en los dispositivos equipados con un giroscopio; en caso contrario, utiliza la posición del desplazador. Si el usuario final hace clic en la imagen, se abrirá un contenido.
2) Representación
Esta experiencia desde el punto de vista del usuario final se ilustra en las Figs.34A-34G. La experiencia expone un parámetro de "fuentes" que contiene una serie de imágenes en lugar de un único parámetro de "fuente": este parámetro de "fuentes" es una matriz de URL de imágenes que componen las imágenes con efecto lenticular. Se supone que todas esas imágenes tienen la misma relación entre ancho y alto, pero no es necesario que tengan las mismas dimensiones.
3) Estados de carga y flujo de trabajo
El SDK mantiene el estado de "carga" descrito en la sección "El estado de "carga"". Sin embargo, durante la etapa 2.a, el SDK descarga en paralelo las imágenes de "fuentes" con un parámetro "representa" de rePictuR establecido en "bandeja de entrada", con un ancho establecido en el ancho HTML "img" y un alto de 0.
Las dimensiones del marco del lienzo HTML5 en el que se ejecutará la experiencia tienen un ancho igual al del elemento HTML "img" y una altura igual a la de la primera imagen "fuente" descargada a través del servicio rePictuR.
Tan pronto como se cargue la experiencia, es decir, el estado de "carga" pasa por el valor "Listo", la experiencia comenzará a escuchar el giroscopio del dispositivo, si está disponible: si el dispositivo tiene un giroscopio, se ignora la posición del desplazador; de lo contrario, la experiencia escuchará la posición del desplazador.
4) Visualización dinámica de imágenes
La experiencia visualiza en su marco una composición de dos imágenes consecutivas en función de la orientación del giroscopio cuando el dispositivo está equipado con uno, y de la posición del desplazador para los demás dispositivos: en cada representación de la experiencia, que ocurre cada vez que la gamma del giroscopio (véase la explicación en https://developer.mozilla.org/en-US/docs/Web/API/Detecting) cambia la orientación del dispositivo o cuando cambia la posición del desplazador, la experiencia calcula un índice de imagen "índiceImagen", un entero mayor o igual a 0 e inferior o igual al número de imágenes, "cuentaImágenes", menos uno; borra el marco y, a continuación, visualiza la primera de las dos imágenes, en la posición "índiceImagen" en la matriz, con una opacidad igual a "primeraOpacidad" y, a continuación, a la segunda imagen, en la posición "(índiceImagen 1)% cuentaImágenes" de la matriz (% es el operador de módulo), con una opacidad igual a "segundaOpacidad".
La experiencia expone un parámetro de "etapas" adicional, un número entero que oscila entre 1 y 100, que permite ajustar cuántas composiciones intermedias diferentes deben representarse entre dos imágenes consecutivas. •
• Una variable intermedia denominada "índiceSensor", que se utilizará para calcular el "índiceImagen" y las variables "primeraOpacidad" y "segundaOpacidad", se calcula de la siguiente manera:
si el dispositivo está equipado con un giroscopio, es igual a Math.round ((Math.abs (gamma) % oscilaciónCompletaEnGrados ) / (oscilaciónCompletaEnGrados / ((cuentaImágenes - 1) * etapas)))), donde "gamma" es la gamma del giroscopio, "oscilaciónCompletaEnGrados" es un número constante establecido en 35;
si el dispositivo no tiene giroscopio, es igual a Math.round ((cuentaImágenes - 1) * etapas* porcentajeDesplazamiento).
• El "índiceImagen" es igual a Math.floor (((((índiceSensor% (cuentaCasos)) cuentaCasos)) % cuentaCasos) / etapas) % cuentaCasos), donde "cuentaCasos" es una variable igual a "etapas * cuentaImágenes", que representa el número de diferentes representaciones posibles para la experiencia;
• La “primeraOpacidad” es igual a 1 - ((((índiceSensor % etapas ) etapas ) % etapas ) / etapas);
• La "segundaOpacidad" es igual a 1 - primeraOpacidad, lo que implica que la opacidad de la segunda imagen es la opuesta a la de la primera imagen.
La forma en que se seleccionan las dos imágenes consecutivas y su opacidad permiten reproducir el efecto lenticular, ya que cada representación es una composición de la visualización de las dos imágenes, una sobre la otra, con una opacidad tal que el usuario final cambia de una imagen a otra con un efecto de suavizado.
El resultado se muestra en la figura 23, que es el mismo que el que se puede usar por las experiencias Superpuesto y Sobrevuelo cuando utilizan la animación de "opacidad" descrita en la sección "Animación de transición de opacidad", donde la variable "opacidad" mencionada debe interpretarse como la "primeraOpacidad" (por lo tanto, para la segunda imagen, segundaOpacidad = 1 - opacidad como se describe en la sección).
5) Visualización de pegatinas
Esta experiencia integra la "pegatina" descrita anteriormente en la sección "Visualización de pegatinas".
6) Acción de clic
La experiencia ofrece el mecanismo descrito anteriormente en la sección "Acción de clic".
VII - La experiencia "Scrolltoon"
1) Perspectiva general
Esta experiencia consiste en visualizar una animación de vídeo corta sin sonido (una imagen GIF animada o un vídeo), que se reproduce a una velocidad que depende de la posición del desplazador, la velocidad de cambio y a la inversa si la posición del desplazador disminuye, lo que ofrece un efecto de barrido de vídeo y hace que el lector sea responsable de reproducir la secuencia de vídeo en respuesta al desplazamiento vertical. Su parámetro "tipo" es igual a "Scrolltoon". Si el usuario final hace clic en la imagen, se abrirá un contenido.
2) Representación
Una representación ejemplar de esta experiencia se muestra en las figuras 35A-35E de los dibujos.
3) Estados de carga y flujo de trabajo
El SDK mantiene el estado de "carga" común descrito anteriormente en la sección "El estado de "carga"". El parámetro "fuente" debe ser una imagen animada codificada como un GIF animado (véase https://fr.wikipedia.org/wiki/Graphics_Interchange_Format), compuesta por al menos dos imágenes (marcos). Durante la etapa 2.a, el SDK descarga la imagen animada redimensionada con un parámetro "representa" de rePictuR establecido en "bandeja de entrada", con un ancho establecido en el ancho HTML "img" y un alto establecido en el alto HTML "img".
Las dimensiones del marco del lienzo HTML5 en las cuales la experiencia se ejecutará tienen un ancho igual al elemento HTLM "img" y una altura que es igual a la imagen descargada "fuente" a través del servicio de rePictuR.
Dado que la imagen GIF animada puede tardar mucho tiempo en descomprimirse y analizarse, este proceso debe realizarse como una tarea en segundo plano para evitar que la interfaz de usuario se congele.
4) Visualización dinámica de imágenes
Cada vez que la posición del desplazador cambia, el marco se borra y la experiencia visualiza en él la imagen en la posición "índiceImagen", un entero mayor o igual a 0 e inferior a "cuentaImágenes", donde "cuentaImágenes" es el número de imágenes de la imagen GIF animada, que depende de la posición del desplazador y del parámetro de experiencia "rangosDesplazamiento", que es una matriz de dos números crecientes, "porcentajeMínimo" y "porcentajeMáximo" perteneciente a ]0, 100[ que representan los porcentajes inferior y superior a partir de los cuales comienza a animarse la experiencia, y que permiten calcular el porcentaje de desplazamiento de fotogramas "PorcentajeRangoDesplazamiento". "ÍndiceImagen" es igual a Math.round((CuentaImágenes - 1) * Porcentaje Rango Desplazamiento): esto significa que cuando el "PorcentajeDesplazamiento" es menor que "PorcentajeMínimo" se muestra la primera imagen de animación, cuando el "PorcentajeDesplazamiento" es mayor que "PorcentajeMáximo" se muestra la última imagen de animación, en caso contrario se muestra el índice de imágenes interpolado..
De esta forma, el usuario final tiene la impresión de reproducir la animación desplazándose y de invertir la animación cuando se desplaza hacia arriba, por lo que borra un vídeo.
5) Visualización de pegatinas
Esta experiencia integra la "pegatina" descrita anteriormente en la sección "Visualización de pegatinas". 6) Acción de clic
La experiencia proporciona el mecanismo descrito anteriormente en la sección "Acción de clic".
VIII - La experiencia de usuario "Scravelling"
1) Perspectiva general
Esta experiencia consiste en visualizar el fragmento de una imagen en función de la posición del desplazador, centrándose sucesivamente en algunos puntos de interés declarados. Su parámetro "tipo" es igual a "Scravelling". Si el usuario final hace clic en la imagen, se abrirá un contenido.
2) Representación
Una representación ejemplar de esta experiencia se muestra en las figuras 36A-36F de los dibujos.
3) Estados de carga y flujo de trabajo
El SDK mantiene el estado de "carga" descrito en la sección "El estado de "carga"". Durante la etapa 2.a, el SDK descarga la imagen animada redimensionada con un parámetro "representa" de rePictuR establecido en "bandeja de salida", con un ancho establecido en el ancho HTML "img" y un alto establecido en el alto HTML "img".
Las dimensiones del marco del lienzo HTML5 en las cuales la experiencia se ejecutará tienen un ancho igual al elemento HTLM "img" y una altura que es igual a la imagen descargada "fuente" a través del servicio de rePictuR. Esto significa que la proporción entre el ancho del marco y el alto puede no ser la misma que la proporción entre el ancho y el alto de la imagen. Llamemos "anchoMarco" al ancho del marco y "altoMarco" a la altura del marco.
4) Visualización dinámica de imágenes
Cada vez que la posición del desplazador cambia, el marco se borra y la experiencia visualiza en él una parte de la imagen que depende de la posición del desplazador y de los parámetros "pois", "factorZoom" y "rangosDesplazamiento" de la experiencia. Esta parte es un subrectángulo de la imagen que tiene la misma proporción entre ancho y alto que el marco, definido por las coordenadas de una esquina superior izquierda y un par de ancho y alto que indican su ancho y alto: este subrectángulo se visualiza en todo el marco, estirándolo, conservando su proporción ancho-alto: denominemos "x" e "y" las coordenadas de la esquina superior izquierda y "ancho" y "alto" las dos dimensiones anteriores.5
5) Implementación de programas informáticos
• El parámetro "pois" es una matriz de objetos "poisCount" que representa Puntos De Interés (POI); cada objeto/POI expone dos atributos "poi.x" y "poi.y", que son números que van del 0 al 1 y que representan, respectivamente, el porcentaje del ancho y alto de la imagen en el que se encuentra el POI en la esquina superior izquierda de la imagen.
• El parámetro "factorZoom" es un número mayor que 1, que indica cuánto debe hacer zoom la experiencia sobre cada POI, en comparación con su factor de zoom natural de 1.
• El parámetro "rangosDesplazamiento", que es una matriz de más de 2 números PoisCount crecientes que pertenecen a [0, 100] y representan los porcentajes inferior y superior desde los que la imagen comienza y deja de viajar, y en qué posición del desplazador el enfoque del POI enésimo es máximo. Llamemos "porcentajeInicial" y "porcentajeFinal" a los números de la posición 0 y PoisCount - 1, respectivamente.
Cada vez que cambia la posición del desplazador, la forma en que las "x", "y", "ancho" y "alto" del subrectángulo se visualizan en toda la superficie del marco, es decir, el punto con las coordenadas (x, y) de la imagen se visualiza en las coordenadas (0, 0) del marco y el punto (x ancho, y alto) se visualiza en las coordenadas (anchoMarco, altoMarco). Definimos las siguientes constantes:
• "factorZoomDoble" igual a factorZoom * 2,
• "anchoconZoom" igual a anchoMarco/factor de zoom,
• "altoconZoom" igual a altoMarco/factor de zoom,
• "anchoMedioZoom" igual a anchoMarco/factorZoomDoble,
• "altoMedioZoom" igual a altoMarco/factorZoomDoble,
• "segundoPorcentaje" es el valor del número "rangosDesplazamiento" en la posición 1, es decir, el segundo número de la matriz,
• El "penúltimo porcentaje" es el valor del número "rangosDesplazamiento" en la posición poisCount - 2, es decir, el penúltimo número de la matriz.
Un operador ternario "?"(véase https://en.wikipedia.org/wiki/%3F:) también se utiliza en las próximas fórmulas. Esas variables se calculan de la siguiente manera:
• cuando el "porcentajeDesplazamiento" es inferior o igual a "segundoPorcentaje", la experiencia comienza a centrarse y hacer zoom en el primer POI. Consideramos que el POI está en la posición 0, es decir, el primer POI, siendo la constante "porcentajeFase" igual a Math.max (0, (porcentaje de desplazamiento: porcentaje inicial) * (1/(segundo porcentaje - porcentajeInicial)):
<o>x = (Math.max (0, (poi.x * anchoImagen - anchoMedioZoom) < 0 ? 1/factorZoomDoble : (poi.x * anchoImagen anchoMedioZoom) > anchoImagen ? 1 - 1 / factorZoomDoble : poi.x)) * anchoImagen - anchoMedioZoom)) * fasePorcentaje,
<o>y = (Math.max (0, ((poi.y * altoImagen- altoMedioZoom) < 0? 1 / factorZoomDoble : (poi.y * altoImagen altoMedioZoom) > altoImagen ? 1 - 1 / factorZoomDoble : poi.y)) * altoImagen - altoMedioZoom)) * fasePorcentaje,
<o>ancho = anchoMarco (anchoconZoom - anchoMarco) * porcentajeFase,
<o>alto = altoMarco (altoconZoom - altoMarco ) * porcentajeFase:
• cuando el "porcentajeDesplazamiento" es mayor o igual que "penúltimoPorcentaje", la experiencia comienza a centrarse y hacer zoom en el último POI, consideramos que el POI es "poi" en la posición poisCount - 1, es decir, el último POI, siendo la constante "fasePorcentaje" igual a Math.min (1, ( porcentajeDesplazamiento - penúltimoPorcentaje) / (porcentajeFinal- penúltimoPorcentaje)):
<o>x = inicialX - (inicialX - (anchoImagen - anchoMarco)) * fasePorcentaje donde inicialX = math.max (0, math.min (anchoImagen , (poi.x * anchoImagen - anchoMedioZoom) < 0? 1 / factorZoomDoble : (poi.x * anchoImagen anchoMedioZoom ) > anchoImagen ? 1 - 1 / factorZoomDoble : poi.x)) * anchoImagen anchoMedioZoom ) - anchoInicial),
<o>y = inicialY - (inicialY - (altoImagen - altoMarco)) * fasePorcentaje donde inicialY = math.max (0, math.min (altoImagen , (poi.y * altoImagen - altoMedioZoom) < 0? 1 / factorZoomDoble : ((poi.y * altoImagen altoMedioZoom) > altoImagen ? 1 - 1 / factorZoomDoble : poi.y)) * altoImagen altoMedioZoom) - altoInicial),
<o>ancho = anchoMarco (anchoconZoom - anchoMarco) * porcentajeFase,
<o>alto = altoMarco (altoconZoom - altoMarco ) * porcentajeFase:
cuando el "porcentajeDesplazamiento" es superior al "segundoPorcentaje" e inferior al "penúltimo porcentaje", la experiencia se centra sucesivamente en todos los POI, excepto el primero y el último. Como las fórmulas son demasiado largas para ser explícitas, a continuación se muestra el código JavaScript que calcula las variables "x", "y", "ancho" y "alto", donde el operador "[n]” devuelve el elemento en la posición n de una matriz, “.length” es una función que devuelve el número de elementos de una matriz:
var ¡nnerPercentage = scrollingPercentage;
var ¡nnerStartPercentage = scrollRanges[l];
var ¡nnerEndPercentage = scrollRanges[2];
var startPoilndex = 0;
fo r (var rangelndex = 1; rangelndex < scrolIRanges.length - 2; rangelndex++)
{
¡f (scrollingPercentage <= scrollRanges[rangelndex 1])
{
break;
}
startPoilndex++;
¡nnerStartPercentage = scrollRanges[rangelndex];
innerEndPercentage = scrollRanges[rangelndex 1];
}
¡nnerStartPercentage = ¡nnerStartPercentage;
innerEndPercentage = innerEndPercentage;
varmiddlePercentage = (¡nnerStartPercentage innerEndPercentage) / 2;
varstartPoi = pois[startPoilndex];
varendPoi = po¡s[startPo¡lndex 1];
varstartFixedPoi = {
x: (startPoi.x * imageW idth - halfZoomedW idth ) < 0 ? 1 / doubleZoomFactor : ((startPoi.x * imageWidth halfZoomedW idth ) > imageWidth 71 - 1 / doubleZoom Factor: startPoi.x), y: (startPoi.y * imageHeight - halfZoomedhleight ) < 0 ? 1 / doubleZoomFactor : ((startPoi.y * imageHeight halfZoom edhleight) > imageFleight 71 - 1 / doubleZoom Factor: startPoi.y)
};
varendFixedPoi = {
x: (endPoi.x * imageW idth - ha lfZoom edW idth) < 071 /doub leZ oom F acto r: ((endPoi.x * imageWidth halfZoomedW idth ) > imageWidth 71 - 1 / doubleZoom Factor: endPoi.x),
y: (endPoi.y * imageFleight - halfZoomedhleight ) < 0 7 1 / doubleZoomFactor : ((endPoi.y * imageFleight halfZoom edhleight) > imageHeight 71 - 1 / doubleZoom Factor: endPoi.y)
};
varle ft = startFixedPoi.x <= endFixedPoi.x 7 startFixedPoi.x : endFixedPoi.x;
varright = startFixedPoi.x > endFixedPoi.x 7 startFixedPoi.x : endFixedPoi.x;
vartop = startFixedPoi.y <= endFixedPoi.y 7 startFixedPoi.y : endFixedPoi.y;
varbottom = startFixedPoi.y > endFixedPoi.y 7 startFixedPoi.y : endFixedPoi.y;
varcanvasRatio = fram eW idth / frameHeight;
varframeRatio = ((right - le f t ) / (bottom - top));
varidealFrameW idth = /W otfi.m in(imageW idth, right * imageW idth halfZoomedW idth) -Math.max(0,le ft * imageW idth - halfZoomedW idth);
varidealFrameHeight = /Waf/7.min(imageHeight, bottom * imageHeight halfZoomedHeight) -Math.max(0,top * imageHeight - halfZoomedHeight);
varxOffset;
varyO ffset;
¡f(innerPercentage<middlePercentage)
{
phasePercentage = (innerPercentage - innerStartPercentage) / (middlePercentage -¡nnerStartPercentage);
startW idth = zoomedW idth;
startHeight = zoomedHeight;
if(frameRatio >= canvasRatio)
{
endW idth = idealFrameW idth;
endHeight = endW idth / canvasRatio;
xOffset = 0;
yOffset = (¡dealFrameHeight - endHeight) * phasePercentage;
}
else
{
endHeight = ¡dealFrameHeight;
endW idth = endHeight * canvasRatio;
xOffset = (idealFrameW idth - endW idth) * phasePercentage;
yOffset = 0;
}
w id th = startW idth (endW idth - startW idth) * phasePercentage;
height = startHeight (endHeight - startHeight) * phasePercentage;
x =M ath.rr\ax(0,startFixedPoi.x <= endFixedPoi.x ? (startFixedPoi.x * imageWidth -halfZoom edW idth xOffset) : (/War/Mmin(imageW¡dth, startFixedPoi.x * imageW idth halfZoom edW idth) - w id th xOffset));
y =Math.rr\ax(0,startFixedPoi.y <= endFixedPoi.y<?>(startFixedPoi.y * ¡mageHeight -halfZoomedHeight yOffset) : (/WatJj.m¡n(imageHeight, startFixedPoi.y * ¡mageHeight halfZoomedHeight) - height yOffset));
}
else
{
phasePercentage = (innerPercentage - middlePercentage) / (¡nnerEndPercentage -middlePercentage);
if(frameRatio >= canvasRatio)
{
startW idth = idealFrameW idth;
startHeight = startW idth / canvasRatio;
xOffset = 0;
yOffset = startFixedPoi.y <= endFixedPoi.y ? 0 : 2 * ((¡dealFrameHeight - startHeight) * (1 -phasePercentage));
}
else
{
startHeight = ¡dealFrameHeight;
startW idth = startHeight * canvasRatio;
xOffset = startFixedPoi.x <= endFixedPoi.x ? 0 : (2 * ((idealFrameWidth - startW idth) * (1 -phasePercentage)));
yOffset = 0;
}
endW idth = zoomedW idth;
endHeight = zoomedHeight;
w id th = startW idth - (startW idth - endW idth ) * phasePercentage;
height = startHeight - (startHeight - endH e igh t) * phasePercentage;
x<=>Math.max(0,startFixedPoi.x<< =>endFixedPoi.x<?>(Maf/j.m¡n(¡mageW ¡dth, endFixedPoi.x<*>imageW idth halfZoomedW idth) - w id th xOffset) : (endFixedPoi.x * imageWidth -halfZoomedW idth xOffset));
y =Math.max(0,startFixedPoi.y <= endFixedPoi.y ? (/Wot/7.min(imageHeight, endFixedPoi.y * imageHeight halfZoomedHeight) - height yOffset) : (endFixedPoi.y * imageHeight -halfZoomedHeight yOffset));
}
De esta forma, el usuario final tiene la impresión de que realiza un viaje dentro de la imagen mientras amplía correctamente los puntos de interés a medida que se desplaza hacia arriba y hacia abajo por el contenido. 6) Visualización de pegatinas
Esta experiencia integra la "pegatina" descrita anteriormente en la sección "Visualización de pegatinas". 7) Acción de clic
La experiencia ofrece el mecanismo descrito anteriormente en la sección "Acción de clic".
La presente invención no se limita a las realizaciones descritas anteriormente e ilustradas en los dibujos, sino que el experto en la materia podrá idear numerosas variantes y modificaciones.
Más particularmente:
• aunque la descripción anterior se refiere a un desplazador vertical, la invención también se puede usar con un desplazador horizontal, o con un desplazador horizontal+vertical,
• como se explica en algunos puntos de la descripción, los datos de entrada pueden ser, entre otros, además de los datos de desplazamiento o, alternativamente, de los datos de desplazamiento, posición o movimiento o aceleración (en traslación y/o en rotación), por ejemplo, los proporcionados por las unidades de sensor de movimiento (acelerómetros y/o giroscopios) de los dispositivos inteligentes comerciales.

Claims (15)

REIVINDICACIONES
1. Un método para generar una representación de visualización dinámica en un área de visualización de un elemento de visualización de un dispositivo inteligente, que comprende las siguientes etapas: proporcionar un contenido principal de una fuente para su visualización en el área de visualización, visualizar dicho contenido principal,
proporcionar datos de entrada para provocar un movimiento del contenido principal que se visualiza en el área de visualización,
proporcionar al menos un contenido alternativo distinto del contenido principal y comprender una pluralidad de partículas de contenido, cada una de las cuales tiene asociado su propio conjunto de parámetros de sustitución,
en respuesta a una variable de entrada de sustitución en combinación con parámetros de sustitución integrados en dicho contenido principal y asociados con las partículas de contenido respectivas, sustituir dinámicamente en al menos un elemento del contenido principal un elemento modificado que contiene al menos parte de dicho contenido alternativo, y
visualizar dicho contenido principal con el elemento modificado.
2. El método según la reivindicación 1, donde dicha variable de sustitución se deriva de la posición actual de una parte determinada del contenido principal en relación con el área de visualización cuando el contenido se mueve dentro del área de visualización en respuesta a los datos de entrada.
3. El método según la reivindicación 2, donde dicho elemento del contenido principal es una imagen o un puntero a una imagen, incorporado en el contenido principal, y donde dicha etapa de sustitución dinámica comprende proporcionar sustituciones de elementos predeterminadas para valores dados de la variable de sustitución, y comprende además una etapa de interpolación entre dichas sustituciones de elementos predeterminadas para un valor intermedio de la variable de sustitución.
4. El método según una cualquiera de las reivindicaciones 1 a 3, donde dicha variable de sustitución se deriva de datos seleccionados en un grupo que comprende datos de entrada de usuario y datos de tiempo.
5. El método según la reivindicación 4, que comprende una etapa de anular selectivamente una variable de sustitución relacionada con el tiempo con una variable de sustitución relacionada con la entrada del usuario.
6. El método según la reivindicación 4 ó 5, donde dichos datos de entrada de usuario se seleccionan en un grupo que comprende datos para el desplazamiento del contenido, datos de posición o movimiento del usuario y datos de posición o movimiento del dispositivo inteligente causados por un usuario.
7. El método según la reivindicación 6, donde dichos datos de entrada de usuario comprenden datos de desplazamiento de contenido, dicho contenido alternativo comprende un contenido de vídeo y dicha sustitución dinámica comprende la exploración de dicho contenido de vídeo en respuesta a la variación de la variable de sustitución.
8. El método según cualquiera de las reivindicaciones 1 a 7, donde dicho contenido principal comprende un contenido marcado, tal como un contenido HTML, dichos parámetros de sustitución están incorporados en dicho contenido marcado en asociación con al menos una etiqueta de imagen del elemento en dicho contenido principal, y la etapa de sustitución dinámica comprende una etapa inicial de sustituir por dicha etiqueta de imagen una etiqueta de contenido de imagen dentro de la cual se realiza la sustitución dinámica.910
9. El método según cualquiera de las reivindicaciones 1 a 8, donde dicha etapa de sustitución dinámica se realiza mediante un paquete de programa de representación dedicado descargado de una fuente asociada con el contenido principal.
10. Un sistema para la representación dinámica de visualización, que comprende:
- una fuente para proporcionar un contenido principal,
- una fuente para proporcionar un contenido alternativo distinto del contenido principal, comprendiendo dicho contenido alternativo una pluralidad de partículas de contenido, cada una de las cuales tiene asociado su propio conjunto de parámetros de sustitución,
- un dispositivo inteligente en comunicación con dichas fuentes y que tiene un elemento de visualización que define un área de visualización, un procesador de elemento de visualización para visualizar y mover el contenido principal en el área de visualización en respuesta a los datos de entrada, comprendiendo además dicho dispositivo inteligente un motor de representación adaptado, en respuesta a una variable de entrada de sustitución en combinación con parámetros de sustitución integrados en dicho contenido principal y asociados con las partículas de contenido respectivas, para sustituir dinámicamente por al menos un elemento de dicho contenido principal un elemento modificado que contiene al menos parte de dicho contenido principal contenido alternativo, para su visualización por medio de dicho procesador de elemento de visualización.
11. El Sistema según la reivindicación 10, donde dicho motor de representación es capaz, a partir de sustituciones de elementos predeterminados para valores dados de la variable de sustitución, de interpolar entre dichas sustituciones de elementos predeterminados para un valor intermedio de la variable de sustitución.
12. El sistema según cualquiera de las reivindicaciones 10 u 11, donde dicho motor de representación es un paquete de programa de representación dedicado descargado de una fuente asociada con el contenido principal.
13. Un dispositivo inteligente con capacidad de representación de visualización, siendo capaz de comunicarse con una fuente para proporcionar un contenido principal y una fuente para proporcionar un contenido alternativo distinto del contenido principal, comprendiendo dicho contenido alternativo una pluralidad de partículas de contenido, cada una de las cuales tiene asociado su propio conjunto de parámetros de sustitución, comprendiendo dicho dispositivo inteligente un elemento de visualización que define un área de visualización, un procesador de elemento de visualización para visualizar y mover el contenido principal en el área de visualización en respuesta a los datos de entrada, y un motor de representación adaptado, en respuesta a una variable de entrada de sustitución en combinación con parámetros de sustitución integrados en dicho contenido principal y asociados con las partículas de contenido respectivas, para sustituir dinámicamente en al menos un elemento del contenido principal un elemento modificado que contiene al menos parte de dicho contenido alternativo, para su visualización mediante dicho procesador de visualización.
14. Un contenido digital marcado, que contiene al menos un elemento visualizable o un puntero a dicho elemento, y asociado al mismo, al menos una descripción de, y/o un puntero a, un contenido digital alternativo y un conjunto de parámetros de sustitución, para su uso por un dispositivo inteligente según la reivindicación 13 para generar en él una sustitución dinámica de dicho contenido, donde dichos parámetros de sustitución comprenden un tipo de sustitución y parámetros de representación de sustitución.
15. El contenido digital marcado según la reclamación 14, donde dichos parámetros de sustitución están contenidos en un área etiquetada asociada al elemento visualizable.
ES18842835T 2017-12-18 2018-12-17 Display rendering method and system Active ES3036268T3 (en)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
US201762607016P 2017-12-18 2017-12-18
PCT/IB2018/060196 WO2019123213A1 (en) 2017-12-18 2018-12-17 Display rendering method and system

Publications (1)

Publication Number Publication Date
ES3036268T3 true ES3036268T3 (en) 2025-09-16

Family

ID=65278409

Family Applications (1)

Application Number Title Priority Date Filing Date
ES18842835T Active ES3036268T3 (en) 2017-12-18 2018-12-17 Display rendering method and system

Country Status (4)

Country Link
US (1) US12182495B2 (es)
EP (1) EP3729263B1 (es)
ES (1) ES3036268T3 (es)
WO (1) WO2019123213A1 (es)

Families Citing this family (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110708596A (zh) * 2019-09-29 2020-01-17 北京达佳互联信息技术有限公司 生成视频的方法、装置、电子设备及可读存储介质
CN111124579B (zh) * 2019-12-24 2023-12-19 北京金山安全软件有限公司 一种特效渲染方法、装置、电子设备及存储介质
FR3113348B1 (fr) * 2020-08-07 2023-03-17 Sublime Skinz Labs Affichage ergonomique d’un contenu video promotionnel
CN112184860A (zh) * 2020-09-25 2021-01-05 浪潮云信息技术股份公司 一种粒子动画实现方法
CN113760154B (zh) * 2020-10-26 2024-10-22 北京沃东天骏信息技术有限公司 页面元素展示的方法和装置
CN112269961A (zh) * 2020-11-12 2021-01-26 携程旅游网络技术（上海）有限公司 基于关联报表的网页生成方法、系统、设备及存储介质
CN115442639B (zh) * 2021-06-03 2024-01-16 北京字跳网络技术有限公司 一种特效配置文件的生成方法、装置、设备及介质
CN119211617A (zh) * 2021-06-15 2024-12-27 博泰车联网科技(上海)股份有限公司 焦点居中的方法、存储介质和电子设备
CN114782605B (zh) * 2022-05-06 2026-02-06 网易（杭州）网络有限公司 毛发虚拟模型的渲染方法、装置、计算机设备及存储介质
CN115426517B (zh) * 2022-08-10 2024-07-26 杭州网易云音乐科技有限公司 渐变动画帧的生成方法、装置、电子设备及存储介质
US12373174B2 (en) * 2022-08-16 2025-07-29 Lenovo (Singapore) Pte. Ltd. Identification of callback from 2D app to render 3D model using 3D app
CN116339706B (zh) * 2022-10-18 2024-05-14 杭州比智科技有限公司 基于数据可视化场景下实现可视化组件联动的方法及系统
CN119202420A (zh) * 2023-06-25 2024-12-27 华为技术有限公司 页面显示方法、电子设备及存储介质

Family Cites Families (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7415666B2 (en) * 2005-03-04 2008-08-19 Microsoft Corporation Method and system for navigating paginated content in page-based increments
US20110035263A1 (en) * 2009-08-10 2011-02-10 Kumaresan Ramanathan Process for increasing user-interaction rates for document elements
JP5451684B2 (ja) * 2011-05-31 2014-03-26 楽天株式会社 情報処理装置、情報処理方法、及び情報処理プログラム
US20130198610A1 (en) * 2012-01-20 2013-08-01 Vistaprint Limited Defining external website content sources
US20140040423A1 (en) * 2012-08-01 2014-02-06 Google Inc. Obtaining and Presenting Data to Web Properties
US9870344B2 (en) * 2012-10-02 2018-01-16 Google Inc. Reassigning ordinal positions of content item slots according to viewport information during resource navigation
US8793573B2 (en) * 2012-10-29 2014-07-29 Dropbox, Inc. Continuous content item view enhanced through smart loading
US9348496B2 (en) * 2013-06-28 2016-05-24 Google Inc. Selecting content based on performance of a content slot
JP6310955B2 (ja) * 2016-04-07 2018-04-11 ヤフー株式会社 配信装置、表示制御装置、表示制御方法およびプログラム

Also Published As

Publication number Publication date
US12182495B2 (en) 2024-12-31
US20230367953A1 (en) 2023-11-16
EP3729263A1 (en) 2020-10-28
WO2019123213A1 (en) 2019-06-27
EP3729263B1 (en) 2025-04-23

Similar Documents

Publication Publication Date Title
ES3036268T3 (en) Display rendering method and system
US12400393B2 (en) Method and system for rendering panoramic video
US7400322B1 (en) Viewport-based desktop rendering engine
KR101159359B1 (ko) 다른 해상도를 갖는 디스플레이 상에 타겟 디지털 장치의디스플레이 시뮬레이션을 렌더링하는 방법, 시스템 및 매체
US8065610B2 (en) Asynchronously rendering dynamically created content across multiple network domains
JP5897715B2 (ja) コンピュータによる処理方法
US12008673B2 (en) Protecting documents with security overlays
US8020089B1 (en) Rendering hypertext markup language content
US9754392B2 (en) Generating data-mapped visualization of data
US9514242B2 (en) Presenting dynamically changing images in a limited rendering environment
US20120092340A1 (en) Systems, methods, and computer-readable media for manipulating graphical objects
KR20160120343A (ko) 크로스 플랫폼 렌더링 엔진
US20080303826A1 (en) Methods and Systems for Animating Displayed Representations of Data Items
AU2015315608B2 (en) Layout engine
CN107707965B (zh) 一种弹幕的生成方法和装置
TWI691206B (zh) 浮水印添加處理方法、裝置及客戶端
US10043298B2 (en) Enhanced document readability on devices
US20020101449A1 (en) System and method for developing and processing a graphical user interface for a computer application
CN107621951B (zh) 一种视图层级优化的方法及装置
US20180275833A1 (en) System and method for managing and displaying graphical elements
US20130063482A1 (en) Application programming interface for a bitmap composition engine
US10417327B2 (en) Interactive and dynamically animated 3D fonts
Grahn The animate package
CN116095250B (zh) 用于视频裁剪的方法和装置
US7626595B2 (en) Resolution independent image resource