Tema 3: Añadir el contenido en InDesign

Resumen del tema 3

En este tema vamos a trabajar en la plantilla de InDesign para añadir el tres elementos:

  • Un botón “Leer artículo” que muestre el artículo completo
  • Un botón “Cerrar artículo” que cierre el artículo y vuelva a la portada
  • Un espacio vacío donde insertaremos el artículo en HTML comprimido (tema 5)

Paso 1: Creamos el contenedor para añadir el artículo en HTML

  • Vamos a la página 1 de InDesign y creamos un marco rectangular transparente de 750px de ancho por 1334px de alto, que es el tamaño que hay entre las guías. (ver zona sombreada en azul del marco rectangular en la siguiente imagen)
    Captura de pantalla 2016-06-21 a las 15.46.08
  • Convertimos ese marco rectangular en botón y le ponemos el nombre de “artículo 1”
  • Ahora vamos al panel de “Capas”, desplegamos la capa “artículo 1” y vemos que pone “<rectángulo>”. Hacemos tres veces click donde pone “<rectángulo>” y cambiamos el nombre por “artículo1”.
    Captura de pantalla 2016-06-22 a las 13.31.38
  • Posteriormente ocultamos toda la capa “artículo1”
    ocultar botones INDesign_2

Paso 2: Creamos los botones de “Leer artículo” y “Cerrar artículo”

  • Verás que hay dos cajas de texto ya creadas.
  • Pulsamos sobre la caja de texto “Leer artículo” y la convertimos a botón, le damos el nombre de “leer artículo1”
  • Pulsamos sobre la caja de texto “Cerrar artículo” y la convertimos a botón, le damos el nombre de “Cerrar artículo1”

Paso 3: Añadimos interactividad a los botones

  • Vamos al botón “Leer artículo” Le añadimos la acción “al hacer clic”, “Mostrar/ocultar botones” .
  • Seleccionamos que muestre el botón “artículo1” (es el marco rectangular donde pondremos el artículo en HTML) y que muestre el botón “Cerrar artículo” , por último le decimos que oculte el botón “Leer artículo1” (se oculte a sí mismo), tal y como se muestra en la imagen:

mostrar_ocultarbotones indesign publicacion digital

  • Para finalizar vamos al panel “Capas” y ocultamos la capa de “Cerrar artículo”.
    ocultar botones INDesign_crear_apps
  • El resultado final será que cuando abramos la página se verá solamente la imagen de portada del artículo y el botón “Leer más”:
    Captura de pantalla 2016-06-22 a las 13.03.25

En el documento InDesign puedes ver que las páginas 2, 3, 4 y 5 ya están configuradas igual que hemos hecho con la página 1.

Paso 4: Convertimos de nuevo a Issue para actualizar los cambios que hemos hecho

  • Ve al panel Scripts de Indesign. Este panel está en «Ventana» ⇒ «Utilidades» ⇒ «Scripts»
  • Haz doble clic sobre «480i Script.jsx»,
  • Pulsa en “Convertir en Issue”:
    Captura de pantalla 2016-06-21 a las 15.49.45

Paso 5: Comprobamos los cambios

Abrimos 480i Manager y pulsamos botón derecho sobre “Edition_1” y elegimos “Actualizar páginas”:

Captura de pantalla 2016-06-21 a las 15.36.45

Podemos exportar el proyecto para enviarlo a nuestro dispositivo y probarlo pulsando el botón “Exportar App” arriba a la izquierda.


 

Continuamos con el siguiente tema, donde veremos cómo crear el artículo con HTML:

Ir al Foro