Nombre de la obra y autores

Título de la obra:
TÍTULO

Autores:
AUTORES

Código JavaScript para el libro: Joel Espinosa Longi, IMATE, UNAM.
Recursos interactivos: DescartesJS
Fuentes: Lato y UbuntuMono

DATOS DE LA EDICIÓN

LICENCIA

Tabla de contenido

Prefacio

Este es un pequeño ejemplo que presenta la funcionalidad básica que el libro interactivo ofrece. El libro puede personalizarse al gusto del autor, así como agregar otros componentes para potenciar la presentación. Es aconsejable no modificar directamente los archivos dentro del directorio book ya estos son los encargados del funcionamiento del libro.

Un zip con el código fuente de este ejemplo puede ser descargado desde aquí. El código correspondiente al núcleo del libro, se encuentra alojado en el siguiente repositorio de Github: https://github.com/jlongi/libro_interactivo, cualquier corrección, sugerencia o cambio favor de reportarlo en el repositorio para su consideración.

Para más información sobre el funcionamiento de este libro interactivo, lo mejor es revisar el contenido del archivo index.html el cual contiene comentarios sobre diversas partes del libro. Como el funcionamiento de la tabla de contenido.

Notas generales y al pie de página

Para agregar una nota general dentro del texto se utiliza el siguiente código html:

Lo que muestra el siguiente texto:

Para agregar un nota al pie de página es necesario utilizar lo siguiente:

Lo que muestra el siguiente párrafo:

La herramienta para hacer los recursos interactivos se llama DescartesJShttp://descartes.matem.unam.mx.

Lo que se encuentra entre las etiquetas:

Las notas al pie de página se auto numeran.

Interactivos

Para agregar un interactivo se hace de la siguiente manera:

Los valores de los parámetros width y height deben coincidir con el ancho y alto de la escena, para que se muestre con las proporciones correctas. El valor del parámetro src es la dirección del interactivo, puede ser absoluta o relativa a la ubicación del archivo index.html

Al presionar el botón (que se muestra en la esquina superior derecha del interactivo) el interactivo se abre en una nueva ventana con las dimensiones especificadas por los valores de los parámetros width y height.

Si se quiere que el interactivo se muestre en una nueva ventana con las dimensiones de la ventana que muestra el libro, se utiliza el parámetro window-size="true".

Por omisión los interactivos se muestran con un ancho igual al 100% del ancho de la página, si se desea que ocupen una área más pequeña, con el parámetro scale se puede reducir el tamaño a un porcentaje del ancho de la página. Por ejemplo, el siguiente interactivo se muestra con un ancho del 50% del tamaño de la página:

En general se puede agregar cualquier tipo de recurso interactivo que funcione con HTML. Por ejemplo, aquí se agrega el editor de GeoGebra.

Solo hay que considerar que los recursos interactivos deben poder ajustar su tamaño para que se muestren correctamente en el área reducida del libro.

Vídeos

Para agregar un video local, se utiliza lo siguiente:

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.

También es posible agregar videos desde YouTube, pero en este caso, se utiliza el mismo mecanismo para agregar un interactivo. Ejemplo:

Para agregar un video desde YouTube, es necesaria la dirección del video que incluye embed en el código. Como regla general las direcciones de YouTube tienen la siguiente forma https://www.youtube.com/watch?v=podf-jQjxaM, solamente hay que sustituir watch?v= por embed/ en la dirección.

Imágenes

Si se quiere agregar una imagen que tenga el comportamiento de que que al darle clic se muestre en una nueva ventana, se utiliza lo siguiente:

Con el valor del parámetro width se define el ancho de la imagen como un porcentaje del ancho de la página.

El código class="image_expand" onclick="openImage(this)" es lo que permite que la imagen se muestre en una nueva ventana, entonces, para tener una imagen que no se muestre en una ventana nueva al dar clic sobre ella, solo hay que omitir el código class="image_expand" onclick="openImage(this)", por ejemplo:

Si queremos una imagen que al hacer clic sobre ella, muestre en una ventana emergente algún vínculo, por ejemplo, un recurso interactivo, debemos utilizar:

El código openInteractive('url', 'ancho', 'alto), es el que se encarga de abrir el vínculo en una nueva ventana emergente, de tal manera que url corresponde a la dirección del recurso a mostrar, ancho y alto determinan el tamaño de la ventana emergente.

Si se quiere agregar una imagen como una figura, es decir con texto descriptivo debajo, hay que utilizar lo siguiente:

Para agregar una referencia a una figura, es necesario tener un identificador en la figura y utilizar lo siguiente:

Por ejemplo el siguiente código:

Muestra lo siguiente:

Observa la .

Para agregar una referencia a figura cuyo contenido es diferente a una imagen por ejemplo una tabla (un interactivo o un video), es necesario tener un identificador en la figura que contiene la tabla y agregar el atributo prefix="Tabla" (o el nombre que queremos que aparezca en la etiqueta) al elemento <figcaption>. Por ejemplo:

Muestra lo siguiente:

Observa la .

Definiciones, teoremas y lemas

Para agregar una definición, teorema o lema, hay que utilizar el siguiente código:

Por ejemplo para agregar una definición se escribiría lo siguiente:

Lo que muestra este texto:

Por ejemplo para agregar un teorema se escribiría lo siguiente:

Lo que muestra este texto:

Por ejemplo para agregar un lema se escribiría lo siguiente:

Lo que muestra este texto:

Para agregar una referencia a una definición, teorema o lema, se utiliza el mismo mecanismo para referenciar figuras, por lo que es necesario contar con un identificador en elemento que se quiere referenciar.

Por ejemplo el siguiente código:

Muestra el siguiente texto:

Como podemos observar en el todo es increíble.

El parámetro prefix en referencias bibliográficas y en bloques autonumerados, corresponde siempre a la etiqueta que se muestra de forma automática y además permite tener contadores para identificar y contar elementos de un mismo tipo, por ejemplo: figuras, tablas, videos, interactivos, lemas, teoremas, etc.

Referencia a páginas

Para incluir un vínculo o referencia a una página dentro del libro, podemos utilizar el elemento <pageref> y su atributo ref_id para especificar el identificador de algún elemento dentro de la página que queremos referenciar.

Por ejemplo para incluir una referencia al Prefacio, podemos realizar lo siguiente:

Lo que muestra lo siguiente: .

Si queremos agregar un texto adicional al número de página, se puede asignar un valor al parámetro prefix del elemento <pageref>, por ejemplo:

Con lo que obtenemos lo siguiente: .

Por último si queremos que el número de página no aparezca en la referencia y en lugar de eso se desea mostrar un texto específico, solamente hay que colocar el texto que deseamos mostrar como contenido del elemento <pageref>, por ejemplo:

Que muestra el siguiente texto: como se puede ver en Prefacio.

Referencia bibliográfica

Para agregar bibliografía, por lo general en un capítulo al final del libro, se deben agregar entradas bibliográficas de la siguiente manera:

<bibitem> es el elemento que permite identificar una entrada bibliográfica. El parámetro id es el que permite identificar el elemento de la bibliografía y se utiliza para realizar referencias dentro del texto del documento.

Para agregar una referencia a un elemento de la bibliografía se utiliza <bibref> con el atributo <ref_id> igual al valor del identificador del elemento a referenciar (id):

Por ejemplo el siguiente código:

Muestra el siguiente texto:

Para aprender más sobre Descartes se pueden consultar los libros: Descartes JS - Nivel - I () y Descartes JS - Nivel - II ().

Es posible dar clic en las referencias a la bibliografía y observar en la parte superior del libro la información correspondiente.

Código

Para mostrar código dentro de una línea de texto, se utiliza lo siguiente:

Código en línea x=100.

Para mostrar código en un bloque, por ejemplo para describir un algoritmo, se utiliza:

x=4
y=10
r=x+y

Hay que considerar que la etiqueta <pre> respeta los espacios en blanco.