Crea tu primera App con este asistente

Quarterly Report

  • icon-indesignInDesign file
  • Quiosco
  • icon_iOsiOS/Android
  • 8 pantallas
  • Smartphone/Tablet
  • Menú de navegación

Tutorial para crear esta App

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

  1. Elige el nombre del proyecto. Por ejemplo “Mi App”.
  2. Elige la ubicación del proyecto. Por defecto el programa elige automáticamente el espacio de trabajo donde guarda todos los proyectos.
  3. Elige el tipo de App. Selecciona “App Quiosco”.
  4. 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.

 

Para añadir un documento interactivo de InDesign a tu App el primer paso es convertirlo en formato “Issue”, que es un formato compatible con tablets y smartphones. Para poder hacerlo, puedes instalar los plugins de 480interactive para InDesign.

En la descarga encontrarás dos archivos, 480i Tags y 480i Script:

  1. 480i Tags, es un plugin que te va a permitir crear efectos interactivos con InDesign.
  2. 480i Script, es un plugin que te va a permitir convertir un documento de InDesign en formato Issue que podrás añadir como contenido interactivo a tu App.

Para instalar estos plugins abre Adobe InDesign y sigue estos pasos:

Instalar 480i Script

  1. En los ficheros que te has descargado encontrarás un fichero llamado «480i Script.jsx». Selecciona ese fichero, haz clic con el botón derecho y elige «Copiar».
  2. En Adobe InDesign, selecciona el panel “Script“. (Si lo tienes oculto, puedes verlo en: Ventana ⇒ Utilidades ⇒ Script)
  3. 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.
  4. Se abrirá automáticamente la carpeta «Scripts Panel» de InDesign.
  5. Pega dentro el fichero «480i Script.jsx» que has copiado anteriormente.

Ya tienes instalado «480i Script» en InDesign.

Instalar 480i Tags

  1. En Adobe InDesign, abre el panel «Etiquetas» («Tags» en inglés). (Si lo tienes oculto, puedes verlo en: Ventana ⇒ Utilidades ⇒ Etiquetas)
  2. Despliega el menú del panel pulsando el botón situado en la parte superior derecha y elige la opción «Cargar etiquetas».
  3. Se abrirá el explorador de archivos para elegir un fichero. El fichero que debes elegir es «480i Tags.xml».

Ya tienes instaladas las Etiquetas. Ahora ya tienes instalados los plugins de 480interactive para Adobe InDesign.

Convertir documento InDesign a formato Issue

Una vez instalados los plugins de 480interactive para Adobe InDesign ya puedes convertir el documento Adobe InDesign en formato Issue para poder añadirlo a la App. Para ello debes seguir estos pasos:

  1. Abre el documento InDesign de la plantilla que has descargado (puedes usar el archivo *.indd o el archivo *.idml)
  2. En Adobe InDesign, dirígete al panel “Scripts” y haz doble clic en “480i Script.jsx”.
  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”.

 

En el siguiente paso veremos cómo añadir el formato Issue de Adobe InDesign a 480interactive

  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.

 

Personalización de los colores del Quiosco

Ahora cambiaremos los colores del tema para personalizar los colores de nuestra App. Para ello nos dirigimos a “Configuración de la App” > “Aspecto visual” > “Colores”. Aquí podemos personalizar los colores del quiosco y de la barra de menú superior para que se adapte a nuestras necesidades.

Antes de nada debes tener instalada la App gratuita «480i Viewer» en tu tablet o smartphone. Esta App es necesaria para poder previsualizar tus proyectos App en tu propio tablet o smartphone. Para ello accede desde tu smartphone o tablet a App Store o Google Play y busca «480i Viewer».

Ahora, 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 .

    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 añade un nuevo dispositivo mediante el código proporcionado desde la aplicación 480i Viewer de tu smartphone o tablet. (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.

Tutorial para editar la plantilla InDesign y añadir interactividad

Esta plantilla que has descargado cuenta con un diseño multidispositivo de InDesign, que consiste en un único diseño que sirve para todos los smartphones y tablets.

Las páginas cuentan con un formato de pantalla vertical de 1000x1334px. Es un formato de documento que permite ser visualizado tanto en dispositivos con relación de aspecto 4:3 como 16:9.

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 tabletas Android. Por tanto, es recomendable meter dentro de esas guías todo el contenido que queramos que se vea con seguridad en cualquier dispositivo.

Tan solo se dejará fuera de las guías partes de los elementos que puedan despreciarse a nivel visual y no causen conflicto con la interactividad y comprensión de la aplicación como, por ejemplo, los laterales de una fotografía que actúa como fondo de página o partes de gráficos presentes en la maquetación que no tengan trascendencia.

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

En este apartado aprenderás cómo se han configurado las interactividades del documento InDesign para que funcionen correctamente en la aplicación creada con 480interactive.

Índice interactivo / Menú de navegación (Página 1 y 2)

Ir a página

Tanto la página 1 como la 2 actúan de índice general de contenidos y deben contener 4 botones que nos lleven a las diferentes pantallas de la aplicación.

La diferencia entre la página 1 y la página 2, es que en la página 1 tenemos una imagen animada como fondo en la cual, mediante una secuencia de imágenes, se forma la pantalla con los contenidos del índice. Simplemente se ha añadido esta página para darle un mayor atractivo visual que solo veremos cada vez que abramos la aplicación, ya que una vez empezamos a navegar por la App empleamos como índice la página 2.

Para configurar las interactividades de estas dos páginas, en la configuración de cada botón indicamos la página a la que queremos enviar al usuario, poniendo el número de página en el campo “Página”:

  1. Encima del primer icono, hemos creado un marco rectangular con un tamaño que ocupa el área que puede ser pulsada en el diseño.
  2. Con el marco rectangular seleccionado, lo hemos convertido a botón desde el panel de “Botones y formularios”.
  3. Añadimos la acción “Ir a página” y en el campo página, le asignamos la página “3”.
  4. Repetimos este mismo proceso en el resto de iconos para ir a página 4, 5, 6 y 8 respectivamente.

 

 

Ir a URL

En la parte inferior añadimos un botón para acceder a la página web con un navegador externo a la aplicación. Para ello:

  1. Seleccionamos el marco de la caja de texto.
  2. Con el marco rectangular seleccionado, lo convertimos a botón desde el panel de “Botones y formularios”.
  3. Le hemos añadido la acción “Ir a URL”.
  4. En el campo URL escribimos la dirección web a la que queremos llevar cuando el botón se pulse, precedido con el prefijo “external”, para que se habrá con un navegador externo a nuestra aplicación. Por ejemplo, si queremos ir a “http://www.480interactive.com” escribiremos “externalhttp://www.480interactive.com” en el campo URL.

 

Si necesitas más información sobre esta interactividad puedes consultar estos enlaces: ¿Qué son los botones interactivos de InDesign?

 

Imagen animada

La página 1 contiene una imagen animada de fondo a pantalla completa. Para ello:

  1. Creamos un marco rectangular delimitando la zona en la que se va a mostrar la secuencia de imágenes de la “Imagen animada”. El marco debe tener el mismo tamaño que las imágenes o un tamaño proporcional, en este caso 1000x1334px. Este marco será el contenedor del Elemento extra Imagen animada” que añadiremos a 480interactive cuando configuremos el proyecto.
  2. Ponemos un nombre al marco rectangular que hemos creado desde el panel “Capas“, procurando no repetir el mismo nombre para diferentes contenedores en un mismo documento InDesign. Por ejemplo, “Animation P1“.

 

Cuando añadamos este Elemento extra a la App, deberemos buscar un contenedor con el nombre “Animation P1“.

 

Our lastest numbers (Página 3)

Esta página contiene una imagen animada. Para ello:

  1. Creamos un marco rectangular delimitando la zona en la que se va a mostrar la secuencia de imágenes de la “Imagen animada”. El marco debe tener el mismo tamaño que las imágenes o un tamaño proporcional. Este marco será el contenedor del Elemento extra Imagen animada” que añadiremos a 480interactive cuando configuremos el proyecto.
  2. Ponemos un nombre al marco rectangular que hemos creado desde el panel “Capas“, procurando no repetir el mismo nombre para diferentes contenedores en un mismo documento InDesign. Por ejemplo, “88“.

 

Cuando añadamos este Elemento extra a la App, deberemos buscar un contenedor con el nombre “88“.

 

Ahora el botón de la parte inferior para ir a la página 2, donde se encuentra el índice:

  1. Hemos seleccionado el icono.
  2. Lo hemos convertido a botón desde el panel de “Botones y formularios”.
  3. Añadimos la acción “Ir a página” y en el campo página, le asignamos la página “2”.

 

Si necesitas más información sobre esta interactividad puedes consultar estos enlaces: ¿Qué son los botones interactivos de InDesign?

 

Overview (Página 4)

Configuramos el botón de la parte inferior para ir a la página 2, donde se encuentra el índice:

  1. Hemos seleccionado el icono.
  2. Lo hemos convertido a botón desde el panel de “Botones y formularios”.
  3. Añadimos la acción “Ir a página” y en el campo página, le asignamos la página “2”.

Repetimos el mismo proceso para el botón de la parte inferior derecha que nos llevará a la página siguiente, para ello le asignamos la página “5“.

Si necesitas más información sobre esta interactividad puedes consultar estos enlaces: ¿Qué son los botones interactivos de InDesign?

 

2019 (Página 5)

Configuramos el botón de la parte inferior para ir a la página anterior, la página 4:

  1. Hemos seleccionado el icono.
  2. Lo hemos convertido a botón desde el panel de “Botones y formularios”.
  3. Añadimos la acción “Ir a página” y en el campo página, le asignamos la página “4”.

 

Si necesitas más información sobre esta interactividad puedes consultar estos enlaces: ¿Qué son los botones interactivos de InDesign?

 

Esta página también contiene una imagen animada. Para ello:

  1. Creamos un marco rectangular delimitando la zona en la que se va a mostrar la secuencia de imágenes de la “Imagen animada”. El marco debe tener el mismo tamaño que las imágenes o un tamaño proporcional. Este marco será el contenedor del Elemento extra Imagen animada” que añadiremos a 480interactive cuando configuremos el proyecto.
  2. Ponemos un nombre al marco rectangular que hemos creado desde el panel “Capas“, procurando no repetir el mismo nombre para diferentes contenedores en un mismo documento InDesign. Por ejemplo, “Animation P5“.

 

Cuando añadamos este Elemento extra a la App, deberemos buscar un contenedor con el nombre “Animation P5“.

 

Engage your people (Página 6)

Configuramos el botón de la parte inferior para ir a la página 2, donde se encuentra el índice:

  1. Hemos seleccionado el icono.
  2. Lo hemos convertido a botón desde el panel de “Botones y formularios”.
  3. Añadimos la acción “Ir a página” y en el campo página, le asignamos la página “2”.

Repetimos el mismo proceso para el botón de la parte inferior derecha que nos llevará a la página siguiente, para ello le asignamos la página “7“.

Si necesitas más información sobre esta interactividad puedes consultar estos enlaces: ¿Qué son los botones interactivos de InDesign?

 

Página 7

Esta página también contiene dos imágenes animadas. Para ello:

  1. Creamos un marco rectangular delimitando la zona en la que se va a mostrar la secuencia de imágenes de la “Imagen animada”. El marco debe tener el mismo tamaño que las imágenes o un tamaño proporcional. Este marco será el contenedor del Elemento extra Imagen animada” que añadiremos a 480interactive cuando configuremos el proyecto.
  2. Ponemos un nombre al marco rectangular que hemos creado desde el panel “Capas“, procurando no repetir el mismo nombre para diferentes contenedores en un mismo documento InDesign. Por ejemplo, “35“.

 

Cuando añadamos este Elemento extra a la App, deberemos buscar un contenedor con el nombre “35“.

Repetimos el proceso para la imagen animada de “88“, esta vez sí que podemos asignar el mismo nombre al contenedor, ya que contendrá la misma secuencia de imágenes que la imagen animada de la página 3.

 

Configuramos también el botón de la parte inferior para ir a la página anterior, la página 6:

  1. Hemos seleccionado el icono.
  2. Lo hemos convertido a botón desde el panel de “Botones y formularios”.
  3. Añadimos la acción “Ir a página” y en el campo página, le asignamos la página “6”.

 

Por último, ésta página tambiñen contiene botones para mostrar y ocultar elementos. Cuando pulsemos sobre los botones , se ocultarán a sí mismos de manera independiente y mostrarán otros botones que consisten en cajas de texto. Para ello:

  1. Seleccionamos el objeto agrupado “+” y lo convertimos a botón desde el panel de “Botones y Formularios
  2. Hacemos lo mismo con la caja de texto
  3. Asignamos la acción “Mostrar/Ocultar botones y formularios” a ambos botones
  4. En “Visibilidad“, configuramos cada botón para que se oculte a sí mismo, y al mismo tiempo nos muestre el botón que le complementa

 

Repetimos el mismo proceso para el otro botón (+).

Si necesitas más información sobre esta interactividad puedes consultar estos enlaces: ¿Qué son los botones interactivos de InDesign?

 

What´s next (Página 8)

La página 8 contiene una imagen animada de fondo a pantalla completa. Para ello:

  1. Creamos un marco rectangular delimitando la zona en la que se va a mostrar la secuencia de imágenes de la “Imagen animada”. El marco debe tener el mismo tamaño que las imágenes o un tamaño proporcional, en este caso 1000x1334px. Este marco será el contenedor del Elemento extra Imagen animada” que añadiremos a 480interactive cuando configuremos el proyecto.
  2. Ponemos un nombre al marco rectangular que hemos creado desde el panel “Capas“, procurando no repetir el mismo nombre para diferentes contenedores en un mismo documento InDesign. Por ejemplo, “Animation Galery P8“.

 

Cuando añadamos este Elemento extra a la App, deberemos buscar un contenedor con el nombre “Animation Galery P8“.

 

Por último, configuramos el botón de la parte inferior para ir a la página 2, donde se encuentra el índice:

  1. Hemos seleccionado el icono.
  2. Lo hemos convertido a botón desde el panel de “Botones y formularios”.
  3. Añadimos la acción “Ir a página” y en el campo página, le asignamos la página “2”.

 

 

Si necesitas más información sobre esta interactividad puedes consultar estos enlaces: ¿Qué son los botones interactivos de InDesign? / Mostrar y ocultar botones de InDesign

 

 

Los Elementos Extra son plugins que puedes incluir en InDesign para llevar la interactividad de tu App al siguiente nivel. Estos elementos te permiten añadir características que no serían posibles únicamente con InDesign y que puedes añadir desde 480interactive, como por ejemplo: Galerías de Imágenes, Imágenes animadas, WebZip, … Puedes ampliar información acerca de Añadir Elementos extra en InDesign.

Para añadir un elemento extra, primero tienes que tener el contenido InDesign añadido a la App. Para poder añadir un Elemento extra, lo primero de todo es crear un marco rectangular en InDesign con el tamaño que necesites, que actuará como contenedor para los elementos que posteriormente añadiremos desde 480interactive. Una vez creado, ponle un nombre desde la pestaña de Capas.

En esta plantilla contamos con el Elemento extra “Imagen animada”. A continuación veremos como añadirlo a la App desde 480interactive:

Añadir imagen animada

Haz clic con botón derecho sobre “Elementos extra” y elige “Añadir elemento extra“. En el siguiente cuadro de diálogo selecciona “Imagen animada“.

Dentro de “Elementos extra” se habrá creado una nueva entrada. Selecciónala para visualizar las opciones de configuración y sigue estas indicaciones:

    1. Elige el contenedor “Animation P1”. El nombre del contenedor coincide con el nombre del marco rectangular de InDesign.
    2. Pulsa en “Añadir” y selecciona todas las imágenes de la secuencia.
    3. Pulsa en “Seleccionar” para añadir las imágenes de la secuencia.
    4. En el campo “Paso (segundos)” asígnale un tiempo. Por ejemplo, 4.0

Repite el mismo proceso para añadir las cuatro imágenes animadas restantes con la siguiente configuración:

  • Animation P5“, con un tiempo de “Paso (segundos)” de 1.5 segundos.
  • Animation Galery P8“, con un tiempo de “Paso (segundos)” de 6 segundos y marca la casilla “Bucle“, para que se repita indefinidamente la secuencia de imágenes.
  • 35“, con un tiempo de “Paso (segundos)” de 1 segundo.
  • 88“, con un tiempo de “Paso (segundos)” de 1.5 segundos.

 

Ya tienes la App terminada. Solo falta enviarla a tu tablet o smartphone para probarla.

 

 

    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”.
    4. En 480i Viewer, pulsa el botón “Actualizar” de la publicación. Al hacerlo, se convertirá en un botón “Ver”.
    5. Pulsa en “Ver” 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.