Elementos interactivos para navegar por

un libro electrónico.

Estilos CSS en documentos EPUB. Parte I: Introducción El estándar para libros electrónicos EPUB de maquetación fluida tradicional se caracteriza porque el contenido del libro se reorganiza y adapta a cualquier tamaño de pantalla y se basa en otros estándares anteriores como el HTML de páginas web y el CSS utilizado para modificar el aspecto de los elementos de las páginas web. La adopción de los estándares HTML y CSS es una muy buena noticia para los diseñadores web que deseen incursionar en el desarrollo EPUB porque ya conocen las ventajas que ofrece el trabajo con estilos CSS en el diseño web. Si usted tiene alguna experiencia en la edición del código de páginas web y archivos de hojas de estilo, el trabajo será más sencillo. En caso contrario no se preocupe porque estos ejemplos serán un buen punto de partida. En octubre de 2008, con el lanzamiento de la Creative Suite 4, Adobe incluyó en InDesign CS4 el proceso para generar documentos en formato EPUB que incluyen estilos CSS. La tecnología CSS es compatible con todos los navegadores web y las aplicaciones para la lectura de documentos EPUB y está en constante evolución. El soporte CSS es diferente entre tabletas y e-readers y puede variar entre un dispositivo lector y otro. Un documento en formato EPUB es un archivo comprimido en un paquete que contiene documentos con extensiones HTML, XML, OPF, OTF, NCX, CSS, JPG, PNG, etc. La estructura de archivos y carpetas de un EPUB sencillo podría ser la siguiente:

mimetype

META-INF/

o container.xml

OEBPS/

o content.opf

o title.html

o content.html

o style.css

o toc.ncx

o IMAGES/

cover.jpg

Esta estructura contiene, en el nivel raíz, el documento mimetype y las carpetas META-INF yOEBPS y se empaqueta en un archivo de formato ZIP. Todos los archivos de esta estructura incluyen el contenido del documento EPUB, que puede ser, por ejemplo, un libro digital: el texto, la imagen de tapa y las imágenes incluidas en el interior del libro, los archivos de fuentes tipográficas, la tabla de contenido, los metadatos, e incluye además un archivo de hoja de estilos CSS, que no es una parte legible del contenido, pero es

muy importante porque incluye los estilos CSS que sirven para definir el aspecto del contenido del libro digital.

1. El archivo de hoja de estilos CSS En un e-book en formato EPUB el archivo de hoja de estilos es un documento con extensión CSS almacenado en la carpeta OEBPS (Open E-book Publication Structure) donde se guarda todo el contenido del libro. De la misma forma que en un sitio web, en un EPUB el contenido legible se guarda en archivos HTML y el formato de estos se controla con un archivo de hoja de estilos CSS. La siguiente figura muestra una línea de código en un archivo de hoja de estilos CSS editado con Dreamweaver:

El nombre y la ubicación del archivo de hoja de estilos es: \OEBPS\Styles\style.css El código: p { text-align:justify; margin:0; text-indent:1.5em; line-height:1.3em; }, es una regla CSS.

2. Reglas CSS

Un archivo de hoja de estilos CSS u hoja de estilos está compuesta normalmente por varias reglas CSS que sirven para controlar el aspecto del contenido de una o más páginas web. Un estilo CSS se forma a partir de un conjunto de reglas CSS que residen normalmente en un lugar independiente del objeto al que aplica formato, por ejemplo en la sección head de un documento HTML o en una hoja de estilos externa. Una regla CSS tiene 2 partes: el selector y la declaración y a su vez la declaración está compuesta por uno o más pares propiedad:valor.

La creación de una regla CSS lleva 2 pasos:

Definir el selector, o sea determinar a qué parte de la página se va a aplicar la regla, por ejemplo el nombre del selector p establece que la regla aplicará a todos los elementos <p>.

Definir los pares propiedad:valor que se aplicarán al selector, por ejemplo text-align:justify, margin:0, text-indent:1.5em, line-height:1.3em.

2.1. El selector Indica el elemento o elementos HTML a los que se aplicará la regla CSS, en este caso es la etiqueta p, que identifica a los párrafos. En HTML un párrafo es una porción de texto y para definir un párrafo en un documento HTML se debe utilizar la etiqueta p. La marca de inicio de párrafo es <p> y se debe colocar al comienzo del párrafo, mientras que la marca de fin de párrafo es </p> y se debe colocar después del punto final. Entre ambas marcas se encuentra el texto y también pueden insertarse otros elementos HTML:<p>Para definir un párrafo en un documento HTML se debe usar la etiqueta p.</p> Una regla CSS puede aplicarse a muchas etiquetas a la vez y en el caso de las hojas de estilo externas, la regla CSS se puede aplicar a muchas etiquetas de diferentes páginas a la vez. De este modo, los estilos CSS proporcionan un método muy sencillo de actualización de formato porque al cambiar una regla CSS, el formato de todos los elementos que usen ese estilo se actualizará automáticamente con el nuevo estilo. Tipos de selectores:

Etiqueta: es un selector que permite crear una regla CSS para establecer el aspecto de una etiqueta HTML concreta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada. Se identifica por la etiqueta, por ejemplo p.

Clase: es un selector que permite crear una regla CSS que se pueda aplicar a cualquier elemento de la página. Una vez creada la clase, esta se puede aplicar tantas veces como se quiera y a los objetos que uno quiera. Se identifica con un punto, por ejemplo .imagen.

ID o Identificador: es un selector que permite crear una regla CSS para ser aplicada a una etiqueta identificada con un nombre y así personalizar el aspecto de un único elemento concreto de la página, identificado con ese nombre. Al elemento que se desea formatear se le debe dar un nombre previamente, insertando una etiqueta Div. Se identifica con el símbolo numeral, por ejemplo #destacado.

Compuesto: es un selector que permite crear una regla CSS para ser aplicada a combinaciones de los tipos anteriores o a varios selectores agrupados.

2.2. La declaración Está compuesta por uno o más pares propiedad:valor y especifica las características de formato que se aplicarán al selector, por ejemplo { text-align:justify; margin:0; text-indent:1.5em; line-height:1.3em } Los pares propiedad:valor se deben escribir entre llaves y separados por el carácter de punto y coma. Cada par propiedad:valor permite establecer el aspecto de una característica por medio de un valor determinado. En nuestro ejemplo, la declaración { text-align:justify; margin:0; text-indent:1.5em; line-height:1.3em } está compuesta por 4 pares propiedad:valor:

La propiedad text-align controla la alineación horizontal del texto y el valor justifyindica que el texto se debe mostrar de forma justificada, es decir igualando la longitud de todas las líneas de texto.

La propiedad margin controla el tamaño de los márgenes y el valor 0 indica que todos los márgenes deben tener un valor nulo.

La propiedad text-indent controla el tamaño de la tabulación o sangrado de primera línea y el valor 1.5em indica que la sangría de la primera línea de texto debe ser de 1,5 emes, es decir 1,5 veces el ancho de la letra "M" mayúscula del tipo y tamaño de letra del elemento. Si se utilizan unidades em, el valor que se toma como referencia es el tamaño de la fuente.

La propiedad line-height controla el tamaño de la altura de cada línea de texto y el valor 1.3em indica que el interlineado debe ser de 1,3 emes, es decir 1,3 veces el tamaño de la fuente. Si se utilizan unidades em o porcentajes, el valor que se toma como referencia es el tamaño de la fuente y los valores 1.3em y 130% producen idéntico resultado.

Un archivo de hoja de estilos CSS puede contener un número ilimitado de reglas CSS, cada regla puede contener varios selectores y cada declaración puede estar formada por un número ilimitado de pares propiedad:valor. La versión 2.1 del estándar CSS define 115 propiedades, cada una de las cuales tiene su propia lista de valores permitidos.

Ejemplo A: Controlar el interlineado del texto La propiedad line-height establece el interlineado del texto.

El valor por defecto es normal y establece un valor recomendado entre 1.0 y 1.2. Si el valor es un número, la altura de la línea se calculará multiplicando el tamaño de la fuente por ese número. Los valores permitidos pueden ser en unidades absolutas o relativas y no se permiten valores negativos de interlineado. Si el valor es un porcentaje, la altura de la línea se calculará con respecto al tamaño de fuente del elemento. Por ejemplo p { line-height: 130% } establece un párrafo de texto igual a 1.3 multiplicado por el tamaño de la fuente.

Ejemplo B: Controlar el tamaño de los márgenes La propiedad margin establece la anchura de los márgenes de un elemento. El valor por defecto es cero, los valores permitidos pueden ser tanto positivos como negativos y en unidades absolutas o relativas. Los valores se escriben separados por un espacio, por ejemplo: {margin: 10px 0 20px 10px;} Si se establecen los cuatro valores, estos definirán los márgenes superior, derecho, inferior e izquierdo en ese orden. Si sólo se establece un valor, este se aplicará a los cuatro lados. Si se establecen dos valores, el primero se aplicará a los márgenes superior e inferior y el segundo a los márgenes izquierdo y derecho. Si se establecen tres valores, el primero se aplicará al margen superior, el segundo a los márgenes izquierdo y derecho y el tercero al margen inferior.

3. El vínculo entre un archivo de hoja de estilos y un documento HTML Como vimos, en un e-book en formato EPUB los estilos se aplican utilizando un archivo de hoja de estilos independiente y, además, este archivo CSS está vinculado a uno o varios documentos HTML. La siguiente figura muestra el código de un archivo HTML editado con Dreamweaver que está vinculado a una hoja de estilos externa:

El nombre y la ubicación del archivo HTML es: \OEBPS\Text\capitulo1.html En la vista Código de Dreamweaver, observe la cabecera del documento HTML, definida por las etiquetas <head> y </head>. Las líneas de código 5 a 8 contienen la "cabecera" o sección "head" del documento HTML, entre las etiquetas <head> y </head>. En la cabecera, suelen utilizarse otras etiquetas, por ejemplo <title>, <link>, <style>, <script> y <meta>. La línea 7 de código contiene una etiqueta <link> que define el vínculo entre el documento HTML y el archivo de hoja de estilos style.css, mediante el atributo href="../Styles/style.css" De la misma forma, se pueden vincular todos los documentos HTML que se quiera al archivo de hoja de estilos style.css. La ventaja de utilizar un archivo de hoja de estilos independiente es que si modificamos la hoja de estilos, el formato de todos los documentos HTML que usen esa hoja de estilos se actualizará automáticamente. Este método de trabajo define una separación entre el contenido y el formato y brinda una mayor flexibilidad y control en la tarea de diseño.

4. Los estilos de InDesign y la hoja de estilos CSS Si se exporta un documento InDesign en formato HTML, se creará un documento HTML y además un archivo de hoja de estilos CSS para controlar su formato. Si se exporta en formato EPUB se crearán dentro del paquete de archivos los documentos HTML necesarios y también un archivo de hoja de estilos CSS para controlar su formato. En ambos casos, el archivo CSS estará vinculado a los documentos HTML a los que debe aplicar formato. InDesign utilizará los formatos que se apliquen con los controles de formato de carácter o de párrafo para crear reglas CSS. Si se crean y aplican estilos de párrafo y estilos de carácter en el documento InDesign, las propiedades de formato de esos estilos también se traducirán en reglas CSS en el archivo de hoja de estilos. La siguiente imagen muestra la definición del estilo parrafo normal, aplicado a todo el texto de un documento InDesign:

En la categoría Formatos de caracteres básicos del estilo de párrafo, se han definido las siguientes propiedades de formato:

Familia de fuentes: Times New Roman

Estilo de fuente: Regular

Tamaño: 12 pt

Interlineado: 16 pt

Las propiedades de formato definidas en el estilo de párrafo, se traducen en la hoja de estilos CSS para el documento EPUB exportado, en la siguiente regla CSS:

En esta regla CSS, se han combinado el selector de etiqueta p y el selector de clase .parrafo-normal creando un selector más específico: p.parrafo-normal El selector p.parrafo-normal se debe interpretar como "aquellos párrafos que contengan un atributo <class> cuyo valor es "parrafo-normal". Las propiedades de formato que se han definido en el estilo de párrafo se aplicarán a lospárrafos identificados con la clase .parrafo-normal y sólo a ellos. En la declaración, los pares propiedad:valor están ordenados en una lista, donde cada par ocupa una línea de código. Observemos la correlación entre las propiedades de formato definidas en el estilo de párrafo y los pares propiedad:valor en el archivo de hoja de estilos CSS:

Familia de fuentes: Times New Roman >> font-family:"Times New Roman", serif;

Estilo de fuente: Regular >> font-style:normal;

Tamaño: 12 pt >> font-size:1em;

Interlineado: 16 pt >> line-height:1.333;

El tamaño de fuente definido en el estilo de párrafo en unidades absolutas (12 pt), se ha convertido a unidades relativas (1em) en la hoja de estilos y el valor del interlineado será igual al 1.333 el tamaño de la fuente. En la siguiente figura podemos ver dos párrafos del documento HTML con el contenido del

documento, editado con Dreamweaver en la vista Código:

Ambos párrafos están definidos por las etiquetas de apertura y cierre <p> y </p>. Las etiquetas de apertura <p> contienen el atributo class="parrafo-normal"> Si más adelante se desea cambiar el formato del EPUB, hay 2 opciones para modificar la hoja de estilos CSS:

Editar los estilos de párrafo y de carácter en el documento InDesign y luego volver a exportar en formato EPUB.

Editar el archivo de hoja de estilos utilizando Dreamweaver, realizar los cambios en el CSS y empaquetar los archivos que integran la estructura del EPUB.

Con la segunda opción contará con muchas herramientas para cambiar el aspecto del EPUB, aunque será necesario tener conocimientos y mucha práctica con estilos CSS. En las próximas entradas veremos ejemplos concretos para mejorar el formato de nuestros libros en formato EPUB, tanto utilizando los estilos de InDesign como editando la hoja de estilos y escribiendo las reglas CSS.

Agregar contenido multimedia: archivos de sonido, video y galerías de imágenes En un documento InDesign es posible colocar clips multimedia FLV, F4V, SWF, MP3 y MP4, que son compatibles con los formatos PDF interactivo y SWF. Los archivos MOV, AVI y MPEG no son compatibles con el formato SWF. Cree un nuevo documento InDesign, elija el menú Archivo > Colocar, o presione Ctrl+D. En el cuadro Colocar seleccione el archivo de sonido o de película y haga clic en el botónAbrir. Se creará un marco contenedor para el archivo multimedia en la página del documento InDesign.

1. Archivos de sonido Coloque un clip de sonido MP3 en el documento InDesign. Elija el menú Ventana > Interactivo y haga clic en la opción Multimedia para abrir el panelElemento multimedia, que sirve para cambiar la configuración del clip de sonido.

Seleccione el marco contenedor del clip de sonido y observe su configuración.

Haga clic en el botón Reproducir en el panel Elemento multimedia para reproducir el archivo multimedia.

Si desea que el clip de sonido se reproduzca al cargar la página, marque la casilla de opciónReproducir al cargar la página. La opción Detener al pasar la página detiene la reproducción del archivo de sonido al pasar a una página distinta. Si el archivo de audio no tiene formato MP3, esta opción aparece atenuada. Marque la casilla de opción Bucle para que la reproducción sea repetitiva.

Configurar el Póster El póster es una imagen representativa de un clip de película o de sonido. En el panel Elemento Multimedia elija una opción para el póster:

Ninguno. No muestra ningún póster para el clip multimedia

Estándar. Muestra un póster genérico que no está basado en el contenido del archivo. Para cambiar el póster estándar guarde una imagen comoStandardMoviePoster.jpg o StandardSoundPoster.jpg y sustituya el archivo existente del mismo nombre, que se encuentra en la carpeta Presets/Multimedia de la aplicación

Elegir imagen. Para seleccionar una imagen para usarla como póster. Haga doble clic en la imagen que desea usar. Puede seleccionar gráficos de mapas de bits y no gráficos vectoriales

Exportar el documento InDesign El clip de sonido añadido en el documento InDesign se puede reproducir una vez exportado el documento en formato SWF o PDF interactivo.

Elija el menú Archivo > Exportar, o presione Ctrl+E, para exportar el documento InDesign. Exporte en formato Flash Player (SWF). En Interactividad y multimedia no olvide activar el botón de opción Incluir todo. Abra el archivo exportado con Adobe Media Player o con un navegador web con Adobe Flash Player instalado. Se reproducirá el clip de sonido al cargar la diapositiva. Exporte el documento InDesign en formato PDF interactivo. En Formularios y medios no olvide activar el botón de opción Incluir todo. Abra el archivo exportado con Adobe Reader. Se reproducirá el clip de sonido al cargar la página. Para ejecutar contenido interactivo en el Adobe Reader deberá tener Adobe Flash Player instalado.

Haga clic con el botón derecho sobre el objeto multimedia, elija la opción Ver en ventana flotante y coloque la ventana del clip de sonido fuera de la página del documento PDF.

2. Archivos de video Coloque un clip de película MP4 en el documento InDesign. Elija el menú Ventana > Interactivo y haga clic en la opción Multimedia para abrir el panelElemento multimedia, que sirve para cambiar la configuración del clip de video. Seleccione el marco contenedor del clip de película y observe su configuración. Haga clic en el botón Reproducir en el panel Elemento multimedia para reproducir el clip de video.

Despliegue el menú Controlador y elija el controlador SkinOverAll, una máscara de controlador prediseñada que permitirá al usuario poner el clip en pausa, iniciar y detener la película, controlar el volumen, etc. Marque la casilla de opción Mostrar controlador al pasar sobre objeto. Haga clic en el botón Previsualizar pilego, en el ángulo inferior izquierdo del panel. Se abrirá el panel Vista previa de SWF y se reproducirá el clip. Durante la reproducción, acerque el cursor al marco contenedor del video. Aparecerá el controlador SkinOverAll, que permite hacer pausas, controlar el volumen, etc. Cierre el panel Vista previa de SWF y guarde los cambios en el documento InDesign.

Exportar el documento InDesign El clip de película añadido en el documento InDesign se puede reproducir una vez exportado el documento en formato SWF o PDF interactivo. Elija el menú Archivo > Exportar, o presione Ctrl+E, para exportar el documento InDesign.

Exporte en formato Flash Player (SWF). En Interactividad y multimedia no olvide activar el botón de opción Incluir todo. Abra el archivo exportado con Adobe Media Player o con un navegador web con Adobe Flash Player instalado. Se reproducirá el clip de video al cargar la diapositiva. Exporte el documento InDesign en formato PDF interactivo. En Formularios y medios no olvide activar el botón de opción Incluir todo. Abra el archivo exportado con Adobe Reader. Se reproducirá el clip de video al cargar la página. Para ejecutar contenido interactivo en el Adobe Reader deberá tener Adobe Flash Player instalado.

3. Galerías de imágenes El panel Estados de objeto de InDesign permite crear una proyección de diapositivas o galería de imágenes. El procedimiento consiste de los siguientes pasos:

Preparar los archivos de imagen (Photoshop)

Vamos a crear una galería de imágenes interactiva utilizando las siguientes imágenes:

Abra cada una de las imágenes con Photoshop, elija la herramienta Recortar y para cada imagen ajuste el tamaño del recorte en 1024 px de anchura, 768 px de altura y 150 píxeles/pulgada. Para cada imagen elija el menú Imagen > Modo > Color RGB y guarde en formato JPG con los nombres diapo1, diapo2, etc.

Colocar y alinear las imágenes (InDesign) En el segundo paso debemos colocar y alinear las imágenes en el documento InDesign. Elija el menú Archivo > Colocar, o presione Ctrl+D, seleccione todas las imágenes y haga clic en el botón Abrir. Las imágenes se cargarán en el cursor y estarán listas para ser colocadas en el documento InDesign. Haga clic en diferentes sitios de la página del documento hasta descargar todas las imágenes. Como ya hemos definido su tamaño con Photoshop, no será necesario modificarlo en InDesign.

Seleccione todos los marcos gráficos y utilice el panel Alinear (Mayús+F7) para alinear las imágenes horizontal y verticalmente.

Crear un objeto con varios estados El siguiente paso es crear un objeto con varios estados. Elija el menú Ventana > Interactivo > Estados de objeto para abrir el panel Estados de objeto. También puede elegir el Espacio de trabajo Publicación digital de InDesign:

Y luego abrir el panel Estados de objeto:

Seleccione las imágenes y haga clic en el botón Convertir selección en objeto de varios estados, en la parte inferior del panel. Escriba un nombre para el nuevo objeto multi-estado, por ejemplo Galeria Eiffel, y presione la tecla Enter. Se creará el objeto de varios estados. No escriba signos de puntuación ni caracteres especiales en los nombres de objeto ni de los estados de objeto.

El panel Folio Overlays Utilice el panel Folio Overlays de InDesign para cambiar la configuración de la proyección de diapositivas:

Seleccione el objeto de varios estados y especifique los ajustes en el panel:

Reproducción automática. La proyección de diapositivas comenzará a reproducirse cuando el usuario acceda a la página.

Tocar para reproducir/pausa. Esta opción permite al usuario tocar para reproducir y realizar una pausa en una proyección de diapositivas que se ejecute automáticamente. Al tocar dos veces se restablece la proyección.

Retraso. Si la opción Reproducción automática está seleccionada, puede especificar el tiempo que debe transcurrir entre la carga de la página y el inicio de la proyección de diapositivas. Especifique un valor entre 0 y 60 segundos, por ejemplo 1 s.

Intervalo. Si la opción Reproducción automática o Tocar para reproducir/pausa está seleccionada, el valor Intervalo determinará durante cuánto tiempo se mostrará cada diapositiva. Especifique un valor de 2 s.

Tiempo de reproducción. Si la opción Reproducción automática o Tocar para reproducir/pausa está seleccionada, puede especificar el número de veces que se reproducirá la proyección de diapositivas. Esta opción está atenuada si se ha seleccionado Bucle. Es una buena opción que el pase de diapositivas se reproduzca por sí mismo por lo menos una vez cuando se

carga la página, de esta forma el usuario podrá ver el efecto del paso de diapositivas sin tener que intervenir y además esto servirá para indicarle al usuario que el objeto es un elemento interactivo.

Bucle. Si la opción Reproducción automática o Tocar para reproducir/pausaestá seleccionada, elija Bucle para reproducir la proyección de diapositivas de forma continua, hasta que el usuario toque dos veces la proyección o pase la página.

Detener en la última imagen. Si la opción Reproducción automática o Tocar para reproducir/pausa está seleccionada, elija Detener en la última imagenpara detenerse en la última imagen de la proyección de diapositivas en lugar de en la primera.

Fundido cruzado. Esta opción crea una transición de fundido a la siguiente diapositiva. El valor predeterminado es de 0,5 segundos. Puede especificar un valor entre 0,125 y 60 segundos. Este valor se aplica tanto a las presentaciones de diapositivas que se reproducen automáticamente como a las que se pasan manualmente.

Barrido para cambiar imagen. Si desea permitir que el usuario realice un barridopara pasar de una diapositiva a otra, desactive todas las opciones del panelexcepto Barrido para cambiar de imagen.

Detener en la primera y última imagen. Con esta opción se determina si la proyección de diapositivas deja de reproducirse o continúa cuando se llega a la última diapositiva avanzando o cuando se llega a la primera diapositiva retrocediendo. Esta opción solo afecta al barrido.

Ocultar antes de reproducir. La proyección de diapositivas permanece oculta hasta que el usuario toque un botón para mostrar una diapositiva.

Reproducir en sentido inverso. La proyección de diapositivas reproduce las imágenes en orden inverso.

Formato de exportación en artículos PDF. Si la proyección de diapositivas aparecerá en un documento PDF, puede elegir la opción Rasterizado (de mapa de bits) o Vectorial. El formato vectorial es útil para crear una única publicación con texto más nítido para un dispositivo iOS HD, aunque tarda más en cargarse. Utilice la opción Vectorial en las proyecciones de diapositivas con mucho texto y la opciónRasterizado para las proyecciones basadas en imágenes o para crear representaciones distintas para los formatos SD y HD de los dispositivos iOS.

Elija el menú Archivo > Vista previa de la publicación para hacer una vista previa de la proyección de diapositivas. Se abrirá el Adobe Content Viewer o Desktop Viewer, una aplicación que permite obtener una vista previa de las publicaciones en pantalla. El botón Vista previa en el ángulo inferior izquierdo del panel Folio Overlays, también permite hacer una previsualización de la proyección de diapositivas en el Adobe Content Viewer.

Agregar botones interactivos Finalmente debemos crear botones interactivos que nos sirvan para navegar hacia los diferentes estados de nuestro objeto con varios estados. Para navegar por las diapositivas usaremos las acciones Ir al estado siguiente e Ir al estado anterior y para ir a una diapositiva específica usaremos la acción Ir a estado. El panel Botones y formularios de ejemplo de InDesign incluye una biblioteca con botones de navegación que puede seleccionar y arrastrar hacia la página del documento.

Si utiliza estos botones de ejemplo, elimine la acción predeterminada y reemplácela por la acción que corresponda. Si desea que la apariencia del botón cambie cuando se toca, haga clic en [Clic] en el área Apariencia y cambie su aspecto. El estado [Al pasar sobre él] no se admite en los dispositivos móviles.

Elija el menú Archivo > Vista previa de la publicación o haga clic en el botón Vista previaen el ángulo inferior izquierdo del panel, para hacer una vista previa de la proyección de diapositivas en el Adobe Content Viewer.

Exportar el documento InDesign La galería de imágenes añadida en el documento InDesign no se reproducirá en un PDF interactivo, pero sí una vez exportado el documento en formato SWF. Elija el menú Archivo > Exportar, o presione Ctrl+E, para exportar el documento InDesign. Exporte en formato Flash Player (SWF). En Interactividad y multimedia no olvide activar el botón de opción Incluir todo. Abra el archivo exportado con Adobe Media Player o con un navegador web con Adobe Flash Player instalado.

Elementos interactivos para navegar por un libro electrónico. Parte I: marcadores Además de orden visual y contenidos valiosos, el usuario de un libro espera sencillez para moverse a través de las diferentes partes que componen el libro y acceder a la información que le interesa. Para facilitarle al lector encontrar esa información, el libro impreso contiene una tabla de contenido, generalmente incluida en las primeras páginas y con una numeración independiente. La tabla de contenido o índice general del libro consiste en una lista de entradas con los nombres de los capítulos y títulos principales. Cada entrada de esta lista está acompañada de un número de página donde el lector deberá ir para encontrar lo que busca.

Otro elemento de un libro impreso que puede ayudar al lector a encontrar el contenido buscado

son los índices. Un índice alfabético, por ejemplo, contiene una lista de palabras o términos

acompañados de los números de página a lo largo del libro donde se hace referencia a esas

palabras.

InDesign cuenta con las herramientas para crear tablas de contenido e índices y también permite

añadir otros elementos interactivos que sirven para navegar por un libro electrónico, como

los marcadores, los hipervínculos y los botones. Cada uno de estos elementos interactivos tiene

sus propios usos particulares y antes de empezar a trabajar, usted deberá determinar cuál es el

elemento más adecuado a sus necesidades.

En esta entrada veremos uno de estos elementos interactivos: los marcadores.

Los marcadores se utilizan para añadir elementos de navegación que son visibles en el Panel

Marcadores de Adobe Reader.

Esto significa que al exportar un documento InDesign en formato PDF los marcadores que se

hayan creado en el documento InDesign se usarán para crear automáticamente una lista de

enlaces que permitirá la navegación del PDF en Adobe Reader.

El panel Marcadores de InDesign

Con el documento InDesign abierto elija el menú Ventana > Interactivo > Marcadores para abrir

el panel Marcadores.

Los marcadores que se hayan creado en un documento InDesign aparecerán en el panel

Marcadores. Si el panel Marcadores está vacío, significa que no se han definido marcadores en el

documento InDesign.

Una vez exportado el documento InDesign en formato PDF, para ver la lista de marcadores

enAdobe Reader haga clic en el icono Marcadores:

El panel Marcadores de Adobe Reader podrá mantenerse visible junto al área de lectura y también

expandirse o contraerse para acortar la longitud de la lista de enlaces:

La pregunta obvia es si al exportar el documento InDesign con marcadores en otros formatos de

publicaciones digitales, por ejemplo EPUB, HTML o SWF, también obtendremos una lista con

enlaces que nos permita navegar por el libro electrónico, tal como ocurre al exportar en

formatoPDF.

La respuesta es No. Los marcadores sirven para documentos en formato PDF y, con otros

formatos tendremos que usar otras herramientas, por ejemplo un estilo de tabla de contenido u

otros elementos interactivos, como veremos en otras entradas de este blog.

Insertar un marcador

Es muy sencillo crear marcadores en un documento InDesign. Se pueden crear marcadores de

texto y marcadores de página.

Con el documento InDesign abierto abra el panel Marcadores y haga lo siguiente:

Para crear un marcador de texto:

Elija la herramienta Texto y coloque el punto de inserción en un punto del artículo, o

Elija la herramienta Texto y seleccione texto, para crear un marcador de texto con el

nombre del texto seleccionado.

Para crear un marcador de página:

Elija la herramienta Selección y seleccione un marco de texto o un marco de gráfico, o

Elija la herramienta Selección y apunte una página de documento (1 clic) en el panel

Páginas (F12).

En el panel Marcadores haga clic en el icono Crear nuevo marcador, en la parte inferior del

panel, o bien seleccione la opción Nuevo marcador en el menú del panel.

El marcador se agregará a la lista en el panel Marcadores.

Si ya hay marcadores definidos en el documento, el nuevo marcador se agregará en el panel

debajo del marcador seleccionado.

Observe en el panel Marcadores de InDesign que el marcador Portada tiene un icono diferente del

resto de los marcadores.

El icono de página corresponde al marcador de página, mientras que los iconos de

anclacorresponden a los marcadores de texto. Aunque en el panel de InDesign los marcadores

de página y de texto tienen iconos diferentes, en Adobe Reader no hay ninguna diferencia entre

ambos tipos de marcadores.

Mover y anidar marcadores

Es posible mover marcadores hacia arriba o hacia abajo en la lista y también se puedenanidar

marcadores para que estén contenidos dentro de otros, el marcador superior se conoce

como padre y el marcador anidado se conoce como hijo.

Anidar marcadores permite crear una lista larga de marcadores que se puede expandir en el panel

Marcadores de Acrobat Reader.

La siguiente figura muestra una lista con marcadores de texto anidados:

El marcador I. PRIMERA PARTE (padre) contiene un marcador anidado La nueva realidad

internacional (hijo).

El marcador II. SEGUNDA PARTE (padre) también contiene un marcador anidado Las

habilidades de los especialistas (hijo).

El marcador Las habilidades de los especialistas (padre) contiene 6 marcadores anidados

(hijos).

Utilizando el panel Marcadores de InDesign se puede navegar por los distintos marcadores del

documento de InDesign. Seleccione un marcador en el panel Marcadores y en el menú del panel

elija la opción Ir a marcador seleccionado.

La opción Ordenar marcadores del menú del panel reordena los elementos de la lista de

marcadores en el orden en que aparecen en el documento.

En la siguiente figura vemos la lista de enlaces en el panel Marcadores de Adobe Reader:

Ver la ubicación de los marcadores en la ventana de documento de InDesign

Los caracteres ocultos de InDesign son símbolos de elementos que no se pueden ver pero son

importantes para el formato del texto, denotando párrafos, espacios, tabulaciones, sangrías, saltos

de página, marcadores, anclajes, saltos, notas, etc. Estos símbolos no se imprimen y pueden

ocultarse o mostrarse.

Para activar la visualización de los caracteres ocultos, elija el menú Texto > Mostrar caracteres

ocultos, o presione Ctrl+Alt+I.

En la ventana de documento podrán verse, entre otros caracteres ocultos, los iconos

correspondientes a los marcadores del documento InDesign, como muestra la siguiente figura:

Ver la ubicación de los marcadores en el editor de artículos de InDesign

Como vimos, los marcadores que se hayan creado en un documento InDesign aparecen en una

lista en el panel Marcadores y también podemos ver su ubicación en la página del documento

haciendo visibles los caracteres ocultos.

El editor de artículos es otra herramienta de InDesign que muestra los distintos elementos que

contiene un artículo y también permite ver los iconos que corresponden a los marcadores del

documento InDesign.

El editor de artículos sirve para editar el texto en una ventana separada de la ventana de

documento.

Para abrir el editor de artículos seleccione el marco de texto que contiene el texto que desea editar

o elija la herramienta Texto y coloque el punto de inserción dentro del texto.

Elija el menú Edición > Editar en editor de artículos, o presione Ctrl+Y.

En la ventana del editor de artículos el texto se visualiza sin formato, lo que facilita la introducción

de cambios en el texto.

En el editor de artículos pueden verse los iconos correspondientes a los marcadores del

documento InDesign, como muestra la siguiente figura:

En el lado derecho del editor de artículos puede introducir cambios en el texto, los cambios

aparecerán en la página del documento. En el lateral izquierdo aparecen los estilos de párrafo

asignados al texto.

No es necesario cerrar el editor de artículos para regresar al documento, puede hacer clic en la

ventana de documento para trabajar en ella y después regresar al editor de artículos.

Desde la ventana del editor de artículos también es posible crear nuevos marcadores y eliminar

marcadores ya existentes en el documento InDesign.

En esta entrada hemos visto cómo crear marcadores en un documento InDesign y obtener tras la

exportación un libro electrónico en formato PDF con una estructura de navegación completa. En la

siguiente entrada de este blog nos ocuparemos de otros elementos interactivos muy

utilizados, los hivervínculos.

Elementos interactivos para navegar por un libro electrónico. Parte II: hipervínculos Además de orden visual y contenidos valiosos, el usuario de un libro espera sencillez para moverse a través de las diferentes partes que componen el libro y acceder a la información que le interesa. Para facilitarle al lector encontrar esa información, el libro impreso contiene una tabla de contenido, generalmente incluida en las primeras páginas y con una numeración independiente. La tabla de contenido o índice general del libro consiste en una lista de entradas con los nombres de los capítulos y títulos principales. Cada entrada de esta lista está acompañada de un número de página donde el lector deberá ir para encontrar lo que busca. Otro elemento de un libro impreso que puede ayudar al lector a encontrar el contenido buscado son los índices. Un índice alfabético, por ejemplo, contiene una lista de palabras o términos acompañados de los números de página a lo largo del libro donde se hace referencia a esas palabras. InDesign cuenta con las herramientas para crear tablas de contenido e índices y también permite añadir otros elementos interactivos que sirven para navegar por un libro electrónico, como los marcadores, los hipervínculos y los botones. Cada uno de estos elementos interactivos tiene sus propios usos particulares y antes de empezar a trabajar, usted deberá determinar cuál es el elemento más adecuado a sus necesidades. En esta entrada veremos uno de estos elementos interactivos: los hipervínculos. Un hipervínculo, hiperenlace, enlace o link es un área de una página en la que es posible hacer clic para realizar una acción o para “navegar” hacia un destino, por ejemplo:

Enviar un mensaje de correo electrónico.

Abrir un documento.

Ir a otra parte del mismo documento.

Ir a una página web.

Un hipervínculo tiene 2 partes:

El origen es el objeto en el que hacemos clic. Normalmente es texto pero prácticamente cualquier objeto de una página de documento InDesign puede actuar como origen de un hipervínculo.

El destino es la acción que se realiza o la página donde vamos al ejecutar el hipervínculo.

Los hipervínculos son el motor de Internet porque son los objetos que posibilitan la navegación. Como veremos en esta entrada, con InDesign podemos crear hipervínculos automáticamente si utilizamos la función de tabla de contenido y también nos permitirá crear hipervínculos a medida de nuestras necesidades utilizando el panel Hipervínculos.

El panel Marcadores de InDesign y la exportación PDF Antes de aprender a crear hipervínculos con InDesign, haremos una observación sobre el panel Marcadores de InDesign. En un documento InDesign en el que ya hemos creado algunos marcadores, elija el menúVentana > Interactivo > Marcadores para abrir el panel Marcadores. Los marcadores aparecerán

ordenados en una lista en el panel. Si el panel Marcadores de InDesign está vacío, significa que aún no se han definido marcadores en el documento. Si necesita aprender a crear marcadores en InDesign puede ver la entrada “Elementos interactivos para navegar por un libro electrónico. Parte I: marcadores”, en este mismo blog.

Exporte el documento InDesign con marcadores en formato PDF. En las opciones de exportación PDF marque la casilla Marcadores, como muestra la figura:

Al abrir el PDF exportado con Adobe Reader tendremos una lista de enlaces en el panel Marcadores de Adobe Reader. Note que si bien no hemos creado ningún hipervínculo en el documento InDesign, Adobe Reader ha utilizado los marcadores del documento InDesign para crear una lista con hipervínculos que nos permite navegar por el documento PDF. Exporte el mismo documento InDesign en formato EPUB, abra el documento con el Visor de libros electrónicos de Calibre y haga clic en el botón Indice del visor. Al contrario de lo que ocurrió con el PDF, no encontrará ninguna lista de enlaces. Si descomprime el EPUB y abre el archivo de tabla de contenido toc.ncx con Dreamweaver, evidentemente no encontrará las etiquetas correspondientes a las entradas de la TDC. Por suerte InDesign cuenta con herramientas que nos permitirán agregar interactividad no sólo para documentos exportados en formato PDF sino también para otros formatos de publicaciones digitales como EPUB, HTML y SWF. Las herramientas que usaremos para generar libros electrónicos con todos los hipervínculos necesarios para la navegación son los Estilos de tabla de contenido y el panelHipervínculos.

Crear un estilo de tabla de contenido

Si utiliza estilos de tabla de contenido, InDesign creará hipervínculos en forma automática. Vamos a crear un estilo de tabla de contenido para comprobarlo. Para poder crear un estilo de TDC en un documento InDesign es necesario haber aplicado estilos de párrafo al documento, particularmente a los párrafos que servirán como entradas de la tabla como ser los títulos de capítulo y sus temas principales. La siguiente figura muestra un párrafo seleccionado en una página de un documento InDesign. El párrafo tiene aplicado el estilo Heading 2, como muestra el panel Estilos de párrafo (F11).

Abra un documento InDesign al que ha aplicado estilos de párrafo, elija el menú Maquetación > Estilos de tabla de contenido y haga clic en el botón Nuevo. Se abrirá el cuadro Nuevo estilo de TDC. Escriba un nombre para identificar el nuevo estilo de TDC, por ejemplo Estilo de TDC EPUB. En el área de la derecha Otros estilos hay una lista con los estilos de párrafo utilizados en el documento. Elija el o los estilos de párrafo utilizados para formatear los elementos que formarán parte de la lista de entradas de la TDC, por ejemplo Heading 1, Heading 2 y Heading 3 y haga clic en el botón << Añadir, para agregar los estilos en el área de la izquierda: Incluir estilos de párrafo.

Observe que al incluir los estilos de párrafo se puede especificar el Nivel del estilo dentro de la estructura, en este caso tenemos una lista con 3 niveles. De esta forma le hemos indicado a InDesign que para crear la lista de entradas de la TDC utilice los párrafos formateados con el los estilos Heading 1, Heading 2 y Heading 3. Haga clic en el botón OK dos veces, para cerrar los cuadros Nuevo estilo de TDC y Estilos de tabla de contenido, guarde los cambios en el documento InDesign y exporte en formato EPUB. En las opciones de exportación EPUB, elija la categoría General, en el área Configuracióndespliegue el menú Estilo de TDC y elija el estilo de TDC creado en el paso anterior Estilo de TDC EPUB.

Haga clic en el botón OK. Se exportará el documento InDesign y en el documento EPUBexportado se creará automáticamente una tabla de contenido. Abra el archivo EPUB utilizando el visor de libros electrónicos de Calibre y haga clic en el botónIndice para ver la tabla de contenido del libro electrónico. Si bien no hemos creado ningún hipervínculo en el documento InDesign, al exportar en formato EPUB InDesign ha utilizado los estilos de párrafo Heading 1, Heading 2 y Heading 3 del documento InDesign para crear una lista con hipervínculos que nos permitirá navegar por el documento EPUB.

Exporte el mismo documento InDesign en formato PDF y abra el documento en Adobe Reader.No encontrará ninguna lista de enlaces, como ocurrió con el EPUB. RESUMEN:

Para obtener una lista de enlaces al exportar en formato PDF, cree marcadores en el documento InDesign.

Para obtener una lista de enlaces al exportar en formato EPUB, cree un estilo de tabla de contenido en el documento InDesign.

Para obtener una lista de enlaces al exportar en ambos formatos PDF y EPUB, cree en el documento InDesign marcadores y además un estilo de tabla de contenido.

Así como el índice general de un libro impreso es una parte integrante del libro, es posible que usted prefiera que la lista de entradas de la tabla de contenido (además de ser accesible con la opción de menú del dispositivo lector) forme parte del texto del libro electrónico y contenga hipervínculos que lleven hacia los capítulos correspondientes. Primero tendrá que colocar el texto de la tabla de contenido en el artículo del documento InDesign. Luego deberá crear hipervínculos para que el usuario pulse sobre cada entrada y navegue hacia el capítulo correspondiente.

Colocar el texto de la tabla de contenido en el artículo Elija el menú Maquetación > Tabla de contenido, se abrirá el cuadro Tabla de contenido. En el desplegable Estilo de TDC, elija el estilo de TDC que hemos creado en el ejercicio anteriorEstilo de TDC EPUB. En Título escriba el título del artículo de la TDC, en Estilo elija un estilo de párrafo para aplicar al título de la TDC y en Estilo de entrada elija un estilo de párrafo para aplicar a las entradas de la TDC. Haga clic en el botón Más opciones, a la derecha del cuadro, para desplegar opciones adicionales, en Número de página, elija la opción Sin número de página y haga clic en el botón OK. El cursor se cargará con el texto de la TDC. Descargue el artículo de la TDC en la mesa de trabajo de la página 1 del documento InDesign. Para colocar la tabla de contenido en el artículo, elija la herramienta Texto (T), haga clic en el artículo de TDC descargado en la mesa de trabajo y seleccione todo el texto del artículo de TDC. Corte el texto del artículo de TDC, coloque el cursor en el punto inicial del artículo principal y pegue el texto. Elimine el marco de texto vacío. Guarde el documento InDesign, exporte en formato PDF y abra el documento en Adobe Reader. La lista de entradas de la tabla de contenido formará parte del texto del documento PDF y contendrá enlaces que vinculan a las páginas del documento. Elija el menú Ventana > Interactivo > Hipervínculos para abrir el panel Hipervínculos.

Observe la lista de hipervínculos en el panel, cada uno estará identificado con un número y además aparece un icono a la derecha. Este icono indica el tipo de hipervínculo, en este casouna página de documento.

Exporte el mismo documento InDesign en formato EPUB y abra el archivo exportado utilizando el visor de libros electrónicos de Calibre. La lista de entradas de la TDC formará parte del texto del documento EPUB, sin embargo los hipervínculos no funcionarán. Esto se debe a que el destino de hipervínculo es una página de documento y en un EPUB de maquetación fluida el número de página nunca es un valor fijo, como en el caso de un PDF cuya maquetación y número de página sí son fijos. IMPORTANTE: para que un hipervínculo funcione en un EPUB de maquetación fluida, el destino de hipervínculo no debe ser una página de documento sino un anclaje de texto.

El panel Hipervínculos de InDesign En primer lugar vamos a eliminar de nuestro documento InDesign los hipervínculos a páginasque se han creado automáticamente en el ejercicio anterior al colocar el texto de la tabla de contenido en el artículo. Luego crearemos hipervínculos utilizando el panel Hipervínculos. Elija el menú Ventana > Interactivo > Hipervínculos para abrir el panel Hipervínculos, seleccione los hipervínculos de página en la lista y haga clic en el ícono Eliminar en forma de cesto, en la parte inferior del panel.

Ahora aprenderemos a crear hipervínculos usando este panel. Para crear un hipervínculo utilizando el panel Hipervínculos, primero deberá configurar eldestino y después el origen del hipervínculo.

Ejemplo 1. Hipervínculo a una Página desde texto seleccionado Puede crear un hipervínculo a una página sin crear primero un destino.

Seleccione el origen del hipervínculo, por ejemplo texto, un marco o gráfico. En el menú del panel Hipervínculos elija la opción Nuevo hipervínculo.

En el menú Vincular a tenemos las siguientes opciones de destino del hipervínculo:

URL

Archivo

Correo electrónico

Página

Anclaje de texto

Destino compartido

Elija la opción Página. En el cuadro puede especificar un número de página y configurar el nivel de zoom.

Seleccione el documento que contenga el destino al que desea saltar. En Documento aparecen todos los documentos abiertos guardados. Si el documento que está buscando no está abierto, seleccione Explorar…, busque el archivo y haga clic en Abrir. En Página, indique el número de página al que desea saltar, por ejemplo 2.

En el menú Configuración de zoom tenemos las siguientes opciones de aspecto de la página a la que saltará:

Fijo

Encajar vista

Encajar en ventana

Encajar ancho

Encajar alto

Encajar área visible

Zoom anterior

Elija la opción Encajar en ventana y haga clic en el botón OK. Utilice el panel Hipervínculos de InDesign para probar el funcionamiento del hipervínculo. Seleccione el hipervínculo en la lista y en el menú del panel elija la opción Ir a destino. Elija la opción Ir a origen para volver al origen del hipervínculo. Exporte el documento en formato PDF y compruebe el funcionamiento del hipervínculo enAdobe Reader. Pruebe el hipervínculo en los formatos SWF, HTML y EPUB. Para interpretar los resultados recuerde la diferencia entre las publicaciones con maquetación fluida y fija.

Ejemplo 2. Hipervínculo a una Página desde un marco de texto En el documento InDesign seleccione el marco de texto de la página 2 (el destino del hipervínculo anterior). Este marco de texto será ahora el origen de un nuevo hipervínculo, tal que al hacer clic sobre el mismo regresemos a la página 1. En el menú del panel Hipervínculos elija la opción Nuevo hipervínculo. En el menú Vincular a elija la opción Página. Seleccione el documento que contenga el destino al que desea saltar. En Documento aparecen todos los documentos abiertos guardados. Si el documento que está buscando no está abierto, seleccione Explorar…, busque el archivo y haga clic en Abrir. En Documento ya estará seleccionado nuestro documento. En Página indique el número de página 1. Elija la opción Encajar en ventana y haga clic en el botón OK. Exporte el documento en formato PDF y compruebe el funcionamiento del hipervínculo enAdobe Reader. Pruebe el nuevo hipervínculo en los formatos SWF, HTML y EPUB.

Ejemplo 3. Hipervínculo a un Anclaje de texto

Puede crear un hipervínculo a un anclaje de texto si ha creado primero un destino en el documento InDesign. 1. Crear el destino del hipervínculo Para crear un anclaje de texto como destino de hipervínculo, elija la herramienta Texto y haga clic en el lugar del artículo donde desea definir el anclaje de texto, o bien seleccione el intervalo de texto que desea utilizar como anclaje. En el menú del panel Hipervínculos elija la opción Nuevo destino de hipervínculo.

En el menú Tipo tenemos las siguientes opciones de destino del hipervínculo:

Página

Anclaje de texto

URL

Elija la opción Anclaje de texto y haga clic en el botón OK.

En Nombre aparece Anclaje 1 como nombre por defecto. Escriba un nombre que sirva para identificar el anclaje de texto, por ejemplo Introducción y haga clic en el botón OK.

El nuevo anclaje de texto servirá como destino de un hipervínculo. Puede crear todos los anclajes de texto que necesite. Cada anclaje de texto podrá servir como destino de hipervínculo desde uno o más orígenes, pero desde un origen sólo se puede ir a un único destino. 2. Definir el origen y crear el hipervínculo: Seleccione el origen del hipervínculo, por ejemplo texto, un marco o gráfico y en el menú del panel Hipervínculos elija la opción Nuevo hipervínculo.

En el menú Vincular a elija la opción Anclaje de texto. Seleccione el documento que contenga el destino al que desea saltar. En Documento aparecen todos los documentos abiertos guardados. Si el documento que está buscando no está abierto, seleccione Explorar…, busque el archivo y haga clic en Abrir. En Documento ya estará seleccionado nuestro documento. En Anclaje de texto, seleccione el destino de anclaje de texto Introducción que hemos creado en el paso anterior. Especifique las opciones de apariencia de hipervínculo y haga clic en OK.

Exporte el documento en formato PDF y compruebe el funcionamiento del hipervínculo enAdobe Reader. Pruebe el nuevo hipervínculo en los formatos SWF, HTML y EPUB. El hipervínculo funciona en todos los formatos. IMPORTANTE: solo es necesario crear un destino de hipervínculo cuando se está creando un hipervínculo a un anclaje de texto. También puede crear destinos de hipervínculo a Páginas y URL, aunque para éstas no es necesario definir un destino.

Ejemplo 4. Hipervínculo a un Anclaje de texto En un documento InDesign vamos a crear un hipervínculo a un lugar del documento donde hemos colocado una imagen. Para ello crearemos junto a la imagen un anclaje de texto como destino. En primer lugar debe anclar la imagen al texto, como muestra la siguiente figura:

En segundo lugar debe crear el destino del hipervínculo. Para crear un anclaje de texto como destino de hipervínculo, elija la herramienta Texto y haga clic en el lugar del artículo donde desea definir el anclaje de texto, en este caso haga clic al final del párrafo inmediatamente superior al gráfico. En el menú del panel Hipervínculos elija la opción Nuevo destino de hipervínculo. En el menú Tipo elija la opción Anclaje de texto, en Nombre aparece Anclaje 1 como nombre por defecto. Escriba un nombre que sirva para identificar el anclaje de texto, por ejemploGráfico 1 y haga clic en el botón OK. El nuevo anclaje de texto servirá como destino de un hipervínculo.

Finalmente debe definir el origen y crear el hipervínculo. Seleccione el origen del hipervínculo, por ejemplo texto, un marco o gráfico y en el menú del panel Hipervínculos elija la opción Nuevo hipervínculo. En el menú Vincular a elija la opción Anclaje de texto. Seleccione el documento que contenga el destino al que desea saltar. En Documento aparecen todos los documentos abiertos guardados. Si el documento que está buscando no está abierto, seleccione Explorar…, busque el archivo y haga clic en Abrir. En Documento ya estará seleccionado nuestro documento. En Anclaje de texto, seleccione el destino de anclaje de texto Gráfico 1 que hemos creado en el paso anterior. Especifique las opciones de apariencia de hipervínculo y haga clic en OK. Exporte el documento en formato PDF y compruebe el funcionamiento del hipervínculo enAdobe Reader. Pruebe el nuevo hipervínculo en los formatos SWF, HTML y EPUB. El hipervínculo funciona en todos los formatos.

Administrar hipervínculos Con el panel Hipervínculos se pueden crear, editar, eliminar y localizar hipervínculos. Para editar un hipervínculo, en el panel Hipervínculos haga doble clic en el elemento que desee editar, en el cuadro de edición realice los cambios necesarios y haga clic en OK. Para eliminar un hipervínculo, seleccione el elemento en el panel Hipervínculos y haga clic en el botón Eliminar de la parte inferior del panel. Cuando quita un hipervínculo, el texto o el gráfico de origen permanece. Para ubicar el origen de un hipervínculo, seleccione el elemento que desee ubicar en el panel Hipervínculos y elija Ir a origen en el menú del panel. Para ubicar el destino de un hipervínculo, seleccione el elemento que desee ubicar en el panel Hipervínculos y elija Ir a destino en el menú del panel. Si el destino es una URL, InDesign iniciará un navegador web para mostrar el destino. Si el elemento es un anclaje de texto o un destino de página, InDesign saltará a esa ubicación.

Las marcas de hipervínculo en la Ventana de documento y en el Editor de artículos Cuando se crea un destino de hipervínculo este no se muestra en el panel Hipervínculossino que aparecerá en el cuadro de diálogo al crear o editar el hipervínculo. Los caracteres ocultos de InDesign son símbolos de elementos que no se pueden ver pero son importantes para el formato del texto, denotando párrafos, espacios, tabulaciones, sangrías, saltos de página, marcadores, anclajes, saltos, notas, etc. Estos símbolos no se imprimen y pueden ocultarse o mostrarse.

Para activar la visualización de los caracteres ocultos, elija el menú Texto > Mostrar caracteres ocultos, o presione Ctrl+Alt+I. En la ventana de documento podrán verse, entre otros caracteres ocultos, los iconos correspondientes a los marcadores de destino de hipervínculo del documento InDesign, como muestra la siguiente figura:

Como vimos, los marcadores de destino de hipervínculo que se hayan creado en un documento InDesign pueden ubicarse en la página del documento haciendo visibles los caracteres ocultos.

El editor de artículos es otra herramienta de InDesign que muestra los distintos elementos que contiene un artículo y también permite ver los iconos que corresponden a los marcadores de destino de hipervínculo en el documento InDesign. El editor de artículos sirve para editar el texto en una ventana separada de la ventana de documento. Para abrir el editor de artículos seleccione el marco de texto que contiene el texto que desea editar o elija la herramienta Texto y coloque el punto de inserción dentro del texto. Elija el menú Edición > Editar en editor de artículos, o presione Ctrl+Y. En la ventana del editor de artículos el texto se visualiza sin formato, lo que facilita la introducción de cambios en el texto. En el editor de artículos pueden verse los iconos correspondientes a los marcadores de destino del hipervínculo del documento InDesign, como muestra la figura de arriba. Cuando definimos un hipervínculo desde un texto, el editor de artículos también muestra unos iconos especiales en el origen del hipervínculo:

En el lado derecho del editor de artículos puede introducir cambios en el texto, los cambios aparecerán en la página del documento. En el lateral izquierdo aparecen los estilos de párrafo asignados al texto. No es necesario cerrar el editor de artículos para regresar al documento, puede hacer clic en la ventana de documento para trabajar en ella y después regresar al editor de artículos. Desde la ventana del editor de artículos también es posible crear nuevos destinos de hipervínculo y eliminar los ya existentes en el documento InDesign. En esta entrada hemos visto cómo crear hipervínculos en un documento InDesign y obtener tras la exportación un libro electrónico en formatos PDF, SWF, HTML y EPUB donde se pueden ejecutar los hipervínculos y comprobar su funcionamiento. En la siguiente entrada de este blog nos ocuparemos de otros elementos interactivos muy utilizados, los botones.

Elementos interactivos para navegar por un libro electrónico. Parte III: botones Además de orden visual y contenidos valiosos, el usuario de un libro espera sencillez para

moverse a través de las diferentes partes que componen el libro y acceder a la información que le

interesa.

Para facilitarle al lector encontrar esa información, el libro impreso contiene una tabla de contenido,

generalmente incluida en las primeras páginas y con una numeración independiente. La tabla de

contenido o índice general del libro consiste en una lista de entradas con los nombres de los

capítulos y títulos principales. Cada entrada de esta lista está acompañada de un número de

página donde el lector deberá ir para encontrar lo que busca.

Otro elemento de un libro impreso que puede ayudar al lector a encontrar el contenido buscado

son los índices. Un índice alfabético, por ejemplo, contiene una lista de palabras o términos

acompañados de los números de página a lo largo del libro donde se hace referencia a esas

palabras.

InDesign cuenta con las herramientas para crear tablas de contenido e índices y también permite

añadir otros elementos interactivos que sirven para navegar por un libro electrónico, como

los marcadores, los hipervínculos y los botones. Cada uno de estos elementos interactivos tiene

sus propios usos particulares y antes de empezar a trabajar, usted deberá determinar cuál es el

elemento más adecuado a sus necesidades.

En esta entrada veremos uno de estos elementos interactivos: los botones.

Un botón es un área de una página en la que es posible hacer clic para realizar una acción, por

ejemplo “navegar” hacia un destino.

En este ejemplo, en un documento InDesign vamos a crear un botón de navegación tal que, al

hacer clic con el mouse sobre el mismo naveguemos hacia la página siguiente, como muestra la

figura:

En este caso, el evento es hacer clic con el mouse y la acción es navegar hacia la página

siguiente.

Además de botones de navegación puede añadir otros elementos interactivos en un documento

InDesign, como transiciones de

página, hipervínculos, películas, sonidos, animaciones yproyecciones de diapositivas, que

se podrán ver en los archivos exportados en formatos PDFy SWF.

Para probar el funcionamiento del contenido interactivo, exportaremos el documento InDesign en

formato PDF, habilitando el contenido interactivo y luego visualizaremos el archivo exportado

conAdobe Reader.

También exportaremos el documento InDesign en formato SWF (Flash) para visualizar el archivo

exportado con Adobe Media Player, o bien con un navegador con Adobe Flash Player

integrado.

Adobe Flash Player es un complemento o plug-in que sirve para visualizar contenido multimedia y

está disponible para diferentes navegadores como Explorer, Chrome, Firefox, etc. y con versiones

para diferentes sistemas operativos.

Antes de crear botones con InDesign debemos contar con algunos archivos de imagen.

En este ejemplo, para crear un botón interactivo simple, necesitaremos 2 imágenes con forma de

flecha hacia adelante:

Usaremos la flecha más clara para el botón en estado Normal y la flecha más oscura para el botón

cuando el ratón pase por encima de él, es decir para el estado Al pasar sobre él.

Los 2 archivos de imagen son:

siguiente_on.jpg (Al pasar sobre él)

siguiente_off.jpg (Normal)

En este ejemplo crearemos solamente el botón para navegar hacia la página siguiente. Si usted

desea completar el ejercicio deberá utilizar otros 2 archivos de imagen para las flechas hacia la

página anterior.

Configure el documento InDesign con calidad Publicación digital y marque la opción Páginas

opuestas para crear pliegos de 2 páginas enfrentadas.

Configure el tamaño de página iPad con orientación Vertical y los siguientes valores de márgenes

del documento:

Superior: 40 px

Inferior: 40 px

Interior: 40 px

Exterior: 150 px

Hemos configurado un valor muy grande de margen exterior (150 píxeles) porque allí aparecerán

nuestros botones de navegación, como muestra la figura:

Colocar los archivos de imagen de los botones

No colocaremos las imágenes en las páginas del documento, sino en los márgenes exteriores de

la página maestra. De esta forma nos aseguramos que los botones serán visibles en todas las

páginas de documento que tengan aplicada dicha página maestra.

Utilizando el panel Páginas (F12) abra la página maestra, coloque en el margen exterior de la

página maestra de la derecha el archivo de imagen siguiente_on.jpg y, a continuación, coloque el

archivo de imagen siguiente_off.jpg, justo encima de la primera.

La imagen de la flecha más oscura quedará oculta debajo de la más clara.

Utilizando estas imágenes crearemos un botón interactivo que nos servirá para navegar hacia la

página siguiente.

El panel Botones y formularios de InDesign

Elija el menú Ventana > Interactivo > Botones y formularios, para abrir el panel Botones y

formularios.

Elija la herramienta Selección (flecha negra) y rodee la imagen de la flecha. Se seleccionarán la

flecha clara y también la oscura que está oculta debajo.

Elija el menú Objeto > Agrupar, o presione Ctrl+G, para formar un grupo con ambos objetos.

Haga clic en el icono Convertir a botón, en la parte inferior del panel Botones y formularios:

En el panel Botones y formularios, escriba un nombre para el botón, por ejemplo Adelante.

Configurar el evento y la acción

En Evento, seleccione el evento Al liberar o tocar, para determinar el modo en que se activará la

acción. Con esta opción, la acción se realizará al soltar el botón del ratón tras hacer clic.

Haga clic en el botón de signo más (+) junto a Acciones y seleccione la acción Ir a página

siguiente, es decir la acción que se va asignar al evento.

También puede configurar el nivel de Zoom. Elija la opción Zoom anterior.

Es posible añadir tantas acciones como sea necesario para el evento.

Eventos

Indican la manera de activar acciones en los botones cuando exporta el documento a PDF oSWF,

por ejemplo:

Al liberar o tocar. La acción se realizará al soltar el botón del ratón tras hacer clic. Este

evento da al usuario la oportunidad de mover el cursor fuera del botón para no activar la acción.

Al hacer clic. La acción se realizará cuando se haga clic en el botón del ratón, sin soltarlo.

A menos que tenga una razón concreta para usar "Al hacer clic", es preferible usar "Al liberar o

tocar", para que el usuario tenga la oportunidad de cancelar la acción.

Al pasar sobre el objeto. La acción se realizará cuando el puntero del ratón entre en el

área definida por el cuadro delimitador del botón.

Al alejarse del objeto. La acción se realizará cuando el puntero del ratón salga del área

de botón.

Acciones

Al crear una acción indicamos qué ocurrirá cuando se produzca el evento especificado,

normalmente cuando alguien hace clic en el botón, por ejemplo:

Ir a destino. Salta al anclaje de texto especificado en el

panel Marcadores o Hipervínculos.

Ir a la primera/última/siguiente/anterior página. Salta a la primera, última, siguiente o

anterior página del archivo PDF o SWF. Seleccione una opción del menú Zoom para determinar

cómo se mostrará la página.

Ir a URL. Abre la página web de la URL especificada.

Abrir archivo. Inicia y abre el archivo especificado. Se debe especificar una ruta de

acceso absoluta.

Configurar la apariencia del botón

En el área Apariencia estará seleccionada la apariencia del botón en estado [Normal]. En este

caso vemos una pequeña imagen con la flecha de color claro y a la derecha la leyenda [Normal]

aparece resaltada.

Ahora debemos configurar la apariencia del botón en el estado [Al pasar sobre él].

Con el botón seleccionado, haga clic en [Al pasar sobre él], haga doble clic sobre el botón y

presione la tecla Supr para borrar la imagen de la flecha más clara. Aparecerá la imagen de la

flecha más oscura (que estaba oculta abajo).

¡Listo! Hemos configurado la apariencia del botón en el estado [Al pasar sobre él].

Seleccione el botón con la herramienta Selección y observe los dos estados del botón en el

área Apariencia:

Más abajo, en Descripción escriba el texto Página siguiente.

Este texto es la descripción emergente, una ayuda visual que al exportar en formato PDF se

mostrará en pantalla cuando pasemos el ratón por encima del botón.

La descripción emergente o tooltip sirve para informar al usuario la finalidad del elemento sobre el

que se encuentra.

Vista previa de SWF

Utilice el botón Previsualizar pliego, en el ángulo inferior izquierdo del panel Botones y

formularios, para abrir el panel Vista previa de SWF.

Este panel permite, antes de exportar el documento InDesign, previsualizar la apariencia del botón.

Pase el cursor por encima de la flecha para ver el resultado.

Cuando exporte el documento InDesign a PDF interactivo, asegúrese de que en Formularios y

medios está seleccionada la opción Incluir todo.

Si exporta a Flash Player (SWF) seleccione la opción Incluir todo en Interactividad y

multimedia.