App para Eventos

En este tutorial veremos cómo hemos creado una App para un evento, utilizando InDesign y el software 480interactive.

Descarga gratis la plantilla InDesign:

Plantilla InDesign Descargar

 

Descarga gratis la última versión de 480interactive:

480interactive es el software para crear Apps sin programar
usando tus formatos habituales de diseño: InDesign, PDF, HTML
Descargar

 

Tiempo estimado de tutorial:

  • 15 minutos

Resultado:

  • Podrás enviar a tu móvil la App para probarla.
  • Una aplicación cuyo diseño se adaptará a cualquier dispositivo móvil
  • Un InDesign editable que podrás personalizar con tus propios diseños y contenidos.

Tutorial para instalar 480interactive en PC

Instalar Java

Para poder utilizar 480interactive, es necesario que tengas instalado Java en tu ordenador. Lo normal es que ya lo tengas, pero si todavía no lo tienes, puedes descargar la última versión gratuita desde el siguiente enlace. Sitio web oficial de Java

Instalar 480i Manager

  1. Descarga la versión para PC de 480interactive. Descargar
  2. Una vez descargada, descomprime el fichero “480interactive-Windows.zip”
  3. Al descomprimir aparecerá la carpeta «480interactive-Windows» y dentro, una carpeta llamada «Ficheros de instalación». Accede a esta carpeta.
  4. Haz doble clic en el archivo “480iManager-Installer-4.3.exe” Se abrirá un asistente automático, simplemente sigue los pasos para completar la instalación.
  5. Al finalizar la instalación se habrá creado un acceso directo en tu escritorio para abrir 480i Manager. Ya lo puedes usar cuando quieras.

Ya tienes instalado 480interactive.

Tutorial para instalar 480interactive en Mac

Instalar Java

Para poder utilizar 480i Manager, es necesario que tengas instalada la versión 6 de Java en tu ordenador. La mayoria de ordenadores ya lo tienen instalado, pero si no es tu caso, puedes descargar la versión desde este enlace Descargar Java 6.

Instalar 480i Manager

  1. Descarga la versión para Mac de 480interactive. Descargar
  2. Descomprime el fichero «480interactive-Mac.zip» que has descargado de la web.
  3. Al descomprimir aparecerá la carpeta «480interactive-Mac». Accede a esta carpeta.
  4. Verás otra carpeta llamada “Ficheros de instalación”, ábrela.
  5. Haz doble clic en el fichero «480i Manager-4.3.dmg»
  6. Arrastra el fichero «480i Manager» sobre la carpeta aplicaciones «Aplicaciones».
    instalar Mac
  7. Ya tienes 480i Manager en tus aplicaciones.

Ya tienes instalado 480interactive.

Paso 1: Creamos un proyecto App en 480interactive

  • Abre el programa 480i Manager en tu ordenador, aparecerá la pantalla de bienvenida. Pulsa el botón “Crear Nueva App”.
bienvenida1
Ahora elegimos el nombre del proyecto y el tipo de App:
  • Nombre de la App: EventApp
  • Ubicación del proyecto: Por defecto el programa elige automáticamente el espacio de trabajo donde guarda todos los proyectos.
  • Tipo de App: Selecciona “App Single”.
  • Finalmente pulsa el botón “Crear”.

Ya tenemos la App creada, pero está vacía. Ahora vamos a meter la plantilla InDesign que hemos descargado.

  • Pulsa en “Abrir carpeta Libraries”abrir carpeta libraries
  • Se abrirá la carpeta Libraries donde dejar la plantilla InDesign que has descargado
  • Mueve dentro de “Libraries” la carpeta que has descargado con la plantilla y los Links
  • Abre el documento InDesign (Puedes usar el archivo .indd o el archivo .idml)

Paso 2: Convertimos la plantilla InDesign en formato Issue

Si es la primera vez que usas 480interactive, sigue los pasos a continuación para instalar el plugin 480i Script en InDesign. Este plugin permite exportar tus documentos InDesign en formato “Issue”, un formato compatible con las Apps.

Lo primero que debes hacer es descargar el plugin desde el siguiente enlace:

      • Descomprime el archivo que has descargado, encontrarás una carpeta llamada «480i Script».
      • Esta carpeta contiene el fichero «480i Script.jsx». Secciona ese fichero, haz clic con el botón derecho y elige «copiar».
      • Ahora abre Adobe InDesign.
      • Selecciona el panel Script de InDesign. Si lo tienes oculto, puedes verlo en: Ventana ⇒ Utilidades ⇒ Script
      • Haz clic con el botón derecho sobre la carpeta «Aplicación» y elige «Mostrar en finder» en Mac o «Mostrar en Explorador» en Windows.
Panel Script
        • Se abrirá automáticamente la carpeta «Scripts Panel» de InDesign, pega dentro el fichero «480i Script.jsx» que has copiado en el paso anterior.
        • Ya tienes instalado «480i Script» en InDesign.
Panel Script
  • Si ya has usado previamente 480interactive, tendrás instalado 480i Script en InDesign. Ejecuta el Script y pulsa en “Convertir en Issue”

Paso 3: Añadimos el Issue (la plantilla InDesign que hemos exportado) a la App

Añade el Issue a la aplicación

        • Abre 480i Manager y dirígete a la pantalla de añadir contenido pulsando en el árbol de la izquierda.
arbol
        • Selecciona “InDesign ISSUE” y pulsa “Añadir”.
AÑADIR
        • Elige la opción “Una orientación”.
orienta
        • Aparecerá una pantalla con el Issue que hemos creado antes desde InDesign. Pulsa simplemente en “Seleccionar”.
iss
        • Una vez añadido, aparecerá la pantalla de configuración de la publicación.

Habilita la opción autoadaptado

        • Tal y como hemos comentado en el cuarto paso, en este caso hemos utilizado un formato de documento que permite ser visualizado tanto en dispositivos con relación de aspecto 4:3 como 16:9.
        • Si quieres que la aplicación se ajuste totalmente a cada formato de pantalla, selecciona ‘habilitar autoadaptado’, desde la pestaña configuración de la publicación.
autoadaptado

Si no marcas esta casilla, tu publicación se ajustará al lado más restrictivo de la pantalla (alto o ancho) dependiendo de cada dispositivo, dejando unos márgenes en los laterales. Haz la prueba para ver la diferencia.

config

Pon el icono de la App

        • Para cambiar el icono de la app, haz clic en “Configuración de la App” en el árbol de la izquierda y pulsar en “Información General”.
        • Una vez ahí, pulsa sobre el icono por defecto. Selecciona el icono que previamente hemos guardado en la carpeta Libraries.

Paso 4: Envía la App a nuestro smartphone o tablet

Pre-visualiza tu app

Para poder pre-visualizar la App en tu dispositivo móvil, tienes que instalar la aplicación gratuita “480i Viewer” en tu smartphone o tablet. Es un visor para probar tus proyectos.

Puedes descargar la app escaneando este QR o busca “480i Viewer” en App Store o Google Play desde tu dispositivo móvil:

qrr

 

1. Enviar App

Para enviar la App a tu dispositivo es necesario que, tanto tu ordenador como el dispositivo al que quieres enviar la aplicación, estén conectados a la misma red WiFi.

  1. En 480i Manager pulsa sobre exportarApp en la parte izquierda de la barra de menú superior.
  2. Una vez finalizado el proceso de exportación se abrirá una ventana que muestra los dispositivos que tienes añadidos para poder enviar la app a cualquiera de ellos.
  3. Selecciona el dispositivo que quieras y pulsa el botón Enviar.
  4. En el caso de no tener ningún dispositivo añadido, desde 480i Viewer, puedes pulsar sobre tuerca y después sobre escaneaQR para poder escanear el código QR que te ha generado 480i Manager:
    EnviarApp
  5. Tu dispositivo te mostrará un mensaje diciéndote que se ha enlazado correctamente.
    Envio OK

2. Previsualizar

Abre la App 480i Viewer en tu dispositivo:

  1. Pulsa el botón para añadir aplicaciones.
    Añadir-publicación
  2. Elige la opción «Añadir aplicación».
    Añadir-aplicación
  3. Te aparecerá una lista con las aplicaciones subidas al dispositivo que no estén añadidas al quiosco. Elige la aplicación que quieres añadir.
    Selecciona App
  4. Una vez añadida la aplicación tócala para ver las publicaciones que contiene. Pulsa el botón descargar de la publicación que quieres ver. Al hacerlo, se convertirá en un botón «Ver». Tócalo para ver la publicación.
    Ver publicación

Explicación diseño de InDesign: Un único diseño sirve para todos los smartphones y tablets

Si vamos a la plantilla InDesign, vemos que tiene 7 páginas con un formato de pantalla vertical de 1000x1334px.

Este tamaño de página nos va a permitir realizar un único diseño compatible con cualquier resolución de pantalla (iPhone, iPad, Smartphone Android y Tablet Android).

Las guías que hay en el documento marcan el área que se ve en todos los dispositivos móviles. El espacio que queda fuera de las guías se verá solo en algunos dispositivos concretos, como iPad y algunas tablets Android. Por tanto, es recomendable meter dentro de esas guías todo el contenido que queramos que se vea con seguridad en cualquier dispositivo.

En la siguiente imagen, la zona sombreada de color amarillo es la zona dentro de las guías. Esa zona es la que se ve perfectamente en cualquier dispositivo.

 

Si quieres más información sobre cómo maquetar usando estas guías. Aquí tienes un tutorial específico

Cómo creamos un índice interactivo en InDesign

Crear botones con la acción “Ir a página”

Vamos a configurar la página 1 del documento en la cual encontramos un índice que nos va a llevar al resto de las páginas de nuestra publicación.

Para ello, puedes usar la acción «Ir a página» de este modo:

  1. Crea un marco rectangular con la herramienta “Marco rectangular” en la zona que quieres que sea clicable.
  2. Convierte en botón ese marco rectangular. Desde el panel de “Botones y formularios” en el campo “Acciones”, asigna la acción “Ir a página”
  3. Indica la página a la que quieres ir en el campo «Página».
  4. Ir a pagina

  5. Repite el mismo proceso para crear los cuatro botones restantes de la página 1, que deberás configurar para ir a páginas 3, 5, 6 y 7.

Crear botón para volver al índice en página maestra

Vamos a configurar un botón en página maestra que nos llevará a la página 1 en la cual encontraremos de nuevo el índice de contenidos de nuestra publicación.

Nos dirigimos al panel de “Páginas” y hacemos doble clic sobre “A-Página maestra” y se nos abrirá la página maestra que tenemos asignada al intervalo de páginas 2-7.

Ahora repite el mismo proceso que hemos empleado en la página 1:

  1. Crea un marco rectangular con la herramienta “Marco rectangular”.
  2. Convierte a botón ese mismo marco rectangular al cual que le vas a asignar la acción “Ir a página” desde el panel de “Botones y formularios” en el campo “Acciones”.
  3. Añádele la acción «Ir a Página».
  4. Indica la página a la que quieres ir en el campo «Página». En este caso irá a página 1.

¿Necesitas ayuda?

Contacta con nosotros y te ayudaremos a sacar adelante tu proyecto app.