Nombre de la obra y autores

Título de la obra:
TÍTULO

Autores:
AUTORES

Diseño del libro: Juan Guillermo Rivera Berrío
Código JavaScript para el libro: Joel Espinosa Longi, IMATE, UNAM.
Recursos interactivos: DescartesJS
Fuentes: Lato y UbuntuMono
Fórmulas matemáticas: $\KaTeX$

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. Este libro presenta el uso de la biblioteca $\KaTeX$ para el uso de fórmulas matemáticas y mhchem.js para el desplegado de fórmulas químicas. 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 de práctica

Familias de letras (font-family)

Contenedores especiales

Caja sencilla

En esta caja se usan los siguientes estilos:
width: 85%; background-color: rgba(190,10,60,0.75); color:white; padding: 25px; font-size: 18px; margin-left: auto; margin-right: auto;
font-family:'sailregular';

Caja con sombra

En esta caja se usan los siguientes estilos:
width: 80%; color:white; background-color: rgba(50,200,250,0.55); box-shadow: 6px 6px 10px #008; padding: 20px; font-size: 24px; margin-left: auto; margin-right: auto;
font-family:'comic_neueregular';

Caja con sombra y radio de borde

En esta caja se usan los siguientes estilos:

width: 85%; background-color: rgba(50,150,30,1); color:white; box-shadow: 6px 6px 8px #000; border-radius: 20px; padding: 20px; font-size: 22px; margin-left: auto; margin-right: auto;
font-family:'bubbler_oneregular';

Caja con imagen de fondo

En esta caja se usan los mismos estilos anteriores, cambiando el fondo por una imagen y el tipo de letra, así:
background-image:url('../imagenes/atari.jpg'); background-size: 480px 290px;
font-family: 'coming_soonregular';

Caja con sombra en texto

En esta caja se usan los mismos estilos anteriores, incluyendo sombra en el texto así:

text-shadow: 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #000, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1;

Caja rotada

La misma caja anterior, pero rotada con el estilo transform: rotate(20deg);

Fuentes Google