Diseño de libros interactivos
Sesión 7

Tabla de contenido

Uso de tooltip

Un tooltip se usa a menudo para especificar información adicional sobre algo cuando el usuario mueve el puntero del ratón sobre un elemento; por ejemplo, pasa el ratón
sobre mi Haz pasado el ratón sobre mi

También puedes hacerlo sobre una imagen:

Haz pasado el ratón sobre la imagen





Los tooltips son una estupenda manera de mostrar información detallada al usuario al colocar el cursor sobre un texto o una imagen y ayuda a mejorar la experiencia del usuario en tu sitio web. Utilizando tooltips, puedes mostrar el título de una imagen, la descripción de un enlace y más información verdaderamente útil. Puedes crear fácilmente un tooltip con CSS sin tener que utilizar JavaScript o jQuery.

Usando $\KaTeX$ en nuestro libro

$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$

Una expresión un poco más compleja:

$$f'(x)=\lim\limits_{x \to 0}\int_0^x\frac{1}{x+2}dx \tag{$3$}$$ $$\begin{aligned} 3x-(5-2x) &= 8\\ 3x-5+2x &= 8\\ x&=\frac{11}5 \end{aligned}$$

Objeto interactivos

Herramientas de autor

Lim adaptado

Presenta algunos problemas de compatibilidad con la clase "interactive", por ello, se recomienda usar la etiqueta $\lt$iframe$\gt$, con un ancho máximo de 530 px; no obstante, sigue generando algunos conflictos. Al igual que las escenas de GeoGebra, el interactivo Lim tiene su propio botón de ampliación de escena. Cuando se usa este botón, con la tecla "esc" se regresa al libro.

Recomendamos usar, mejor, imágenes enlazadas al interactivo.

Objeto Ardora

Se tuvo que adaptar con DescartesJS para hacerlo escalable. No presenta conflictos con las páginas del libro.


Objeto Phet

Se adapta muy bien a la clase "interactive". Hemos usado el comando window-size="true", para que abra la escena en pantalla completa. Dado el nivel de detalle de las escenas Phet, su carga es un poco más lenta.

Objetos DescartesJS

Objetos GeoGebra

Contenedores

Vídeo interactivo

Escena Juan David