Superposiciones de hipervínculos y botones

¿Está visualizando el artículo correcto?

Este artículo hace referencia a Digital Publishing Suite. Para consultar el artículo relativo a AEM Mobile, vaya a Hipervínculos.

Puede utilizar el panel Hipervínculos o el panel Botones para crear vínculos que lleven a sitios web, a otros artículos, etc. Hay algunas acciones de botones y también algunos tipos de hipervínculos que no se pueden usar en las publicaciones.

Las superposiciones de hipervínculos se admiten en los marcos y las proyecciones de diapositivas desplazables, pero no en otras superposiciones.

Tutorial en vídeo

Utilice el panel Botones para crear vínculos a sitios web, a otra página o a otro artículo.

Para obtener los mejores resultados, utilice el panel Botones en lugar del panel Hipervínculos para crear vínculos. El panel Botones es más flexible y más estable.

  1. En InDesign, cree el objeto que se va a utilizar como botón.

    Por ejemplo, si desea que el botón le lleve a un sitio web, cree un marco de texto o coloque una imagen.

  2. Abra el panel Botones (Ventana > Interactivo > Botones), seleccione el objeto y haga clic en el icono Convertir el objeto en un botón.

  3. Para eventos, elija Al soltar.

    Al soltar es el único evento de botón admitido.

  4. Haga clic en el signo más (+) que está situado junto a Acción y seleccione una acción admitida.

    Acciones de botón admitidas

    A. Acciones admitidas para botones de hipervínculos B. Acciones admitidas para botones de proyecciones de diapositivas 

    Las acciones de hipervínculos admitidas son: Ir a primera página, Ir a última página, Ir a página siguiente, Ir a página anterior, Ir a URL, Sonido, Vídeo e Ir a página. En las proyecciones de diapositivas se admiten las acciones Ir al estado siguiente, Ir al estado anterior e Ir a estado.

    No utilice la acción Ir a destino para desplazarse a un artículo distinto. En su lugar, utilice la acción Ir a URL con un formato “navto”. Consulte la sección relacionada más adelante en este artículo.

  5. Si lo desea, añada acciones de botón adicionales.

    Las acciones se reproducen de forma secuencial. Por ejemplo, si la primera acción reproduce un vídeo y la segunda muestra una diapositiva diferente, primero se reproducirá el vídeo y luego se mostrará la diapositiva.

  6. Para cambiar la configuración de hipervínculo, seleccione el objeto de botón y, a continuación, especifique esta configuración en el panel Folio Overlays:

    Abrir en publicación

    Muestre el contenido en una vista web dentro del visor. Anule la selección de esta opción cuando establezca vínculos a direcciones URL como itms://, mailto:, y tel:.

    Abrir en navegador de dispositivo

    Muestre el contenido fuera del visor en el navegador del dispositivo móvil, como la aplicación Safari móvil en el iPad. Seleccione Preguntar antes si desea que aparezca un mensaje cuando los usuarios toquen el vínculo.

En InDesign, puede utilizar el panel Hipervínculos para añadir este tipo de elementos. Los hipervínculos son especialmente útiles para el texto. Si desea convertir un marco en un hipervínculo, utilice el panel Botones en lugar del panel Hipervínculos. Los botones son más versátiles y más estables.

  1. Seleccione el marco o el texto que desea utilizar como hipervínculo.

  2. Abra el panel Hipervínculos (Ventana > Interactivo > Hipervínculos).

  3. En el panel Hipervínculos, elija Nuevo hipervínculo en el menú del panel.

  4. Anule la selección de Destino compartido.

    Esta opción le permite asignar un nombre a los hipervínculos y reutilizarlos, pero es mejor evitar su uso en el flujo de trabajo de DPS.

  5. En el menú Vincular a, especifique cualquiera de las siguientes opciones y haga clic en OK:

    URL

    Al tocar un hipervínculo de URL, se muestra una página web (http://), una aplicación de App Store (itms://), una aplicación de Amazon Appstore (amzn://) o bien otro artículo (navto://).

    Por ejemplo: http://www.adobe.com/es

    Al establecer vínculos a sitios web, escriba toda la URL, incluida la parte “http://”.

    Nota:

    Al establecer vínculos con una URL de iTunes, anule la selección de Abrir en publicación en el panel Folio Overlays. En caso contrario, aparece el mensaje de error “No se puede abrir la página” cuando se toca el hipervínculo. Asimismo, si utiliza un formato itms:// o amzn:// para establecer un vínculo a una aplicación de las tiendas, desactive Abrir en publicación.

    Un hipervínculo navto:// lleva a otro artículo o a otra página de dicho artículo. Escriba navto:// seguido del nombre del artículo tal como aparece en el panel Folio Builder. Use el nombre del artículo y no su título. Si desea incluir un número de página, añada # seguido de un número. Sin embargo, recuerde que la primera página es la 0, por lo que si añade #2, le llevará a la página 3.

    Ejemplo: navto://newsarticle

    Ejemplo: navto://newsarticle#2 (le lleva a la página 3)

    Correo electrónico

    Al tocar un hipervínculo de correo electrónico, se inicia la aplicación de correo con el campo Para relleno.

    Página

    Al tocar un hipervínculo de página, le lleva a otra página del artículo. No utilice esta opción para desplazarse a un artículo distinto.

    No se admite el hipervínculo Anclaje de texto.

  6. Para cambiar los ajustes del hipervínculo, seleccione los objetos del hipervínculo y, a continuación, especifique estos ajustes en el panel Folio Overlays:

    Abrir en publicación

    Muestre el contenido en una vista web dentro del visor. Anule la selección de esta opción cuando establezca vínculos a direcciones URL como itms://, mailto:, y tel:.

    Abrir en navegador de dispositivo

    Muestre el contenido fuera del visor en el navegador del dispositivo móvil, como la aplicación Safari móvil en el iPad. Seleccione Preguntar antes si desea que aparezca un mensaje cuando los usuarios toquen el vínculo. Esta opción está desactivada si se selecciona Abrir en publicación.

    Nota:

    La configuración del panel Folio Overlays no está disponible para hipervínculos de texto. No puede cambiar la configuración de los hipervínculos de texto; se definen en Abrir en publicación de manera predeterminada. Sin embargo, el visor incluye excepciones incorporadas para determinados prefijos como itms://, tel: , y mailto:. Para estas URL, se abre una aplicación externa de forma predeterminada.

Para obtener más información sobre la creación de hipervínculos, consulte Creación de hipervínculos en la ayuda de InDesign CS5/CS5.5.

Los artículos de publicación se almacenan en un servidor, por lo que cualquier vínculo que especifique una ruta de acceso a un archivo InDesign se rompe durante la vista previa. Utilice el formato “navto” para establecer vínculos con otros artículos.

Al crear un botón o un hipervínculo, puede reemplazar la parte “http://” por “navto://” en el campo URL. A continuación, especifique el nombre del artículo de destino tal como aparece en el panel Folio Builder. Use el nombre del artículo y no su título. Entre los formatos navto válidos se incluyen navto://[nombreartículo] y navto://[nombreartículo]#n. Al añadir #n se especifica un número de página. La primera página de un documento es la 0, por lo que si especifica #2, irá a la página 3.

Desplazamiento a página 3 de otro artículo

Ejemplos de Navto:

navto://biking

navto://biking#2 (le lleva a la página 3 del artículo “ciclismo”)

Nota:

Si ha utilizado una versión anterior de las herramientas para crear un vínculo navto usando un nombre de carpeta o de artículo distinto del nombre del artículo de destino, sus vínculos se dañarán. Para arreglar los vínculos navto, puede cambiar el nombre del artículo (el nombre, no el título) o editar los vínculos navto para que dirijan al nombre de artículo tal como aparece en el panel Folio Creator.

La versión v30 introdujo las nuevas opciones relativas para el artículo y la navegación de la página. Tenga en cuenta que los formatos navto relativos solo se admiten en aplicaciones con la versión v30 o posterior, pero puede utilizar cualquier formato de publicación (versión v20 o posterior). Los vínculos navto relativos se admiten en los visores de iOS, Android y de la tienda Windows, pero aún no son compatibles con el visor de escritorio o el visor web.

Puede utilizar varios formatos de navto://relative para saltar a artículo siguiente, anterior, primero o último, o para restaurar la publicación. Por ejemplo, un botón con una acción navto://relative/first le lleva al primer artículo de la publicación. Los formatos incluyen primero, último, siguiente, anterior, actual y restaurar. También puede saltar a un artículo específico en relación con su posición en la publicación, por ejemplo, al quinto artículo.

Ejemplo: navto://relative/last (le lleva al último artículo de la publicación)

Ejemplo: navto://relative/last#last (le lleva a la última página del último artículo de la publicación)

Ejemplo: navto://relative/4 (le lleva al quinto artículo de la publicación)

Ejemplo: navto://relative/4#2 (le lleva a la tercera página del quinto artículo de la publicación)

El formato “current” es especialmente útil para la navegación de la página. Puede utilizar #previous, #next, #first, #last y puede saltar a una página específica, como #3 para ir a la página 4 del artículo.

Ejemplo: navto://relative/current#previous (le lleva a la página anterior del artículo)

Ejemplo: navto://relative/current#last (le lleva a la última página del artículo)

Ejemplo: navto://relative/current#3 (le lleva a la página cuarta del artículo actual)

Utilice el formato navto para crear un botón que restablezca la publicación.

Ejemplo: navto://relative/reset (le lleva al primer artículo y borra todas las posiciones de lectura del artículo)

En los artículos con desplazamiento suave, puede utilizar decimales o porcentajes para saltar a una posición específica.

Ejemplo: navto://myarticle#3.3 (le lleva a una posición específica del artículo con desplazamiento suave que muestra la parte inferior de la página 4 y la parte superior de la página 5)

Ejemplo: navto://myarticle#50% (le lleva al centro del artículo con desplazamiento suave)

Para ampliar estas capacidades relativas de navto, puede crear una superposición de contenido web o un artículo HTML que tenga acceso a la Reading API. Por ejemplo, puede consultar la publicación para determinar la información tal como la cantidad de artículos de la publicación y cuántas páginas se encuentran en un artículo. A continuación, puede mostrar esta información o utilizarla de otra manera dentro de la superposición o del artículo HTML. Para obtener más información, consulte Nuevas API y funciones en R30 en DPS Developer Center.

Al crear un botón o un hipervínculo basado en una URL, puede utilizar la URL “navto://” para ir a otro artículo. Navto resulta especialmente útil para ir a artículos HTML.  

Ir a un artículo HTML

Escriba navto:// seguido del nombre del artículo HTML (no del título).

Ejemplo: navto://newsarticle

Ir a un anclaje en un artículo HTML

No puede ir a una página específica de un artículo HTML, pero puede ir a un anclaje si escribe navto://[nombredelartículo]#[nombredelanclaje].

Ejemplo: navto://newsarticle#part4

Nota:

Para definir un anclaje en un archivo HTML, abra el archivo HTML en un editor de texto. Vaya al texto que desea que funcione como anclaje y rodéelo con una etiqueta de anclaje, como “Esta es la parte 4 del artículo”.

Ir a un artículo de InDesign desde un artículo HTML

Utilice el formato navto para crear un hipervínculo desde un artículo HTML a un artículo de InDesign. Ejemplo:

<a href="navto://newsarticle">Ver artículo de noticias</a>

También puede desplazarse a las páginas de un artículo de InDesign añadiendo el número de página después del nombre del documento. La primera página del documento es la 0, la segunda la 1, y así sucesivamente. Ejemplo:

<a href="navto://Cycling#3">Ir a página 4 del artículo de ciclismo</a>

Ir de HTML a HTML

Utilice el formato navto para ir de un artículo HTML a otro utilizando el nombre de la carpeta. Ejemplo:

<a href="navto://newsarticle">Ver artículo de noticias</a>

También puede crear botones para ir a la biblioteca, a la lista de apartados o a la última vista (botón Atrás). Utilice cualquiera de estos formatos goto:// en una acción de botón:

goto://ApplicationViewState/library

goto://ApplicationViewState/sections

goto://FolioNavigation/lastview

Estos formatos goto:// no son compatibles con el visor heredado de Android basado en AIR. Solo los formatos de “library” y “lastview” son compatibles con el visor de Android nativo.

Si tiene una cuenta de DPS Enterprise, puede usar el formato “goto” para crear vínculos de artículos para el contenido HTML asociado con los iconos personalizados. Por ejemplo, puede utilizar el DPS App Builder para especificar los iconos personalizados para “Tienda”, “Ayuda” y “Términos”. Estos botones aparecen en la biblioteca del visor. Para crear un botón en un artículo que abre el contenido HTML para cualquiera de estos iconos personalizados, use el siguiente formato:

goto://ApplicationViewState/[etiqueta]

Por ejemplo, la acción de botón goto://ApplicationViewState/Tienda abrirá la tienda HTML, como si tocara el icono personalizado Tienda que se encuentra en la biblioteca.

Utilice DPS App Builder para crear iconos personalizados y especificar etiquetas. Consulte Barra de herramientas de navegación (solo Enterprise).

Estos formatos goto no funcionan cuando se crean vínculos de la biblioteca o una ranura personalizada a otra ranura personalizada. En su lugar, utilice la API de goToState. Consulte Library and Store SDK (SDK de biblioteca y tienda).

Puede crear un hipervínculo o un botón que muestre una imagen, archivo HTML o PDF local en el navegador integrado del visor.

  1. Añada una carpeta que contenga el archivo HTML local a la carpeta HTMLResources.

    Asegúrese de que la carpeta HTMLResources se incluye en la publicación. Consulte Importación de la carpeta HTMLResources.

  2. Cree un vínculo para mostrar el archivo HTML en el navegador integrado en la aplicación:

    Documento de origen de InDesign

    En el campo URL de un hipervínculo o un botón, introduzca la ruta de acceso sin http://, navto:// ni ningún otro prefijo. Ejemplo:

    HTMLResources/Cartoons/train1.html

    Artículo HTML

    En un artículo HTML, especifique la ubicación. Ejemplo:

    <a href=”../HTMLResources/Cartoons/train1.html”>Ver galería de dibujos de trenes</a>

    Por ejemplo, para hacer referencia a una imagen PNG, realice lo siguiente:

    <a href=”../HTMLResources/Cartoons/train2.png”>Ver imágenes de trenes</a>

    Superposición de contenido web

    Las superposiciones de contenido web se anidan dos niveles más profundos que un artículo de HTML. Ejemplo:

    <a href=”../../../HTMLResources/Cartoons/train1.html”>See Train Cartoon Gallery</a>

    Nota:

    Para obtener mejores resultados, no utilice espacios ni caracteres especiales en las carpetas y archivos HTML. Si incluye un espacio en el nombre de una carpeta o de un archivo, utilice el código HTML correspondiente para el carácter de espacio. Por ejemplo, utilice “Archivos%20Dibujos” para una carpeta llamada “Archivos Dibujos”.

Puede crear un vínculo que envíe un mensaje de correo electrónico (mailto:), un mensaje de texto (SMS) o llame a un número (tel:) desde un artículo. También puede crear vínculos que abran la aplicación de YouTube o una canción o álbum de iTunes. Para obtener más información sobre los formatos que se deben utilizar con los dispositivos iOS, consulte Apple URL Scheme Reference (Referencia de esquema URL de Apple).

Para obtener más información sobre la creación avanzada de vínculos a correos electrónicos (mailto:), consulte el artículo de James Lockman Sending email and email attachments from DPS publications (Envío de correos electrónicos y archivos adjuntos desde publicaciones de DPS).

Si especifica un esquema de URL opcional al utilizar DPS App Builder para crear una aplicación iOS, puede establecer un vínculo a esa aplicación desde otra o cuando se ve desde una página web en Safari móvil. Consulte Panel Detalles del visor.

Nota:

Cuando cree un vínculo a una aplicación o servicio externo, seleccione el botón y elija la opción Abrir en navegador de dispositivo en el panel Filio Overlays.

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?