Las tecnologías de la Información y de la Comunicación nos han adentrado en un nuevo paradigma educativo centrado más en el Aprendizaje que en la Enseñanza. La información está distribuida y accesible, no la tiene sólo el profesor, es más, su autoridad académica puede ser cuestionada con una ágil consulta; la información es “googoliana”, no es abarcable por el profesor; lo aprendido no es válido para siempre, hay una caducidad del conocimiento; hay una invasión tecnológica y ésta también llega al aula; hay una comunicación generalizada, el aula está abierta y debe ser abierta. Por ello, es necesaria una actualización continua de los conocimientos, el aprendizaje ha de producirse a lo largo de toda la vida; importan tanto los procesos como los contenidos, aprender a aprender; hay un cambio del concepto de analfabetismo, es necesario tener competencia digital; la formación no está condicionada en tiempo, ni en lugar, es una formación abierta y flexible; se abren nuevas posibilidades metodológicas basadas en la autonomía, la colaboración, la comunicación, la diversidad, la atención a distancia.Este curso tiene como objetivo abordar la conceptualización y el diseño, desarrollo y experimentación de nuevos libros, basados en la interactividad, que permitan poner de manifiesto que es posible dar una respuesta positiva y asequible a los retos educativos intrínsecos al paradigma educativo emergente (Proyecto iCartesiLibri).
Libros tipo flipbook
El término flipbook o flick book surge del uso de pequeños libros o folletos que tienen varias páginas con imágenes, puestas de tal forma que al pasar rápidamente las páginas se simula una animación, tal como se observa en la imagen de arriba.
Actualmente, los libros tipo flipbook son aquellos que permiten simular el doblado de página. Este tipo de animación se incorpora para tratar de acercar el diseño de un libro digital al libro físico. En la red es posible encontrar numerosas páginas que ofrecen el servicio de conversión y publicación de textos en modelos flipbook; una de las más populares es Issuu, de la cual presentamos un ejemplo en la página siguiente.
Cuando "hojeas el libro" haciendo clic en las flechas de los extremos, se genera una animación que simula dicho "hojeo".Otros modelos tipo flipbook permiten que el usuario arrastre las páginas desde las esquinas, lo que le da un mayor realismo al libro digital. Presentamos un ejemplo del portal https://flippingbook.com/ en la siguiente página. Sin embargo, la mayoría de estos estos servicios, en línea, tienen algunas desventajas, de las cuales citamos cuatro: pago por el servicio, no inclusión de elementos multimedia como animaciones y vídeos, no es posible descargar los libros para verlos en local y, por último, no es posible embeber objetos interactivos.
Libros tipo iCartesiLibri
En el proyecto iCartesiLibri de la Red Educativa Digital Descartes, empezamos a publicar algunos modelos de libros interactivos que no tuviesen las desventajas antes citadas; sin embargo, los primeros modelos distaban de la calidad gráfica y de diseño que ofrecían los servicios de pago como Issuu y flippingbook. Es así como surge un nuevo modelo, diseñado a partir de la librería JavaScript del venezolano Emmanuel García (http://www.turnjs.com/), una API que permitía diseñar libros tipo flip book. Con este nuevo modelo, diseñamos y publicamos una variedad de libros de matemáticas, ciencias sociales y humanas, artes visuales, inglés, etc. Un ejemplo es un libro de la profesora María José García Cebrián, que presentamos a continuación.
Utilizando el modelo anterior, invitamos a Joel Espinosa Longi y a Alejandro Radillo Díaz, a que participaran en el diseño y edición de dos libros de formación en DescartesJS. Dicha invitación fue aceptada, permitiendo publicar estos dos libros como aporte a la formación en el uso de la herramienta de autor DescartesJS. Joel, miembro del Instituto de Matemáticas de la Universidad Nacional Autónoma de México y creador del editor DescartesJS, diseña y pone a nuestra consideración un nuevo modelo que, entre otras mejoras, se adapta mejor a los dispositivos móviles, una de las “pegas” que tanto me indicaba el eterno insatisfecho “José Galo”. Este era el modelo que tanto buscábamos, sin importar la ausencia del plegado de página (flip), que a fin de cuentas es sólo un adorno o efecto llamativo. Es, entonces, este modelo el objeto de estudio de este curso, cuyo ejemplo es el libro con el que estás interactuando en este momento.
Herramientas de edición
Editor de textos planos
Nuestro libro debe ser diseñado usando un editor de textos planosLos editores de textos "planos" se distinguen de los procesadores de texto en que se usan para escribir solo texto, sin formato y sin imágenes, es decir sin diagramación (véase https://es.wikipedia.org/wiki/Editor_de_texto).. Recomendamos algunos de estos editores tipo WYSIWYG (acrónimo de What You See Is What You Get, que en español significa "lo que ves es lo que obtienes"):
o, en algunos casos, un editor como el bloc de notas.
En la siguiente imagen animada, puedes observar cómo se ve el archivo index.html de nuestro libro de práctica (Mi Libro) en el editor Sublime.
En este ejemplo, hemos usado la versión portable del editor; por ello, primero se cargó el editor y luego el archivo index.html desde la opción file. Este editor presenta una versión comercial con mayores propiedades.
Otro editor, bastante popular, es el Notepad++ que hemos usado para la edición de este libro. En la siguiente imagen animada, puedes observar cómo se carga un archivo tipo html para su edición.
Uso de imágenes
Actualmente, los formatos de imagen se agrupan en dos. La primera agrupación son las imágenes pixeladas o de mapa de bits, en la que un pixel o punto es un color; por ejemplo, si la imagen es de 8 bits, significa que cada pixel puede tener hasta 256 colores, una de 16 bits puede lograr hasta 65,536 colores por pixel. Obviamente, el segundo ejemplo es de mayor calidad y, en consecuencia, de mayor peso. Las diferencias de calidad la podemos observar entre los videojuegos de 8 bits (Nintendo, por ejemplo) y los de 16 bits (Super Nintendo, por ejemplo).
El segundo grupo corresponde a las imágenes vectoriales, que se construyen con elementos geométricos, como círculos, polígonos, arcos, entre otros.
La ventaja de una imagen vectorial es que no pierde calidad al aumentar su tamaño, por contraste a las imágenes pixeladas (jpg, png o gif) que sí pierden calidad.
Es común que copiemos y peguemos imágenes publicadas en la red, para uso personal o académico (presentaciones o exposiciones), pero si nuestro propósito es, también, publicar en la red debemos tener en cuenta los derechos de autor, pues no todas las imágenes son libre de uso o gratuitas. Para que te evites posibles demandas por violación de derechos de autor, te recomendamos algunos buscadores como:
https://search.creativecommons.org/: Es un buscador de imágenes de Creative Commons,que obtiene sus resultados a partir de otros motores como Flickr, Google Imágenes, Wikimedia Commons, Open Clip Art Library, Fotopedia, Pixabay, entre otros.
Algunas imágenes de este libro fueron descargadas de estos sitios, cuyos créditos se indican al final.
Etiquetas HTML
HTML es un lenguaje de marcas para formatear y estructurar un documento, que puede leerse en cualquier navegador. Está estandarizado por la norma ISO de SGML (Standard Generalized Markup Language).
Un documento HTML tiene tres etiquetas que describen la estructura general de un documento y dan una información sencilla sobre él:
<html>, <head> y <body>
Las etiquetas pueden escribirse tanto en mayúsculas como en minúsculas, pero se recomienda el uso de minúsculas.
Si escribimos, por ejemplo, el siguiente código en un editor (prueba con el bloc de notas), lo guardamos como pag1.html y luego lo abrimos en un navegador de internet, obtendremos lo que se observa en la imagen de abajo.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>Primer ejemplo</title>
</head>
<body>
Mi primer ejemplo en HTML
</body>
</html>
En el siguiente vídeo, observa cómo lo hicimos con el bloc de notas.
En este capítulo usaremos otros editores que nos permiten verificar, rápidamente, nuestros códigos HTML. Por ejemplo, en los siguientes editores cambia la expresión "Mi primer ejemplo en HTML", que hay en el <body> y presiona ejecutar El primer editor es diseñado por sangfo y, el segundo, por slidear, al estilo del Tryit (intentalo) de w3school. (puedes ampliar el editor en una ventana emergente, para mayor comodidad).
Obviamente, se trata de probar códigos cortos, pues para el diseño de las páginas del libro, debemos usar los editores de textos planos que relacionamos en el apartado anterior.
¡Intenta con este!
¡Intenta con este!
Ahora, expliquemos el código anteriorPara una mejor comprensión de este apartado, recomendamos escribir el código en el editor de textos planos, guardar la página creada y ejecutarla en un navegador (haciendo doble clic sobre el archivo).:
La etiqueta <!DOCTYPE html> declara un documento HTML5 para que se visualice correctamente.
La etiqueta <html> declara que está codificado en este lenguaje y limita el principio y el fin del documento, representa la raíz del documento, y es el padre de todas las demás etiquetas que componen un documento HTML.
La etiqueta <head> o cabecera contiene información y recursos sobre el propio documento y no aparece en el documento. En esta etiqueta se destaca el título <title>, que aparecerá en la pestaña del navegador.
La etiqueta <meta charset=’utf-8’> define varios tipos de metadatos. El atributo charset específica la codificación usada en nuestra página, charset utf-8 es la Unicode Transformation Format 8-bit, que representa el código de caracteres UNICODE compatible con ASCII y permite visualizar los caracteres de todos los idiomas.
La etiqueta <body> es el cuerpo del documento, que contiene los elementos visibles en la página: las imágenes, los encabezados, los párrafos de texto, las listas, las tablas, los hipervínculos, escenas de Descartes, etcétera. Los documentos HTML deben tener la extensión html o htm para que puedan ser reconocidos por un navegador.
Textos habituales en HTML
Un documento HTML inserta en el texto etiquetas que contienen los diferentes aspectos de la presentación. Los textos habituales están formados por encabezados <h1>, <h2>, <h3>,…, párrafos <p>, listas <ul><li>, etcétera. En el código de la siguiente página, hemos incluido varios de estos textos. En el siguiente vídeo puedes observar su edición en Notepad++ y cómo aparece en el navegador Chrome:
Las etiquetas o encabezados <h1>, <h2> y <h3> muestran textos en diferentes tamaños. Nuestro libro utilizará, especialmente, los dos primeros encabezados, cuyos estilos (tamaños, colores, fuentes,…) pueden ser modificados a gusto del diseñador.
¡Intenta con este!
El método de cómo son cambiados los estilos de estas etiquetas, no es objeto de este apartado, puesto que sólo nos interesa cómo funciona la etiqueta; no obstante, basta con saber que se trata de hojas de estilo css. Si observamos el contenido del libro de práctica, seguramente encontraremos archivos con esta extensión.
La etiqueta párrafo <p> presenta un texto en el formato más simple del navegador.
Las listas <ul> permiten mostrar elementos (tipo viñeta). Cada elemento está encapsulado en una etiqueta <li>.
Otras etiquetas usadas para resaltar textos son: <b>negrita</b>, <i>itálica</i> y <strong>texto fuerte</strong>.
Diseño CSS
Por defecto, una página HTML tiene asignados valores CSSCSS es el acrónimo de Cascading Style Sheets (Hojas de Estilo en Cascada) tanto en el cuerpo del documento, como en las etiquetas antes descritas. En general, variando de un navegador a otro, los valores para el cuerpo <body> podrían ser:
En nuestro libro hay tres formas de intervenir el estilo de las páginas:
En las etiquetas. Es el método más sencillo, añadiendo un atributo style en un elemento concreto dentro de la página, que afecta sólo a dicho elemento.
En la cabecera de la página <head>. Este método permite aplicar un estilo a varios elementos de la página.
En una hoja de estilo externa. Lo más recomendable, sugiriendo la creación de un archivo independiente (mis_estilos.css, por ejemplo). A través de un elemento <link> en la cabecera, se importan los estilos. Más adelante describimos este método.
Los cambios de estilo que haremos en el libro serán sutiles, en tanto que algunos de ellos presentan varios diseños que podemos elegir y, seguramente, suplirán nuestras expectativas. Algunos cambios serán en colores de letra y de fondo en las páginas o cuadros y el cambio en el tipo de letra.
Cambios de estilo en las etiquetas
Es posible definir algunos estilos dentro del cuerpo del documento HTML. Algunos de ellos son:
Cambio de estilo en el <body> y en las etiquetas. Incluimos los siguientes cambios de estilo (style), en el ejemplo anterior:
¡Intenta con este!
El color azul afectará a todos los textos encapsulados en el <body>, excepto en el texto tipo párrafo que, también, ha cambiado de estilo en color y tamaño de letra. Este tipo de modificaciones las podemos usar en el libro; sin embargo, en una presentación uniforme, se recomienda el cambio de estilo en la cabecera (segundo método). Las modificaciones anteriores se muestran en el editor de la página anterior. Practica cambiando el color y el tamaño de letra.
Cambios de estilo en una etiqueta div
Otro método que usaremos, es encapsular dos o más elementos en un bloque <div>La etiqueta <div> define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no muestran nada especial cuando se crea una división, salvo que se dé formato a la división con la hoja de estilo., el cual definirá un estilo para todos los elementos que contiene. Observemos, por ejemplo, este cambio en la página anterior, en la que hemos encapsulado las cabeceras <h1> y <h2>, las cuales se centrarán en la pantalla y tendrán color verde. Incluimos, además, un salto de línea <br> después del primer elemento de la lista.
Practica, nuevamente, usando colores en formato hexadecimal (véase https://htmlcolorcodes.com/es/); por ejemplo, en lugar de green escribe #750A15 y haces clic en ejecutar.
Cambios de estilo en la cabecera
En nuestro próximo ejemplo, hemos eliminado los estilos en línea o en las etiquetas; ahora, hemos incluido un estilo CSS en un bloque style en la cabecera <head>. Observemos que se han declarado atributos para ocho elementos:
<body>, <h1>,<h2>,<h3>, <p>, <strong>, <em>, <li>
Los atributos se definen dentro de llaves.
Los cambios realizados fueron los siguientes:
body { font-family: Arial, Helvetica, sans-serif; background-color: #FDC;}. El atributo font-family establece la fuente o tipo de letra con la que se muestra el texto, al indicar una serie de fuentes alternativas separadas por comas, los navegadores intentan mostrar el texto con la primera fuente y si no está disponible, intentan utilizar la segunda fuente y así sucesivamente hasta la última fuente indicada. Se incluye, además, un color de fondo para la página #FFDDCC (que se puede simplificar como #FDC).
Practica cambiando la primera fuente (Arial) por algunas de las siguientes:
Script, Courier, Verdana, Calibri o Garamond, preferiblemente en dos navegadores diferentes, pues es importante no arriesgarse a usar una fuente que no funcione en todos los navegadores; por ejemplo, la fuente "Script" va bien en Firefox pero no en Chrome. Nuestro consejo es dejar la fuentes universales como Arial, Verdana, sans-serif, etc.
¡Intenta con este!
h1 {color: red; font-size: 2.8em; background-color: #CCC}. Los textos en encabezados de primer nivel tendrán color rojo, un fondo para el texto de tonalidad gris (#CCCCCC) y un tamaño de 1.6em. Esta última unidad de medida (em) determina un valor de escala con respecto al tamaño por defecto; es decir, si el tamaño es de 16 píxeles, el tamaño de letra definido por 1.6em será de 25.6 píxeles.
h2 {font-size: 1.2em; background-color: #CCC}. Los textos en encabezados de segundo nivel tendrán un tamaño de 1.2em. Se incluye un fondo para el texto de tonalidad gris.
h3 {font-size: 22px; text-align: center}. Para este caso, el tamaño de letra se define con unidades en píxeles. Un atributo adicional es el centrado horizontal del texto.
Hoja de estilos en un archivo externo
Seguramente, ya habrás practicado con los estilos del apartado anterior y, posiblemente, estarás ansioso por cambiar algunos estilos de las páginas de nuestro libro. Sin embargo, es bueno que repases, nuevamente, cómo intervenir estos estilos. Para ello, observa el siguiente vídeo y, luego, practica con el interactivo de la siguiente página, tanto con el código HTML como con el de CSS, que nos ayudará a comprender cómo diseñar estilos externamenteEl vídeo fue realizado para el libro "Presentadores de diapositivas HTML5", publicado en el proyecto iCartesiLibri, pero igual sirve para nuestro propósitos,.
He aquí el aplicativo en el cual puedes practicar con los estilos. Este aplicativo hace parte del presentador de diapositivas Inspire.js, diseñado por Lea Verou. El presentador creado en 2010 con el nombre CSSS, tuvo tanta aceptación que luego se relanza como Inspire.js en 2018.
Haz clic en la siguiente anterior y escribe un texto que incluya etiquetas tipo título, párrafo y viñetas. Luego, con el botón CSS, cambia los estilos de estas etiquetas (colores, tamaños de letra, posición, etc.).
En el siguiente vídeo podrás observar un repaso general de las etiquetas y estilos que hemos visto. En el vídeo usamos el aplicativo de Lea Verou, pues resulta más cómodo observar directamente el resultado de cualquier etiqueta o estilo que usemos en la ventana izquierda del aplicativo.
Notaste que usamos "algo más" de lo explicado hasta aquí, como atributos adicionales para las viñetas <ul> y <ol>. Es importante que consultes frecuentemente otras etiquetas, estilos y atributos en la página https://www.w3schools.com/, la cual, además de presentar amplia información, permite realizar ejercicios con un aplicativo similar al de Verou.
En las siguientes imágenes se muestra un ejemplo de consulta y práctica con las etiquetas de encabezamiento.
Observa que en la consulta se presenta el botón "Try it Yourself", para que intentes tus propios diseños, tal como lo hicimos en el vídeo anterior.
Terminemos, entonces, con el diseño de estilos en archivos externos. Para ello, observa las primeras líneas del archivo index.html de nuestro libro de práctica, abriéndolo con un editor de textos sin formato (Notepad++, por ejemplo), tal como se observa en la siguiente imagen.
En la imagen se observa que hay una llamada a dos archivos llamados style.css, a través de los siguientes enlaces:
link rel="stylesheet" href="extra/style.css" type="text/css">
Para nuestro libro y en este curso, sólo intervendremos el segundo archivo (mínimamente), que se encuentra en la carpeta extra. Al abrirlo con el editor, observaremos estilos definidos como los siguientes:
Inicialmente, puedes cambiar el tipo y tamaño de la letra que, en el archivo, es letra tipo "Lato"Lato fue creado en 2010 para un banco polaco por Łukasz Dziedzic. Cuando el banco cambió su visión estilística, dejó de lado el tipo de letra y lo lanzó más tarde ese año bajo la licencia libre SIL Open Font License. Después de que Lato se agregó a Google Fonts, rápidamente ganó popularidad, convirtiéndose en la tercera fuente web más utilizada después de Roboto y Open Sans de Google, con más de mil millones de visitas por día en agosto de 2018 (https://es.qaz.wiki/wiki/Lato_(typeface)). y de 18 píxeles.
El color del encabezado h1 está asignado por la variable "--h1-color", que se podría modificar en el primer archivo style.css de la carpeta book; sin embargo, mientras aprendes no es recomendable, pues este libro maneja estilos para fondos claros y oscuros, los que puedes elegir con el botón de configuración que aparece en la esquina superior derecha.
Lo que si puedes hacer, por ahora, es crear clases de estilo.
El atributo class se utiliza para especificar una clase para un elemento HTML o para varios elementos HTML (https://www.w3schools.com/).
Por ejemplo, las páginas de nuestro libro tienen especificaciones definidas en la clase page. Estas especificaciones están definidas en el archivo style.css que hemos recomendado no intervenir, las cuales se definen así:
Como ejercicio, vamos a crear una nueva clase al final del archivo style.css (carpeta extra), que nos permita usar un contenedor como este:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor...
Este contenedor lo definiremos con el nombre caja y sus especificaciones son:
width: 80%;. El ancho del contenedor será del 80% del ancho de la página. Recuerda que este ancho es de 520 píxeles.
margin-left: 10%;. Para que quede centrado el contenedor, asignamos un 10% del ancho de la página al margen izquierdo.
background-color: rgba(0,0,100,0.15);. Es el color del fondo del contenedor.
box-shadow: 6px 6px 10px #000;. Es la sombra del contenedor, el primer número indica el desplazamiento de la sombra hacia la derecha, el segundo indica el desplazamiento hacia abajo, el tercero es un efecto de desenfoque y el último es el color de la sombra.
border-radius: 5px;. Define el radio de las esquinas del contenedor.
padding: 15px;. Define los márgenes CSS que se utilizan para generar espacio alrededor del contenedor.
Te sugiero usar el aplicativo de Lea Verou (clic aquí), para diseñar tu contenedor antes de hacerlo en tu libro, pues es más cómoda su verificación. Observa cómo lo hemos hecho nosotros en el siguiente vídeo.
Haz el mismo ejercicio, cambiando las especificaciones de tu contenedor, de tal forma que se ajuste a tu gusto. Puede aprovechar para crear otros contenedores a usar en el diseño de tu libro. En la página siguiente, presentamos un contenedor que incluye una imagen.
En este contenedor podemos presentar un ejercicio de matemáticas, física u otra asignatura cualquiera; por ejemplo:
Calcula la siguiente integral: $\displaystyle\int_2^7\bigg(x^3-\frac1x\bigg)dx$
Las especificaciones nuevas están relacionadas con la imagen; para ello, usamos la propiedad background-image: url(" ") y, para evitar la repetición de la imagen, la propiedad background-repeat: no-repeat;. También ajustamos las márgenes interiores del contenedor, en especial la margen superior con padding-top:70px;.
¡Bueno!, ya estamos listos, con todas las herramientas, para empezar a diseñar nuestro libro. Pero, antes, una recomendación. El éxito de un libro está en la producción previa; es decir, como docentes es común que tengamos material producido durante nuestra historia laboral, lo que facilita enormemente el diseño del libro, pues se trata de copiar dicho material, ajustándolo al formato del libro interactivo. Si no tienes el material organizado, una buena práctica es redactarlo en un procesador de texto y luego llevarlo al libro.
Elementos multimedia
Habrás notado la presencia de imágenes de fondo en las páginas de este libro, muchas de ellas sin conexión alguna con los temas tratados, como la actriz Alexandra Daddario en las páginas 24 y 25 o el actor Theo James en las páginas 26 y 27. Esta nutrida incorporación de imágenes, tiene como propósito mostrar que podemos realizar diseños especiales, tipo magazine o revista o, como en nuestro caso, tipo cartilla de aprendizaje. Obviamente, un libro de matemáticas, de idiomas o de literatura (excepto cuentos), tendrán un diseño más sencillo o, si se prefiere, sin excesos en los elementos de multimedia.
Los elementos de multimedia, se suelen clasificar como:
Texto: sin formato, con formato, con o sin hipervínculos.
Gráficos: esquemas, planos, estadísticos, matemáticos, etc.
Imágenes: dibujos o fotos en formatos jpg, png, gif no animado, svg.
Animación: gifs animados.
Vídeo: generalmente en formato mp4, webm u ogg o vídeos embebidos de YouTube, Vimeo, etc.
Audio: en formato mp3.
Elemento texto
Nuestro primer elemento multimedia es el texto, el cual empezamos a digitar usando dos tipos de etiquetas básicas: los títulos (heading) que se diseñan con <h1>, <h2>, <h3>... <h6> y, el más usado, el párrafo con la etiqueta <p>.
En los apartados anteriores vimos otro elemento que es usual: "las viñetas", a través de las etiquetas principales <ul> y <ol> y las secundarias <li>.
Vamos con nuestros primeros ejercicios en el libro de prácticas. En la página 9 escribe el siguiente texto (usa la etiqueta <h4> para el título)Texto tomado de https://justificaturespuesta.com/.:
Ahora, cambia el color del título a marrón (brown) y el tamaño de letra a 22 píxeles, en las viñetas usa numeración romana (i, ii, iii, iv).
Citas textuales
Otro elemento tipo texto es la cita textual, la cual viene predefinida en nuestro modelo de libro con la clase "note"; es decir, si queremos escribir un párrafo con una cita textual, usaríamos <p class="note">. Una marca especial para este elemento, es la inclusión de una barra lateral que destaca el texto. Ahora, si este tipo de marca no es de tu agrado o deseas modificar la sangría y el tamaño del texto en la cita textual, puedes hacerlo modificando los archivos style.css, tal como lo indica el siguiente vídeo:
Tratándose de una cita textual, a veces, la referencia bibliográfica puede estar vinculada a un sitio web, por lo que sería necesario usar la etiqueta de hipervínculo, que explicamos a continuación.
Hipervínculo
Es común considerar que un libro es interactivo porque tiene enlaces a vídeos, imágenes, sitios web, etc.,; es decir, porque tiene hipervínculos, pero está supuesta interactividad no va más allá de hacer clic en la pantalla. Nuestro concepto de interactividad, en forma reducida, es la posibilidad que se le da al sujeto (usuario del libro) de intervenir los atributos de un objeto (el libro). Estos objetos que permiten intervención es lo que denominamos como objetos interactivo; dicho de otra forma, existe "interactividad sujeto-objeto" Véase Rivera, Galo y Alcón (2010) en https://www.researchgate.net/..
Si en nuestro diseño del libro, necesitamos incluir hipervínculos, usaremos la etiqueta <a>, la cual podemos configurar así:
<a href="https://www.enlace..." target="_blank">
Información del enlace</a>
Por ejemplo, en la nota al pie que observas en esta página, usamos:
Observa que en href ponemos la dirección del enlace entre comillas, el atributo target puede ser _self que indica abrir el enlace en la misma pestaña (no recomendable para nuestro libro), _parent, _top o _blank (recomendada para nuestro libro).
En cuanto a la información del enlace, puede ser un texto como la nota la pie de la página anterior, o una imagen como:
El enlace, por su parte, puede ser una dirección web, un vídeo o, incluso, un objeto interactivo en línea o en local.
Nota al pie de página
Para agregar una nota al pie de página es necesario utilizar la siguiente clase:
<span class="footnote">Texto que va en la nota del
pie de página</span>.
Dos consideraciones a tener en cuenta: la primera es que nuestro modelo numera automáticamente las notas al pie de pagína y, la segunda, es que la etiqueta con la clase footnote, debe ponerse en el punto en el que se llama la nota; por ejemplo el texto:
A pesar de que se calcula que hay 1,44 millones de
personas refugiadas en todo el mundo que necesitan
ser reasentadas, el año pasado solo 22.770
pudieron hacerlo con el apoyo de la Agencia de
la ONU <span class="footnote">Organización de las
Naciones Unidas.</span> para los Refugiados. Es
la cifra más baja de reasentamiento de personas
refugiadas registradas por la Agencia en casi
dos décadas.
mostraría en el libro, lo siguiente (lo hemos destacado en azul):
A pesar de que se calcula que hay 1,44 millones de personas refugiadas en todo el mundo que necesitan ser reasentadas, el año pasado solo 22.770 pudieron hacerlo con el apoyo de la Agencia de la ONUOrganización de las Naciones Unidas. para los Refugiados.
Código
Para mostrar código dentro de una línea de texto, se utiliza lo siguiente:
<code>x=100</code>
Por ejemplo, código en la línea x=100.
Para mostrar código en un bloque, por ejemplo para describir un algoritmo, se utiliza:
<pre>x=4
y=10
r=x+y</pre>
x=4
y=10
r=x+y
Hay que considerar que la etiqueta <pre> respeta los espacios en blanco.
Para terminar el elemento texto, diseña una página en tu libro de prácticas (página 10), con el texto que aparece en la siguiente página (incluye los pie de página). Para evitar grandes esfuerzos, recuerda que puedes copiar el texto, se trata sólo de practicar las etiquetas: título, nota pie de página, etc.
Una observación a considerar. En tu libro de prácticas hemos dejado una página en blanco (página 10), que se identifica con la clase page:
<!-- 10 -->
<div class="page">
</div>
Puedes copiar estas líneas para nuevas páginas, ajustando el número de página; es decir, la próxima página sería 11.
Introducción
Para nadie es un secreto que nuestros estudiantes prefieren jugar a estudiar, en tanto que este "homo ludens"En 1938 al acuñar el término ‘homo ludens’, el autor Holandés Huizinga posicionó la faceta del hombre que se refiere al juego en el mismo nivel que el ‘homo sapiens’ y el ‘homo faber’ relacionados a las facetas de intelecto y creación del ser humano (https://ineverycrea.mx/c). La tesis principal de Johan Huizinga destaca que el acto de jugar es consustancial a la cultura humana; es decir, el "elemento de juego en la cultura" y "no el elemento de juego de la cultura" (https://es.wikipedia.org/wiki/Homo_ludens). en sus edades tempranas están en una búsqueda permanente de la diversión y el disfrute... quieren gozarse el mundo que los rodea.
Disfrutar la vida o, para nuestro caso, disfrutar lo que hago está asociado a un estado de "Bien Estar" cercano a un estado de "Felicidad"; es decir, estoy feliz con lo que hago. Lograr que nuestros estudiantes estén felices estudiando es un reto, no fácil de conseguir, pues si comparamos los ranking de FelicidadEl Informe de Felicidad Mundial de 2019, publicado por la Red de Soluciones de Desarrollo Sostenible para las Naciones Unidas, muestra que los cinco países más felices del mundo fueron Finlandia, Dinamarca, Noruega, Islandia y Países Bajos (véase https://worldhappiness.report/). y Pruebas Pisa, podríamos afirmar que sólo Finlandia lo está lograndoLos resultados Pisa de 2018, muestran a Finlandia en el séptimo lugar. Sorprende China y dos de sus provincias ocupando los primeros lugares... pero, ¿son felices estudiando?
Dado el reto podemos, al menos, buscar algunos momentos de felicidad en nuestros procesos de aprendizaje usando la herramienta llamada "aprender jugando", estrategia que busca a través del juego el logro de resultados de aprendizaje y, en consecuencia, así sea por algunos momentos, lograr que el estudiante sea "feliz estudiando", mejorando su productividad y creatividad.
Elemento vídeo
Este elemento multimedia es, quizá, el más popular en ambientes de aprendizaje. Esta popularidad se incrementa gracias a iniciativas como las de Khan Academy, TED Ed y, obviamente, los servicios de plataformas como YouTube y Vimeo.
Una sugerencia, para el diseño de libros interactivos, es el uso de vídeos en local, garantizando con ello la perdurabilidad del recurso, en este caso del libro, pues servicios como YouTube suelen cambiar sus políticas, afectando publicaciones que incorporan vídeos alojados en YouTube.
Por ejemplo, una configuración reciente es la posibilidad que se la da al propietario del vídeo de evitar que éste sea embebido, generando sorpresas en algunas publicaciones en las que los vídeos dejaron de funcionar. No obstante, esta sugerencia va acompañada de otra que recomienda no abusar del uso excesivo de vídeos en el libro, pues ello contribuye al incremento del tamaño (en MB) del recurso.
Vídeos en local
Existe una gran variedad de formatos de vídeo, entre ellos: AVI (popular para la compresión de películas), MPG que se divide en MPG-1, MPG-2, MPG-3, y MPG-4, siendo este último lo mismo que el formato MP4, el formato mejor soportado por los navegadores.
WMV que es el formato de Microsoft para ser reproducidos en Windows Media Player, MOV un estándar desarrollado por Apple, que permite su reproducción en sistemas operativos Apple y Windows, FLV que requiere tener instalado Flash Player, y formatos WebM y Ogg compatible con HTML5.
Obviamente, para nuestro libro, los formatos que usaremos serán MP4, WebM u Ogg. La etiqueta usada para ello es la siguiente (si es formato mp4):
<video width="100%" controls=""
poster="videos/poster/ejemplo.png">
<source src="videos/ejemplo.mp4"
type="video/mp4"></video>
El valor del parámetro width permite controlar el ancho del video como un porcentaje del ancho de la página. Es aconsejable agregar una imagen que muestre el primer cuadro del video y colocar la dirección en el parámetro poster, para que se muestre mientras el navegador precarga el vídeo.
Una pagína que permite descargar vídeos de prueba es https://test-videos.co.uk/. De esta página hemos descargado dos vídeos de corta duración y, obviamente, de un tamaño reducido que, para nuestro caso, son de 2 MB cada uno.
Vídeos YouTube
Como lo dijimos antes, no es una buena opción para garantizar la perdurabilidad de tu libro; sin embargo, te dejamos varias recomendaciones:
Descargar el vídeo, siempre que tenga licencia Creative Commons. Por ejemplo, en el portal de YouTube, hemos buscado "Atari games", luego filtramos y seleccionamos Creative Commons, y encontramos:
Existen muchas opciones de descarga, que dejamos para tu consulta.
Usar un vídeo de un canal YouTube confiable. Por ejemplo, los vídeos de la NASA seguramente tendrán perdurabilidad.
Usar tu propio canal. Para profundizar un poco en los parámetros que podemos usar en un vídeo de YouTube, usaremos el canal del autor de este libro.
Para "embeber" vídeos de YouTube, usaremos el siguiente código:
Donde la expresión que aparece después de embed (qJ1FWE0yoRg). Este ejemplo, se mostraría así:
Este vídeo tiene licencia Creative Commons.
Sin embargo, por ser un canal confiable lo embebimos
desde el portal YouTube. Puedes hacer clic en el título,
o en uno de los botones de ampliación para ver el vídeo en una ventana más grande. También puedes hacer clic sobre la palabra YouTube, que abriría el vídeo directamente desde el portal, algo que espera el propietario, pues así aumenta el número de visitas.
La observación anterior, justifica que algunos hayan tomado la decisión de desactivar la opción de inserción, tal como lo puedes apreciar en un ejemplo en la página siguiente. Situación que, también, justifica que uses vídeos en local o de tu propio canal.
Parámetros de vídeo deYouTube
Si vas a usar vídeos de YouTube, ten en cuenta los siguientes parámetros que te ayudarán a configurar tu vídeo, los cuales se ponen al final del enlace a YouTube que, para nuestro, ejemplo, es https://www.youtube.com/embed/qJ1FWE0yoRg:
Tiempo de inicio
Es el tiempo en segundos, que indica en qué punto de la línea de tiempo se inicia el vídeo. Por ejemplo, sideseamos que inicie a los 80seg, pondríamos
https://www.youtube.com/embed/qJ1FWE0yoRg?start=80.
¡Comprueba!
Controles
Sí deseas, puedes ocultar los controles, agregando el parámetro controls=0; es decir:
Quizá no sea suficiente con inhabilitar los controles, pues con el teclado puedes avanzar o retroceder el vídeo. Para inhabilitarlo, usamos disablekb=1. Si deseamos usar más de un parámetro, los separamos con el caracter & , por ejemplo:
https://www.youtube.com/embed/qJ1FWE0yoRg?controls=0& disablekb=1.
¡Comprueba!
Silenciar el vídeo
Se usa el parámetro mute=1
Ejecución automática
Se usa el parámetro autoplay=1
Observa el vídeo original en ejecución automática y en silencio:
Subtítulos en español
Se usa el parámetro language=es
Final del vídeo
Si deseas que el vídeo se detenga en tiempo determinado; por ejemplo a los 300 seg, usa el parámetro end=300
Vídeos relacionados
Habrás notado que al terminar un vídeo, YouTube muestra vídeos relacionados con el tema del vídeo. Si deseas que no lo haga, usa el parámetro rel=0. No obstante, YouTube te mostrará los vídeos del canal origen del vídeo.
Dos consideraciones finales. La primera es que un vídeo puede desaparecer porque el propietario lo haya borrado, o porque el canal haya sido eliminado por YouTube porque infringió alguna política del portal, algo así como lo ocurrido con Donald Trump en las redes sociales, o haya una infracción de derechos de autor. En este último caso, te recomendamos ver el siguiente vídeo de los creadores de YouTube:
Algo recurrente que no necesariamente implique la eliminación del vídeo, es la denuncia por copia ilegal de alguna pista de audio, así sea por unos cuantos segundos. Si tienes tu canal, YouTube te ofrece una buena variedad de pistas de audio que puedes incorporar a tu vídeo, si el riesgo de violar derechos de autor (véase Ayuda de YouTube).
Imágenes
Es común que el primer objeto multimedia que se nos ocurre incorporar a un diseño con destino a la web sea una imagen. Las imágenes que usamos son fotografías, diseños, gráficos, fondos y, en ocasiones, imágenes animadas.
Dada esta tendencia de diseño, es importante conocer los diferentes formatos que podemos usar en nuestro libro y algunas recomendaciones para evitar la carga de imágenes de gran peso o de pobre resolución que, en términos técnicos, se refiere a los niveles de compresión (tamaño) y al tratamiento de color (calidad).
Actualmente, los formatos de imagen se agrupan en dos. La primera agrupación son las imágenes pixeladas o de mapa de bits, en la que un pixel o punto es un color; por ejemplo, si la imagen es de 8 bits, significa que cada pixel puede tener hasta 256 colores, una de 16 bits puede lograr hasta 65,536 colores por pixel. Obviamente, el segundo ejemplo es de mayor calidad y, en consecuencia, de mayor peso.
Las diferencias de calidad la podemos observar entre los videojuegos de 8 bits (Nintendo, por ejemplo) y los de 16 bits (Super Nintendo, por ejemplo), tal como se aprecia en la siguiente imagen:
Los formatos de imagen en esta primera agrupación que usaremos son: jpg, gif y png. El segundo grupo corresponde a las imágenes vectoriales, que se construyen con elementos geométricos, como círculos, polígonos, muros, arcos, entre otros. La ventaja de una imagen vectorial es que no pierde calidad al aumentar su tamaño, por contraste a las imágenes pixeladas que sí pierden calidad. En la siguiente imagen, se puede apreciar esta gran diferencia.
La imagen superior es vectorial (crédito: Carlos Soler)
Alguien habrá notado que ya habíamos hablado de estas dos agrupaciones, pero vamos a profundizar un poco en cada formato.
El formato svg es el recomendado por el consorcio internacional de estándares para la web (W3C)El World Wide Web Consortium (W3C) es una comunidad internacional que desarrolla estándares que aseguran el crecimiento de la Web a largo plazo. Fue fundado en 1994 para dirigir a la Web hacia su pleno potencial mediante el desarrollo de protocolos comunes que promuevan su evolución y aseguren su interoperabilidad (crédito: https://www.masadelante.com/)., formato que es ampliamente compatible con la web.
En la siguiente página, presentamos cuatro formatos de imágenes vectoriales (las imágenes fueron tomadas de la página de Iván Lasso Clemente).
A continuación, describimos los formatos de imágenes pixeladas que podemos usar en nuestro libro.
Formato GIF (Graphic Interchange Format)
Las imágenes en este formato pueden contener entre 2 y 256 colores, es un formato muy popular en imágenes animadas. Dado este número de colores tan limitado, las imágenes que se obtienen son muy pequeñas y por tanto de bajo peso.
Formato JPG o JPEG (Joint Photographic Experts Group)
Este formato soporta 16.7 millones de colores (24 bits) y es el más empleado para las fotografíasLa sigla JPEG (Joint Photographic Experts Group) surge de la reunión que tuvo lugar en 1982 entre un grupo de expertos en fotografía, que trabajaban principalmente en las formas de transmitir información (imágenes fijas o animadas). En 1986, el ITU-T desarrolló métodos de compresión destinados al envío de faxes. Estos dos grupos se unieron para crear el Grupo Conjunto de Expertos en Fotografía (JPEG) (crédito: https://es.ccm.net).. El nivel de pérdidas en calidad depende del nivel de compresión. Es un formato muy usado en los diseños de la web.
Formato PNG (Portable Network Graphics)
Este formato utiliza una compresión sin pérdidas, permitiendo imágenes con color verdadero, escala de grises y paleta de 8 bits.
El formato PNG fue desarrollado en 1995 como una alternativa gratuita al formato GIF, cuyos derechos pertenecen a Unisys (propietario del algoritmo de compresión LZW) y a quien los editores de software deben pagar regalías por usar este formato. PNG es un acrónimo recursivo de "PNG No es GIF" (crédito: https://es.ccm.net). Este formato goza de popularidad por permitir transparencias en sus imágenes, lo cual significa un mayor peso, tal como se muestra en la siguiente imagen.
¡Advertencia! En el diseño de un libro, es importante que hagas coincidir mayúsculas y minúsculas, tanto del nombre de la imagen como de su extensión. Es común que al descargar una imagen de la web, la extensión se escriba en mayúscula. Si no atiendes esta advertencia, al publicar tu libro, las imágenes no se visualizarán.
Animaciones
En la red puedes encontrar una gran cantidad de imágenes en formato gif libres para descargar, como el gato que mostramos a continuación.
Pero, este tipo de elemento multimedia puede, generalmente, entorpecer la lectura de libro; no obstante, podría ser útil para ilustrar un procedimiento o el funcionamiento de un fenómeno (central hidroeléctrica, motor eléctrico, etc.).
Sin embargo, encontrar la animación que se ajuste a lo que estamos redactando en nuestro libro, puede ser difícil; por ello, presentamos una aplicación sencilla, para crear animaciones desde la pantalla, observa el siguiente vídeo:
Como lo dice Pramod George: "Una imagen vale mas que mil palabras. ¡Un GIF puede valer aún más!", he allí la ventaja del GIF, que reemplaza explicaciones como: "abra la carpeta xxx, ejecute el archivo yyy, desplace zzz hacia..."
El código empleado para un gif animado, es el mismo que usamos para una imagen en general, que para el caso del gato empleamos:
El código muestra una imagen del gato en formato png con un ancho del 40% (capturada de la animación) y la imagen animada al hacer clic (onclick).
Etiqueta <figure>
Podemos usar un elemento <figure> para marcar una imagen en un documento y un elemento <figcaption> para describir la imagen. La etiqueta <figure> especifica contenido autónomo, como ilustraciones, diagramas, fotos, listas de códigos, etc. (www.w3schools.com).
Si se quiere agregar una imagen como una figura, es decir con texto descriptivo debajo, hay que utilizar lo siguiente:
<figure>
<img class="image_expand" onclick="openImage(this)"
src="https://proyectodescartes.org/descartescms/images/
logodescartes.gif" width="50%">
<figcaption>Banner del proyecto descartes.</figcaption>
</figure>Figura 1.1. Banner del proyecto descartes.
Una funcionalidad adicional, que trae nuestro modelo de libro, es que la etiqueta <figcaption> está configurada para que numere automáticamente las imágenes, con el término general "Figura xxx".
Puedes, también, usar tus estilos en la figura; por ejemplo:
Un libro, por lo general, presenta abundancia de imágenes (fotos, dibujos, gráficos, esquemas, planos, etc.) y, particularmente, objetos interactivos. Sin embargo, se ha evidenciado que existen personas que aprenden más con el uso de audios que, en términos de Gardner, podría ser una especie de inteligencia auditivaGardner defiende la que él llama Inteligencia lingüística o verbal, donde somos hábiles haciéndonos entender y entendiendo lo que se nos dice.
Surgen, entonces, modelos de aprendizaje auditivo y, como recurso digital, los audio-libros. Un ejemplo de este último, fue publicado en el Proyecto iCartesiLibri, titulado https://www.caniuse.com/mp3).
Los formatos de audio para HTML5 son mp3, wav y ogg, donde mp3 es el formato mejor soportado por los navegadores (véase English Level 1). El código a usar es de la forma:
Un primer ejemplo interesante, lo podemos diseñar usando una tabla con imágenes (descargadas de pixabay) y sonidos (descargados de http://sonidosmp3gratis.com/), tal como se muestra en la página siguiente.
¡Haz clic sobre una imagen!
La pega, como dicen los colegas españoles, es que los controles de sonido aparecen en ventanas emergentes. Veamos una versión diseñada en DescartesJS (haz clic sobre una imagen):
A propósito de tablas, un elemento multimedia de mucho uso que amerita un apartado especial, pues su diseño demanda tiempo que depende del número de celdas de la tabla y del estilo que deseemos incorporar.
Tablas
Para comprender el código usado para el diseño de una tabla, partiremos del siguiente ejemplo:
Observamos que tiene cuatro filas (table row o simplemente tr), una de ellas con los títulos (table heading o th) y 16 celdas con datos (table date cell o td). Todos estos elementos hay que declararlos en el código, excepto por th que es opcional. Un primer ejemplo con las dos primera filas, sería:
Bueno... es una tabla, pero parece más un colage de palabras puestas sin sentido. Vamos a cambiar la primera fila (tr) con el formato de títulos (th) y agregaremos algunos estilos a la tabla, como el ancho, centrado, bordes, y en la fila de títulos color de fondo y color de letra:
Sólo nos falta darle un poco de márgenes a los datos (padding); para ello, en cada celda ponemos el siguiente estilo:
<td style="padding: 2px 10px 2px 10px">
Mamíferos
Aves
Peces
Reptiles
Gato
Gallo
Salmón
Caimán
Obviamente, este procedimiento es demasiado engorroso, pues es posible que un libro tenga muchas tablas y asignarle estilos a cada celda se vuelve poco práctico; pero, existen dos posibilidades que facilitan la incorporación de tablas a nuestro libro. La primera, es diseñarla en otra aplicación (Powerpoint, por ejemplo), capturar la imagen e insertarla en el libro, tal como lo hicimos con la tabla del inicio de este apartado. La segunda es programar el estilo de la tabla en un archivo externo que, para nuestro libro, es el archivo style.css de la carpeta extra, tal como aparece en la siguiente imagen:
Observa que hemos puesto nuevos estilos, uno de ellos permite que los bordes queden en un solo borde (colapsen), agregando la propiedad border-collapse: collapse;. Para darle el estilo cebra en la filas, como en la tabla ejemplo, usamos tr:nth-child(even) {background-color: #d2e2d2;}
Antes de modificar el estilo de las tablas, te sugiero usar el aplicativo de Lea Verou, para diseñarlas a tu gusto, pues es más cómoda su verificación. Haz clic en la siguiente imagen:
Haz clic en el botón css, que aparece en la esquina inferior derecha, para que puedas intervenir los estilos de la tabla.
Por ejemplo, cambia los bordes por border: 4px solid white; y observa que ya se parece más a nuestra tabla ejemplo, puedes cambiar el color de la cebra, el ancho de la tabla, etc. Una vez definas la tabla a tu gusto, copias el código al final del archivo style.css. Puedes, si quieres, usar varios estilos de tabla (table1, table2, ...), pero lo que se sugiere es tener un sólo estilo de tabla en un libro.
Una vez definida la tabla, basta que escribas el código de la tabla en su forma más sencilla:
Modificamos el color y el grosor de los bordes, los colores de la cebra y de la fila de títulos, para acercarnos más a la tabla ejemplo. Trata de hacerlo mejor o, como lo dijimos antes, un diseño que se ajuste a tus preferencias.
Fondos
Un elemento multimedia que hemos usado mucho en este libro, es la imagen de fondo en las páginas; para ello, usamos una propiedad de estilo como: background-image:url(fondos/bordea.png);, que igual puede servir para establecer el fondo de un párrafo o de una división (<div>). Inicialmente, presentamos el método para generar el fondo de dos páginas (como las que estás viendo) y, al final, un ejemplo de un fondo en un párrafo.
El método, permite que tengamos la imagen completa cubriendo las dos páginas, es un método fácil y rápido de diseñar.Nuestro libro tiene páginas de un tamaño de 640x825 pixeles, lo que implica que debemos tener una imagen de 1280x825 pixelesNo es necesario ser tan precisos, igual sirven imágenes con dimensiones mayores, lo importante es que el fondo final capture la esencia o lo más importante de la imagen.. Dado el tamaño de la página es posible usar uno un poco menor (a escala), por ejemplo 1040x670 pixeles o 1024x660 (80% del tamaño real), igual el método la ajusta al tamaño real.
Para la página de la izquierda, se usa el siguiente código al inicio de la página:
Observa que se declara el tamaño real de las dos páginas, la posición a la izquierda y un borde nulo, en nuestra página no usamos el borde nulo, pues la línea divisoria da una mejor apariencia al libro; no obstante, eres libre de ponerla o no.
Para la página de la derecha, se usa el siguiente código al inicio de la página:
Es importante que uses imágenes que no tengan restricciones de derechos de propiedad intelectual. La imagen de fondo para esta página, la hemos descargado desde https://free-images.com/ y el tipo patrón desde thepatternlibrary.com/.
Otra alternativa es usar imágenes tipo patrón, más pequeñas en dimensiones y peso. En este párrafo estamos usando una imagen de 80x67 pixeles, incluyendo en el estilo la propiedad: background-size:80px 67px;.
Expresiones matemáticas
Nuestro modelo de libro incorpora la librería $\KaTeX$, que según sus autores es la biblioteca de composición tipográfica matemática más rápida de la web. Esta librería se basa en el sistema tipográfico $\TeX$ de Donald Knuth$\TeX$ se considera generalmente la mejor forma de componer fórmulas matemáticas complejas pero, especialmente en la forma de $\LaTeX$ (es.wikipedia.org/).. Dado que es compatible en un alto porcentaje con $\LaTeX$, no será problema para aquellos docentes que han hecho trabajos usando este sistema, incluso para aquellos expertos en GeoGebra.
La mayoría de los temas que explicáremos en este apartado, se encuentran en el libro ejemplo publicado en jlongi.github.io/.
Usando $\KaTeX$
Para mostrar formulas matemáticas se utiliza la biblioteca $\KaTeX$, la cual permite utilizar notación de latex para la representación de formulas matemáticas dentro de código HTML. Por ejemplo, la siguiente expresión:
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
genera lo siguiente: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
Al utilizar un solo signo de pesos, se generan formulas matemáticas relativamente pequeñas, mientras que si se quieren mostrar formulas más grandes, se puede anteponer a la expresión el código \displaystyle, obteniendo: $\displaystyle x = {-b \pm \sqrt{b^2-4ac} \over 2a}$.
Otra forma es usar dos signos de pesos, por ejemplo:
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
que además de agrandar la expresión, la centra:
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
Es posible que tengas que usar el signo $ en una expresión matemática, por lo que debes usarlo anteponiendo el caracter \; por ejemplo: $x = \$300$, que mostraría $x = \$300$
Expresiones simples
Exponentes y subíndices: $$H_2O H^2 O^{2+}$$
$$H_2O\space\space H^2\space\space O^{2+}$$
Vectores: $$\vec{A} \space \widehat{r}$$
$$\vec{A} \space \widehat{r}$$
Derivación: $$\nabla \partial x dx \dot x \ddot y$$
$$\nabla \partial x dx \dot x \ddot y$$
Conjuntos: $$\forall x \in \varnothing \subseteq A \cap B\cup\exists$$
$$\forall x\space \in \varnothing \subseteq A \cap B \cup\exists$$
Observa que en Raíces usamos dos barras inclinadas \\, para un salto de línea. Igualmente, podemos usar una expresión encapsulada en una etiqueta html, para asignarle color como el ejemplo de Geometría.
Fracciones: $$\frac 35\,\; \frac{x+1}{x^2-2x+1}$$
$$\frac35\,\; \frac{x+1}{x^2-2x+1}$$
Aquí hemos usado dos tipos de espacio, uno con \, y otro con \;, siendo ligeramente mayor el segundo. Ensaya con \quad y \qqad y otros que verás en el apartado de espaciado.
Expresiones complejas
Sumatorio: $$\sum_{k=1}^N k^2$$
$$\sum_{k=1}^N k^2$$
Integral: $$\int_{-a}^{b} e^x\, dx$$
$$\int_{-a}^{b} e^x\, dx$$
Integral de línea: $$\oint_{C} x^3\, dx + 4y^2\,dy$$
$$\oint_{C} x^3\, dx + 4y^2\,dy$$
Límite: $$\lim_{x \to{+}\infty}{f(x)}$$
$$\lim_{x \to{+}\infty}{f(x)}$$
Productorio: $$\prod_{i=1}^n p_i$$
$$\prod_{i=1}^n p_i$$
Binomial: $$ \binom{n}{k}$$
$$ \binom{n}{k}$$
Matrices
Tipo 1: $$ \begin{matrix} x & y \\ z & v \end{matrix}$$
$$\begin{matrix} x & y \\ z & v \end{matrix}$$
Tipo 2: $$ \begin{bmatrix} x & y \\ z & v \end{bmatrix}$$
$$\begin{bmatrix} x & y \\ z & v \end{bmatrix}$$
Tipo 3: $$ \begin{Bmatrix} x & y \\ z & v \end{Bmatrix}$$
$$\begin{Bmatrix} x & y \\ z & v \end{Bmatrix}$$
Tipo 4: $$ \begin{pmatrix} x & y \\ z & v \end{pmatrix}$$
$$\begin{pmatrix} x & y \\ z & v \end{pmatrix}$$
Tipo 5: $$ \begin{vmatrix} x & y \\ z & v \end{vmatrix}$$
$$\begin{vmatrix} x & y \\ z & v \end{vmatrix}$$
Tipo 6: $$ \begin{Vmatrix} x & y \\ z & v \end{Vmatrix}$$
Para ver más ejemplos de uso de $\TeX$ puede consultarse el siguiente enlace: Ayuda:Uso de TeX, sólo se debe probar la compatibilidad de algunas expresiones, pues no todas las expresiones de este enlace son soportadas por $\KaTeX$.
Una lista de las funciones soportadas por $\KaTeX$ se encuentra en la siguiente dirección Funciones soportadas.
Otra lista de funciones $\TeX$, ordenadas alfabéticamente, incluye funciones que $\KaTeX$ admite y algunas que no admite: Otra lista
Expresiones químicas
En la herramienta $\KaTeX$, se ha incorporado una extensión (mhchem.js), que facilita la escritura de expresiones químicas. A continuación, presentamos algunas de estas expresiones (para mayor información, véase mhchem.github.io/).
Hemos llegado al final, con el apartado que hace de nuestro libro un libro interactivo, explicáremos cómo embeber objetos interactivos de herramientas como DescartesJS, GeoGebra, Phet, ChemDoodle, entre otros.
GeoGebra
Iniciamos con este software de matemáticas muy popular a nivel mundial.
GeoGebra es un software de matemáticas para todo nivel educativo. Reúne dinámicamente geometría, álgebra, estadística y cálculo en registros gráficos, de análisis y de organización en hojas de cálculo. GeoGebra, con su libre agilidad de uso, congrega a una comunidad vital y en crecimiento. En todo el mundo, millones de entusiastas lo adoptan y comparten diseños y aplicaciones de GeoGebra. Dinamiza el estudio. Armonizando lo experimental y lo conceptual para experimentar una organización didáctica y disciplinar que cruza matemática, ciencias, ingeniería y tecnología (STEM: Science Technology Engineering & Mathematics). La comunidad que congrega lo extiende como recurso mundial, ¡potente e innovador para la cuestión clave y clásica de la enseñanza y el aprendizaje!
Embebiendo una escena desde el portal de GeoGebra. En general, el código para embeber un objeto interactivo desde cualquier portal es de la forma:
Para el ejemplo, hemos usado un interactivo de Programación lineal diseñado por Luis M. Iglesias Albarrán.
Para una mejor interacción, se sugiere ampliar la escena (clic en la esquina superior derecha) y luego activar el botón zoom de GeoGebra (esquina inferior derecha):
Embebiendo una escena GeoGebra en local. Como lo decíamos en el apartado de los vídeos, una buena recomendación es incluir objetos interactivos que tengamos guardados en alguna carpeta de nuestro libro, para evitar dependencias externas y posibles fallos en un futuro, tal como ocurrió con los objetos diseñados con la versión 4.4 de GeoGebra, pues se presentó un cambio en el diseño del portal que hizo inservibles algunos enlaces a objetos interactivos.
En este libro, que puedes descargar, hemos incluido una versión liviana de la versión 5.0 de GeoGebra, de tal forma que puedas ejecutar escenas en local, como esta:
Una ventaja adicional, es que puedes hacer clic en el botón de zoom de GeoGebra directamente, haz la prueba.
Pero, ¿cómo descargamos una escena de GeoGebra? El procedimiento es sencillo. En la carpeta interactivos, encontrarás una subcarpeta llamada GeoGebra5, en ella verás archivos html. Abre el archivo ejemplo0.html, y observarás:
Puedes, inicialmente, modificar las dimensiones de la escena (data-param-width y data-param-height). Ahora, selecciona en Recursos GeoGebra, la escena que deseas copiar.
¡He aquí el truco!, pones el puntero del ratón sobre la escena y presionas las teclas CTRL + SHIFT (tecla mayúsculas) + B, en ese orden y sin soltar ninguna. Este truco permite copiar el archivo GeoGebra en el portapapeles en un formato tipo base64Base 64 es un sistema de numeración posicional que usa 64 como base. Es la mayor potencia que puede ser representada usando únicamente los caracteres imprimibles de ASCII. Esto ha propiciado su uso para codificación de correos electrónicos, PGP y otras aplicaciones como GeoGebra (Wikipedia)..
El procedimiento lo puedes ver en el siguiente vídeo. La escena obtenida, la puedes ver en la siguiente página.
Algunas ventajas que tenemos de usar recursos digitales en local:
No dependencia de terceros. La dependencia puede hacer que nuestros enlaces, por algún motivo, se rompan.
Perdurabilidad. Asociada a la anterior, pues la no dependencia permite que nuestro libro perdure en el tiempo.
Reuso. Si el recurso lo permite (licencia), podemos hacer algunos ajustes de acuerdo a nuestras necesidades.
No dependencia de conectividad. La pobre o nula conectividad en algunas regiones, se supera con recursos en local.
Presentamos la biblioteca química de componentes web ChemDoodle, diseñada en Javascript y producida por iChemLabs. Estos componentes permiten al usuario presentar gráficos y animaciones 2D y 3D de calidad y publicación para estructuras químicas, reacciones y espectros. Más allá de los gráficos, esta herramienta proporciona un marco para la interacción del usuario para crear aplicaciones dinámicas a través de navegadores web, plataformas de escritorio y dispositivos móviles como iPhone, iPad y dispositivos Android. Esta biblioteca también tiene acceso completo a toda la API de escritorio ChemDoodle a través de AJAX, lo que permite un acceso rápido a uno de los paquetes de gráficos químicos más robustos que existen directamente a través de Javascript.
Un ejemplo se presenta en la siguiente página. Interactúa con la molécula, diseñada en ChemDoodle (debes ampliarla con la rueda del ratón, o haces clic sostenido sobre la molécula para rotarla). Se trata de la molécula de la cafeína, $C_8H_{10}N_4O_2$, que es la suma de las masas atómicas de ocho átomos de carbono, diez átomos de hidrógeno, cuatro átomos de nitrógeno y dos átomos de oxígeno, lo que equivale a 194.19 uma.
En el libro interactivo "Química", publicado por nuestra Red, se hace uso de esta biblioteca. A lo largo del libro se incluyen objetos interactivos permitiendo que la química se vuelva más interesante y accesible para los estudiantes y manteniendo el rigor inherente a la materia.
La biblioteca de componentes web de ChemDoodle tiene LICENCIA PÚBLICA GENERAL GNU. Si deseas incluir componentes web de ChemDoodle en un sitio web, debes cumplir con esta licencia. La última versión la puedes descargar desde aquí.
En el siguiente vídeo, te mostraremos cómo puedes diseñar otras moléculas para insertar en la web. Para ello, debes descargar el chemdoodle y el siguiente archivo html, que hemos llamado Transformer, el cual lo debes guardar en subcarpeta "samples" del chemdoodle que descargaste y descomprimiste.
Como pudiste observar en el vídeo, el uso de DescartesJS facilita el copiado del archivo que define la molécula; sin embargo, hay otra utilidad del editor que permite convertir el archivo con un diseño "responsive", el cual se describe en el siguiente apartado.
A continuación, presentamos la molécula de la aspirina diseñada en el vídeo y, además, la molécula de la piedra alumbreLa piedra de alumbre es un mineral, sal a base de sulfato de potasio (alunitas), que se encuentra de forma natural en yacimientos de muchas regiones de todo el mundo, sobre todo en Siria y Oriente Medio. Se utiliza desde la antigüedad tanto en cosmética como para la limpieza de tejidos (https://www.enfemenino.com/), que puedes ver en tres modelo, entre ellos las esferas de van der Waals.
DescartesJS
La herramienta DescartesJS se caracteriza por una innata interactividad, por permitir realizar representaciones de objetos bi y tridimensionales, por gestionar expresiones de texto y de fórmulas, por integrar objetos multimedia como imágenes, audios y vídeos, por tener la posibilidad de reflejar casos concretos y también potenciar la conceptualización de tareas y procedimientos mediante la utilización de semillas aleatorias y controles numéricos, gráficos y de texto, y con ellos poder abordar la evaluación de manera automática, tanto la correctiva como la formativa. Con DescartesJS es posible el diseño y desarrollo de objetos educativos que promueven el aprendizaje significativo, posibilitando esa deseada construcción del conocimientoVéase (Proyecto iCartesiLibri)..
La herramienta Descartes nace a fines del siglo XX como una herramienta de creación de interactivos que aprovecha el lenguaje de programación Java. Entonces consistió en un programa en Java que permitía generar archivos .html para ser visualizados como páginas web.
Los archivos html generados por Descartes suelen contener interactivos y son principalmente usados en la docencia de matemáticas y física en diversos niveles.
A pesar de que existe una gran variedad de programas interactivos con fines de docencia tales como GeoGebra, Cabri y otros, Descartes permite una gran versatilidad de interacciones.
Adicionalmente, con Descartes es posible generar interacciones específicas diseñadas por el profesor, ejercicios aleatorios con restricciones particulares. En sus inicios, Descartes funcionaba directamente en Java para ser usados en computadora. No obstante, el advenimiento de dos tecnologías nuevas forzaron un cambio en Descartes, a saber:
$\cdot$ El advenimiento de dispositivos móviles
$\cdot$ El elemento canvas de HTML5
Se volvió entonces necesario que los interactivos corrieran en dispositivos móviles (en JavaScript). Descartes 5 nace de esta necesidad. Un nuevo editor fue creado con esto en mente. Aunque no hubieron cambios muy drásticos en el editor, fue necesario incluir una biblioteca nueva.
La versión 5 del editor de Descartes es la penúltima en la lista de versiones. También se encuentra programada en Java. No obstante, la versión JS de Descartes es la más actual. Dicho editor se encuentra programado en JavaScript y su funcionalidad es básicamente muy similar al de la versión Descartes 5, aunque tiene muchas ventajas sobre él.
También es importante mencionar que, a diferencia de Descartes 5, el nuevo editor DescartesJS tiene la virtud de que lo que se visualiza en el editor se representará idéntico en un navegador.
Al igual que las escenas de GeoGebra, los interactivos de DescartesJS los podemos embeber desde el Proyecto Descartes, o desde un interactivos en local.
Embebiendo una escena desde el proyecto Descartes o desde el proyecto Prometeo. Es el mismo formato de código, que usamos en GeoGebra; por ejemplo:
que nos muestra una unidad interactiva del subproyecto Un_100:
Embebiendo una escena DescartesJS en local. El código es igual al anterior, pero su fuente es un archivo guardado en alguna de las carpetas del libro; por ejemplo:
Que es una caracola similar al que mostramos en GeoGebra:
Una amplia colección de curvas y superficies paramétricas, fueron publicadas en el Proyecto iCartesiLibri.
Objetos Interactivos de Aprendizaje - DescartesJS
Es importante comprender lo que entendemos por un objeto interactivo de aprendizaje - OIA-, pues de ello depende reconocer la importancia que tiene en un proceso de enseñanza aprendizaje, pues no se trata de los otrora "objetos virtuales de aprendizaje" - OVA -, que podían limitarse a una simple imagen, animación o vídeo. Los OIA son representaciones más efectivas porque no sólo explican sino que permiten inferir desde el objeto representado. La interacción sujeto - objeto, al poder cambiar atributos del objeto por parte del sujeto, permite un mayor conocimiento del objeto. Pero, para no extendernos en la argumentación, recomendamos la lectura del siguiente artículo.
Con DescartesJS hemos diseñado una gran cantidad de OIA, con la posibilidad de descargar e intervenir; entre ellos, libros interactivos de aprendizaje - LIA -, vídeos interactivos de aprendizaje - VIA -, Unidades Interactivas de Aprendizaje, etc. A continuación, presentamos dos repositorios en los que se alojan estos OIA: Proyecto Prometeo (México) y Proyecto Descartes (España).
Proyecto Prometeo
Este sitio alberga las unidades creadas por el Equipo Descartes. La gran mayoría de las unidades incluyen aquellas creadas desde las versiones iniciales de Descartes en Java hasta las más actuales, desarrolladas en DescartesJS y que son compatibles con HTML5.
Muchas de las unidades creadas en la versión antigua de Descartes han sido actualizadas también para HTML5. Algunas de las unidades fueron desarrolladas en otras herramientas aparte de Descartes.
El repositorio está divido en dos secciones: Recursos (601 a febrero de 2021) y Proyectos (10 a febrero de 2021). He aquí tres de los proyectos, haz clic en alguna de las siguientes imágenes para que explorar:
Proyecto Descartes
Por su parte, la "Red Educativa Digital Descartes" (proyectodescartes.org) nos ofrece 18 Subproyectos, con recursos interactivos desde nivel infantil hasta nivel universitario. Cinco de estos Subproyectos, los describimos a continuaciónLa descripción es tomada textualmente de proyectodescartes.org.:
Proyecto Ed@ad
El proyecto "EDAD" (Educación Digital con Descartes) surge con el propósito de desarrollar recursos educativos digitales interactivos, para la Educación Secundaria Obligatoria (ESO) en las áreas curriculares de Matemáticas, Ciencias Naturales y Física y Química, que permitan su uso tanto en la enseñanza presencial como en la formación a distancia.
Todas las unidades cuentan con un diseño común y están estructurados como secuencias didácticas que cubren un proceso completo de enseñanza/aprendizaje de un tema o unidad didáctica.
Las pautas seguidas en el diseño de las unidades contemplan la realimentación inmediata, el aprendizaje significativo, el predominio de la interactividad, la disponibilidad de un contador de aciertos y fallos y el uso de semillas aleatorias las cuales permiten reutilizar el mismo objeto, pero cada vez con
diferentes datos obligando a que el alumnado necesite prestar atención, tenga que leer y esté forzado a reflexionar sobre lo leído, por tanto contribuye a que aprenda practicando y que pueda practicar tanto como quiera con diferentes situaciones y cuestiones.
Las unidades didácticas contienen escenas interactivas desarrollados con la herramienta DescartesJS promovida por la asociación no gubernamental "Red Educativa Digital Descartes". Esta herramienta cuenta con una licencia de software libre.
Como ejemplo, haz clic en la imagen para acceder a uno de estos recursos:
Proyecto iCartesiLibri
Es aquí donde tienes la oportunidad de publicar tu libro.
Esta web se configura como un espacio evolutivo en el que las ideas fluyan a través de los ejemplares publicados, en el que la selección sea fruto del intercambio de experiencias y en el que los avances sean la sinergia de la colaboración. Un primer antecedente puede situarse en los libros interactivos del proyecto ED@D de la RED Descartes.
Este proyecto tiene como objetivo abordar la conceptualización y el diseño, desarrollo y experimentación de nuevos libros, basados en la interactividad, que permitan poner de manifiesto que es posible dar una respuesta positiva y asequible a los retos educativos intrínsecos al paradigma educativo emergente. Conseguir concatenar el clásico “Enseñar a Aprender”, con el actual “Aprender a Aprender” y, a la vez, “Aprender a Enseñar”, alcanzando un ciclo continuo, ininterrumpido, cual banda de Möbius, que sea conducente a la mejora educativa y a la satisfacción discente y docente.
Nuestra meta es diseñar libros digitales interactivos, que permitan el aprendizaje significativo a través de la intervención directa y personal del discente, el cual se convierte en el protagonista de su aprendizaje; pero todo en base y gracias a la planificación docente, quien interviene como arquitecto del mismo. De esta forma, se busca posibilitar la construcción del conocimiento.
A la fecha de publicación de este libro, existen un poco más de 60 libros interactivos de aprendizaje, distribuidos en 10 áreas temáticas. Haz clic en la siguiente imagen, para acceder a este espacio de aprendizaje:
Proyecto Competencias
En abril de 2015 la OCDE, en el desarrollo de su programa de evaluación del sistema educativo denominado PISA, utilizó el ordenador. PISA estrenaba oficialmente nuevos procedimientos y recursos, si bien en ediciones anteriores ya se introdujo a nivel experimental. Se emplea el ordenador como herramienta para llevar a cabo el proceso y, consecuentemente, cambia el soporte de lectura y escritura. Se pasa del papel tradicional al papel virtual, del soporte analógico al digital. Pero el elemento crítico o realmente diferenciador estará en el tipo de recursos que se emplearán en la evaluación. Es lo que puede observarse al analizar los ítems que se han liberado como muestra y que el INEE ha publicado en diferentes documentos. Obviamente –¡era de esperar!– se aprovechan las potencialidades de los sistemas informáticos y se introduce la interacción persona-máquina. Se emplea la interactividad para evaluar.
A petición del INEE desde la Red Educativa Digital Descartes hemos procedido a la reproducción de los objetos liberados PISA 2015, recreando las simulaciones y las funcionalidades de los mismos para que cualquier interesado pueda experimentar con dichos objetos y se ubique en el entorno de la nueva prueba PISA.
En la siguiente página, observa uno de los objetos interactivos de este proyecto:
Proyecto @prende.mx
El proyecto @prende.mx es una iniciativa de la Secretaría de Educación Pública del gobierno mejicano a través de la cual busca la introducción de las TIC en la Educación. El Gobierno Federal de México proporciona materiales y recursos didácticos que apoyan al alumnado en sus procesos de estudio en el hogar y en la escuela. Tiene como objetivo principal:
Contribuir, mediante el uso y aprovechamiento de la computadora personal, a la mejora de las condiciones de estudio de los niños y niñas, la actualización de las formas de enseñanza,
el fortalecimiento de los colectivos docentes, la revalorización de la escuela pública y la reducción de las brechas digitales y sociales entre las familias y comunidades que integran el país.
Dentro de este proyecto, el Instituto de Matemáticas de la Universidad Autónoma de México y el Laboratorio de Tecnologías de la Educación (LITE) han participado desarrollando unidades didácticas que han sido especificamente diseñadas para su uso en las tabletas usando la herramienta DescartesJS. Estos recursos se han y están siendo entregados al alumnado de diferentes estados mejicanos.
Haz clic en la imagen para interactuar con una de estas unidades interactivas de aprendizaje:
Proyecto Plantillas
Dejamos de último este proyecto, pues es el que te pemitirá diseñas algunas actividades interactivas sin necesidad de aprender la herramienta de autor DescartesJS.
... usando diferentes plantillas, se pueden generar atractivos puzles o actividades y test de memoria, o de arrastre, o asociación, interesantes vídeos interactivos, etc. sin más que realizar simples y usuales tareas de edición de imágenes y de ficheros de texto “plano”.
Ello es posible aprovechando el potencial educativo y la interactividad intrínseca de Descartes sin necesidad de ser desarrollador de escenas de Descartes. Es decir, seremos capaces de generar recursos interactivos de Descartes sin necesidad de ser expertos cartesianos. Abordamos el objetivo:"Descartes para no cartesianos", sin olvidar a los cartesianos, y buscando satisfacerles también, pues de igual manera podrán elaborar su materiales con estas plantillas y a la vez, si lo desean, les podrán servir de guía o modelo en el desarrollo de las suyas.
Puedes aprender a usar estas plantillas con el libro interactivo de aprendizaje Plantillas Descartes JS o accediendo al Proyecto Plantillas, en el que podrás observar cómo algunos docentes han hecho provecho del material, por ejemplo:
Simulaciones Phet
Fundado en 2002 por el ganador del Premio Nobel Carl Wieman, el proyecto de simulaciones interactivas de PhET de la Universidad de Colorado en Boulder crea simulaciones interactivas gratuitas de matemáticas y ciencias. Las simulaciones de PhET se basan en investigación educativa extensiva e involucran a los estudiantes mediante un ambiente intuitivo y similar a un juego, en donde aprenden explorando y descubriendo (phet.colorado.edu).
Las simulaciones Phet las puedes descargar y usar en local, tal como lo hicimos con la simulación de biología de la parte superior. Existen simulaciones en Física, Química, Biología, Matemáticas y Ciencias de la Tierra.
Presentamos tres simulaciones más, para verlas haz clic sobre una de las imágenes:
educaplay
Es una plataforma para la creación y publicación de actividades educativas multimedia, la cual tiene la opción gratuita y la premium, esta última con algunas funcionalidades adicionales, en especial la eliminación de publicidad, tal como aparece en la siguiente actividad.
Una de sus características, contraria a nuestros propósitos, es que sólo funciona en línea; no obstante, la incluimos como opción para el diseño de actividades como sopas de letras, mapas interactivos, ordenar palabras y vídeos interactivos.
Existen otras páginas que permiten que embebamos objetos interactivos en nuestro libro, pero ya es tarea tuya explorar y probar su funcionamiento.
Por ejemplo, estos son dos ejemplos de Khan Academy (haz clic en una imagen):
A propósito de los vídeos interactivos de educaplay, nuestro último capítulo lo dedicaremos a ello.
Vídeos interactivos
Diseñar vídeo interactivos es "muy fácil", si usas una de las plantillas del libro Plantillas Descartes JS, en el que tenemos varios modelos para vídeos en local o de YouTube. Sin embargo, vamos a explicar cómo se intervienen dos vídeos (no incluidos en las plantillas) que, si prestas atención, estarás en capacidad de intervenir los demás modelos.
Modelo de vídeo interactivo en local
Este modelo es similar al ofrecido por educaplay.Dale, inicialmente, una mirada:
Como pudiste observar, se trata de un vídeo en el que se hacen cuatro preguntas tipo selección múltiple. Puedes modificar el número de preguntas, el momento (tiempo) en el que se hace cada pregunta, el fondo, el color de los recuadros y, obviamente, las preguntas.
En la carpeta interactivos de este libro, encontrarás una subcarpeta llamada "video_interactivo_Local". Observarás tres archivos, dos de los cuales puedes modificar usando un editor de textos planos:
Archivo index.html. Al final de este archivo observarás tres <script>. En el primero puedes cambiar los tiempos de parada del vídeo (en segundos), conservando el cero (0) inicial; para nuestro modelo son cuatro preguntas, usa mínimo una (obvio) y máximo seis (6). En el segundo <script>, puedes cambiar el título del vídeo, el cual debe ir entre comillas simples..
El tercer <script> pone una sombra curva en la esquina superior izquierda; sino te gusta, simplemente bórralo. Como puedes ver, la intervención de este archivo se muy sencilla.
El fondo es una imagen llamada fondo5.png que se encuentra en la carpeta imagenes, puedes cambiar la imagen por el fondo que desees, siempre que conserves el mismo formato png (en minúscula).
Archivo index2.html. Al final de este archivo observarás cinco <script>. El primero es intocable, pues afectarías el funcionamiento del interactivo. El segundo permite cambiar el número de preguntas, que para el ejemplo son cuatro (4). Es importante que coincida con el número de tiempos de parada del archivo anterior. En el segundo <script>, pones las preguntas encerradas entre comillas simples.
Es importante que no te exageres en la extensión de la pregunta, pues sólo dispones de dos líneas en los recuadros.
En el tercer <script> escribes las respuestas, cuatro por cada pregunta donde la primera es la respuesta correcta. En la siguiente imagen puedes ver los tres <script>, que acabamos de describir (en el tercero sólo aparecen las respuestas de las dos primeras preguntas.
El último <script> permite cambiar el color de los recuadros en formato decimal; por ejemplo, recuerda que el rojo es 255, 0, 0 o el turquesa que es 0, 255, 255.
No olvides cambiar el vídeo en la carpeta videos, conservando el nombre video1 y, preferiblemte, en formato mp4.
¡Eso es todo!... para este modelo.
Modelo de vídeo interactivo con YouTube
Google, en general, y YouTube, en particular, suministran rutinas JavaScript de programación, más conocidas como JavaScript API, las cuales permiten incrustar una aplicación Google (YouTube, Google Maps,...) en un sitio web y controlarla mediante JavaScript. Estas API, que hemos llamado interface o interfaz, anteriormente eran una especie de plug-in que hoy en día se han estandarizado en JavaScript, buscando una mayor compatibilidad con los sistemas operativos y navegadores.
En este último apartado, veremos cómo aprovechar la API de YouTube para reproducir los vídeos, pausar o detener esos videos, ajustar el volumen, o recuperar información sobre el video como su duración.
No obstante, siempre recomendamos diseñar vídeos interactivos con los modelos en local, pues no tienen dependencia externa que puedan frustrar uno de los atributos que esperamos de nuestros objetos interactivos... la perdurabilidad. Esta frustración puede presentarse por dos razones; la primera es la eliminación del vídeo por el autor,
incluso en nuestro propio canal (una demanda, por ejemplo); la segunda, porque Google cambie políticas o modificaciones en los atributos de sus aplicaciones que hagan inservible la interface (algo similar se ha presentado con la API de Google Maps, al modificar la llamada API key). Pese a estos posibles inconvenientes la actual API de YouTube funciona muy bien.
Antes de explicar el modelo en nuestro libro, nuevamente, te recomendamos los presentados en la plantillas del libro Plantillas Descartes JS
Otro ¡antes de explicar el segundo modelo!, se nos hace importante reflexionar un poco sobre la importancia de un vídeo interactivo:
...todo vídeo es útil como herramienta en los procesos de enseñanza y aprendizaje; sin embargo, es su impacto el que cuestionamos en este apartado. Los vídeos, en general, tienen como deficiencia principal su unidireccionalidad, pues el sujeto que lo “ve” es pasivo. Nuestro propósito es el diseño de recursos digitales interactivos, en los que el sujeto es activo, en tanto que puede intervenir los atributos del objeto representado, en este caso el vídeo. Se trata, entonces, de diseñar objetos interventivos, es decir, objetos con los cuales se interactúa (Rivera, Espinosa & Radillo, 2019, pág. 168).
Como recurso digital, el vídeo es una excelente opción; no obstante, debe garantizar, al menos, las siguientes condiciones: i) perdurabilidad (en lo que hemos sido insistentes), ii) intencionalidad pedagógica (que permite un aprendizaje significativo), iii) motivador (de corta duración, buen diseño... atrapante) y, de ser posible, iv) interactivo.
La última condición es opcional, pues todos conocemos los llamados "vídeos virales", que cumplen con la tercera condición o los populares vídeos de Khan Academy y Julio Profe que cumplen las tres primeras. La interactividad, a nuestro criterio, potencia estas tres condiciones y, además, permite garantizar que nuestros estudiantes "vean" el vídeo, al incluir el componente evaluativo, tal como lo hicimos en el primer modelo.
Pero, para atrapar al estudiante, las evaluaciones en la línea de tiempo del vídeo no necesariamente cumple con la tercera condición (motivador), por lo que incluir otro tipo de actividades puede ayudar a generar un excelente "vídeo interactivo de aprendizaje". El segundo modelo, que vamos a presentar, incluye dos actividades adicionales. La primera, común en otras herramientas como YouTube, es la presencia de mensajes que permiten acceder a información adicional. El siguiente vídeo es un ejemplo de ello (no hagas clic en YouTube, pues se pierde la interactividad, sólo haz clic en el botón del centro y presta atención):
Pudiste observar que pusimos un botón "más información", que aparece en algunos puntos de la línea de tiempo, además de una pregunta.
Otro elemento, que podemos incluir en nuestro vídeo, es la actividad interactiva. Por ejemplo, en el siguiente vídeo, al final, se incluye una actividad interactiva del subproyecto GEOgráfica:
Si ves el vídeo, recorrerás la comunidad autónoma de Andalucía, al final aparecerá un mapa interactivo diseñado en DescartesJS, por cada pregunta acertada se mostrará un pequeño clip de la provincia señalada.
Ahora sí, vamos a explicar el segundo modelo, en el cual incluiremos tres tipos de actividades ¡Presta atención!
Los tres tipos de actividades se presentarán durante la reproducción del vídeo, las cuales se identifican con una marca azul (información), naranja (evaluación) o verde (actividad interactiva), tal como se muestra en la siguiente imagen:
En la carpeta interactivos de este libro, encontrarás una subcarpeta llamada "video_interactivo_YouTube", en la cual hay varios elementos que debes intervenir para diseñar tu vídeo interactivo, usando un vídeo de YouTube.
Vídeo introductorio. Lo primero que se te puede ocurrir, es cambiar el clip (vídeo muy corto) de introducción que, para este caso, es de la Institución Universitaria Pascual Bravo.
Obviamente, debes contar con el enlace de este vídeo. Por ejemplo, si eres de la Universidad Nacional Autónoma de México, existe un "intro" de 16 segundos, como se muestra en la siguiente imagen:
El enlace es https://www.youtube.com/watch?v=jq9TP6Jim5E, en el cual resaltamos en rojo el código del vídeo, que aparece despues de los caracteres v=.
Algunos otros códigos son 56lHDyN0aSw de la Universidad de los Andes e Colombia, EPl2OQYWLHI de la Universidad del País Vasco pero, si no cuentas con ese intro, puedes usar uno de un paisaje (1HTpkAGhYnY), de música (QF08nvtHHCY), de la tierra vista desde el espacio (QF08nvtHHCY), etc.
Una vez tengas el código, abres el archivo ivideo.html y cambias el código YouTube (clryISLhHzc) que aparece después de embed/, observa:
Hecho esto, este procedimiento no lo vuelves a repetir en tus siguientes vídeos, a no ser que quieras usar diferentes introducciones.
Las siguientes intervenciones las haremos en el archivo index.html
Código YouTube del vídeo. Corresponde al vídeo que seleccionaste para interactuar con el. Debes anotar el código, tal como lo hicimos en el anterior. Al final del archivo, en el primer <script> escribes este código entre comillas simples, que para nuestro vídeo de animales es 8CUda-VITTY.
Título del vídeo. En el <script> que contiene el archivo titulo.txt, puedes modificar el título del vídeo (respetando las comillas simples).
Plantillas a usar para los eventos de evaluación. ¿Recuerdas el archivo index2.html del primer modelo?, esa podría ser una plantilla a usar; sin embargo, puedes seleccionar nuchas otras del Proyecto Plantillas o, si lo prefieres, de otras plataformas como GeoGebra. Una vez las hallas seleccionado y modificado de acuerdo a tu vídeo, debes incluirlas en el <script> que contiene el archivo plantillas.txt. Para nuestro ejemplo, hemos seleccionado del plantillero: “Clasifica textos en dos contenedores”, “Clasifica imágenes en dos contenedores”, “Selección múltiple Identifica textos” y “Selección múltiple Identifica imágenes”.
Estas plantillas deben estar ubicadas en la carpeta de nuestro vídeo y sus nombres deben coincidir con los declarados en el <script> (observa la imagen de la dercha).
Actividades interactivas complementarias. Es posible incluir escenas de DescartesJS, GeoGebra, Phet, etc. Para nuestro ejemplo, hemos escogido del proyecto Plantillas dos puzles, uno tipo memoriza y el de giratorios. Los nombres de las carpetas de estas escenas interactivas deben ir en el <script> que contiene el archivo actividades.txt.
Tiempos de parada para preguntas. Debes observar el vídeo y anotar el tiempo de reproducción en el que vas a hacer una pregunta, puedes realizar tantas preguntas como desees; sin embargo, es importante tener en cuenta que un exceso de preguntas le puede quitar interés al usuario del vídeo. Una vez tengas los tiempos, los conviertes a segundos y los escribes en el <script> que contiene los datos del archivo segundos.txt.
Recuerda que la cantidad de tiempos de parada debe coincidir con el número de plantillas. Si no deseas incluir evaluaciones en el vídeo, debes asignar al primer tiempo de parada un valor de 1000 y borrar los demás.
Tiempos de parada para mostrar imágenes complementarias. Tiempo en segundos que determina el momento de parada para mostrar información adicional al vídeo. Es importante no dejar un valor de cero, pues generaría un mal funcionamiento de la escena. En caso de no utilizar información complementaria, se sugiere dejar un dato con un valor de 1000 y borrar los demás. Los tiempos de parada los escribes en el <script> que contiene los datos del archivo segundosi.txt.
Imágenes complementarias. Este modelo incluye una carpeta de imágenes llamada “informacion”. En esta carpeta se deben guardar las imágenes de información complementaria, en formato jpg y un tamaño máximo de 600x400 pixeles.
Debes tener en cuenta que la cantidad de imágenes deben corresponder a la cantidad de tiempos de parada. Los nombres de las imágenes deben ser i1.jpg, i2.jpg,…
Tiempos de parada para mostrar las actividades interactivas. En el <script> que contiene los datos del archivo segundosa.txt escribes los tiempos de parada para mostrar las actividades interactivas. Para nuestro ejemplo, hay dos escenas interactivas y, en consecuencia, dos datos en el <script>. Recuerda cambiar el primer dato por un valor de 1000, si no deseas incluir este tipo de evento.
Bueno... ¡Eso es todo!, observa el resultado, en la siguiente página, e interactúa.
Presentamos algunos ejemplos usando la herramienta GeoGebra, en los cuales se presentan suspensiones del vídeo, de tal forma que se practique lo explicado en el vídeo (haz clic sobre cada imagen para observarlos).
Actualizaciones del libro
Así como la herramienta DescartesJS, los modelos de libros interactivos están en permanente actualización, incorporando nuevas utilidades o mejorando las existentes. Por ello, es importante que estés revisando si se presentan actualizaciones.
Por ejemplo, posterior al modelo usado para el presente libro, se realizaron algunas actualizaciones, entre las cuales se destacan:
Bibliografía y referencias bibliográficas.
Tablas enumeradas como figura.
Elementos de bloque autonumerados.
El botón de herramientas y configuración.
Mejoras en la tabla de contenido.
Bibliografía y referencias bibliográficas
Según la RAE la bibliografía es la “relación de textos, procedentes de diversos soportes, utilizados como fuente documental”https://dle.rae.es/bibliografía. Durante el desarrollo de un libro por lo general se requiere de un apartado especial donde se listen todos los recursos revisados o utilizados para la elaboración del contenido, así como un mecanismo para hacer referencia a dichas fuentes.
Para agregar una entrada a la bibliografía se utiliza la etiqueta <bibitem>, con la que se especifican los diferentes apartados de una fuente bibliografía, como el autor y el título. Por ejemplo para agregar la información bibliográfica del libro “Descartes JS - Nivel - I”, escribiremos lo siguiente:
<bibitem
id="RER119"
authors="Juan Guillermo Rivera Berrío, Joel
Espinosa Longi y Alejandro Radillo Díaz"
title="Descartes JS - Nivel - I"
editorial="Fondo Editorial Pascual Bravo"
edition="2ª edición"
year="2019">
</bibitem>
Con lo que se obtiene lo presentado en la siguiente imagen.
El parámetro id es el que permite identificar el elemento de la bibliografía, y será el nombre con el podremos hacer referencia dentro del texto de nuestro documento. Este parámetro es obligatorio al definir una entrada bibliográfica.
Con el parámetro authors se especifica el nombre de los autores; title corresponde al título de la obra; con editorial se define la editorial que publica la obra; edition
nos permite especificar la edición y year corresponde al año de la publicación. Todos estos parámetros son opcionales.
Para facilitar la lista de las entradas bibliográficas, estas se autonumeran respetando el orden en el que se definen.
Ahora, para realizar una referencia dentro del texto a esta entrada bibliográfica utilizamos la etiqueta <bibref>, especificando en el parámetro ref_id el identificador que le proporcionamos. Por ejemplo con el siguiente código:
Para aprender más sobre Descartes se puede
consultar el libro: Descartes JS - Nivel - I
(<bibref ref_id="RER119"></bibref>).
Obtenemos lo siguiente.
Como se puede observar el elemento <bibref> se reemplaza automáticamente por el número de la referencia correspondiente, la cual presenta un color diferente al texto que la rodea, así como una línea punteada en la parte inferior, esto para destacar la referencia.
Además de destacar la referencia, este elemento tiene la funcionalidad de que al ser presionado (como si fuera un botón), muestra en la parte superior del libro la información de la entrada bibliográfica.
Lo que nos permite consultar las entradas bibliográficas sin necesidad de ir hasta el apartado que las contiene, facilitando el acceso a la información y evitando perturbar el flujo de lectura del documento.
Tablas enumeradas como figura
Así como es posible incluir figuras autonumeradas dentro de nuestro libro, también tenemos la posibilidad de incluir tablas autoenumeradas. El mecanismo es idéntico al de las figuras, es decir, utilizar el elemento <figure> e incluir dentro la tabla junto con un elemento <figcation> para la etiqueta de la figura; la única diferencia es que hay que agregar la clase figtable al elemento <figure>, para que así el libro conozca que se trata de una tabla y no de una figura. Por ejemplo a partir del siguiente código:
<p>Observa la <ref ref_id="mi_tabla">
</ref>.</p>
<figure id="mi_tabla" class="figtable">
<table>
<tr><td>Título 1</td><td>Título 2</td></tr>
<tr><td>Valor 1</td><td>Valor2</td></tr>
</table>
<figcaption>El título de la tabla.</figcaption>
</figure>
Obtenemos la siguiente tabla.
Como podemos observar del código, podemos hacer referencia a la tabla (de la misma forma que a las figuras) utilizando la etiqueta <ref> y especificando en el atributo <ref_id> el mismo valor que se proporciona a la etiqueta <figure> que engloba la tabla. Este mecanismo tiene la ventaja de autonumerar las tablas y de esta manera hacer referencia a ellas, sin la necesidad de conocer la numeración que tienen, simplemente utilizando un identificador para realizar la referencia.
Elementos de bloque autonumerados
Para la creación de libros de matemáticas o en contenidos donde se tenga la necesidad de dar definiciones numeradas, el libro cuenta con elementos que pueden utilizar un prefijo como titulo del bloque y estos se numeran de forma automática.
Este tipo de elementos son útiles para enumerar definiciones, lemas y teoremas. Aunque tambien pueden ser útiles para autonumerar ejercicios o ejemplos.
Para utilizar este tipo de bloques autonumerados a una etiqueta <div> le asignamos la clase num_block y el atributo prefix le damos el valor del texto que queremos que aparezca al inicio del bloque; por ejemplo:
<div class="num_block" prefix="Definición">Este es
el texto de una definición.</div>
Con el código anterior obtenemos lo siguiente.
El estilo predeterminado es similar a lo que obtenemos con la clase note (solo que el borde es de otro color), pero se pueden modificar los estilos para que el bloque autonumerado tenga la presentación que queramos. Podemos ver la regla CSS para este bloque de definición en el siguiente código:
Para cambiar el estilo de un bloque autonumerado debemos definir regla CSS donde especifiquemos el prefijo que queremos modificar ([prefix="Definición" en este caso) y a partir de ahí darle el estilo que más nos guste.
Si quisiéramos tener ejemplos autonumerados, podemos incluir lo siguiente:
<div class="num_block" prefix="Ejemplo">Este es
el texto del ejemplo.</div>
Con las ultimas versiones del libro se incorporo un botón que aparece en la esquina superior derecha el cual tiene el propósito de mostrar algunas herramientas para mejorar la experiencia del libro, así como configuraciones adicionales. Esta funcionalidad se encuentra aún en desarrollo, por lo que actualmente no se muestran herramientas, pero en futuros desarrollos se incluirá una calculadora, para ayudar en los libros de contenido matemático, así como otro tipo de herramientas que puedan mejorar la experiencia de lectura. En la ultima versión del núcleo del libro (9 de febrero de 2021) la única opción con la que se dispone, es un selector para cambiar el tema de colores del libro entre un tema de colores claro y uno oscuro.
El libro cuenta con colores predeterminados para su presentación y si no se agregan reglas adicionales de estilo CSS, el cambio entre el tema claro y oscuro no requiere de ningún cambio adicional por parte del autor.
Por otra parte si se desea utilizar el cambio entre temas de colores, pero se agregaron estilos nuevos al contenido del texto o se cambian los colores predefinidos, es necesario agregar reglas CSS adicionales para el tema oscuro.
Por ejemplo, si se cambio el color de los elementos h1, con la siguiente regla:
h1 {
color: #eeaa11;
}
Entonces se necesita incluir una regla para el tema oscuro, de la siguiente manera:
body.dark h1 {
color: #1144ff;
}
Como podemos observar el selector de estilo CSS para el tema oscuro debe comenzar por body.dark para que así el libro sepa que esta regla es la que debe utilizar cuando utilice el tema oscuro.
En caso de no querer utilizar esta funcionalidad, dentro del código de nuestro libro debemos ubicar y eliminar las líneas que dicen lo siguiente:
Al eliminar estas lineas el botón de herramientas y configuración no se muestra, por lo tanto no se puede cambiar el tema de colores en que se presenta el libro.
Mejoras en la tabla de contenido
En las primeras versiones para agregar una entrada en la tabla de contenido se utilizaba código de la siguiente manera:
Aquí la clase toc_link le indica al libro que el elemento forma parte de la tabla de contenido y se le aplica un estilo predeterminado. El código onclick="goToPage(3)" es la forma en la que se indica a qué página del libro se debe ir al presionar sobre el elemento, en este caso nos lleva a la página 3 (los números que recibe la función goToPage corresponden al número de página que se muestra en el libro).
Este método para especificar los elementos de la tabla tiene el inconveniente de que si se agregan páginas intermedias nuevas, la numeración de las páginas se modifica y entonces se vuelve necesario cambiar los números en las referencias afectadas por el cambio de numeración.
A causa del comportamiento antes mencionado, en las ultimas versiones del núcleo del libro se incorporo funcionalidad para autonumerar las entradas de la tabla de contenido. Para esto, debemos agregar un identificador a los elementos que señalan una sección, por ejemplo los elementos de tipo h2:
<h2 id="presentación">Presentación del libro</h2>
y las entradas de la tabla de contenido se agregan de la siguiente manera:
<div class="toc_link" href="#presentación"></div>
De esta manera se agrega una entrada en la tabla de contenido, sin la necesidad de indicar la página en donde se encuentra, ya que el código del libro busca automáticamente la pagina en donde se encuentra el elemento con el identificador indicado.
Además de simplificar la manera de agregar elementos a la tabla de contenido, en las ultimas versiones se puede optar por dos comportamientos al momento de presionar el botón de la tabla de contenido . El comportamiento inicial causa que al presionar el botón vayamos directamente a la página del libro donde se encuentra la tabla de contenido.
El segundo comportamiento que puede tener el botón, es que al ser presionado muestre una pantalla con todas las entradas de la tabla de contenido, desde donde se puede navegar hacia las diferentes secciones que componen el texto, y además si se decide no cambiar de sección se puede presionar el botón de cerrar y continuar en la misma página visible antes de presionar el botón de la tabla de contenido.
Para utilizar este comportamiento se debe contar con una etiqueta <div> con la clase table_of_content como elemento hijo de la etiqueta <div id="book_container">, de la siguiente manera:
<div id="table_of_content"></div>
Y en caso de que la estructura del libro no cuente con el elemento <div id="table_of_content"></div> entonces tenemos el primer comportamiento.
¿Dónde podemos descargar las nuevas versiones?
El código correspondiente al núcleoEl código JavaScript y estilo CSS que utiliza el libro para dar el comportamiento y la presentación al documento, por ejemplo, la presentación páginada del contenido, y la autonumeración de los diversos elementos. del libro es la información contenida dentro del directorio book/ de la estructura de archivos de nuestro documento. La recomendación general es no modificar los archivos contenidos en este directorio, ya que son los archivos que se actualizan con cada nueva versión del núcleo del libro; y solo debería modificarse si se va a actualizar a una nueva versión.
El código del núcleo del libro interactivo se encuentra alojado en el repositorio de código GitHub (https://github.com/jlongi/libro_interactivo) desde donde se puede descargar y acceder a ejemplos básicos de funcionamiento.
Para descargar el código debemos presionar sobre el botón con el texto Code y luego ubicar la opción Download ZIP, con esto obtenemos un archivo zip que contiene tres directorios: css, js y ejemplos, donde los archivos importantes que debemos copiar son los correspondientes a css y js los cuales serán colocados dentro del directorio book/ de nuestro libro.
Créditos de imágenes
Varias imágenes son propias de los autores, para otras imágenes descargadas de terceros, especialmente en fondos, presentamos los créditos a continuación:
La etiqueta 
que aparece en la esquina superior derecha el cual tiene el propósito de mostrar algunas herramientas para mejorar la experiencia del libro, así como configuraciones adicionales. Esta funcionalidad se encuentra aún en desarrollo, por lo que actualmente no se muestran herramientas, pero en futuros desarrollos se incluirá una calculadora, para ayudar en los libros de contenido matemático, así como otro tipo de herramientas que puedan mejorar la experiencia de lectura. En la ultima versión del núcleo del libro (9 de febrero de 2021) la única opción con la que se dispone, es un selector para cambiar el tema de colores del libro entre un tema de colores claro y uno oscuro.
. El comportamiento inicial causa que al presionar el botón vayamos directamente a la página del libro donde se encuentra la tabla de contenido.
