Crea tu App en 10 minutos con InDesign y 480interactive

En este tutorial vamos a crear una aplicación móvil a partir de un documento de Adobe Indesign, el cual convertiremos en app gracias a 480interactive.

Realizaremos una app tipo Single o de un único contenido, la cual podremos descargar y probar en nuestro dispositivo móvil al finalizar, utilizando la app 480i Viewer.

Este será el resultado:

mockup

Paso 1: Descarga gratis el software 480interactive
Paso 2: Instala 480interactive  con este video-tutorial
Paso 3: Crea el proyecto App

1.Abre el programa 480interactive en tu ordenador y pulsa sobre el botón “Crear nueva App”.

2.Elige el nombre del proyecto. Por ejemplo “Mi App”.

3.Elige la ubicación del proyecto. Por defecto el programa elige automáticamente el espacio de trabajo donde guarda todos los proyectos.

4.Elige el tipo de App. Selecciona “App Single”.

5.Pulsa sobre el botón “Crear”.

Ya tienes la App creada, pero aún no tiene ningún contenido añadido. Lo añadirás después de convertir la plantilla de Adobe InDesign a formato Issue.

Paso 4. Descarga gratis el contenido para el caso práctico.
Paso 5: Convierte la plantilla de Adobe InDesign en formato Issue

En este paso guardaremos dentro del proyecto app los contenidos de ejemplo. Los pasos a seguir son:

1.Abre el documento InDesign (puedes usar el archivo *.indd o el archivo *.idml)

2. Dirígete al panel “Scripts” y haz doble clic en “480i Script.jsx”. (Si es la primera vez que vas a utilizar 480i Script.jsx puedes ver cómo añadirlo a Adobe InDesign en este enlace: Instalar el Script de 480interactive para InDesign )

3.Elige el nombre de la Issue. Por ejemplo “Mi App”.

4.En “Destino”, selecciona el proyecto que has creado con 480interactive.

5.Pulsa sobre “Convertir en Issue”.

6. Cuando finalice la exportación, haz clic en “Aceptar”.

Paso 6: Añade la exportación Issue de InDesign a la App

1. Regresa al programa 480interactive.

2.Selecciona “InDesign Issue” en la sección de añadir contenidos y haz clic en “Añadir”.

3.Selecciona “Una orientación”

4. Elige la exportación de InDesign que has realizado en el paso anterior.

5.Selecciona el icono de la aplicación desde el menú de “Configuración de la App”. Lo encontrarás en la carpeta de descarga de la plantilla.

El siguiente paso será añadir las imágenes animadas como “Elementos extra” a la App.

Paso 7: Exporta y previsualiza la App

1.En 480interactive, pulsa sobre “Exportar App” en la parte izquierda de la barra de menú superior y después abre la App 480i Viewer en tu dispositivo.

2.Cuando finalice la exportación se abrirá una ventana con los dispositivos que tienes añadidos para poder enviar la App a cualquiera de ellos.

3.Selecciona el dispositivo al que vas a enviar la App y pulsa el botón “Enviar” o escanea el código QR desde la aplicación 480i Viewer en tu dispositivo. (Si tienes dudas sobre este paso puedes consultar cómo hacerlo en éste tutorial: Cómo enviar mi App a mi móvil o tablet )

4.La App se añade automáticamente a 480i Viewer para que puedas probarla.

5.En 480i Viewer, pulsa el botón “Descargar” de la publicación. Al hacerlo, se convertirá en un botón “Ver/Abrir”.

6.Pulsa en “Ver/Abrir” para abrir tu aplicación y acceder a sus contenidos.

¡Enhorabuena! Ya tienes la aplicación en tu dispositivo, ahora ya puedes ver como queda realmente en tu smartphone o tablet.

Continúa con tu aprendizaje

Ahora ya sabes cómo crear una aplicación móvil de forma sencilla a partir de un documento de Adobe Indesign. Sin embargo, esto es solo el principio.

Accede a nuestra sección de plantillas o visita nuestro centro de soporte para aprender más sobre como crear tu App sin programar.

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

  1. Cesar says:

    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: https://www.480interactive.com/planes-de-precios-2015/

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

  3. Adrián says:

    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: https://www.480interactive.com/soporte480i/forums/. Un saludo.

  5. blamin says:

    Buenas noches.
    Estoy siguiendo los pasos de este documento y en el momento enviar al dispositivo con mi dispositivo y leer el código que me da me sale el mensaje siguiente:
    aplicación no disponible. haga una exportación primero. al hacer la exportacion de app me da este mensaje:
    java.lang.NullPointerException

  6. Victoria García-Barroso says:

    Hola blamin. Para poder ayudarte, necesitamos que remitas esta duda a nuestro foro de soporte para que unos de nuestros técnicos pueda ayudarte. Aquí tienes el enlace al foro: https://www.480interactive.com/soporte480i/forums/. Un saludo.

  7. oliver says:

    en el paso 2. “Dirígete al panel “Scripts” y haz doble clic en “480i Script.jsx”. (Si es la primera vez que vas a utilizar 480i Script.jsx puedes ver cómo añadirlo a Adobe InDesign en este enlace: Instalar el Script de 480interactive para InDesign )” cuando le doy doble click se queda cargando (el mouse agarra el icono de cargar ) y pues no me permite convertirlo en issue no sale ese panel ¿que hago?

  8. Hola Oliver. Hemos remitido tu duda a nuestro foro de soporte y uno de nuestro técnicos te ayudará a resolverla. Puedes ver la respuesta aquí: https://www.480interactive.com/soporte480i/forums/topic/problemas-para-convertir-en-issue/. Un saludo.

Leave a Comment

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