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 http://bit.ly/VideoCrearRevistas

Instalación del editor DigitalPaper

El editor DigitalPaper es una aplicación que corre en Google Chrome. Si no tiene Chrome

descárguelo acá https://www.google.com/chrome/

Desde Chrome abra este link para descargar DigitalPaper http://bit.ly/CreaRevista (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.

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

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.

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.

Para el Link a sitio externo simplemente tenemos que colocar la dirección web del sitio al que

queremos dirigir al usuario. Por ejemplo www.amnesiagames.cl

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.

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 “007-“. 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.

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.

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.

Í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).

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).

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.

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 - http://bit.ly/dpp-ios y Google Play - http://bit.ly/dpp-google

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:

https://www.dropbox.com/s/XXXXXXXXXXX/NuevaRevista.zip?dl=0

Para utilizar la URL debe cambiar la parte final y reemplazar ?dl=0 por ?dl=1. Con eso quedará así:

https://www.dropbox.com/s/XXXXXXXXXXX/NuevaRevista.zip?dl=1

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.

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.