Crea tu App en 10 minutos con InDesign y 480interactive

En este tutorial vas a aprender a convertir documentos InDesign en Apps para iPad, iPhone y tablets y Smartphones Android.

banner-fans

A partir de hoy serás capaz de crear Apps de revistas interactivas, catálogos, cómics, presentaciones corporativas, apps de eventos, etc. Todo ello sin programar absolutamente nada, solo necesitas tus conocimientos de diseño, el programa Adobe InDesgin, y el software gratuito 480interactive, que convierte automáticamente los documentos InDesign en Apps.

 

Empieza con los tres primeros pasos:

Comprueba que tienes instalado Adobe InDesign en tu ordenador.

Versiones Recomendadas:

CS5.5, CS6, CC

Descarga 480interactive:

El software gratuito para convertir documentos InDesign en Apps

Instala 480interactive en tu ordenador PC o MAC

Para finalizar, descarga esta plantilla de InDesign con el caso práctico que vamos a convertir en App:

Descargar Plantilla

Empezamos:

Paso 1: Crear las carpetas donde vas a guardar el proyecto App

Todos los proyectos InDesign que quieras convertir en App con 480interactive, tendrán siempre la misma estructura de carpetas:

Una carpeta principal (con el nombre que tu quieras),  y dentro de ella otras dos carpetas que se llaman «Libraries» e «Issue».

En este caso práctico, vamos a crear las carpetas así:

  1. En el escritorio, crea la carpeta principal del proyecto con el nombre: «Test Single»
  2. Dentro de la carpeta «Test Single» creamos estas dos carpetas:
    • Carpeta con el nombre «Libraries». Esta es la carpeta donde guardaremos el archivo de InDesgin y todos los recursos que usemos para maquetar:  imágenes, videos, sonidos, etc.
    • Carpeta con el nombre «Issue». Esta es la carpeta donde guardaremos más adelante la exportación que haremos del documento InDesgin convertido en una publicación interactiva para tablets y smartphones.

    Esta es la estructura que tendrán todos tus proyectos. Solo cambiarás el nombre “Test Single” por el nombre del proyecto que quieras.

Paso 2: Guarda dentro de la carpeta “Libraries” la demo que has descargado al inicio.

Descomprime el archivo Demo1_480i.zip que has descargado; Encontrarás un archivo de InDesign CS6, un archivo indesign .idml (compatible con versiones anteriores a la CS6) y una carpeta con Links. Coge todo y guárdalo dentro de  la carpeta «Libraries» que has creado antes.

Esto te servirá para todos los proyectos App que crees con 480interactive. En la carpeta “Libraries” siempre se guarda el archivo InDesign y los Links del proyecto.

Paso 3: Abre el archivo InDesign

Abre el archivo “Demo1_480i.indd” si tienes InDesign CS6.

Si tienes una versión anterior de InDesign, abre el archivo compatible con versiones anteriores “Demo1_480i.idml”

  1. Es un documento a tamaño 1024px de ancho por 768px de alto, que es el tamaño de una pantalla de iPad horizontal.
  2. Verás que consta de dos páginas que hemos maquetado con texto e imágenes.
  3. No hace falta que toques nada, ahora simplemente vamos a ver cómo convertir este archivo InDesign en App.
  4. Guarda el archivo InDesign. Archivo>Guardar.

Paso 4: Convierte el documento InDesign en Issue (Issue=formato compatible con tablets y smartphones)

En este paso vamos a guardar el documento InDesign en un formato especial al que llamamos «Issue», no te preocupes, esto es mucho más fácil que guardarlo como PDF.

Para este paso usaremos el plugin «480i Script» en InDesign:

  1. Abre el panel «Scripts» de InDesign. Este panel está en «Ventana» ⇒ «Utilidades» ⇒ «Scripts»
  2. Inicia el script que preparaste durante el proceso de instalación haciendo clic sobre él. Recuerda que el script se llama «480i Suite.jsx».
  3. Se abrirá un cuadro como este:
    Captura de pantalla 2014-07-17 a la(s) 18.40.07
  4. En el campo «Nombre» pon por ejemplo: «Mi App».
  5. En el campo «Carpeta de destino» elige la carpeta «Issue» que has creado antes dentro de la carpeta «Test Single».
  6. En el campo «Páginas» selecciona «Todas».
  7. Pulsa el botón «Convertir en Issue».
  8. Cuando finalice la exportación, pulsa Aceptar.

Paso 5:  Crear la App

Una vez tienes tu documento InDesign convertido a Issue, podemos crear la App y pre-visualizar el resultado final:

  1. Abre la aplicación 480i Manager en tu ordenador. Se abrirá un asistente que te guiará en todo el proceso para crear la App.
  2. Selecciona la opción «Nueva Aplicación».
    Captura de pantalla 2014-07-17 a la(s) 18.32.15
  3. Selecciona «Single Issue App».
    Asistente
  4. En este paso tenemos que seleccionar la carpeta que hemos creado para el proyecto; en este caso la carpeta «Test Single». Pulsa el botón de ubicación para que se abra el explorador y buscamos la carpeta «Test Single» que hemos creado en el escritorio. No hay que entrar dentro de la carpeta, solo seleccionarla como se muestra en la imagen:
    Seleccionar-ubicación-app
  5. Pulsamos «Abrir» y veremos que el programa coge automáticamente el nombre de la carpeta como «Nombre de la aplicación», si quieres puedes cambiar el nombre, pero en este caso lo vamos a dejar así.
  6. Pulsamos «Siguiente»
  7. En este paso tenemos que añadir la «Issue» que hemos exportado desde InDesign. Siempre tendremos tres opciones:
    • Añadir un Pdf.
    • Añadir una exportación de InDesgin (Issue) <Esta es la opción que vamos a seleccionar ahora>.
    • Añadir una exportación de InDesign en horizontal y otra en vertical (doble orientación)<Cuando queramos hacer que el contenido de la App cambie cuando giremos el iPad>.

    En este caso elegimos la opción del medio: «InDesign».

  8. Se abrirá una ventana para elegir la «Issue».  Pondrá “Mi App”, selecciónala haciendo un clic sobre ella y pulsa el botón «Seleccionar».
    crear app con indesign
  9. En selección «Tipo de Navegación» elegimos «Horizontal» ya que el diseño de InDesign era horizontal.
    Elegir orientación
  10. En la siguiente pantalla vemos que el programa ha cogido el nombre que hemos puesto antes en InDesign: «Mi App».
  11. Pulsamos «Siguiente» y llegamos al paso donde ya podemos pre-visualizar el proyecto en el ordenador o enviarlo al iPad.
    Previsualizar_ordenador
  12. Pulsaremos «Previsualizar en ordenador».
  13. Se generará toda la App  y  se abrirá automáticamente el navegador de tu ordenador  para visualizar cómo ha quedado.
    Simulador
  14. Para enviar el proyecto al iPad o tablet, necesitamos tener instalado la App «480i Viewer» en nuestro dispositivo móvil, disponible en App Store o Google Play. Mira este tutorial para ver cómo hacerlo.

6 thoughts on “Crea tu App en 10 minutos con InDesign y 480interactive

  1. Cesar dice:

    Buen día

    Este procedimiento me permite subir apps a las tiendas de iOS o Android? y en diferentes resoluciones de pantalla?

  2. Hola César,

    Sí, puedes publicar en App Store y Google Play. Solo necesitas contratar un de estos planes: http://www.480interactive.com/planes-de-precios-2015/

    También puedes hacerlo en diferentes resoluciones de pantalla. Saludos!

  3. Adrián dice:

    Hoa amigos, su ayuda por favor, en el paso 4 no me aparece el script de 480i Suite.jsx, que tengo que hacer para que se me visualice, muchas gracias

  4. Hola Adrián. Necesitamos que escribas de nuevo esta misma duda en nuestro foro de soporte para que unos de nuestros técnicos pueda ayudarte. Aquí tienes el enlace al foro: http://www.480interactive.com/soporte480i/forums/. Un saludo.

Leave a Comment

Your email address will not be published. Required fields are marked *