PLANTILLAS PARA LIBROS

Fondo Editorial RED Descartes

Córdoba (España)
2023

Título de la obra:
PLANTILLAS PARA LIBROS

Autor
Juan Guillermo Rivera Berrío

Código JavaScript para el libro: Joel Espinosa Longi, IMATE, UNAM.
Recursos interactivos: DescartesJS
Fuentes: Lato y UbuntuMono
Imagen portada: Generada por la IA Playground

Red Educativa Digital Descartes
Córdoba (España)
descartes@proyectodescartes.org
https://proyectodescartes.org

Proyecto iCartesiLibri
https://proyectodescartes.org/iCartesiLibri/index.htm

ISBN: 978-84-18834-64-6

Esta obra está bajo una licencia Creative Commons 4.0 internacional: Reconocimiento-No Comercial-Compartir Igual.

Tabla de contenido

Prefacio

En el proyecto iCartesiLibri, publicamos el libro Plantillas DescartesJS, libro dirigido a profesores que incorporan en su quehacer docente las Tecnologías de la Información y Comunicación – TIC –, de tal forma que a través de intervenciones simples pueda enriquecer los contenidos de las asignaturas que desarrollan con sus estudiantes.

Tanto ese libro como el que presentamos ahora, describen y explican cómo intervenir las plantillas del proyecto Plantillas con DescartesJS, por lo que es necesario ir a este proyecto, para descargar la o las plantillas que se deseen usar.

Inicialmente, las plantillas se diseñaron para su uso en páginas web. Posteriormente, surgen los libros interactivos de la Red Educativa Descartes, cuya última versión emplea páginas de 540 pixeles de ancho efectivo, anchura que, en muchos casos, obliga a que los objetos interactivos incorporados, entre ellos las plantillas, tengan que abrirse en ventanas emergentes. Lo anterior no significa que las ventanas emergentes sean un problema, mientras ello ocurra en el mismo ambiente digital del libro.

En el contexto anterior, surge la idea de intervenir algunas plantillas y diseñar un versión que permita la interacción en la misma página, sin recurrir a la apertura de ventanas emergentes. Este libro recoge el resultado de la intervención realizada, presentando 37 plantillas diseñadas para los libros interactivos de la Red Educativa Digital Descartes.

La edición de cada una de estas plantillas se explican en este libro, dejando el archivo de descarga en el proyecto Plantillas con DescartesJS.

Plantillas de juegos

Sopa 4x4

Este modelo de sopa permite construir la palabra con letras contiguas horizontal o verticalmente. Incluye, además, tres pistas, dos de ellas castigan la nota al igual que la opción de borrado. La modificación de esta plantilla, se hace a través de los <script>, que se encuentran al final del archivo index2.html.

Palabras de la sopa. El primer número corresponde a la cantidad de palabras a encontrar, no mayor a 20. A continuación, entre comillas simples, se escriben las palabras en mayúsculas y con un máximo de 12 letras.

Los juegos de sopa de letras forman parte de la historia de la lengua castellana, siendo una herramienta de aprendizaje muy importante a la hora de acercar a los niños y niñas de primaria al aprendizaje de las letras, las palabras y sus significados (mundoprimaria)

Puzle de arrastre

El puzle permite hasta 20 imágenes con un tamaño no inferior a 380x380 pixeles. Su modificación es bastante simple, observa el video:

La imagen descargada en el video, sólo fue para efectos ilustrativos. Procura usar imágenes de dominio público o, al menos, con licencia creative commons.

Pese a que la plantilla permite imágenes de tamaño superior, no debemos excedernos en tamaño, pues la plantilla está diseñada para recortar la imagen y ajustarla a 380x380 pixeles.

Juego memoriza imágenes

La edición de esta plantilla se limita a cambiar las imágenes. El número de imágenes debe ser menor que 21 y mayor a 7.

En este caso, las imágenes deben ser de un tamaño no inferior a 160x160 pixeles y en formato png. En el siguiente video, te mostramos cómo obtener imágenes de las IA ChatSonic y Playground, las cuales nos suministran imágenes de tamaño muy superior al que necesitamos; por ello, es necesario redimensionarlas.

Otra forma de obtener imágenes con el tamaño 160x160, es buscar en Google, con precisando el tamaño que necesitamos; por ejemplo, Elefante imagesize: 160x160.

Juego memoriza imágenes animadas

El procedimento es el mismo de la plantilla anterior, pero con imágenes animadas en formato gif, las cuales puedes crearlas o descargar en páginas como:

• GIFSGIFS. Página que ofrece una buena cantidad de imágenes y herramientas para editarlas, como el cambio de tamaño. La animación de esta lista, fue obtenida en esta página.
• Gifs gratis. Otra página con una buena cantidad y variedad de imágenes. Para bajar gratis cualquiera de los gifs de esta pagina, basta con señalar el gif deseado con el puntero del ratón y con el botón derecho seleccionar "guardar imagen como..." y elegir la carpeta donde se desee guardar.
• tenor. Una página muy popular, que incluye video clips y memes. Su contenido está bajo licencia MIT, muchas de las imágenes de la plantilla fueron descargadas de esta página, al igual que la animación que acompaña a este párrafo.
• Google imágenes. Este buscador, a través del botón de herramientas, permite obtener imágenes animadas con licencia creative commons: por ejemplo, para hallar gatos animados, hicimos esto.
• Giphy. Obviamente, no podíamos ignorar la que es considerada como la principal página para crear y descargar imágenes animadas. Algunas imágenes vienen en formato webp, como la que acompaña este párrafo.

Puzle giratorio

Un puzzle giratorio es un tipo de rompecabezas que requiere que los participantes muevan partes del puzzle para completarlo. Estos puzzles a menudo involucran una serie de elementos interconectados que se mueven en direcciones diferentes para crear una solución. Están diseñados para ser desafiadores e interesantes, lo que los hace divertidos de armar. Los puzzles giratorios pueden contener una variedad de patrones y figuras, y algunos incluso vienen con pistas para ayudar a los jugadores a completar el rompecabezas. Completar un puzzle giratorio puede ser una experiencia satisfactoria y gratificante para los jugadores.

La anterior definición de ChatSonic nos dice que pueden haber una de patrones y figuras; para nuestro puzle, las figuras son cuadrados de 95x95 pixeles, para obtener una imagen final de 380x380 pixeles. Así las cosas, las imágenes deben tener dimensiones iguales o superiores y en formato png.

El puzle lo hemos diseñado para un máximo de 19 imágenes. Su edición es sencilla, pues sólo tienes que cambiar el número de imágenes a usar y los nombres de las mismas, eso se hace en los <script> que se encuentran al final del archivo index.html.

Puzle giratorio con Flickr

Un puzle giratorio es un tipo de rompecabezas en el que los usuarios deben usar piezas de diferentes formas y colores para completar una imagen. Las piezas se pueden mover de forma rotatoria para encajar con precisión en la imagen final. Los puzles giratorios son un desafío popular entre niños y adultos porque los usuarios deben usar la lógica para resolver los problemas y encajar las piezas. Estos puzles también se pueden usar como una forma divertida de mejorar la habilidad de resolución de problemas y desarrollar habilidades de pensamiento crítico.

En esta otra definición, dada por ChaGPT, se reitera la variedad de formas pero, en nuestro puzle, sigue siendo la forma cuadrada que, en este modelo, son de 100x100 pixeles, para una imagen final de 600x400 pixeles, en formato png.

La edición del puzle es similar al anterior, cuya única diferencia es que en lugar de los nombres de las imágenes, se debe poner una palabra o palabras que se deseen buscar en Flickr.

Si no se desea incluir los botones de Flickr, se debe poner 0 (cero) en el primer tema.

Puzle giratorio sin Flickr

Si ponemos cero en el primer tema, obtendríamos el mismo puzle anterior, pero sin los botones de Flickr:

Aunque es posible eliminar los botones para imágenes con Flickr, optamos por diseñar una plantilla adicional, ello para no desperdiciar el espacio que quedaría al eliminar los botones.

La edición del puzle se limita a poner el número de imágenes que, para esta plantilla, es de un máximo de 25 imágenes en formato png.

Juego "El Ahorcado"

El juego del ahorcado es un juego de adivinanza de palabras en el que un jugador piensa en una palabra (el computador) y otro jugador intenta adivinarla letra por letra. Si el jugador que intenta adivinar una letra incorrecta, se dibuja una parte de una persona siendo ahorcada. Si se dibujan todas las partes, el jugador pierde el juego. Si el jugador adivina la palabra antes de que se dibuje todo el ahorcado, gana el juego.

La edición de esta plantilla es muy sencilla, observa:

Sopa de letras (15x15)

Una sopa de letras es un juego de palabras cruzadas en el que el jugador debe descubrir palabras ocultas en una malla de letras. Para jugar, el jugador debe buscar palabras en vertical, horizontal y diagonal, cruzando palabras relacionadas unas con otras. Para complicar el juego, algunas letras pueden estar invertidas, ocultas o agrupadas de forma irregular. Una vez que todas las palabras son descubiertas, el jugador ha completado la sopa de letras.

Nuestra sopa, no genera palabras en diagonal. La edición se limita a poner el tema de la sopa y 10 palabras, escritas en mayúsculas.

No hay información verificable que respalde la afirmación de que Pedro Ocón de Oro inventó la sopa de letras. La sopa de letras es un juego muy antiguo y su origen es incierto, por lo que es posible que haya habido muchas personas a lo largo de la historia que hayan contribuido a su evolución o popularidad. Sin embargo, es importante tener en cuenta que la afirmación de que Pedro Ocón de Oro inventó la sopa de letras no está respaldada por hechos verificables y es posible que sea una afirmación errónea.

Sopa de letras (15x15) con imágenes

Esta sopa permite cambiar el tema de la sopa, las imágenes, el formato de imagen (jpg o gif), el número de palabras y las palabras. Para ello, debes modificar al final del archivo index2.html, los siguientes <script>:

• Formato de imágenes. El ejemplo está diseñado para mostrar imágenes animadas en formato gif, puedes usar formato jpg cambiando el número "2" por "1".
• Número de imágenes. El interactivo permite elegir entre 6 y 9 imágenes.
• Palabras de la sopa. De acuerdo con el número de imágenes, debes escribirlas entre comillas simples. Cada palabra no puede ser superior a diez letras, pues su diseño está basado en la sopa anterior.
• Imágenes. En la carpeta "imagenes" debes incluir las imágenes correspondientes a las palabras y al formato seleccionado, todas ellas con nombre in.gif o in.jpg, donde n es el número de imagen que corresponde a la palabra. Para el ejemplo, i1.gif es la imagen animada de un camello, i6.gif de una guacamaya.
  En el ejemplo, hemos incluido los dos tipos de imágenes, para que practiques con diferentes alternativas.

Es un juego popular para personas de todas las edades y son especialmente populares entre los niños y adultos mayores. También son un pasatiempo popular en periódicos y revistas y se pueden encontrar en línea.

Secuencias temporales

La edición del archivo index2.html, se limita a cambiar la nota máxima y el número de ejercicios. Por cada ejercicio, deben ir cuatro imágenes ordenadas según la secuencia temporal, observa la siguiente imagen para cuatro ejercicios:

Las imágenes deben tener un tamaño de 200x200 pixeles.

Memoriza posiciones

Este es un juego de cuatro niveles: tres, cinco, siete o nueve imágenes, cuya posición hay que memorizar.

La edición del juego es sencilla, al final del archivo index2.html hay que modificar dos <script>, con el número de imágenes (más de 2) y el tiempo de duración de cada nivelEn cada nivel, al hacer clic sobre la imagen a memorizar, muestra el tablero destapado con todas las imágenes. Esta muestra se hace por un tiempo o duración dada, que determina el nivel de dificultad del juego..

Las imágenes deben tener un tamaño de 90x90 pixeles y en formato png, nombradas con la estructura i1.png, i2.png, ...

Puzle animado 9 piezas

Esta última plantilla demanda un poco más de tiempo para su modificación, pues requiere la intervención de una imagen animada, a través de una aplicación de edición de imágenes. Pero, que sea un video el que te oriente:

Los puzles pueden tener varios usos didácticos, entre ellos: Mejorar la concentración y la atención, desarrollo cognitivo (resolver puzles puede ayudar a mejorar la memoria, el razonamiento lógico y la capacidad de resolución de problemas), mejorar la paciencia y la perseverancia (los puzles pueden ser desafiantes, lo que fomenta la paciencia y la perseverancia en la resolución de problemas).

Preguntas SI/NO 1

Esta plantilla presenta cuatro afirmaciones. El usuario debe desplazar estas afirmaciones hacia la derecha si las considera ciertas o hacia la izquierda si no lo son. Para la edición de la plantilla, abres el archivo index2.html y, al final del mismo, encontrarás tres <script> que debes modificar para el diseño de tu actividad, así:

• Nota máxima. Como en las plantillas anteriores, corresponde a la máxima nota de la escala de evaluación que estés empleando, para el ejemplo, es 10.
• Afirmaciones correctas. Debes escribir, al menos, cuatro frases ciertas, es decir, afirmaciones correctas. El número mínimo se debe a que la plantilla selecciona al azar el tipo de afirmaciones que, en algún caso, es posible que todas sean ciertas o que todas sean NO ciertas. Para nuestro ejemplo, hemos escrito 10 afirmaciones correctas. La plantilla está diseñada para calcular el número de frases que escribas.
• Afirmaciones incorrectas. Debes escribir, al menos, cuatro frases NO ciertas, es decir, afirmaciones incorrectas. Para nuestro ejemplo, hemos escrito 13 afirmaciones NO ciertas.

Las evaluaciones tipo falso o verdadero son efectivas en ciertos contextos y para ciertos objetivos de aprendizaje, pero es importante utilizarlas de manera complementaria con otras formas de evaluación para obtener una evaluación más completa y detallada del aprendizaje. Tienen como ventajas que son simples de crear y administrar, lo que las hace adecuadas para evaluaciones rápidas y informales.

Preguntas SI/NO 3

Grupo de actividades que presentan varias afirmaciones. El usuario debe hacer clic sobre SÍ para afirmaciones ciertas, o sobre NO para las que no lo son.

Esta plantilla presenta algunas diferencias significativas con respecto a la anterior. La más importante es la posibilidad de incluir dos o más actividades (para el ejemplo son cuatro), la segunda es que se puede cambiar el número de respuestas (entre dos y cuatro) y, la tercera, la posibilidad de incluir un texto relacionado con las afirmaciones.

Al final del archivo index2.html se encuentran seis <script> que debes modificar para el diseño de tu actividad, los cuales son:.

• Nota máxima. Como en las plantillas anteriores, corresponde a la máxima nota de la escala de evaluación que estés empleando, para el ejemplo, es 10.
• Número de actividades. Es posible incluir más de una actividad de evaluación, para el ejemplo son tres. Se recomienda, para un número grande de actividades, incluir un número grande de afirmaciones correctas e incorrectas.
• Número de respuestas. Deben ser dos, tres o cuatro respuestas por actividad, para el ejemplo hemos elegido tres.
• Afirmaciones correctas. Debes escribir, al menos, cuatro frases ciertas, es decir, afirmaciones correctas. El número mínimo se debe a que la plantilla selecciona al azar el tipo de afirmaciones que, en algún caso, es posible que todas sean ciertas o que todas sean NO ciertas. Para nuestro ejemplo, hemos escrito 12 afirmaciones correctas. La plantilla está diseñada para calcular el número de frases que escribas.

• Afirmaciones incorrectas. Debes escribir, al menos, cuatro frases NO ciertas, es decir, afirmaciones incorrectas. Para nuestro ejemplo, hemos escrito 12 afirmaciones NO ciertas.
• Texto relacionado. Es opcional, consiste en un texto que tenga relación con las afirmaciones, para el ejemplo hemos escogido uno sobre cultura general.

Preguntas de falso o verdadero con tiempo

Actividad similar a las anteriores, pero con tiempo para responder y nuevo diseño. La plantilla es configurable, interviniendo sólo el archivo index2.html, así:

• Máxima nota.
• Tamaño del banco de palabras. Podemos incluir un número de palabras cualquiera. Lo importante es que tengamos igual número de palabras, tanto para respuestas positivas (Verdadero), como negativas (Falso). En nuestro ejemplo son ocho.
• Número de preguntas. Este número debe ser igual o inferior al del banco de preguntas.
• Tiempo por pregunta. Es el tiempo de respuesta por cada pregunta, para el ejemplo es 20.
• Título del test. Para nuestro ejemplo son "Preguntas de Realidad Aumentada" realizado para el libro "Cuarta Revolución Industrial".
• Respuestas verdaderas. En este <script> escribimos los enunciados verdaderos, ocho para el ejemplo.
• Respuestas falsas. En este <script> escribimos los enunciados falsos, ocho para el ejemplo.
• Test ciego. Indica si el test es ciego (no se visualiza la corrección) o no. Para ciego poner 0, para visible poner 1. En el ejemplo, lo hemos dejado ciego.

Preguntas de falso o verdadero con
imágenes, tiempo y retroalimentación

Actividad similar a la anterior, a la que le hemos incluido imágenes y retroalimentación a la respuesta dada. La intrevención del archivo index2.html se hace así:

• Máxima nota. Similar a las anteriores
• Número de preguntas. Este número debe ser igual o inferior al del banco de preguntas y no superior a 10, para el ejemplo son 10.
• Banco de preguntas. Podemos incluir un número de preguntas cualquiera. En nuestro ejemplo son 11. El primer dato (11) es el número de preguntas, luego vienen tres datos por cada pregunta que explicamos para la primera pregunta que se muestra en la siguiente imagen:

• Una afirmación. Para la primera pregunta es: 'Blockchain es un sistema de registros para realizar transacciones de valor, de manera peer-to-peer (P2P).'
• Una aclaración o retroalimentación. Para la primera pregunta es: 'Esto significa que no hay necesidad de un intermediario confiable, como bancos, corredores y otros servicios'.

• Respuesta correcta. Corresponde a uno (1) si es verdadero o cero (0) si es falso. Para la primera pregunta es uno que, en otras palabras, significa que la afirmación es verdadera.

Imágenes. En la carpeta images2 guardamos las imágenes correspondientes a cada pregunta, en formato png; sin embargo, no es necesario incluir todas las imágenes, pregunta que no la tenga simplemente no se muestra.

Asociación de imágenes y textos

En el index2.html cambia el número de ejercicios y los textos.

Asociación de imágenes y textos - segundo modelo

En el index2.html cambia el número de contenedores (máximo 6) y los textos.

Asociación enunciado término (evaluación tipo Jinich)

Actividad en la que se debe asociar un enunciado dado con el término correspondiente.

Lo interesante de la plantilla es la barra que aparece en la parte inferior, que se ha denominado Barra Jinich. Esta barra aparece inicialmente en un avance del 50%, que irá creciendo hasta el extremo verde o decreciendo (más rápido) hasta el extremo rojo, según el resultado de nuestras respuestas.

Dicho funcionamiento es el siguiente: Si tenemos 10 preguntas, por cada respuesta correcta la barra avanza en un 5%; si es incorrecta, retrocede el doble, es decir un 10%. Si la barra llega al extremo rojo, aparece un botón para reiniciar la prueba. La plantilla es configurable, interviniendo sólo el archivo indexb.html, que explicamos a continuación:

• Título. Si bien en el ejemplo aparece un título que pide asociar un enunciado con un término, es posible cambiar la actividad a una de tipo pregunta - respuesta.
• Máxima nota. Esta plantilla de evaluación se ha diseñado para una escala de calificación de 0 a 5, que es usada en algunos países como Colombia; sin embargo, en atención a la diversidad de escalas, hemos dejado la posibilidad de cambiar la nota máxima.
• Número de enunciados. Corresponde a la cantidad de enunciados o preguntas a realizar en la actividad, para el ejemplo es 10.
• Términos o respuestas. Son términos o respuestas cortas, no más de 25 caracteres.

• Preguntas o enunciados. En este vector nos podemos extender en la pregunta, obviamente sin exagerar.

Emparejamiento tipo 6 (audio-texto)

Este modelo presenta cinco premisas (descripciones, frases, afirmaciones, etc.) en la columna izquierda, en formato de audio. En la derecha hay nueve opciones, lo que genera mayores grados de dificultad en la prueba, concirtiéndose en un modelo de múltiples selecciones múltiples, pues cada premisa tendrá, al menos, cuatro opciones de respuesta.

La edición del archivo index2.html es sencilla, pues sólo tienes que cambiar el número de ejercicios y la respuestas (las primeras cinco, en cada ejercicio, son las correctas y en el mismo orden de los archivos de audio correspondientes).

Archivos de audio. En la carpeta sonidos debes guardar cinco audios por cada ejercicio, los cuales debe corresponder (en orden) a las repuestas correctas de la columna derecha. La plantilla se ha diseñado para un máximo de cuatro ejercicios. En nuestro ejemplo, hemos usado tres ejercicios.

Los archivos de audio deben ir en formato mp3, para lo cual puedes usar el aplicativo de licencia libre: Audacity.

En la plantilla hemos puesto un control de audio para enmudecer el sonido, si es necesario.

Emparejamiento tipo 7 (texto-texto)

Este modelo es el mismo anterior, en el que hemos cambiado las premisas tipo audio por texto.

Emparejamiento tipo 3 (texto-texto)

Selección múltiple - Única respuesta (quinto modelo)

Los test de selección múltiple son un tipo de prueba que consiste en preguntas con múltiples opciones de respuesta, donde el objetivo es elegir la opción correcta entre ellas. Se utilizan comúnmente en el proceso de selección para medir conocimientos en áreas específicas, como educación, aptitudes y habilidades cognitivas.

Este tipo de evaluación es muy utilizado en las pruebas estandarizas (véanse los libros Sistemas de evaluación para estudiantes: un análisis sobre pruebas estandarizadas y Manual de comprensión lectora).

La edición de la plantilla es similar a las anteriores; sin embargo, hemos incluido elementos adicionales en el diseño:

• Control de diseño. En este primer <script> podemos incluir un control que permita observar todas las preguntas, para verificar que unas o varias preguntas estén bien diseñadas, para ello, debemos cambiar el número cero (0) por uno (1). Este cambio debe ser provisional, una vez tengamos nuestra plantilla diseñada, lo debemos cambiar a cero (0).
• Modelo de presentación. Es posible que prefieras tener el panel de respuestas al lado derecho de la escena, esto es posible cambiando el cero (0) del segundo script por uno (1).
• Repositorio de preguntas. La plantilla se ha diseñado para contener un máximo de 100 preguntas, es decir, un banco

• de 100 preguntas. En el ejemplo hemos diseñado un banco de 5 preguntas.

• Imágenes. En este modelo se incorporan imágenes, tanto para las preguntas como para las respuestas, es posible que en algunos casos no se requiera de alguna imagen.

Selección múltiple - Identifica textos

Actividad en la que se deben identificar los textos de una tabla que corresponden al enunciado. La plantilla se ha diseñado para escoger el número de filas (máximo 6) y columnas (máximo 4). Se pueden incluir varios ejercicios en la actividad.

La primera modificación a realizar es en el <script> que contiene el archivo ejercicios.txt. Para el ejemplo el número de ejercicios es tres.

A continuación, modificamos el archivo matriz.txt (siguiente <script>), el cual contiene el título y las dimensiones de la tablas de textos a usar por cada ejercicio. Para nuestro ejemplo, serían tres tablas, la primera tiene como título 'las ciudades de México' y sus dimensiones son de 4x4 (cuatro filas y cuatro columnas).

Finalmente, escribimos los textos de cada tabla, siguiendo estas instrucciones:

• La cantidad de textos debe corresponder al número de celdas de la tabla, que se obtiene de multiplicar las filas por las columnas. Para la primera tabla sería 4x4 = 16.
• Escribimos, inicialmente, el número que indica la cantidad de textos que son verdaderos según el enunciado (nueve para la primera tabla del ejemplo). Luego los textos, escribiendo primero los textos que hacen verdadero el enunciado.
• Para la primera tabla hemos seleccionado nueve ciudades de México (Ciudad de México, Mexicali, Chihuahua, Colima, Guanajuato, Guadalajara, Morelia, Monterrey y Hermosillo). Finalmente, escribimos el resto de textos que, para la tabla del primer ejemplo hemos seleccionado siete estados (no ciudades) mexicanos. Este procedimiento se sigue para las otras tablas.

• Otra modificación, que pues hacer, es cambiar la imagen de fondo, la cual se encuentra en la carpeta images.

Selección múltiple - Única respuesta
(modelo curso)

La Red Educativa Digital Descartes ha venido impartiendo cursos, para aprender a diseñar objetos interactivos con el editor DescartesJS. A finales de 2022 e inicios de 2023, se realiza la tercera cohorte de este curso. Haz clic sobre la siguiente imagen, para conocer los contenidos del curso y, si lo deseas, ver los videos de las sesiones impartidas.

Una de las tareas realizadas en el curso, es el diseño de una plantilla de evaluación tipo selección múltiple, tal como se aprecia en la siguiente página.

La edición de esta plantilla es similar a las anteriores. Consta de tres <script>:

• Número de preguntas. Para este ejemplo son seis.


• Preguntas. Se escriben entre comillas simples.

• Respuestas. De acuerdo al orden de las preguntas, se escriben cuatro respuestas, donde la primera respuesta es la correcta. El aplicativo está diseñado para que la respuesta correcta aparezca en un orden aleatorio.

Completa frases 5

Los ejercicios de completación de texto son un tipo de actividad en el que se proporciona un fragmento de texto con palabras o frases faltantes, y se pide al participante que complete esas palabras o frases para formar un texto coherente y lógico. Estos ejercicios se utilizan a menudo en la enseñanza de idiomas y la evaluación de habilidades lingüísticas, y pueden ser en formato escrito o en línea.

A menudo, estos ejercicios se presentan en el contexto de una historia o una situación específica, lo que les permite ser interesantes y motivadores para los participantes. Además, al completar las palabras o frases faltantes, los participantes deben leer y comprender el contexto del texto para determinar qué palabras o frases serían las más apropiadas.

Los ejercicios de completación de texto también pueden utilizarse para evaluar la capacidad de los participantes para comprender un texto en un idioma extranjero, y para evaluar su habilidad para producir textos coherentes y lógicos en ese idioma. Estos ejercicios pueden variar en dificultad, desde ejercicios básicos con una sola palabra faltante hasta ejercicios más complejos con varias frases faltantes y opciones múltiples para cada palabra o frase.

La edición de la plantilla es similar a la anterior, poniendo las preguntas, tal como se ve en la siguiente imagen. Observa que las palabras faltantes se indican con guiones bajos:

Infografía - modelo 1

Las infografías son una forma de contar historias usando imágenes, gráficos, texto y otros elementos visuales para comunicar información de forma clara y concisa. Estas herramientas pueden ser útiles para compartir datos, hechos y conceptos con una gran cantidad de audiencias. Las infografías son una forma efectiva de contar una historia compleja de manera sencilla, ayudando a los lectores a presentar y comprender la información de una manera intuitiva y agradable.

Este primer modelo de infografía se presenta en forma circular. Para su edición, hemos incorporado algunos códigos de colores, tanto en formato hexadecimal como en el decimal.

Abre, en este caso, el archivo index.html y observa los <script> al final del archivo:

• En el primer <script>, debes poner el número de imágenes a usar (no mayor de 15), las cuales van en la carpeta images, nombradas así: imagen1.png, imagen2.png...
• En el segundo <script>, debes poner el título de la infografía; obviamente, es un título no una historia, si te exageras podrías salirte de la circunferencia.
• En el <script> con el vector de mensajes, pones un número de mensajes, que correspondan, en orden, con las imágenes.
  Es aquí, donde ponemos un código especial de color, para destacar alguna información; por ejemplo, para destacar la

expresión "Una tostadora", hemos puesto: \color{ffff00}{1990 Una tostadora}\n\n, donde ffff0 es el color amarillo en formato hexadecimal.

El uso de este código es opcional, igual puedes dejar el texto de un solo color.

• Para un salto de línea, usamos el código \n. Observa que separamos "Una tostadora" con dos saltos de línea ¿qué pasaría si quitamos esos saltos de línea? ¡Haz la prueba!
• Hemos puesto otros <script>, para cambiar colores de fondo, títulos y mensajes; pero, que sea un video el que lo explique.

El uso de colores mejora mucho nuestra infografía, tal como lo dice Melissa:

El color es un aspecto fundamental para la graficación por computadora, ya que además de ser una característica importante en los objetos, nos permite transmitir sensaciones y emociones. Por ejemplo, una escena con colores cálidos puede evocar desde sentimientos de calidez y confort hasta ira u hostilidad, mientras que una escena con colores fríos evoca calma, o bien, sentimientos de tristeza o indiferencia (Melissa Méndez).

Si deseas conocer más sobre los formatos de color, en el primer número de la Revista Digital Red Descartes, publicamos un artículo al respecto. Pero, si aún tienes problemas para elegirun color, usa el siguiente aplicativo:

Este es nuestro primer modelo de infografía, el cual fue usado en el libro Cuarta revolución industrial:

Infografía - modelo 2

Este modelo cambia, con respecto al anterior, en que sólo permite un máximo de 12 imágenes, además del cambio de estilo.

Infografía - modelo 3

Modelo igual al anterior, sólo cambia el estilo usando un cuadrado para los mensaje.

Un presentador de diapositivas es una herramienta que permite mostrar una serie de imágenes o slides de manera secuencial, con el objetivo de transmitir información de una forma visual y efectiva. Estos presentadores suelen incluir características como transiciones de un slide a otro, posibilidad de agregar texto, imágenes, gráficos, entre otros elementos. Algunos ejemplos de presentadores de diapositivas son Microsoft PowerPoint, Google Slides y Keynote.

Las presentaciones de diapositivas son una herramienta útil que se puede usar para comunicar ideas, información y conceptos. Estas presentaciones pueden ser utilizadas para dar conferencias, presentaciones de ventas, capacitación e instrucciones, entre otras, contienen gráficos, imágenes, texto, audio y video que se combinan para crear una narración. Pueden ser una forma eficaz de transmitir información de manera clara y concisa, con un mensaje unificado.

Dadas las dificultades que, anteriormente, presentaba PowerPoint y otros presentadores de pago, para generar presentaciones en formato HTML5, diseñamos y publicamos el libro Presentadores de diapositivas HTML5.

A continuación, presentamos cinco nuevos modelos (para libro), que se pueden editar fácilmente con los explicado anteriormente.

Presentador - modelo 1

En este modelo, sólo hay que cambiar imágenes, el número de diapositivas y sus textos.

Presentador - modelo 2

Edición igual al anterior.

Presentador - modelo 3

Igual a los anteriores, incluyendo velocidad.

Presentador - modelo 4

Igual al anterior, incluyendo formato png o jpg y escala.

Presentador - modelo 5

Sólo se deben modificar las descripciones de las imágenes.

Video interactivo en local

Para la edición de videos interactivos, consulta Plantillas para videos interactivos. Aqupi te dejamos dos de ellos, para que los explores.

Son videos que permiten a los espectadores interactuar con ellos, a través de elementos como botones, enlaces, formularios, etc. Los videos interactivos se utilizan comúnmente en la publicidad en línea, la formación, y otros contextos en los que se desea involucrar a los espectadores de manera más activa.

Video interactivo YouTube

En este video interactivo hemos incluido a A-Yeon, la baterista surcoreana que causa furor en redes sociales.

Es un vídeo que permite al usuario controlar el contenido. Los videos interactivos también suelen incorporar diálogos, preguntas y respuestas, y otras características para ayudar a los usuarios a tener una mejor comprensión del contenido del vídeo.