Diseño de OIA con DescartesJS e IA - Parte 3

¿Qué es una imagen pixelada?

Las imágenes pixeladas, también conocidas como imágenes rasterizadas (mapas de bits), están compuestas por una matriz de píxeles, donde cada píxel representa un color específico. Por ejemplo, si la imagen es de 8 bits, significa que cada píxel puede tener hasta 256 colores, una de 16 bits puede lograr hasta 65,536 colores por píxel. Obviamente, el segundo ejemplo es de mayor calidad y, en consecuencia, de mayor peso. Estas imágenes tienen una resolución fija y pueden perder calidad al ampliarse, lo que resulta en una apariencia borrosa o dentada.

En contraste, las imágenes vectoriales se crean a partir de ecuaciones matemáticas que definen formas geométricas, como líneas y curvas, permitiendo un escalado infinito sin pérdida de calidad. En informática, las imágenes pixeladas se utilizan comúnmente en fotografías y gráficos detallados, mientras que las vectoriales son ideales para logotipos, iconos y diseños que requieren flexibilidad de tamaño sin distorsión.

Las imágenes pixeladas suelen utilizar formatos como JPEG, PNG, BMP, GIF, TIFy WebP, cada uno con características específicas. JPEG (o JPG) es ideal para fotografías debido a su compresión, que reduce el tamaño del archivo sin gran pérdida de calidad. PNG es preferido para gráficos con transparencia, ya que admite compresión sin pérdida. BMP es un formato sin compresión, lo que resulta en archivos de gran tamaño y alta calidad. GIF se emplea para imágenes animadas y gráficos con paletas de colores limitadas y soòrta transparencias simples. TIF presenta alta calidad para impresión y archivos escaneados (existe con y sin compresión). WebP, desarrollado por Google, ofrece una compresión más eficiente que JPEG y PNG, permitiendo archivos más ligeros sin perder calidad, además de admitir transparencia y animaciones.

En la escena interactiva, escribe gato azul y luego clic en "Generar imágenes" y obtendrás una imagen retro con pixeles muy definidos.

Imagen como fondo de un espacios. DescartesJS maneja sin problema imágenes png, webp, svg, gif y jpg. Por ejemplo, si un archivo portada.png está en una carpeta /images que está en el mismo nivel que el archivo de DescartesJS, entonces se introduciría images/portada.png en el campo de texto para desplegar dicha portada como fondo.

Imagen como gráfico. Este gráfico consiste en una imagen tipo jpg, png, gif, svg (imagen tipo vectorial) o webp que puede insertarse en el interactivo. La imagen debe estar en la misma carpeta que el interactivo o en una subcarpeta. Cabe mencionar que las imágenes webp funcionan en todos los navegadores modernos; y en Safari sólo funciona a partir de la versión Big Sur de mac OS.

Observa el video, para conocer cómo se insertan imágenes en espacios de una escena de DescartesJS.

En el apartado anterior, se observó que es posible introducir imágenes en los interactivos. A éstas se les puede controlar su tamaño y proporción, su colocación y su rotación. Aunque todos los parámetros en el ejercicio son números, también pueden usarse variables que permiten hacer estos cambios de forma interactiva. No obstante, esto se verá cuando se aborden ejercicios más avanzados.

Determinados controles, como los controles gráficos o los controles tipo botón, permiten introducir imágenes. Para ello, se introduce la dirección relativa de la imagen respecto de la escena en el parámetro correspondiente. En el caso de los controles gráficos, el control es sustituido por la imagen introducida.

En el video, además de explicar las imágenes en controles, se indica cómo usar el parámetro región de recorte con los siguientes datos: la posición de la esquina superior izquierda del rectángulo, la anchura y altura del mismo.

Con lo visto anteriormente, podemos pensar en muchas aplicaciones que usen imágenes en un objeto interactivo. Una de esas aplicaciones es el diseño de presentadores de diapositivas, la cual es la tarea de esta sesión. Sin embargo, antes de ir a la tarea, presentamos un video en el cual se explica cómo asociar las imágenes a un control gráfico.

Una vez hyas visto el video, seguramente empezarás a pensar en posibles aplicaciones como escenas de arrastre para el diseño de puzles o un ejercicio para arrastrar imágenes a contenedores con descripciones de la imagen y un muy largo etcétera.

En este apartado vamos a diseñar, con DescartesJS, un presentador de diapositivas de imágenes.

Observa el video tutorial con mucho cuidado y ve construyendo tu presentador. En este ejercicio aprenderás nuevos conceptos, como: control tipo botón, vectores, el condicional dibujar si, un estilo extra, proporciones de la imagen, y... pues... nada más, pocos conocimientos para una gran escena interactiva.