Contenido
Tutoriales sobre creaciónConfiguración de tutoriales . . . 1
Tutorial 1: Tutorial rápido para usuarios avanzados de DPS . . . 1
Tutorial 2: Creación de una publicación . . . 6
Tutoriales sobre creación
Configuración de tutoriales
Estos tutoriales muestran cómo convertir documentos de InDesign a un formato digital compatible con dispositivos móviles como los iPad. Si conoce las herramientas de publicación digital de Adobe, vaya a la primera lección. Si no conoce el proceso de publicación digital, omita el primer tutorial.
Para ver estos tutoriales, necesita InDesign CS5 o InDesign CS5.5 con versiones actualizadas de las herramientas Folio Producer.
Haga clic en el siguiente vínculo para descargar los archivos de los tutoriales:
Download TutorialAssets.zip
Tutorial 1: Tutorial rápido para usuarios avanzados de
DPS
Si ha creado publicaciones con las herramientas de promoción de DPS, consulte este tutorial. Si no tiene mucha experiencia con las herramientas de DPS, consulte el siguiente tutorial para aprender antes los conceptos básicos. Creación de una publicación y un artículo
Con las herramientas anteriores, podía crear una carpeta de publicación con subcarpetas “apiladas”. Para crear una publicación, era necesario usar las convenciones de nombres de archivo y estructura de carpetas correctas. Con el nuevo flujo de trabajo, la estructura de carpetas solo afecta a la importación de publicaciones. Ahora puede añadir artículos a una publicación, si se almacenan en diferentes ubicaciones o incluso en distintos equipos. Las publicaciones y los artículos se cargan en un espacio de trabajo en la web.
1 Instale las herramientas Folio Producer para InDesign CS5 o InDesign CS5.5. 2 En InDesign, seleccione Ventana > Extensiones > Folio Builder.
El panel Folio Builder sustituye a Content Bundler.
3 Haga clic en Iniciar sesión y, a continuación, use un ID verificado de Adobe para iniciar sesión.
La cuenta que utilice para iniciar sesión determina las funciones que estarán disponibles. Si no dispone de cuenta profesional ni de empresa, podrá crear solo una publicación. (Si elimina la publicación, puede crear otra nueva). También puede acceder a las publicaciones que los editores compartan con usted.
4 Haga clic en Nuevo para crear una publicación nueva. Especifique un nombre de publicación, como "Tutorial" y haga clic en OK.
Creación de una publicación nueva
A continuación, cree un documento nuevo y añádalo como artículo.
5 Cree un documento con orientación horizontal de 1024 x 768 y guárdelo como "test wide.indd". Añada texto o gráficos.
No es necesario guardar documentos con los sufijos _h y _v a menos que desee importarlos.
6 En el panel Folio Builder, haga clic en Nuevo para crear un artículo. Especifique el nombre del artículo, por ejemplo "test" y haga clic en OK.
El artículo se carga en el espacio de trabajo de publicaciones en la web. 7 Haga doble clic en el artículo "test".
Observe que solo aparece la maquetación en horizontal.
8 Cree un documento con orientación vertical de 1024 x 768 y guárdelo como "test tall.indd". Añada texto o gráficos. 9 En el panel Folio Builder, compruebe que está en la vista de maquetación y haga clic en Nuevo para añadir la
orientación vertical.
La vista de maquetación incluirá ahora ambas orientaciones: horizontal y vertical. Cambio de las propiedades de las publicaciones y artículos
El panel Folio Builder incluye tres vistas: publicaciones, artículos y maquetación. 1 Pruebe a navegar por las tres vistas del panel.
Para navegar, haga clic en los elementos que aparecen bajo la pestaña Folio Builder. En la vista de maquetación, haga clic en la flecha para volver a la vista de publicaciones, o haga clic en el nombre de la publicación para volver a la vista de artículos.
Haga doble clic en los nombres del artículo y la publicación para ver toda la información.
2 Haga clic en la flecha para volver a la vista de publicación. Seleccione la publicación y en el panel Folio Builder elija Propiedades.
3 Especifique un nombre de documento, como "Sample Folio".
El nombre del documento es distinto del nombre de la publicación. El nombre del documento es el que aparece en el visor. El nombre de la publicación aparece en el panel Folio Builder y en Folio Producer.
Cuadro de diálogo Propiedades de la publicación
4 Especifique las imágenes para la vista previa de portada y haga clic en OK.
La vista previa de portada aparece en la biblioteca del visor. Con las herramientas anteriores, Content Bundler generaba la portada a partir de la primera página de la primera pila. En el nuevo flujo de trabajo, puede especificar las imágenes de la portada. Las vistas previas de portada son necesarias para publicar la aplicación.
5 En el panel Folio Builder, haga doble clic en la publicación. Seleccione el artículo de prueba y elija Propiedades en el menú del panel Folio Builder.
Observe que el cuadro de diálogo Propiedades del artículo incluye un campo Título. El título de artículo aparece en el visor. El nombre del artículo aparece en el panel Folio Builder y en Folio Producer. Cuando cree vínculos a otros artículos, use el nombre del artículo, no el título del artículo.
Cuadro de diálogo Propiedades del artículo
6 Especifique las propiedades del artículo y haga clic en OK. Vista previa de un artículo
Puede generar la vista previa de artículos y publicaciones usando el visor del equipo de escritorio Desktop Viewer o Adobe Content Viewer en el caso de un dispositivo móvil.
1 Seleccione el artículo de prueba y haga clic en Vista previa.
Desktop Viewer muestra el artículo. Puede pulsar Ctrl/Comando+ R para rotar la imagen. 2 Salga de Desktop Viewer.
3 Para obtener una vista previa de la publicación en dispositivos móviles como un iPad, instale Adobe Content Viewer en el dispositivo e inicie sesión utilizando el mismo ID de Adobe utilizado para iniciar sesión en el panel Folio Builder. Asegúrese de que el dispositivo está conectado a Internet.
Importación de artículos
Ha creado un artículo abriendo el documento de origen y haciendo clic en Nuevo. Existe un método más apropiado que consiste en importar artículos. Puede importar uno o varios artículos si utiliza la estructura de carpetas y las convenciones de nombre de archivo necesarias. Para la importación, cada carpeta de artículos debe contener documentos de InDesign con los sufijos _v o _h para indicar si tienen maquetación en vertical u horizontal. Cuando importe un artículo, trabaje con una carpeta de artículos. Cuando importe varios artículos, trabaje con la carpeta de publicaciones.
Nota: antes de importar artículos, abra los documentos de origen en la carpeta TutorialAssets para asegurarse de que todos los vínculos están actualizados y los archivos guardados. Consulte “Configuración de tutoriales” en la página 1.
1 En la vista de artículos, seleccione Importar en el menú del panel Folio Builder. 2 Para el nombre de artículo, escriba Meridien Ad
3 Haga clic en el icono de la carpeta Ubicación y vaya a la carpeta TutorialAssets > Meridien_Folio > WiFi_Ad. Haga clic en Abrir.
Importación de un único artículo
4 Haga clic en OK para importar y cargar el artículo.
A continuación, importe una publicación completa. Si se importa una publicación completa, cada subcarpeta de la carpeta de publicación se importa como un artículo individual.
5 En la vista de artículos, seleccione Importar en el menú del panel Folio Builder. 6 Seleccione Importar varios artículos.
7 Haga clic en el icono de la carpeta Ubicación y vaya a TutorialAssets > CityGuide_Folio. Haga clic en Abrir. 8 Haga clic en OK para importar los artículos en la carpeta de publicación.
Los artículos se han importado. Si la carpeta de publicación incluye un archivo sidecar.xml, las propiedades del artículo se completan automáticamente.
9 Vaya a la vista de publicación, seleccione la publicación de tutorial y haga clic en Vista previa.
Si edita el documento de origen de un artículo, los cambios no se reflejan en la vista previa hasta que actualice el artículo. Seleccione el artículo de prueba y elija Actualizar en el panel Folio Builder.
Para editar publicaciones, en el cliente web inicie sesión en http://digitalpublishing.acrobat.com. Si tiene una suscripción a DPS, puede usar Folio Producer para realizar publicaciones y puede usar Viewer Builder para crear aplicaciones de visor personalizadas.
Para eliminar la publicación y todos sus artículos, seleccione la publicación en el panel Folio Builder y haga clic en el botón Papelera.
Tutorial 2: Creación de una publicación
En este tutorial, creará una publicación y un artículo, generará la vista previa en un equipo de escritorio y, a
continuación, en un iPad. Al final de esta lección, podrá ver la apariencia del archivo de la página resultante en un iPad.
Apariencia de una publicación completa en un iPad
A. Vista horizontal B. Vista vertical A
Creación de una publicación y un artículo
Una publicación es una colección de artículos digitales. Cuando crea una publicación, se crea un espacio de trabajo en la web.
En este tutorial, abrirá documentos independientes diseñados para maquetaciones en vertical y horizontal. Al crear dos maquetaciones para cada artículo, los usuarios pueden girar el iPad para ver contenido similar en una orientación distinta.
1 Elija Ventana > Extensiones > Folio Builder.
2 Haga clic en Iniciar sesión y, a continuación, use un ID verificado de Adobe para iniciar sesión. Si no tiene ID de Adobe, puede crearlo en www.adobe.com/cfusion/membership.
3 Haga clic en Nuevo para crear una publicación nueva. Para el nombre de la publicación, escriba City Guide y haga clic en OK.
Creación de una publicación
A continuación, creará un artículo a partir de un documento abierto de InDesign.
4 Si aún no lo ha hecho, descomprima el archivo TutorialAssets (.zip) y busque la carpeta Meridien_Folio. Consulte “Configuración de tutoriales” en la página 1.
5 En InDesign , abra los archivos WiFi_h.indd y WiFi_v.indd ubicados en la carpeta WiFi_Article. Si se le solicita, actualice los vínculos y guarde los archivos.
Estos dos documentos serán los archivos de origen para las maquetaciones en horizontal y vertical del artículo que vaya a crear.
6 En el panel Folio Builder, haga clic en Nuevo para crear un artículo nuevo. Para el nombre del artículo, escriba WiFi Ad y haga clic en OK.
Adición de un artículo a una publicación
El nombre del artículo aparece en el panel Folio Builder. La información del artículo se carga en el espacio de trabajo de publicaciones en la web.
7 En el panel Folio Builder, haga doble clic en el artículo WiFi Ad.
Observe que solo aparece una maquetación en la vista de maquetación. Debe añadir la segunda maquetación. 8 Active el otro documento WiFi y haga clic en Nuevo en la vista de maquetación para añadir la segunda
maquetación.
Documentos en horizontal y vertical añadidos como maquetaciones
9 Cierre los archivos WiFi en InDesign. Cambio de las propiedades de un artículo
La vista de publicaciones (izquierda), artículos (centro) y maquetación (derecha)
1 En el panel Folio Builder, pruebe a navegar por las tres vistas del panel.
Para navegar, haga clic en los elementos que aparecen bajo la pestaña Folio Builder. En la vista de maquetación, haga clic en la flecha para volver a la vista de publicaciones, o haga clic en el nombre de la publicación para volver a la vista de artículos.
Haga doble clic en los nombres del artículo y la publicación para ver toda la información.
2 En el panel Folio Builder, haga doble clic en la publicación City Guide. Seleccione el artículo WiFi Ad y elija Propiedades en el menú del panel Folio Builder.
Al cambiar las propiedades del artículo, determinará su apariencia en el visor.
Observe que el cuadro de diálogo Propiedades del artículo incluye un campo Título. El título de artículo aparece en el visor. El nombre del artículo aparece en el panel Folio Builder y en Folio Producer. Cuando cree vínculos a otros artículos, use el nombre del artículo, no el título del artículo.
Cuadro de diálogo Propiedades del artículo
3 Para el título, escriba, Meridien Ad, seleccione la opción Anuncio, especifique otros metadatos, y haga clic en OK. Al seleccionar Anuncio, el artículo no aparece en el índice de contenidos del visor.
Vista previa del artículo con Desktop Viewer
Puede obtener una vista previa de los artículos y de las publicaciones usando Adobe Content Viewer for Desktop (también llamado "Desktop Viewer") o con Adobe Content Viewer en un dispositivo móvil.
1 Seleccione el artículo de prueba y haga clic en Vista previa. 2 Pulse Ctrl/Comando+R para cambiar la orientación.
3 Salga de Adobe Content Viewer.
También puede generar una vista previa de la publicación en un dispositivo móvil como un iPad iniciando sesión en Adobe Content Viewer con el mismo ID de Adobe introducido para conectarse al panel de Folio Builder. Hará eso en la siguiente lección.
Tutorial 3: Adición de elementos interactivos
A lo largo de este tutorial, trabajará con la carpeta CityGuide_Folio de la carpeta TutorialAssets. Creará objetos interactivos directamente en InDesign. A continuación se muestra la apariencia que debería tener la primera página del artículo principal en el iPad al finalizar esta lección.
Apariencia de una publicación completa en un iPad
A. Vista horizontal B. Vista vertical C. Hipervínculos D. Superposiciones de vídeo
Si aún no lo ha hecho, descargue los archivos del tutorial. Consulte “Configuración de tutoriales” en la página 1. Importación de artículos
En la lección anterior, creó un artículo abriendo el documento de origen y haciendo clic en Nuevo. Existe un método mejor que consiste en importar artículos. Si usa las convenciones de nombre de archivo y estructura de carpetas correctas, puede importar uno o varios artículos.
A
B
Cuando importe un artículo, trabaje con una carpeta de artículos. Cuando importe varios artículos, trabaje con la carpeta de publicaciones.
1 Antes de importar artículos, abra los documentos de origen de la carpeta TutorialAssets > CityGuide_Folio para asegurarse de que todos los vínculos están actualizados y los archivos guardados.
2 Vaya a la vista de artículo y seleccione Importar en el menú del panel Folio Builder. 3 Seleccione Importar varios artículos.
4 Haga clic en el icono de la carpeta Ubicación y vaya a TutorialAssets > CityGuide_Folio. Haga clic en Abrir. Seleccione la carpeta CityGuide_Folio, no una subcarpeta.
5 Haga clic en OK para importar los artículos de la carpeta CityGuide_Folio y cárguelos al servidor.
El panel Folio Builder tras importar los artículos
Cambio de propiedades de la publicación
1 En el panel Folio Builder, haga clic en el icono de flecha para volver a la vista de publicaciones. Seleccione la publicación City Guide y en el panel Folio Builder, seleccione Propiedades.
2 Para el nombre del documento, escriba City Guide Monthly.
El nombre del documento es distinto del nombre de la publicación. El nombre del documento aparece en el visor. El nombre de la publicación aparece en el panel Folio Builder y en el cliente web Folio Producer.
3 Para las imágenes de Vista previa de portada, especifique Cover_v.jpg para vertical y Cover_h.jpg para horizontal y haga clic en OK. Estas imágenes de portada aparecen en la carpeta CityGuide_Folio.
La vista previa de portada aparece en la biblioteca del visor. Las vistas previas de portada son necesarias para publicar la aplicación.
Cuadro de diálogo Propiedades de la publicación
Adición de un hipervínculo interactivo
Ahora editará los documentos Enjoy para incluir objetos interactivos.
InDesign incluye muchas características interactivas. Sin embargo, solo algunas funcionan con las herramientas de publicación digital. Además de las características originales compatibles, el panel Overlay Creator incluye las superposiciones interactivas que solo funcionan con las herramientas de publicación digital.
En primer lugar, cree un objeto de hipervínculo para el logotipo “D. I. Y. Meet”.
1 En el panel Folio Builder, vaya a la vista de maquetación de Enjoy_Article y haga doble clic en Maquetación vertical para abrir Enjoy_v.indd.
2 Seleccione la herramienta Rectángulo de la barra de herramientas y, a continuación, arrastre un rectángulo sobre el logotipo "D. I. Y. Meet" de la primera página. Asegúrese de que el rectángulo no tiene ningún trazo ni relleno. 3 Abra el panel Hipervínculos (elija Ventana > Interactivo > Hipervínculos) y, a continuación, elija Nuevo
hipervínculo en el menú del panel.
4 Seleccione URL en el menú Vincular a, y escriba una dirección URL en el campo URL (hemos utilizado http://www.bikeworks.org/). Anule la selección de Destino de hipervínculo compartido. En Apariencia, deje seleccionados Rectángulo invisible y Ninguno. Haga clic en OK.
Aplicación de un hipervínculo a un marco rectangular
5 En el panel Folio Builder, haga doble clic en Maquetación horizontal para abrir el documento Enjoy_h.indd. Copie el objeto de hipervínculo del archivo Enjoy_v.indd y péguelo en el archivo Enjoy_h.indd. Coloque el objeto sobre el logotipo "D.I.Y. Meet".
6 Para generar rápidamente la vista previa del documento, guarde el documento y seleccione Archivo > Vista previa de la publicación. Haga clic en el hipervínculo. Salga de Adobe Content Viewer.
De forma predeterminada, los hipervínculos se abren en un visor de la aplicación, no en el navegador del dispositivo móvil. Puede usar el panel Overlay Creator para cambiar la configuración de forma que los hipervínculos se abran en un sitio web en el navegador Safari del dispositivo móvil. Aprenderá más acerca del panel Overlay Creator a continuación.
Creación de una superposición de película
Las películas que añada a un documento de InDesign pasan a ser interactivas al compilar los archivos. Añadirá el vídeo y después usará el panel Overlay Creator para cambiar la configuración. Añadiremos una película sobre ciclismo. 1 En el archivo Enjoy_h.indd, seleccione Archivo > Colocar, busque la carpeta GityGuid_Folio > Enjoy_Article >
Vínculos y haga doble clic en cycling_432x234.mpg. Coloque el archivo de película en la esquina superior derecha. Los diseñadores han creado una imagen de vídeo con un icono de película para indicar que el objeto es interactivo. A continuación, usará esa imagen como póster.
2 En el panel Multimedia (Ventana > Interactivo > Multimedia), seleccione Elegir imagen en el menú emergente Póster. En la carpeta CityGuide_Folio > Enjoy_Article > Vínculos, haga doble clic en cyclist.jpg.
Aparece la nueva imagen de póster. Ahora, usaremos el panel Overlay Creator para determinar cómo se reproducirá la película.
3 Seleccione Ventana > Extensiones > Overlay Creator para abrir el panel Overlay Creator.
Uso de Overlay Creator para editar la configuración de la película
5 Con la herramienta Selección, copie la imagen, cambie a Enjoy_v.indd y péguela. Vaya al área vacía de la primera página y alinéela con los objetos del entorno.
6 Para generar la vista previa de la película, guarde el documento y seleccione Archivo > Vista previa de la publicación. Haga clic en la película para reproducirla. Salga de Adobe Content Viewer.
Creación de una superposición de proyección de diapositivas
A continuación, crearemos una proyección de diapositivas interactiva con el panel Estados de objeto. Ya hemos añadido las imágenes a la segunda página del archivo vertical "Enjoy". Deberá organizarlas en una pila, convertirlas en un objeto de varios estados y crear botones de desplazamiento por las diapositivas.
1 Abra Enjoy_v.indd en InDesign , y vaya a la página 2.
2 Seleccione las siete imágenes entre las flechas rojas y, a continuación, haga clic en los botones Alinear centros horizontales y Alinear centros verticales del panel de control. Centre las imágenes entre las flechas.
3 Con las imágenes aún seleccionadas, elija Ventana > Interactivo > Estados de objeto para mostrar el panel Estados de objeto. Haga clic en el botón Convertir selección en objeto de varios estados.
Imágenes combinadas en un objeto de varios estados
Cada imagen aparece como un estado independiente en el panel Estados de objeto. 4 En el panel Estados de objeto, cambie el nombre de objeto a Sea Slugs.
Cuando el iPad se gira, el estado se recuerda si los objetos de varios estados de los documentos horizontales y verticales tienen el mismo nombre. Ahora que ha creado el objeto de varios estados, debe habilitar el desplazamiento de los usuarios a través de ellos.
5 Elija Ventana > Interactivo > Botones para mostrar el panel Botones y, a continuación, seleccione la flecha roja de la izquierda.
6 Haga clic en Convertir el objeto en un botón y, a continuación, elija Ir al estado anterior desde el icono de siguiente junto a Acciones.
Creación de los botones de navegación
A continuación, haremos que el aspecto del botón cambie ligeramente cuando el usuario lo toque.
7 En el panel Botones, haga clic en la apariencia [Clic] y, a continuación, en el icono Sombra paralela del panel de control.
8 Seleccione la flecha roja de la derecha, conviértala en un botón y aplique la acción Ir al siguiente estado. Aplique una sombra paralela a la apariencia [Clic].
Los botones permiten a los usuarios pasar de una imagen a otra. Hagamos también que sirvan para pasar de una diapositiva a otra.
Activación del barrido para la proyección de diapositivas
10Copie las flechas y el objeto de varios estados del archivo Enjoy_v. indd y péguelos en la página 2 del archivo Enjoy_h.indd. Mueva las flechas bajo el objeto de varios estados para un mejor ajuste.
11Para generar la vista previa de la proyección de diapositivas, guarde el documento y seleccione Archivo > Vista previa de la publicación. Haga clic en los botones de navegación para cambiar de diapositivas. Salga de Adobe Content Viewer.
Creación de una superposición de panorámica
Las panorámicas requieren seis imágenes; cada una representa el lado de un cubo. 1 Abra Enjoy_v.indd y vaya a la página 3.
2 En el cuadro de herramientas, seleccione la herramienta Marco rectangular y arrastre para crear un rectángulo de cualquier tamaño.
3 En el panel Overlay Creator, seleccione Panorama.
4 Haga clic en la carpeta de origen y seleccione la carpeta CourtyardPano en la carpeta CityGuide_Folio > Enjoy_Article > Vínculos. Haga clic en Abrir.
El rectángulo marcador de posición ha tomado la forma de las imágenes panorámicas, pero nos interesa que el área de clic sea más pequeña.
5 Con las teclas Ctrl+Mayús (Windows) o Comando+Mayús (Mac OS) pulsadas, arrastre una selección para cambiar el tamaño del objeto de panorámica hasta que alcance aproximadamente 400 x 400 píxeles.
Creación de una superposición de panorámica
Usemos la configuración predeterminada para que la panorámica tenga un rango de movimiento completo. 6 Copie el objeto de panorámica del archivo Enjoy_v. indd y péguelos en la página 3 del archivo Enjoy_h.indd. 7 Guarde y cierre los archivos de InDesign.
Actualización y vista previa de los archivos
Ahora que ha añadido superposiciones interactivas a los documentos de origen de InDesign, ya puede generar la vista previa de los archivos en un dispositivo móvil. Antes de generar la vista previa de los archivos en un iPad, cargue los artículos.
1 En Folio Builder, vaya a la vista Artículos y seleccione Enjoy_Article. Elija Actualizar en el menú del panel Folio Builder.
Los componentes de los objetos interactivos se cargan en el servidor.
2 Si no lo ha hecho aún, instale Adobe Content Viewer desde App Store en el iPad o desde iTunes Store.
Nota: si tiene otro dispositivo móvil, como un tablet Android o BlackBerry PlayBook, puede descargar Adobe Content Viewer desde Android Market o App World.
3 Conecte el iPad a su ordenador y sincronice el dispositivo para que la aplicación Adobe Content Viewer aparezca tanto en iTunes como en su iPad.
La aplicación aparece en el iPad como "Adobe Viewer". 4 En su iPad, inicie el visor.
Para descargar la publicación, el iPad debe estar conectado a Internet.
5 Si aún no ha iniciado sesión, toque el botón Iniciar sesión. Si no ve el botón Iniciar sesión, toque la publicación y a continuación el botón Inicio en la esquina superior izquierda para ver la biblioteca. Inicie sesión con la misma información de ID de Adobe que ha utilizado para iniciar sesión en Content Bundler.
El iPad debe estar conectado a Internet para poder conectarse.
6 Cuando se le solicite, descargue y visualice la publicación City Guide Magazine.
• Gire el iPad, de forma que pueda ver las versiones horizontales y verticales del archivo.
• Haga un gesto de barrido hacia la izquierda o derecha para ver artículos diferentes. Haga un gesto de barrido hacia arriba o abajo para leer un artículo.
• Busque el artículo Enjoy. Compruebe que las superposiciones interactivas funcionan.
• Toque un área no interactiva para mostrar las barras de navegación y toque el botón de inicio para ir al principio de la publicación. Toque el botón de tabla de contenidos, situado en la esquina superior izquierda para ver la tabla de contenidos y las miniaturas. Toque el botón de examinar, situado en la esquina superior derecha para obtener una vista elevada de la publicación con la descripción de metadatos que ha añadido. Deslice la barra de desplazamiento para navegar por las vistas previas del artículo.
Adobe Viewer
A. Botón de inicio B. Botón de retroceso C. Botón de tabla de contenidos D. Botón de exploración E. Barra de desplazamiento
A B C D
