Tema 2: Crear una edición de la revista con InDesign

Resumen del tema 2

En este tutorial vas a aprender a crear un documento InDesign que se adapta a tablets y Smartphones.

Vas a descargar una plantilla de InDesign que te servirá como guía para aprender y podrás utilizar en futuros proyectos.

En este tema veremos cómo utilizar esta plantilla, y cómo podemos convertirla en formato Issue para poder añadirlo a nuestra App:

Captura de pantalla 2016-06-21 a las 16.31.15

Paso 1: Descarga la Plantilla InDesing

  • Plantilla InDesign para hacer el caso práctico:

    Descargar

  • Descomprime el fichero “Magazine_Edition_1” que has descargado
  • Verás que aparece la carpeta “Magazine_Edition_1”. Dentro de ella está el documento InDesing y los links que vamos a utilizar en ésta práctica.
  • Copia la carpeta “Magazine_Edition_1”

Paso 2: Guardar el documento InDesign en el proyecto App

Vuelve a 480i Manager, dirigete a la pestaña “Añadir contenido” y elige “Abrir carpeta Libraries” situada en la parte superior. Se abrirá una ventana donde están las carpetas de tu proyecto App.

abrir carpeta libraries

Entra en la carpeta “Libraries” y pega dentro la carpeta “Magazine_edition_1” que has copiado antes.
Nota: En la carpeta Libraries siempre dejamos los archivos originales de InDesign, HTML y recursos (imágenes, vídeo, audio, etc) que vamos a utilizar en el proyecto.

demo_revista_articulos

Una vez pegado, abrimos el documento InDesign.

 Captura de pantalla 2016-06-21 a las 16.31.15

Paso 3: ¿Cómo utilizar esta plantilla?

Como podemos ver este InDesign consta de 6 páginas. Cada página será un artículo de la revista. Podemos ver que el documento tiene un tamaño de 1.000px de ancho por 1.334px de alto y hay unas guías. Utilizamos esta plantilla para que con una única maquetación el contenido se adapte perfectamente a cualquier dispositivo tablet o smartphone sin dejar huecos en blanco. 

En este vídeo de 2 minutos se muestra cómo funciona este documento InDesing:

 

Paso 4: Convertimos el InDesign en Issue para añadirlo a la App

Para convertir un InDesign en Issue necesitas los plugins de 480interactive para InDesign. Si todavía no los tienes instalados, pulsa en “obtener Plugins para InDesing” a continuación:

Obtener Plugins para InDesign

Descarga los plugins desde el siguiente enlace:

Descomprime el fichero y sigue estos pasos.

Instalar 480i Tags

480i Tags es un plugin que te va a permitir crear efectos interactivos con InDesign. Su instalación es muy sencilla.

  1. Abre Adobe InDesign, pero no crees ni abras ningún documento.
  2. Abre el panel «Etiquetas» («Tags» en inglés) de InDesign. Si lo tienes oculto, puedes verlo en:
    Ventana ⇒ Utilidades ⇒ Etiquetas
  3. Despliega el menú del panel pulsando el botón Botón Menú situado en la parte superior derecha y elige la opción «Cargar etiquetas».
    Cargar Etiquetas
  4. Se abrirá el Finder para elegir un fichero. Encontrarás el fichero al descomprimir el ZIP descargado en este tutorial. Dentro de la carpeta llamada «Etiquetas» verás el fichero «480interactiveTags.xml». Ese es el fichero que debes elegir.
    Captura de pantalla 2014-07-24 a la(s) 16.45.54

Ya tienes instaladas las Etiquetas.

Instalación de 480i Script

Este plugin te va a permitir convertir un documento de inDesign en una publicación interactiva compatible con tablets y smartphone que podrás añadir como contenido interactivo a tu app.

  1. En los ficheros que te has descargado en est etutorial encontrarás una carpeta llamada «480i Script».
  2. Esta carpeta contiene el fichero «480i Script.jsx». Secciona ese fichero, haz clic con botón derecho y elige «copiar».

Ahora abre Adobe InDesign

  1. Selecciona el panel Script de InDesign. Si lo tienes oculto, puedes verlo en:
    Ventana ⇒ Utilidades ⇒ Script
  2. Haz clic con el botón derecho sobre la carpeta «Aplicación» y elige «Mostrar en finder».
    Panel Script
  3. Se abrirá automáticamente la carpeta «Scripts Panel» de InDesign, pega dentro el fichero «480i Script.jsx» que has copiado en el paso anterior.
  4. Ya tienes instalado «480i Script» en InDesign.
    Panel Script

Ahora ya tienes instalados los plugins de 480interactive para InDesign.

Una vez ya tienes los plugins, vamos a convertir el InDesign en Issue:

  • Ve al panel Scripts de Indesign. Este panel está en «Ventana» ⇒ «Utilidades» ⇒ «Scripts»
  • El script se llama «480i Script.jsx», haz doble clic sobre él.
  • Se abrirá un cuadro como este:

Captura de pantalla 2016-06-21 a las 15.49.45

Una vez ha finalizado el proceso, pulsa aceptar.

Paso 5: Añadir la Issue a la Aplicación

  • Abrimos 480i Manager y nos dirigimos a la pantalla de añadir contenido pulsando en el árbol de la izquierda.
  • Seleccionamos “InDesign ISSUE” y pulsamos “Añadir”
    add_Indesign_tio_app
  • Elegimos la opción “Una orientación” indesign_orientation
  • Aparecerá una pantalla con el Issue que hemos creado antes desde InDesign, pulsamos simplemente en “Seleccionar”:

Captura de pantalla 2016-06-21 a las 16.38.03

  • Una vez añadido, aparecerá la pantalla de configuración de la publicación.
  • Ahora simplemente vamos a exportar el proyecto App para poder verlo en nuestro smartphone
  • Pulsamos en “Exportar App” arriba a la izquierda

export_app_480i

  • Al finalizar la exportación se abrirá la pantalla para enviar el proyecto a nuestro smartphone.
  • Si ya tienes tu smartphone enlazado:
    • Abre la App 480i Viewer
    • Asegúrate que ordenador y smartphone están en la misma red wifi y pulsa enviar.send_app_480i
  • Si todavía no tienes enlazado tu smartphone, sigue los pasos de este tutorial: Ver tutorial para enviar proyecto App a mi smartphone

Resumen:

Ya tenemos la estructura de trabajo organizada, hemos creado la App quiosco con 480interactive,  hemos introducido nuestra primera edición con InDesing y lo enviamos enviado a nuestro smartphone para verlo.

A partir de ahora vamos a trabajar en añadir contenido a nuestra edición para que los usuarios lo puedan consumir de la forma más usable y amigable posible.

Ver tema 3 >

Ir al Foro