Marketing Event App

  • icon-indesignInDesign file
  • Single
  • icon_iOsiOS/Android
  • 7 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.

 

Ya tienes la App terminada. Solo falta enviarla a tu smartphone o tablet 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.

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

La página 1 actúa de índice general de contenidos y debe contener 5 botones que nos lleven a las diferentes pantallas de la aplicación (Agenda, Ponentes, Ubicación, Inscripción y Contacto). 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. Encima de “Agenda”, 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 “2”.
  4. Repetimos el mismo proceso que hemos hecho para “Agenda” en el resto de secciones. (“Ponentes” a página 3, “Ubicación” a página 5, “Inscripción” a página 6 y “Contacto” a página 7)

 

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

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

 

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 “2-7” (todas las página excepto el índice).

 

 

Agenda (Página 2)

Esta página contiene una caja de texto con scroll.
Para configurar esta interactividad una vez tenemos la caja de texto con la maquetación finalizada conforme queremos que quede la columna de texto y que se muestre todo el texto de la misma (sin que haya texto desbordado, y tratando de que la anchura de la caja de texto no tenga decimales):

  1. Hemos creado un marco rectangular con el mismo ancho que la columna de texto. Éste actuará de contenedor para el scroll del texto.
  2. Seleccionamos la caja de texto y la copiamos.
  3. A continuación, hemos seleccionado el marco rectangular que hemos creado para el scroll. Hacemos clic con el botón derecho del ratón y seleccionamos la opción “Pegar dentro”.
  4. Con el marco rectangular seleccionado, lo hemos convertido a botón desde el panel de “Botones y formularios”.
  5. Asignamos la etiqueta ”Scroll” al botón. Para ello abrimos el panel de “Etiquetas”, seleccionamos la etiqueta “Scroll” y la arrastramos encima del botón que contiene la caja de texto. (Si es la primera vez que vas a utilizar las etiquetas de 480interactive puedes ver cómo añadirlas a Adobe InDesign en este enlace: Instalar 480i Tags para InDesign )

 

Podemos cambiar la altura del botón a nuestro gusto desde abajo para ajustar la zona visible del texto. Para editar el texto, si fuese necesario, tan solo tenemos que volver a entrar dentro del botón haciendo doble clic sobre éste y acceder a la caja de texto que hay en su interior.

Ponentes (Páginas 3 y 4)

Estas dos páginas contienen únicamente botones a redes sociales. Para configurarlos tan solo hemos tenido que:

  1. Crear un marco rectangular con un tamaño que pueda ser pulsado con facilidad. Por ejemplo 100x100px.
  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 URL”.
  4. Escribimos la URL a la que queremos acceder en el campo URL.
  5. A continuación, hemos repetido el proceso con el resto de botones de redes sociales.

 

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

Ubicación (Página 5)

Esta página contiene dos botones de “Ir a URL” con la misma dirección URL pero con un resultado diferente gracias a la etiqueta “EmbeddedBrowser”, que nos permite mostrar una página web embebida dentro de la aplicación. (Si es la primera vez que vas a utilizar las etiquetas de 480interactive puedes ver cómo añadirlas a Adobe InDesign en este enlace: Instalar 480i Tags para InDesign )

Para configurar el botón de la parte inferior:

  1. Hemos creado un marco rectangular con un tamaño que pueda ser pulsado con facilidad. Por ejemplo 100x100px.
  2. Con el marco rectangular seleccionado, lo convertimos a botón desde el panel de “Botones y formularios”.
  3. Le añadimos la acción “Ir a URL”.
  4. Escribimos la URL a la que queremos acceder en el campo URL.

 

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

 

 

Para configurar el botón central que contiene el mapa de Google Maps:

  1. Hemos creado un marco rectangular delimitando la zona en la que se va a mostrar la página web.
  2. Con el marco rectangular seleccionado, lo hemos convertido a botón desde el panel de “Botones y formularios”.
  3. Le añadimos la acción “Ir a URL”.
  4. Escribimos la URL de la ubicación del mapa de Google Maps en el campo URL.
  5. Le asignamos la etiqueta ”EmbeddedBrowser” al botón. Para ello, desde el panel de “Etiquetas”, hemos seleccionado la etiqueta “EmbeddedBrowser” y la hemos arrastrado encima del botón que contiene la caja de texto.

 

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

Inscripción (Página 6)

Esta página contiene un botón de “Ir a URL” con la etiqueta “EmbeddedBrowser”, que nos permite mostrar una página web embebida dentro de la aplicación. (Si es la primera vez que vas a utilizar las etiquetas de 480interactive puedes ver cómo añadirlas a Adobe InDesign en este enlace: Instalar 480i Tags para InDesign )

Para configurar el botón central que contiene el formulario de Typeform:

  1. Hemos creado un marco rectangular delimitando la zona en la que se va a mostrar la página web.
  2. Con el marco rectangular seleccionado, lo convertimos a botón desde el panel de “Botones y formularios”.
  3. Le añadimos la acción “Ir a URL”.
  4. Escribimos la URL del formulario de Typeform en el campo URL.
  5. Le asignamos la etiqueta ”EmbeddedBrowser” al botón. Para ello abrimos el panel de “Etiquetas”, seleccionamos la etiqueta “EmbeddedBrowser” y la arrastramos encima del botón que contiene la caja de texto.

 

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

Contacto (Página 7)

Esta página contiene únicamente botones de “Ir a URL”. Para configurar configurar estos botones:

  1. Hemos creado un marco rectangular con un tamaño que ocupa el área necesaria para ser pulsado con facilidad.
  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. Escribimos la URL a la que queremos acceder en el campo URL.
  5. Después hemos repetido este proceso con el resto de botones.

 

 

Prefijos especiales que debemos añadir en el campo URL a los siguientes botones:

  1. Botón de mail (“mailto:”): mailto:[email protected]
  2. Botón de llamada (“tel:”): tel:0034111222333

 

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