En este tutorial vamos a crear una App desde cero y la podrás descargar y probar en tu propio dispositivo móvil.
Paso 1:
Creamos el proyecto
- En tu escritorio, crea la carpeta principal del proyecto con el nombre: «MiApp»
- Ahora, dentro de la carpeta «MiApp», crea una carpeta con el nombre «Libraries»:
En esta carpeta es donde guardaremos siempre los documentos InDesgin y todos los recursos que usemos para maquetar: imágenes, videos, audios, etc.
Todos los proyectos que desarrolles con 480interactive tendrán siempre esta misma estructura de carpetas:
Esta es la estructura que tendrán todos tus proyectos. Solo cambiarás el nombre “MiApp” por el nombre que tú quieras darle al proyecto.
Paso 2:
Descarga esta plantilla InDesign y guárdala dentro de la carpeta “Libraries”.
- Descarga la plantilla Aquí
- Descomprime el archivo Guia_interactiva.zip que has descargado.
- Verás una carpeta que contiene un archivo InDesign y sus links:
- Un archivo de InDesign CS6
- Un archivo indesign .idml (compatible con versiones anteriores a la CS6)
- Una carpeta con los vínculos del fichero inDesign.
- Selecciona todo y guárdalo dentro de la carpeta «Libraries» que has creado en el Paso 1.
Consejo para todos los nuevos proyectos que crees en el futuro:
En la carpeta “Libraries” siempre se guarda el archivo InDesign y sus vinculos.
Paso 3:
Abre el archivo InDesign que acabas de dejar en “Libraries”
- Si tienes InDesign CS6 o superior: Abre el archivo “Guia_interactiva.indd”
- Si tienes una versión anterior de InDesign, abre el archivo compatible con versiones anteriores “Guia_interactiva.idml”
- Verás un documento de 11 páginas que ya está maquetado y con interactividad. El documento tiene un tamaño de 1.136×640px, que es el tamaño de pantalla de un iPhone 5.
- No hace falta que toques nada en este InDesign, en el siguiente tutorial te explicaremos cómo lo hemos hecho.
- Ahora simplemente vamos a ver cómo convertir este archivo InDesign en una App.
Paso 4:
Convierte el documento InDesign en Issue
“Issue” es un 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.
- Guarda el archivo InDesign: Archivo>Guardar.
*Si está usando el archivo InDesign .idml, te preguntará donde guardarlo. Sobreescribe el que ya tienes abierto. MiApp>Libraries>Guia_interactiva.idml - Abre el panel «Scripts» de InDesign. Este panel está en «Ventana» ⇒ «Utilidades» ⇒ «Scripts»
- El script se llama «480i Script.jsx», haz doble clic sobre él.
- Se abrirá un cuadro como este:
- Pulsa el botón «Convertir en Issue».
- Cuando finalice la exportación, pulsa Aceptar.
Paso 5:
Crea la App con 480i Manager
Ver detalle del paso 5
- Abre el programa 480i Manager en tu ordenador e introduce tu usuario
de 480interactive. Si todavía no tienes usuario, crea uno gratis
en el formulario de la izquierda.
Cuando termines el login se abrirá un asistente que te guiará para crear la App:
Primero creamos la Aplicación:
- Selecciona la opción «Nueva Aplicación».
- En la siguiente pantalla seleccionamos el tipo de App que queremos crear. En este tutorial vamos a elegir «App Single».
- En la siguiente pantalla vamos a
seleccionar la ubicación del proyecto. Pulsa el botón “Elegir
ubicación” para que se abra el explorador:
Buscamos la carpeta «MiApp» que hemos creado en el paso 1 y la seleccionamos.
- Pulsamos en el botón «Siguiente» para continuar
Ahora que hemos creado la App, vamos a introducir las publicaciones o Issues que hemos creado desde InDesign. En este punto siempre tendremos tres opciones:
- Añadir un Pdf.
- Añadir un Issue (Esta es la opción que vamos a seleccionar ahora)
- Añadir un Issue en horizontal y otro en vertical (doble orientación)
En este caso pulsamos sobre la opción del medio: «Issue».
Se abrirá una ventana para elegir el «Issue» que hemos creado desde InDesign. Pondrá “Guia_interactiva”, haz clic encima y luego pulsa el botón «Seleccionar».
- Nos llevará a la última pantalla y pulsamos “Finalizar”.
A continuación vamos a enviar el proyecto a nuestro dispositivo móvil: Pulsa en “Exportar App”
Al exportar se abrirá un asistente para enlazar tu smartphone o
tablet con tu ordenador. Abre la App “480i Viewer” en tu smartphone o
tablet y sigue los pasos del asistente.
Una vez has enlazado tu smartphone, ya puedes abrir el proyecto:
Paso 6
¿Cómo volver a abrir un proyecto en 480interactive?
Ver detalle del paso 6
Abrir un proyecto ya creado
Si otro día quieres volver a usar el mismo proyecto, no es necesario que sigas todos los pasos anteriores. Simplemente, tienes que abrir el proyecto creado.
Al abrir 480i Manager verás una ventana como esta:
Elige “Abrir Aplicación”.
Por defecto, se mostrara la carpeta del último poryecto que has usado. Si no es el proyecto que quieres abrir, busca la carpeta del proyecto deseado.
Dentro de la carpeta de proyecto verás un fichero llamado “library.xml”. Siempre se mostrará únicamente ese fichero para que no puedas abrir otro por error.
Selecciona el fichero y pulsa el botón “Abrir”.
Continúa con tu aprendizaje
| Caso práctico: App de Catálogos interactivos | Ver tutorial |
| Caso práctico: Apps de Revista interactiva | Ver tutorial (disponible el 15 de marzo) |
| Caso práctico: App para eventos | Ver tutorial |
| Empieza un proyecto desde cero: Plantilla InDesign | Ver tutorial |
