Al terminar esta sesión, habrás desarrollado la siguiente actividad:
En esta actividad utilizaremos controles gráficos, funciones, vectores, animación, textos en coordenadas relativas, diseño JavaScript de botones, cambio de estilos de fuente y, en especial, las familias de gráficos.
Como puedes observar, la actividad presenta muchos elementos de diseño, pero algunos de ellos los puedes omitir, como el cambio de la fuente o el diseño de botones. Lo importante de la actividad es evidenciar las fortalezas del editor DescartesJS, que nos permite crear escenas interactivas diferentes a las escenas tradicionales de matemáticas.
Espacio de trabajo
Inicialmente, debes descargar una carpeta de trabajo que puedes descargar aquí. El contenido de esta carpeta es el siguiente:
Archivo index.html, es el archivo que ejecuta la actividad y el que vamos a modificar con el editor DescartesJS.
Carpeta imagenes, que contiene 12 imágenes a usar en el diseño de la actividad.
Carpeta images, que contiene la imagen de fondo.
Carpeta lib, que contiene el intérprete DescartesJS.
Carpeta fonts, que contiene una fuente especial que usaremos al final de la actividad.
El archivo index.html sólo presenta la configuración del espacio de trabajo, el objetivo es construir la actividad siguiendo las instrucciones que se dan a lo largo de este capítulo. El diseñador es libre de cambiar algunos elementos de diseño, como imágenes, los textos, máxima calificación y número de ejercicios. Comprendida la actividad, se pueden emprender otras actividades similares o esta misma con un mayor número de contenedores.
Una vez abras el archivo index.html (Archivo → Abrir), observarás que la escena tiene dimensiones $790\times 500$ y, además, la opción escalar en el parámetro expandir escena, la cual asegura que si el espacio en el navegador es más grande que el de la escena original, se reescale todo el espacio hasta ajustarse al tamaño en el navegador.
Las imágenes que vamos a usar (carpeta imagenes) las hemos obtenido de la página http://www.dedominiopublico.org/, la cual ofrece revistas y películas que, por su antigüedad, son de dominio público.
El criterio de selección, el nombre y el tamaño de las imágenes, las explicamos más adelante.
Imágenes a usar en el interactivo de Secuencias Temporales.
Los dos primeros tríos de imágenes son capturados de la revista de cómics TBO y, los dos últimos tríos, de dos películas de Disney de $1937$ (limpiadores de relojes y fantasmas solitarios).
El fondo de el espacio de trabajo, será una imagen que se encuentra en esta ruta relativa: images/fondo.jpg (Ver Figura 1.2). Por su
tamaño reducido ($120\times 120$ pixeles) y por ser del tipo patrón, seleccionamos como despliegue de la imagen la opción mosaico. Obviamente, puedes elegir otra imagen de fondo o sólo usar un color de fondo.
Configuración del espacio de trabajo.
Uso de familias DescartesJS
Como vimos anteriormente, una de las estructuras más utilizadas en programación es el ciclo o bucle tipo Do-While (hacer–mientras), cuyo propósito es ejecutar un bloque de código y repetir la ejecución mientras se cumpla cierta condición expresada en la cláusula while, tal como se observa en la Figura 1.3:
En código JavaScript, un ejemplo de este tipo de ciclo sería:
i = 1;
do {
document.write(i);
i = i + 1;
} while (i<10);
Cuyo propósito es escribir los números naturales del 1 al 10.
Estructura Do-While.
Una variante del código anterior, que nos permitirá acercarnos al funcionamiento de las familias de DescartesJS, sería el siguiente:
i = Inicia;
do {
function Dibujar_Poligono(i);
i = i + Incremento;
} while (i<Termina);
En el que se presenta una llamada a una función que dibujará un polígono, es decir, se dibujarán tantos polígonos como la condición del while sea verdadera.
Ya hemos visto que en el editor DescartesJS hay varias formas de crear algoritmos con la estructura Do-While. En la Figura 1.4 observamos dos ejemplos, el primero corresponde a una función (selector Definiciones), que muestra los números naturales del 1 al 9 (verifica por qué hasta nueve). El segundo algoritmo corresponde a una animación, que explicaremos al final de esta actividad.
Estructuras Do-While en DescartesJS.
Otra de las opciones interesantes de DescartesJS es el uso de familias para el diseño de gráficos. El funcionamiento de esta opción es similar al de un ciclo o bucle tipo Do-While. En DescartesJS, el segundo ejemplo Do-While en código JavaScript sería de la siguiente forma:
En el selector Gráficos hemos creado un polígono cuyas coordenadas varían con la variable i (observa que está activada la opción familia). Esta variable toma valores según el intervalo, es decir, desde un valor inicial que hemos llamado Inicia, hasta un valor final Termina, el incremento depende del número de Pasos definidos, que se calcularía así: Incremento = (Termina – Inicia)/Pasos. Veamos unos ejemplos para un intervalo [0,6] y diferentes valores de la variable pasos:
En DescartesJS podemos crear familias de cualquier tipo de gráfico. Algunos ejemplos se muestran en la siguiente escena interactiva:
Contenedores de las secuencias temporales
Ahora, vamos a nuestra actividad. Nuestra tarea es dibujar tres polígonos que se constituirán en los contenedores en los cuales irán en orden secuencial las imágenes. Alguien podría decir que bastaría con dibujar tres rectángulos y olvidar lo de las familias, conclusión que es cierta, pero el uso de familias facilita el diseño de plantillas similares con 4 o más contenedores, tal como están publicadas en el proyecto Plantillas de DescartesJS, además de otros diseños en los cuales las familias son fundamentales (los puzles, por ejemplo).
Nuestro espacio de diseño, como vimos antes, es de $790\times 500$ pixeles que, desde un análisis aritmético simple, nos permite inferir que un ancho de $250$ para nuestros contenedores sería el adecuado. Este ancho determina la escala que usaremos en nuestro espacio de trabajo, tal como se aprecia en la siguiente figura:
La posición del origen de coordenadas la hemos desplazado, de tal forma que podamos dibujar nuestros polígonos en el primer cuadrante así: desplazamiento del eje $y$ en un 48% a la izquierda, esto significa que el eje $y$ queda casi en el borde izquierdo del espacio de trabajo (inicialmente estaba en el centro del espacio, por ello lo de 48%); desplazamiento del eje $x$ en un 12% hacia arriba, este valor se puede ajustar de tal forma que quede el espacio suficiente para los títulos y las imágenes, es decir, a medida que avances en el diseño de la actividad puedes regresar a este paso para cambiar la posición del origen de coordenadas.
Nuestras imágenes provienen de tiras cómicas que, generalmente, tienen un valor mayor en el ancho. Partiendo de esta premisa, hemos escogido como tamaño de imágenes de $250\times 200$ pixeles. Así las cosas, la familia de polígonos a construir es la siguiente:
Con un fondo de color amarillo y transparencia ae, el resultado es el que se observa en la figura de la página siguiente.
Recuerda que el fondo del espacio es la imagen fondo.jpg con despliegue mosaico, hemos dejado, por ahora, los ejes en color azul. Observa que los tres polígonos inician en i=0, i=1 y i=2.
Controles gráficos e imágenes de las secuencias temporales
Como nuestro propósito es arrastrar imágenes a los contenedores, necesitamos tres controles gráficos a los cuales asociaremos las imágenes. Estos controles tendrían la siguiente configuración:
Inicialmente ubicados en (0,-0.5), (1,-0.5) y (2,-0.5) para g1, g2 y g3 respectivamente, de un tamaño de 60, tal como se aprecia en la siguiente figura:
En el selector Definiciones creamos un vector I que contendrá las imágenes que vamos a usar. En principio, hemos dejado un tamaño de cien (100), suficiente para una treintena de ejercicios y, obviamente, para los cuatro de nuestra actividad. Es importante definir los elementos del vector, así: I[1]='imagenes/1.png', I[2]='imagenes/2.png' y así sucesivamente hasta la última imagen a usar en la actividad.
Nuestras imágenes se irán mostrando dependiendo del ejercicio que se esté ejecutando, por ello, hemos definido dos variables en el algoritmo INICIO, iniciadas en uno (1).
La variable otro determina el ejercicio en ejecución, inicialmente uno para el primero. La variable otra determinará el número de la primera imagen correspondiente a ese ejercicio, uno para el primer ejercicio. Las variaciones correspondientes a estas variables las veremos más adelante.
Nuestro siguiente paso es agregar las imágenes en el opción gráficos. Para ello, agregamos una primera imagen cuya configuración es la siguiente:
La expresión (g1.x,g1.y,0.6,0.6) significa lo siguiente: los dos primeros términos indican la posición de la imagen, es decir, se encontrará donde esté el control gráfico g1, igual para las otras dos imágenes asociadas a los controles g2 y g3; los dos últimos valores indican el escalamiento de la imagen, es decir, un ancho y un alto del 60% del tamaño original. Ahora, el archivo que contiene la primera imagen se carga a través el elemento I[otra], donde la variable otra tiene un valor de uno (1), el archivo para la segunda imagen es I[otra+1], y para la tercera I[otra+2]. Así las cosas, obtendríamos lo siguiente:
Es importante que comprendas que todo control gráfico tiene unas coordenadas asociadas. Si el control está identificado (id) como gn, sus coordenadas asociadas son (gn.x,gn.y).
El tamaño de 60 para el control gráfico, ahora es comprensible. Obviamente, no nos interesa que el control se mustre en nuestro espacio de trabajo, por ello, dejaremos un valor cero (0) en la casilla dibujar si, que tendrá como efecto la desaparición visual de los controles.
Resumiendo, nuestra actividad tendría la siguiente presentación (interactúa con ella):
Una última acción sobre las imágenes, que haremos en este apartado, es el cambio del tamaño cuando las imágenes están cerca de los cajones o contenedores. En la imagen anterior se observa que los tamaños de las imágenes están reducidas, lo cual se hizo intencionalmente para que cupieran en el espacio inferior de la escena. Intervendremos los dos últimos valores de la expresión de cada imagen, sumándoles 0.4*(g1.y>0), es decir, cuando arrastremos la imagen hacia arriba, una vez que sobrepasemos el eje $x$, el tamaño se aumentará en 0.4, obteniendo su tamaño original. Para las otras imágenes es similar, cambiando el control gráfico.
El efecto sobre la actividad se puede observar en la siguiente imagen:
Rotaciones de las imágenes – algoritmos y funciones
Un efecto adicional es generar rotaciones en las imágenes que desparecerán una vez las arrastremos hacia los contenedores. Para ello, hemos incluido una función que denominamos rota(). Esta función la invocamos una sola vez por ejercicio, para el primer ejecicio escribidmo en el algoritmo de inicio:
En el selector Definiciones creamos la función rota(), así:
Esta función será un algoritmo con las siguientes instrucciones:
Las tres primeras instrucciones asignan a los elementos I[otra], I[otra+1] y I[otra+2], las imágenes correspondientes a cada ejercicio que, para la primera secuencia de imágenes sería I[1]='imagenes/1.png', I[2]='imagenes/2.png' y I[3]='imagenes/3.png'. A continuación, se generan tres valores asociados a las variables rota1, rota2 y rota3, valores aleatorios entre 0 y 45 (obtenidos por rnd*30+15), cada uno de estos valores se multiplican por la expresión, también aleatoria, (-1+rnd*2), la cual asigna un valor positivo o negativo a las rotaciones.
En nuestras imágenes incluiremos en la casilla rotación la expresión rota1*(g1.y<0). Para la otras dos: rota2*(g2.y<0) y rota3*(g3.y<0), que significa asignar las rotaciones antes creadas, mientras las imágenes estén por debajo del eje $x$.
Así, entonces, nuestra actividad tendrá esta apariencia:
Seguramente, te estarás preguntando sobre el funcionamiento y la notación de la función rota(). En el siguiente texto, puedes aclarar dudas al respecto. Observa el ejercicio que ilustra las ventajas de una programación modular, a través del uso de la definición: función.
Control de coordenadas y evaluación
Nuestros siguientes pasos están centrados en evitar que las imágenes se salgan del espacio de trabajo y se ajusten adecuadamente a los contenedores. Por otra parte, debemos verificar que la ubicación de cada imagen esté en la posición correcta.
En el algoritmo CALCULOS incluiremos el llamado a dos funciones. La primera la hemos denominado controlXY(), la segunda la llamamos evalua(). Teniendo como referencia la escena que hemos diseñado hasta este momento, explicaremos la primera función.
Función controlXY(). Debemos evitar que el control gráfico g1 asociado a la primera imagen se desborde del espacio de trabajo. Las instrucciones que permiten evitar este desborde son:
Si observamos la escena, el tope superior está en la mitad de los cajones, es decir, en 0.4, para evitar un desplazamiento más arriba de este valor usamos la estructura condicional g1.y = (g1.y>0.4)?0.4:g1.y, la cual podríamos explicar desde su forma en diagrama de flujo:
La condición es (g1.y>0.4), si es verdadera se ejecuta la instrucción que está después del signo ?, es decir, g1.y=0.4 (la ordenada del control gráfico será igual a 0.4, siempre que ésta supere ese valor); si es falsa, se ejecuta la instrucción que está después del signo :, es decir, g1.y = g1.y (no cambia la ordenada del control gráfico). Igual análisis puedes hacer para las otras instrucciones, las cuales evitan que la ordenada del control gráfico sea menor a -0.5 y, además, que su abscisa no sea inferior a 0.5 ni superior a 2.8.
Por otra parte, debemos garantizar que la imagen quede incrustada en alguno de los tres contenedores, para lo cual recurrimos al siguiente condicional: g1.x=(g1.y>0)?ent(g1.x)+0.5:g1.x. El cual fija la abscisa al centro de los cajones (0.5, 1.5 o 2.5). Estas mismas instrucciones las replicamos a los otros controles gráficos.
Función evalua(). Para esta función hemos creado, inicialmente, un vector C, que permitirá almacenar las posiciones correctas (1) o no (0) de las tres imágenes.
La secuencia estará bien colocada si la primera imagen está en la posición g1.x = 0.5 y g1.y = 0.4, la segunda imagen en g2.x = 1.5 y g2.y = 0.4 y la tercera en g3.x =2.5 y g3.y = 0.4.
Si lo anterior ocurre, C[1], C[2] y C[3] serán iguales a uno (1).
El algoritmo de la función incluye, además, las siguientes variables:
correcto. Es la suma de los tres elementos del vector C, para una secuencia correcta su valor debe ser tres (3).
listo. Es igual a uno (1) cuando todas las piezas están en los contenedores.
malas. Es la suma de las piezas mal colocadas, es decir, la suma de los elementos del vector C que valen cero (0).
Verifica que la actividad la has realizado correctamente hasta este apartado; para ello, observa el siguiente vídeo, el cual te indica cómo debe estar funcionando el objeto interactivo.
Puedes desactivar el plano cartesiano.
Botones de verificación y nuevo ejercicio
Siempre que estemos diseñando una actividad con DescartesJS debemos adoptar el papel de usuario, pues ello nos permitirá incluir algunas acciones que hacen la actividad más atractiva o divertida para los demás usuarios.
Por ejemplo, una vez se ubiquen las piezas en los cajones, podríamos optar por presentar los mensajes de acierto o error, lo que nos obligaría a inactivar los controles gráficos, impidiendo alguna corrección. Para evitar esta situación, es preferible usar un botón de verificación, en el que el usuario hará clic una vez esté seguro de su respuesta.
Diseñamos, entonces, este botón como lo muestra la siguiente imagen (haz clic sobre ella para una mejor visualización):
El texto del botón será Verificar en negrita y tamaño 22 con los colores mostrados en la figura anterior, lo hemos centrado horizontalmente en 320 (este valor se obtiene restando el ancho de 790 y dividendo por dos), su ancho es 150 y el alto de 40.
La acción es calcular con las siguientes instrucciones:
La variable ver, cuando vale uno (1), nos servirá para mostrar el segundo botón y los textos.
La variable nota almacena la calificación de la actividad. Las demás variables de la expresión las hemos definido en el algoritmo INICIO:
Aquí es importante observar que a medida que avanzamos en el diseño de una actividad, tendremos que intervenir pasos anteriores, como es el caso de este algoritmo; en otras palabras, la programación de una actividad no es posible hacerla en forma lineal, siempre tendremos que retornar a los pasos anteriores.
Continuando con las instrucciones, la variable nmax tiene un valor de cinco (5), que corresponde a la nota más alta de calificación, valor que puede ser cambiado según la escala de calificación utilizada en el entorno del diseñador (20 en Venezuela, por ejemplo). La variable ejercicios tiene un valor de cuatro, que es la cantidad de ejercicios de esta actividad, igualmente la puedes cambiar.
Ahora, con estos valores entenderemos la expresión que calcula la nota. Por cada ejercicio, sumará a la nota (nmax/ejercicios o 5/4 o 1.25), que para los cuatro ejercicios sería un total de cinco (5). Por cada pieza mal colocada, la nota se castigará en (malas/3)*(nmax/ejercicios), es decir, si tenemos dos piezas mal ubicadas, la nota se reduce en (2/3)*1.25.
El botón se muestra cuando la variable listo es igual a uno (ver función evalua()) y ver es cero.
Finalmente, hemos incluido un diseño especial al botón en la casilla imagen. Si está casilla la dejamos en blanco, el diseño del botón es el que trae por defecto DescartesJS, también es posible usar una imagen o, para nuestro caso, la siguiente expresión de DescartesJS:
Puedes probar diferentes valores para los colores, el radio de los bordes del botón y tipo de fuente. En la siguiente imagen, se observa cómo va nuestra actividad:
Como lo advertimos antes, una vez el usuario haga clic en este botón, los controles gráficos deben inactivarse, para ello, incluimos la expresión ver = 0 en las casilla activo si. Observa que cuando hacemos clic en el botón Verificar a la variable ver se le asigna el valor de uno (1), que tiene como primer efecto la inactivación de los controles gráficos.
Botón Otro ejercicio. Su diseño es similar al anterior botón, por lo que nos detendremos sólo en las instrucciones de cálculo y en la casilla dibujar si. En los parámetros iniciales el único cambio es el tamaño de fuente, que para este botón es de 20.
El botón debe aparecer una vez se haga clic en el botón Verificar y, obviamente, existan aún ejercicios por resolver, por ello, en la casilla dibujar si debemos escribir la siguiente condición:
(ver=1)&(otro<ejercicios).
Cuando se hace clic en este botón, las instrucciones que se ejecutan son las siguientes:
otro=otro+1. Aumenta en uno la variable otro, que responde al número de ejercicio en curso.
otra=3*(otro-1)+1. Habíamos explicado que esta variable está asociada al número de la imagen a mostrar. Por ejemplo, si el ejercicio que se está desarrollando es el cuarto (otro = 4), la variable otra tomará el valor de 3*(4 – 1) + 1 = 10, la imagen asociada sería: 10.png.
ver=0. Al retornar a cero esta variable, se oculta el botón, pues no cumpliría la condición (ver=1)&(otro<ejercicios).
g1.y=-0.5. Retorna la primera imagen a la parte inferior de la escena.
g2.y=-0.5. Retorna la segunda imagen a la parte inferior de la escena.
g3.y=-0.5. Retorna la tercera imagen a la parte inferior de la escena.
anima=1. La variable anima la usamos para ejecutar una animación, que explicaremos al final de este instructivo.
Más polígonos
Dibujaremos dos polígonos adicionales, que deben estar después de las imágenes. Un polígono igual al primero que diseñamos, pero sin relleno. Su utilidad es evitar que se pierdan los bordes de los cajones una vez estén colocadas las imágenes, como se muestra en la siguiente imagen.
El polígono se debe dibujar cuando las imágenes estén colocadas; es decir, cuando la variable listo es igual a uno (1).
Nota que en la casilla dibujar si hemos puesto la variable listo sola, esta expresión, para DescartesJS, es equivalente a listo = 1. Observemos su efecto:
El otro polígono tiene como función dibujar cajones con relleno colorado para las imágenes mal puestas. Para ello, copiamos el polígono original, en el cual hacemos los siguientes cambios: el color de relleno es rojo con transparencia.
La condición para mostrar los cajones es (C[i+1]=0)&(ver=1); es decir, se muestra el contendedor colorado cuando se hace clic en el botón verificar y el elemento del vector C es cero (pieza mal puesta).
Un ejemplo del efecto de este polígono se muestra en la siguiente figura:
Diseño de textos
Ya estamos llegando al final de nuestra actividad. Los textos que usaremos tendrán algunas características especiales que debes considerar para los efectos finales de la actividad. En primer lugar, usaremos textos en formato simple, el cual basta con escribirlo en la casilla de texto o, si se prefieres, hacer clic en el botón de Texto simple (marcado con la letra mayúscula T).
Título de la actividad. Tal como aparece en la siguiente figura. Las coordenadas relativas en (1.5,1.15), tamaño de fuente en 30 y borde para el texto.
Instructivo. Es el texto que instruye sobre lo que hay que hacer en la actividad.
Cambio de fuente. Seguramente ya habrás notado que el texto correspondiente al botón de otro ejercicio, no se ajusta al ancho del botón, algo que se soluciona cambiando el ancho o el tipo de fuente. Una de las carpetas que acompañan esta actividad es una que hemos llamado fonts, la cual contiene varios tipos de fuente que usaremos para nuestros textos, para ello, debes incluir en el archivo index.html (usa un editor de texto sin formato), un vínculo, tal como aparece en la siguiente figura:
Verifica si el archivo index.html tiene esa línea, sino la puedes escribir luego de la etiqueta <title>.
Nuestra actividad, para este tipo de fuente, tendrá la siguiente presentación:
En la carpeta fonts encontrarás $16$ tipos de fuente, puedes practicar cambiando la fuente en el vínculo anterior. Algunos ejemplos, son:
Si deseas generar otros tipos de fuente, te presentamos un procedimiento sencillo para obtenerlas:
Encontrando fuentes. En primer lugar, accede a una página que te permita descargar las fuentes en tipografía tipo True Type Font (ttf) u Open Type Font (otf), una de ellas es https://www.fontsquirrel.com/fonts/
Una vez descargada la fuente, debemos generar un código base64, el cual se puede lograr desde la página anterior desde la opción Generator: https://www.fontsquirrel.com/tools/webfont-generator. Los pasos son simples, subes la fuente (Upload fonts), seleccionas EXPERT, formato WOFF.
Es importante activar la opción Base64.
Una vez descargada la fuente (Download your kit), abrimos el archivo stylesheet.css y copiamos todo el código que hay después de src. Este código lo pegamos en font1 o font2 o... en una nueva fuente y... eso es todo.
Ahora, si te parece complejo el cambio de fuente, puedes dejar la que hemos definido. Continuemos, entonces, con los últimos pasos de nuestra actividad.
Calificaciones. En dos textos presentaremos la nota acumulada y la nota final, así:
La diferencia entre uno y otro es la condición, para el primero se presentará una nota acumulada mientras aún falten ejercicios por realizar, el segundo texto presenta la nota final al no haber más ejercicios por realizar.
Mensaje de error. Texto que se muestra cuando hay piezas mal colocadas.
Este es un ejemplo de los textos que pueden aparecer:
Animación. Finalmente, incluimos una animación, la cual se invoca a través de un evento, cuya condición es que la variable anima sea uno (1). Esto siempre ocurrirá cuando hacemos clic en el botón Otro ejercicio.
El contenido del selector Animación es el que se muestra en la siguiente figura:
Se trata de un algoritmo tipo Do-While que se ejecuta cuatro veces. En cada ejecución se generan posiciones horizontales y aleatorias de los controles gráficos, se invoca, también, la función rota(). Estas ejecuciones tiene como efecto una animación en las imágenes cada vez que iniciamos un nuevo ejercicio.
El objetivo, entonces, es poner las imágenes en coordenadas aleatorias. Seguramente, habrás notado que el diseño de la actividad, antes de la animación, ponía las imágenes exactamente debajo de la posición correcta.
Tarea final
Utilizando la actividad anterior, haz los cambios necesario para diseñar un objeto interactivo de secuencias temporales de cinco contenedores. Una primera sugerencia, usa una escala de 150 para el espacio y en los polígonos un intervalo [0,4] y pasos = 4.
Si tienes problemas para seleccionar las imágenes, puedes usar las secuencias temporales diseñadas en https://www.orientacionandujar.es/, cuyo archivo PDF se encuentra en la carpeta Para_la_tarea de esta sesión.
Otra alternativa, es diseñar las imágenes en PowerPoint; para ello, creas un cuadro de 3cm x 3xm, le incluyes texto tipo WordArt y los colores que desees, en el siguiente apartado podrás ver algunos ejemplos con imágenes diseñadas en PowerPoint.
En las siguientes páginas, puedes observar secuencias temporales de 4 y 6 contenedores, descargada del proyecto Plantillas del Proyecto DescartesJS.
Incluimos, además, dos ejemplos en los cuales cambiamos la intencionalidad de la escena, pues en lugar de imágenes para ordenar como secuencia temporal, usamos imágenes para ordenar una oración o una frase. Es posible que se te ocurra otro tipo de usos de esta escena, según el objeto de conocimiento que esté abirdando.
La variable 
