Manual del Creador de Revistas Digitales

Transcripción

1 Manual del Creador de Revistas Digitales El objetivo de este tutorial es enseñar a crear una revista digital para que pueda ser vista en ipad o Tablet Android. El editor también permite crear libros, folletos, catálogos digitales y más. También puede ver un tutorial en video Instalación del editor DigitalPaper El editor DigitalPaper es una aplicación que corre en Google Chrome. Si no tiene Chrome descárguelo acá Desde Chrome abra este link para descargar DigitalPaper (y luego clic en el botón azul + Free ). Chrome le creará un ícono de Chrome Launcher en la barra de tareas. Ábralo y haga clic en DigitalPaper. Crear la carpeta de la revista Primero necesitamos exportar desde nuestro programa de edición (ej. Adobe Indesign o Photoshop) cada página de nuestra revista en formato JPG con una resolución de 1323 x 1764 pixeles, además las páginas deben estar enumeradas con 3 dígitos desde el 001 en adelante. Pruebe a guardar los JPG con una calidad de 95% (número 8 en Photoshop) para que la revista no quede muy pesada (recomendamos estar bajo 100 Mb). Para este tutorial parta con algunas páginas para probar. Luego necesitamos crear una carpeta que almacenará los contenidos de nuestra revista. Copie a esta carpeta las imágenes que corresponden a las páginas de nuestra revista. Más abajo se ve un ejemplo de la creación de la revista BuenaSalud y cómo se verá la carpeta de nuestra revista una vez que terminemos este tutorial.

2 Una vez que abrimos la aplicación, nos vamos a encontrar con esta primera pantalla que le va a pedir seleccionar la carpeta en dónde está la revista con las imágenes correspondientes a las páginas que agregamos. Una vez abierta la revista, le va a parecer la barra de herramientas: Este botón nos permite guardar la revista Este es el botón para cerrar la revista Con este botón podemos revisar los iconos que tenga la revista

3 Con este botón se revisan las configuraciones Con este botón de revisan los créditos Con este seleccionador podemos elegir la página que queremos ver Estas son las herramientas de desplazamiento y zoom Estos botones nos permiten crear zonas interactivas Estos botones nos permiten crear y editar animaciones Zonas Interactivas Las zonas son secciones de una página que permiten que el usuario tenga interacción con el contenido, hay 4 tipos de zonas. La primera opción es saltar a una página nos permite crear un vínculo interno a cualquiera de las páginas de la revista, para crear un índice por ejemplo. El segundo tipo nos permite crear un vínculo a un sitio web, introduciendo la dirección web. El tercer tipo es introducir un video de YouTube, todo lo que necesitamos es obtener el identificador del video, ya veremos cómo obtenerlo. El último tipo es la galería de imágenes.

4 Vamos a crear una zona: apretamos el botón de nueva zona, clic en cualquier parte de la página y nos da la opción de crear cualquiera de las 4 zonas. "Saltar una página" sirve para que al hacer clic en la zona, la revista se abra en otra página. Probemos a crear una zona que apunte a la página número 003. Una vez creada la zona, ésta se puede mover de posición a donde queramos que se ubique y cambiarle el tamaño para ajustarla al contenido visual. En el ejemplo de abajo necesitamos que la zona calce con el logo de la revista, por lo que hay que cambiarle el tamaño. También podemos editarla y cambiar la acción por cualquier otra acción, cambiar su destino o eliminarla si no nos gusta.

5 Para el Link a sitio externo simplemente tenemos que colocar la dirección web del sitio al que queremos dirigir al usuario. Por ejemplo Para poner un video de YouTube en nuestra revista, necesitamos obtener el identificador del video (como se ve en la foto), copiamos el identificador, luego vamos a Crear zona y lo pegamos en el campo de texto. Si hacemos clic en el ícono de Información de la zona, nos mostrará el video desde YouTube, con lo que podemos comprobar que quedó bien insertado.

6 El último tipo de zona es la galería de imágenes, pero antes de crear una galería de imágenes necesitamos agregar imágenes para nuestra galería. Volvamos a nuestra carpeta de la revista. Se han creado dos carpetas nuevas dentro: galerías y meta. En la carpeta "galerías" vamos a agregar las fotos que conformarán nuestra galería de imágenes. Aquí vemos por ejemplo, algunas imágenes de un evento que se mostrarán en la galería. Es importante que parte del nombre del archivo de las fotos sea común, por ejemplo estas fotos comparten el texto Al momento de agregar la galería, en el campo Filtro hay que poner exactamente el nombre que tienen en común y automáticamente nos va a mostrar cuales son las fotos que comparten ese nombre y que van a ser agregadas a la galería, luego de esto creamos la zona y podemos revisarla.

7 Animaciones Las animaciones son efectos que se muestran apenas el lector entra en la página. Por ejemplo, se puede hacer que el título de una página entre volando desde la izquierda. Lo primero que necesitamos es crear imágenes las cuales van a conformar las animaciones. En nuestra carpeta de la revista se creó una carpeta llamada animaciones. Aquí deben guardarse las imágenes de las animaciones. En este caso, a diferencia de la galería de imágenes, no es necesario que las imágenes compartan ningún texto, pero por un tema de orden es recomendable agregarles como prefijo el número de la página. Para partir separe algún elemento de la página en una imagen separada (por ejemplo un título o una foto) y póngale de nombre por ejemplo 001_Logo.jpg, luego cópiela a la carpeta animaciones de nuestra carpeta de revista. Vamos a crear una animación. Escribimos el nombre de la imagen que queremos usar, seleccionamos y elegimos el tipo de animación. Note que Tiempo de retraso es la cantidad de segundos que la animación se va a demorar en comenzar una vez que la página aparezca en pantalla. Esto es útil para encadenar animaciones y que se muestren una después de la otra. Siempre el lugar donde se coloque la imagen es la posición de destino, para los primeros 4 tipos de animaciones la imagen partirá desde afuera de la pantalla. Agrandar es básicamente hacer un Zoom in a la imagen y Fade in es cambiar la transparencia de la imagen hasta que aparezca.

8 Nuevamente tenemos la opción de moverla para colocarla en la posición que queremos, eliminar o modificar su tiempo de retraso o la imagen que se está usando. Podemos ver cómo se va a reproducir la animación apretando el botón de play. Para asegurarnos de poder seguir trabajando posteriormente, apretamos el botón de guardar (Lo que hace la opción de guardar es crear un archivo en nuestra carpeta que es data.amn que contiene la configuración de la revista). Configuraciones Ahora apretamos el botón de configuraciones. En la ventana se puede indicar cuál es la página índice (al hacer un solo clic en la revista aparecerá una barra abajo con un botón que permite ir al índice). La orientación nos permite definir si la revista sólo se podrá ver de forma landscape (horizontal), portrait (vertical) o ambas. Y por último, establecer si el usuario podrá hacer zoom o no. La configuración por defecto (si no se especifica nada) es que la pagina 1 de índice, se permiten ambas orientaciones y con zoom permitido.

9 Íconos Finalmente tenemos que revisar los iconos de nuestra revista. La primera imagen corresponde al ícono de la portada, este icono será mostrado en el quiosco para que el usuario escoja la revista. Estos 4 íconos corresponden a zonas interactivas: galería, salto interno, link externo y video YouTube. Se muestran cuando el usuario haga un solo clic en la página y sirven para resaltar donde hay zonas interactivas en la página. Los siguientes 3 botones corresponden a la galería de imágenes: cerrar la galería, imagen siguiente, imagen anterior. El último corresponde al ícono de índice (cuando se hace un solo clic a la página se muestra una barra abajo con un botón que te permite ir a la página índice).

10 Para modificar estos iconos tenemos que ir a nuestra carpeta de la revista y en la carpeta "meta" están nuestros iconos. Se pueden cambiar, pero es necesario respetar el tamaño de los íconos, la primera vez que se crea una revista se crean por defecto estos iconos para usarlos como guía. Probar en Dispositivo Una vez creada la revista vamos a guardar (ícono de guardar) y luego necesitamos que sea comprimida en un archivo Zip. Para probar la revista es necesario que el archivo Zip sea accesible a través de una dirección web. Si no posee un servidor para alojar el archivo, puede usar Dropbox (se descarga gratis de Dropbox.com). Si usa Dropbox, lo primero es copiar el Zip a la carpeta de Dropbox (Puede crear una carpeta nueva para organizar mejor sus revistas).

11 Debemos esperar a que el archivo se sincronice. Sabremos que el archivo está listo para ser compartido cuando tenga un ticket color verde. Una vez listo, hacemos clic derecho en el archivo y seleccionamos Share Dropbox Link. Dropbox lanzará una alerta de que el archivo ha sido compartido y que el link fue copiado al portapapeles. Para comprobar que el archivo fue correctamente compartido, abrimos el navegador de internet y pegamos la URL copiada en la barra de direcciones. Debemos llegar a una página como la siguiente: Como paso opcional, se puede utilizar un servicio acortador de URLs como bit.ly o goo.gl para hacer más simple el copiado de la URL a la aplicación de prueba. Este paso no es obligatorio, pero es recomendado para facilitar el proceso de prueba.

12 La aplicación de prueba está disponible para ipad en la itunes Store y también en Google Play para tablets con Android. Puede descargarla buscando por su nombre DigitalPaper - Previewer o desde los links: AppStore - y Google Play - Una vez descargada, abrimos la aplicación y nos encontraremos con una interfaz muy simple que nos pide ingresar la URL donde se encuentra el Zip. Si, usó Dropbox para compartir el Zip, la URL será parecida es esta: Para utilizar la URL debe cambiar la parte final y reemplazar?dl=0 por?dl=1. Con eso quedará así: Una vez ingresada la URL hacemos clic en el botón descargar. La aplicación nos mostrará el progreso de la descarga. Una vez completada la descarga, automáticamente aparecerá la portada de la revista (Es el archivo meta/icon.png de nuestra carpeta de revista), lo cual indica que el proceso fue exitoso.

13 Para probar la revista basta hacer clic en el botón Abrir, y se podrá navegar la revista tal como se verá en la aplicación final. Para volver a la pantalla inicial, basta hacer clic en la pantalla para que aparezca el menú contextual, y luego hacer clic en el botón Volver.