Welcome Manual

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

Cómo previsualizar la plantilla en tu smartphone o tablet

  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.

 

  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”.
  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.

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 “ARROW-UP”. 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, 1.5

 

Añadir Web Zip

 

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

Dentro “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 “LOCATIONS-TEXT”.
  2. El nombre del contenedor coincide con marco rectangular de InDesign.
  3. Elige el fichero *.zip que quieres usar, en esta ocasión será Locations.zip.


Repetimos el mismo proceso para el elemento extra Benefits:

  1. Elige el contenedor “BENEFITS”.
  2. El nombre del contenedor coincide con marco rectangular de InDesign.
  3. Elige el fichero *.zip que quieres usar, en esta ocasión será Benefits.zip.

 

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” 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.

Instrucciones para esta plantilla

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. Crear contenido InDesign multidispositivo

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.

Portada (Página 1)

Ir a página

La página 1 actúa de portada y contiene un botón que nos lleva a la pantalla de índice.

Además también cuenta con un vídeo como fondo para darle un mayor atractivo visual que solo veremos reproducido en bucle vez cada vez que acccedamos a la pantalla de portada. Todos los elementos que estan superpuestos por encima del vídeo deben convertirse a botón para que sean visibles desde el panel de “Botones y formularios”.

Para configurar las interactividades de esta página, 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. Seleccionamos la caja de texto “GO!“.
  2. Con la caja de texto selecionada, la 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: Interactividad InDesign

 

Vídeo de fondo

La página 1 contiene un vídeo de fondo a pantalla completa. Para que se vea correctamente en todos los dispositivos, el vídeo debe tener las mismas dimensiones que el documento de InDesign, 1000x1334px.

Para ello:

  1. Colocamos el vídeo en el fondo de la página.
  2. Con el vídeo seleccionado, en el panel de “Elemento multimedia” marcamos la casilla “Reproducir al cargar la página” y también “Bucle
  3. Con el vídeo seleccionado, en el panel de “Etiquetas” asignamos al vídeo la etiqueta “VideoControlsNone“.

 

Índice interactivo (Página 2)

Ir a página

La página 1 actúa de índice general de contenidos y debe contener 10 botones que nos lleven a las diferentes pantallas de la aplicación.

Para configurar las interactividades de esta página, 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. Seleccionamos la caja de texto “Our Purpose“.
  2. Con la caja de texto selecionada, la 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 cajas de texto del índice para ir a página 4, 5, 6, 7, 8, 9, 10, 11 y 12 respectivamente.

 

Página maestra con botón “Volver al índice” (Páginas 3 a 12)

Para facilitar la navegación del usuario creamos un botón que nos permite volver al índice desde cualquier pantalla. Podemos colocarlo en todas las páginas pero, para optimizar el trabajo, hemos colocado dicho botón en una página maestra de InDesign. Para ello:

  1. Desde el panel de “Páginas” hacemos doble clic sobre “A-Página maestra”.
  2. Hemos creado un marco rectangular con un tamaño que pueda ser pulsado con facilidad. Por ejemplo 100x100px.
  3. Con el marco rectangular seleccionado, lo convertimos a botón desde el panel de “Botones y formularios”.
  4. Le añadimos la acción de “Ir a página” y en el campo página, le hemos asignado la página “2”.
  5. Repetimos este mismo proceso para crear los botones “PREV” y “NEXT“, pero asignando las acciones “Ir a página anterior” e “Ir a página siguiente” respectivamente desde la opción “Acciones” del panel de “Botones y formularios“.

 

Para asignar esta página maestra a un interválo de páginas, hacemos clic derecho sobre “A-Página maestra”, seleccionamos “Aplicar página maestra a páginas…” y en el campo “A-páginas” indicamos el rango de páginas al que hay que aplicar esta página maestra “3-12” (todas las página excepto la portada y el índice).

 

Our Purpose (Página 3)

Esta página contiene botones que al ser pulsados nos mostrarán otro botón que indica una ampliación de la información.

Lo primero que debemos hacer es convertir a botón todos objetos que van a intervenir en la interactividad. Haremos un ejemplo de cómo lo hemos hecho en el caso de “To Help“, el resto será replicarlo mediante la misma metodología de trabajo: cuando pulsemos sobre el botón “MOSTRAR TEXTO“, éste mostrará el botón “TEXTO” y, por otro lado, se ocultarán el resto de textos con las descripciones. Para ello:

  1. Seleccionamos el objeto que mostrará la descripción y lo convertimos a botón desde el panel de “Botones y Formularios
  2. Le asignamos la acción “Mostrar/Ocultar botones y formularios” y lo nombramos como “M_HELP

 

Hacemos lo mismo con el texto que contiene el precio:

  1. Seleccionamos la caja de texto que contienen la descripción y la convertimos a botón desde el panel de “Botones y Formularios
  2. La nombramos como “HELP

 

En “Visibilidad“:

  1. Configuramos para que “M_HELPmuestre “HELP”  y oculte el resto de los botones con decripciones (BETTER/WORLD/INVEST).

 

Por último, desde el panel de “Etiquetas“, le asignaremos la etiqueta “Fade” seleccionándola y arrastrándola sobre el botón “HELP” para que haga un efecto de desvanecimiento al ocultarse

 

Este proceso lo repetimos con los 3 (6) botones restantes de esta página.

Si necesitas más información sobre esta interactividad puedes consultar estos enlaces: Interactividad InDesign / Instalar 480i Tags para InDesign / Mostrar y ocultar botones de InDesign con “Fade”

 

Our Business Model (Página 5)

Vídeo de fondo

La página 5 contiene un vídeo de fondo a pantalla completa. Para que se vea correctamente en todos los dispositivos, el vídeo debe tener las mismas dimensiones que el documento de InDesign, 1000x1334px. Todos los elementos que estan superpuestos por encima del vídeo deben convertirse a botón para que sean visibles desde el panel de “Botones y formularios”.

Para ello, repetimos el mismo proceso que en la página de portada:

  1. Colocamos el vídeo en el fondo de la página.
  2. Con el vídeo seleccionado, en el panel de “Elemento multimedia” marcamos la casilla “Reproducir al cargar la página” y también “Bucle
  3. Con el vídeo seleccionado, en el panel de “Etiquetas” asignamos al vídeo la etiqueta “VideoControlsNone“.

 

Our Locations (página 7)

Primero hemos creado el marco rectangular, lo hemos convertido en botón y asignado un nombre identificable, por ejemplo “LOCATIONS-TEXT”, ya que por defecto InDesign lo llama “rectángulo” y después sería difícil identificar a qué artículo pertenece cada “rectángulo”.

Captura de pantalla 2017-04-04 a las 16.20.44

El nombre que ponemos a este rectángulo contenedor será el nombre que aparezca en 480interactive cuando añadimos un “Elemento extra”.

Una vez creado y convertido en botón, lo ocultamos desde el panel “Capas”, ya que no queremos que el artículo html esté visible cuando el usuario acceda a la página. Queremos que vea la portada del artículo y el botón “Leer artículo” y que sea cuando pulsa en “Leer artículo” cuando se muestre el marco rectangular.

Botones para abrir y cerrar el artículo HTML

Estos botones servirán para abrir y cerrar el marco rectangular que contiene el artículo en HTML de la página. Para crearlos hemos convertido a botón la caja de texto “OPEN TEXT” (lo hemos llamado “Open text”)  y lo mismo con la caja de texto “CLOSE TEXT”  (lo hemos llamado “Close text”).

Para configurar los botones de InDesign que van a mostrar y ocultar el artículo seleccionamos el botón “Open text” y añadimos la acción “Mostrar/ocultar botones” “Al hacer clic” para mostrar el botón “text-locations” (es el marco rectangular donde pondremos el artículo en HTML en 480interactive) y mostrar el botón “Close text”. Al mismo tiempo, también debe ocultar el botón “Open text” (se oculta a sí mismo), tal y como se muestra en la imagen:

 

 

Para finalizar, vamos al panel “Capas” y ocultamos el botón “Close text”.

 

De esta forma dejamos todo listo en InDesign para añadirlo posteriormente a 480interactive y poder añadir el artículo en HTML.

 

Brainstorming / Out Trust (Páginas 8 y 9)

Estas páginas contienen únicamente botones de “Ir a URL” configurados para abrir un enlace web de Typeform desde nuestro smartphone. Para configurar estos botones:

  1. Con el marco de texto seleccionado, lo convertimos a botón desde el panel de “Botones y formularios”.
  2. Le hemos añadido la acción “Ir a URL”.
  3. En el campo URL indicamos la dirección web de nuestro Typeform precedida por el prefijo “external“, que permite abrir una página web fuera de la app y se abrirá con el navegador del dispositivo o la aplicación que tengamos asociada. (Por ejemplo: externalhttps://typeform.com/…)

 

Si necesitas más información sobre esta interactividad puedes consultar este enlace: Botones Interactivos “Ir a URL”

 

Benefits (página 11)

Para el elemento extra WebZip, primero hemos creado el marco rectangular y asignado un nombre identificable, por ejemplo “BENEFITS”, ya que por defecto InDesign lo llama “rectángulo” y después sería difícil identificar a qué artículo pertenece cada “rectángulo”. El nombre que ponemos a este rectángulo contenedor será el nombre que aparezca en 480interactive cuando añadimos un “Elemento extra”.

La página 11 tambien 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, en este caso 34x977px. 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, “ARROW-UP“.

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

 

 

Contact (Página 12)

Esta página contiene únicamente botones de “Ir a URL” configurados para abrir un enlace web o lanzar otra aplicación. Para configurar estos botones:

  1. Con el marco de texto seleccionado, lo convertimos a botón desde el panel de “Botones y formularios”.
  2. Le hemos añadido la acción “Ir a URL”.
  3. En el campo URL escribimos el número de teléfono, al que queremos llamar cuando el botón se pulse, precedido con el prefijo “tel:”. Por ejemplo, si queremos llamar al 99 999 999 escribiremos “tel:99999999” en el campo URL.
  4. Después hemos repetido este proceso con el botón de ubicación de Google Maps pero en el campo URL indicamos la dirección web de la ubicación de Google Maps precedida por el prefijo “external“, que permite abrir una página web fuera de la app y se abrirá con el navegador del dispositivo o la aplicación que tengamos asociada. (Por ejemplo: externalhttps://goo.gl/maps/ZE5cEjAnzT72)
  5. Para el correto electrónico, en el campo URL escribimos el email, al que queremos contactar cuando el botón se pulse, precedido con el prefijo “externalmailto:”.
  6. Para las redes sociales también en el campo URL indicamos la dirección web de la red social precedida por el prefijo (Por ejemplo: externalhttps://facebook…)

 

Si necesitas más información sobre esta interactividad puedes consultar este enlace: Botones Interactivos “Ir a URL”