Kotobee

Cuando se trata de ideas interactivas para su eBook, el cielo es el límite. Usted puede llegar a una idea de la interacción que nadie ha pensado. Los componentes interactivos proporcionados por Kotobee Author son el conjunto estándar de herramientas  requeridas la mayor parte del tiempo. Puede suceder que necesite un cierto tipo de interactividad que no caiga bajo las existentes, ni le gustaría mostrar en una ventana, como lo hacen los widgets. Esto es cuando tendrá que tomar las cosas bajo sus propias manos, y desarrollar la interacción personalizada a su mismo. Kotobee Author le proporciona algunas herramientas para personalizar su interactividad, y el contenido del eBook en general.

Editar la fuente 

Al hacer clic en el botón de Modo fuente en la parte inferior derecha de la pantalla, se le da la fuente HTML completa de su capítulo actual que puede editar libremente. Puede encontrar código HTML en la web para componentes interactivos que le gustaría usar. Simplemente puede pegarlo en el editor de origen. Un ejemplo de esto es Sketchfab, una biblioteca en línea de modelos 3D aportados. Proporcionan un código de inserción (básicamente un iframe), para mostrar e interactuar con cualquier modelo 3D desde su biblioteca en su página web.

Capítulo CSS y Global CSS

Al hacer clic en el botón Capítulo CSS o Global CSS en la parte inferior derecha de la pantalla, puede agregar sus propios estilos personalizados que se acceden por su capítulo. La diferencia entre cada uno es que el CSS global permitirá que estos estilos sean accesibles por otros capítulos también. Esta es una forma rápida de imponer un cierto formato en ciertos elementos, como encabezados o párrafos. En lo que respecta a la interacción, CSS3 soporta varias interacciones, transiciones y animaciones. Si se utiliza sabiamente, esto puede dar un resultado muy atractivo.

Capítulo JS y Global  JS

Al hacer clic en el botón Global JS en la parte inferior derecha de la pantalla, puede agregar su propio código Javascript accesible en el capítulo seleccionado actual o en todos los capítulos del libro. Ahí es cuando las puertas realmente abiertas. Aunque esto requiere una cierta experiencia de codificación de Javascript, puedes lograr cualquier tipo de interacción aquí. Junto con los eventos insertados a través del modo de fuente, puede hacer que cualquier elemento responda llamando a una función Javascript que haya definido. Como un escenario de cómo el Javascript puede ser útil, imagine un libro de cuentos para niños donde el niño puede introducir su nombre en un campo de texto en la primera página, y a lo largo de la historia encuentra su nombre usado en lugar del nombre del héroe. Una vez más, el cielo es el límite!

El editor de código para HTML, JS y CSS proporciona métodos abreviados de teclado, sugerencias de color y terminaciones de código para ayudarle con la codificación.

Para más flexibilidad en la creación de archivos HTML, JS y CSS, consulte el artículo: Usar el administrador de archivos.

Control del lector a través de una API

Una manera de ampliar la interactividad de su eBook es mediante el uso de la API javascript para enviar comandos básicos a Kotobee Reader. Esta función sólo está disponible cuando se exporta un eBook web. El proceso normal es cargar todos sus archivos eBook web a un directorio, y que ese directorio sea el destino para acceder al eBook. Para usar la API javascript, vas a cargar los archivos de eBook web a un directorio diferente (oculto), y consultar el eBook en su página web utilizando una etiqueta iframe. Ahora desde la misma página podrás enviar comandos al eBook. La lista de comandos posibles es la siguiente.

El comando se emitirá como un mensaje de iframe (es decir, postMessage). Para un ejemplo completo de emitir un comando para saltar al capítulo 4, vea lo siguiente:

<script>
        function action() {
            var book = document.getElementById("book");
            book.contentWindow.postMessage("goto:4", "*");
        }
</script>

<iframe id="book" width="100%" height="100%" src="ebook/index.html"></iframe>
<button  onclick="action()">Go to chapter 4</button>