Título
Libro interactivo

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

Creative Commons Attribution License 4.0.

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.

Capítulo I

Elementos gráficos e interactivos

Notas generales y al pie de página

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

<div class="note"> Esta es una nota </div>

Lo que muestra el siguiente texto:

Esta es una nota

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

<p>La herramienta para hacer los recursos interactivos se llama DescartesJS<span class="footnote"> <a href="https://descartes.matem.unam.mx" target="_blank">https://descartes.matem.unam.mx</a> </span>.</p>

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:

<span class="footnote"> y </span> es el contenido de la nota al pie de página.

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

Interactivos

Para agregar un interactivo se hace de la siguiente manera:

<div class="interactive" width="819" height="588" src="https://proyectodescartes.org/canals/ materiales_didacticos/LO-JC-08-JS/index.html"></div>

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".

<div class="interactive" width="819" height="588" window-size="true" src="https://proyectodescartes.org/canals/ materiales_didacticos/LO-JC-08-JS/index.html"></div>

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:

<div class="interactive" width="819" height="588" scale="50%" src="https://proyectodescartes.org/canals/ materiales_didacticos/LO-JC-08-JS/index.html"></div>

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

<div class="interactive" width="819" height="588" src="https://www.geogebra.org/geometry"></div>

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:

<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.

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

<div class="interactive" width="560" height="315" src="https://www.youtube.com/embed/podf-jQjxaM"></div>

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:

<img class="image_expand" onclick="openImage(this)" src="https://proyectodescartes.org/descartescms/images/ logodescartes.gif" width="80%">

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:

<img src="https://proyectodescartes.org/descartescms/ images/logodescartes.gif" width="40%">

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:

<img class="image_link" onclick="openInteractive('https://proyectodescartes.org/ Telesecundaria/materiales_didacticos/3m_b01_t01_s01-JS/ index.html', '790', '530')" src="https://proyectodescartes.org/Telesecundaria/ imagenes_descripcion_materiales/3m_b01_t01_s01.png" width="75%">

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:

<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>
Banner del proyecto descartes.

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

<ref ref_id="IDENTIFICADOR_DE_LA_FIGURA"></ref>

Por ejemplo el siguiente código:

<p>Observa la <ref ref_id="mi_figura"> </ref>.</p> <figure id="mi_figura"> <img src="https://proyectodescartes.org/descartescms/ images/logodescartes.gif" width="50%"> <figcaption>El título de la figura.</figcaption> </figure>

Muestra lo siguiente:

Observa la .

El título de la figura.

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:

<p>Observa la <ref ref_id="mi_tabla"> </ref>.</p> <figure id="mi_tabla"> <table> <tr><td>Título 1</td><td>Título 2</td></tr> <tr><td>Valor 1</td><td>Valor2</td></tr> </table> <figcaption prefix="Tabla">El título de la tabla. </figcaption></figure>

Muestra lo siguiente:

Observa la .

Título 1Título 2
Valor 1Valor2
El título de la tabla.

Definiciones, teoremas y lemas

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

<div class="num_block" prefix="PREFIJO_PARA_LA_AUTO_NUMERACIÓN"></div>

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

<div class="num_block" prefix="Definición">Este es el texto de una definición.</div>

Lo que muestra este texto:

Este es el texto de una definición.

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

<div class="num_block" prefix="Teorema">Este es el texto de un teorema.</div>

Lo que muestra este texto:

Este es el texto de un teorema.

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

<div class="num_block" prefix="Lema">Este es el texto de un lema.</div>

Lo que muestra este texto:

Este es el texto de un lema.

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.

<ref ref_id="ID_DE_LA_DEFINICIÓN_TEOREMA_O_LEMA"></ref>

Por ejemplo el siguiente código:

<div class="num_block" prefix="Lema" id="lema_supremo"> El lema supremo dice ...</div> <p>Como podemos observar en el <ref ref_id="lema_supremo"> </ref> todo es increíble.</p>

Muestra el siguiente texto:

El lema supremo dice ...

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.

Código

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

<code>x=100</code>

Código en 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.

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 id="RER119"> Juan Guillermo Rivera Berrío, Joel Espinosa Longi y Alejandro Radillo Díaz. <b>Descartes JS - Nivel - I </b>. Fondo Editorial Pascual Bravo. 2ª edición. 2019. </bibitem> <bibitem id="RER219"> Juan Guillermo Rivera Berrío, Joel Espinosa Longi y Alejandro Radillo Díaz. <b>Descartes JS - Nivel - II </b>. Fondo Editorial Pascual Bravo. 2ª edición. 2019. </bibitem>

<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):

<bibref ref_id="IDENTIFICADOR_DE_BIBLIOGRAFÍA"></bibref>

Por ejemplo el siguiente código:

Para aprender más sobre Descartes se pueden consultar los libros: Descartes JS - Nivel - I (<bibref ref_id="RER119"></bibref>) y Descartes JS - Nivel - II (<bibref ref_id="RER219"></bibref>).

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.

Bibliografía de muestra

Juan Guillermo Rivera Berrío, Joel Espinosa Longi y Alejandro Radillo Díaz. Descartes JS - Nivel - I. Fondo Editorial Pascual Bravo. 2ª edición. 2019. Juan Guillermo Rivera Berrío, Joel Espinosa Longi y Alejandro Radillo Díaz. Descartes JS - Nivel - II. Fondo Editorial Pascual Bravo. 2ª edición. 2019.