4J Magazine

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

 

El siguiente pasó será añadir los archivos comprimidos de los artículos HTML como “Elemento extra”.

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


Repetimos el mismo proceso con los artículos 2, 3, 4 y 5.

Ya tienes la revista 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.

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

La página 2 actúa de índice general de contenidos y debe contener 5 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 el primer grupo de objetos “Tendencia americanas“.
  2. Con el objeto 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 el mismo proceso que hemos hecho para esta primera sección en el resto de secciones del la página de índice.

 

Página maestra con botón “Volver al índice” (Páginas 3 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 “2”.

 

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

 

Páginas donde añadimos los artículos

Entre las páginas 3 y 7 del documento están los artículos. Estas son las páginas que tienen asignada la “Página Maestra” con el botón de volver al índice. Cada página de artículo se compone de tres elementos:

  1. Imagen de portada del artículo
  2. Botones para “Leer artículo” y “Cerrar artículo
  3. Marco rectangular convertido a botón, que será donde añadamos el artículo mediante el archivo HTML

El funcionamiento es que cuando el usuario pulse el botón “Leer artículo”, se oculte ese mismo botón y aparezca el marco rectangular con el artículo, y el botón “Cerrar artículo”.

En InDesign, solo tenemos que crear el marco rectangular con el tamaño que queremos que se vea el artículo. Ese marco rectangular será el contenedor donde añadamos el artículo en HTML desde 480interactive, usando los “Elementos Extra“.

 

¿Cómo lo hacemos?

Primero hemos creado el marco rectangular, lo hemos convertido en botón y asignado un nombre identificable, por ejemplo “Article 1”, 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 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 leer y cerrar los artículos HTML

Estos botones servirán para abrir y cerrar el marco rectangular que contiene el artículo en HTML de cada una de las páginas. Para crearlos hemos convertido a botón la caja de texto “Leer artículo” (lo hemos llamado “Read”)  y lo mismo con la caja de texto “Cerrar artículo”  (lo hemos llamado “Close”).

Para configurar los botones de InDesign que van a mostrar y ocultar artículos seleccionamos el botón “Read” y añadimos la acción “Mostrar/ocultar botones” “Al hacer clic” para mostrar el botón “Article 1” (es el marco rectangular donde pondremos el artículo en HTML en 480interactive) y mostrar el botón “Close”. Al mismo tiempo, también debe ocultar el botón “Read” (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”.

 

 

El resultado final será que cuando abramos la página se verá solamente la imagen de portada del artículo y el botón “Read”.

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

 

Este mismo proceso lo repetimos en el resto de páginas que contienen artículos HTML.

En este apartado verás cómo se han preparado los artículos HTML para añadirlos a 480interactive y los elementos más relevantes que contienen los archivos html y css de los artículos.

Cómo preparar los artículos en HTML

En la plantilla que has descargado, verás la carpeta “Articles”, ahí hay una carpeta por cada artículo. Si vas al Artículo 1, puedes ver el archivo index.html, ahí podrás editar esta plantilla para añadir tus textos, tus imágenes/vídeos, estilos, etc. Este es un ejemplo básico de contenido, pero puedes hacer las modificaciones que quieras en html y css.

El archivo que hay que seleccionar para añadir como “Elemento extra Web Zip” en 480interactive tiene que tener extensión *.zip y dentro de éste debe estar todo el contenido que esté vinculado al documento *.html (estilos, tipografías, imágenes,…)

Para crear estos *.zip lo hacemos así:

  1. Entramos dentro de la carpeta “Article1”.
  2. Seleccionamos todo el contenido y lo comprimimos.
  3. Cambiamos el nombre del archivo comprimido para que sea reconocible, aunque no es necesario, lo nombramos “Article1” para que sea fácil relacionarlo (igual que el nombre que hemos puesto al marco rectangular en InDesign)
  4. Hacemos lo mismo con el resto de artículos.

 

 

Una vez preparados todos los archivos *.zip, añadimos cada artículo a su contenedor en 480interactive (los marcos rectangulares que hemos creado en InDesing, usando los “Elemento extra” de 480interactive) siguiendo las instrucciones del “Paso 4: Añade Elementos extra“.

 

Elementos más relevantes del documento HTML

Aquí se muestran los estilos que tienes enlazados a tu index.html

 

 

Éste será el contenedor con las imágenes que quieres mostrar en las galería.

 

 

Al final del documento *.html puedes modificar los parámetros de la galería de imágenes como los puntos inferiores del slider, las flechas laterales, pausar la galería, reproducción automática, reproducción en bucle, la velocidad del efecto de transición entre una imagen y la siguiente, efecto de desvanecimiento,… tan solo tienes que poner “true” o “false”.