MiMoriarty

Trucos de diseño para diseñar como locos

Scrollable Content para iPad. Marco de texto y objetos desplazables

En una revista digital no tenemos la misma limitación física que en una impresa, en lo referente a la extensión del texto en una columna.
Podemos crear un marco de texto que se desplaza verticalmente, mostrando todo el texto que contiene. Es una de las ventajas de publicar en digital.

Utilizamos para diseñar la página InDesign CS5 o la próxima actualización a la suite CS 5.5, que se comercializará a partir de este mes de mayo.

Creación de la capa Scrollable Content

En el panel de capas (ventana/capas) de InDesign creamos una nueva capa y la llamamos literalmente Scrollable Content.

Es fundamental denominar a la capa Scrollable Content, incluido el comienzo por “S” mayúscula de Scrollable y “C” de Content. Estas palabras son las que indican al Digital Content Bundler la acción de deslizar el texto dentro de su marco.

Tenemos dos capas, la denominada capa GENERAL que incluye todos los elementos de la página (titular, entradilla, fotos, gráficos…) y la capa Scrollable Content. Situate en la capa GENERAL y copia el marco de texto vacío, que en este ejemplo tiene un color azul con un efecto de transparencia, el que se llama “contenedor del marco de texto” (mira la imagen superior). Activa la capa Scrollable Content y pega el marco de texto. Coloca el marco de texto sobre la mesa de trabajo, pero que toque por uno de sus laterales con la página. Luego verás la importancia de situarlo de este modo.

Las cajas de texto tienen que tener el mismo ancho. Al copiar y pegar la caja de texto contenedor, te aseguras de ello.

Observa la paleta de capas. Si expandes, accionando el triángulo situado al lado del nombre de capa, ves los distintos elementos que incluye la capa. El que interesa ahora es el denominado <marco de texto>, presente en ambas capas. Muy importante, tienes que denominarlo con el nombre que quieras, a tu elección, pero igual en ambas capas, la GENERAL y la capa Scrollable Content. En este ejemplo lo llamo TEXTO ARTÍCULO.

Activa la caja o marco de texto situado en la capa Scrollable Content, coloca el texto del artículo y dale el formato de estilo que tiene tu revista. Puedes abrir el marco de texto en vertical lo necesario para que entre todo el texto. Asegúrate de que el texto no se desborda de la caja, ya sabes, no aparece en la esquina inferior derecha el cuadrado rojo con la cruz.

En el otro marco de texto, el situado en la capa GENERAL, no tienes que incluir ningún texto, sólo actúa a modo de contenedor. Por supuesto, cuando veas la página en el iPad, será el lugar donde aparece el texto desplazable con la típica barra de ascensor.

Puede que te preguntes cómo abrir la caja de texto en vertical lo necesario para que entre el texto, si estoy limitado por el alto de la mesa de trabajo. Es sencillo, ampliando la mesa de trabajo. Abre las preferencias de guías y mesa de trabajo (menú InDesign/preferencias/ Guías y mesa de trabajo). En la parte inferior de la ventana, están las opciones de mesa de trabajo, en la que puedes cambiar los valores de ancho y alto de tu mesa de trabajo. Puedes introducir un valor entre 0 px y 8640 px, o su equivalente 3048 mm.
Ahora que puedes tener una mesa de trabajo de 3 metros, no abuses de hacer una caja de texto desplazable muy larga, ya que el usuario puede que se aburra de tanto desplazar el texto.

Recuerda que existe la página en sentido horizontal (Página digital para iPad. Una página, dos vidas). Tienes que hacer el mismo proceso para esta posición. Si has diseñado tu maqueta con el mismo ancho de columna para la posición vertical y horizontal, lo tienes fácil.

Selecciona los dos marcos de texto, el de la capa GENERAL y el marco de texto (que incluye el texto del artículo) de la capa Scrollable Content y los copias.
Abre la versión de página horizontal y asegúrate de tener activada la opción de “recordar capas al pegar” (menú de opciones de la paleta de capas), pega lo copiado y ya lo tienes. Tienes que situar y acomodar el alto del marco de texto de la capa GENERAL, al nuevo formato horizontal, pero recuerda no cambiar el ancho de la caja de texto.
Puedes comprobar que tienes dos capas, GENERAL y Scrollable Content, y que el marco de texto se denomina igual en ambas capas: TEXTO ARTÍCULO.

Para terminar el trabajo, exporta la página al Digital Content Bundler.

Movimiento de objetos agrupados

Mi amigo, el diseñador gráfico Josep Patau (www.unostiposduros.com), me enseñó un interesante truco. No sólo es posible hacer un marco con texto desplazable. Puedes hacer la prueba de incluir imágenes, gráficos y texto, agrupas estos objetos y le llamas por la instancia Scrollable Content, y observa como todo se mueve en un bloque.

Si el contenido, situado en al capa Scrollable Content, se pone totalmente en la mesa de trabajo, al procesar los archivos el Content Bundler, se omiten todos los objetos vinculados. Por este motivo tiene que tocar un poco la página.

About miguel monge

Experiencia visual de lo que miras pero no ves, de lo que imaginas y te gustaría enseñar.

7 comments on “Scrollable Content para iPad. Marco de texto y objetos desplazables

  1. raul
    May 16, 2011

    Hola, entonces para hacer estas comprobaciones se hace necesario tener un ipad?

    • miguel monge
      May 16, 2011

      Hola Raúl
      Tener un iPad ayuda a interactuar de una forma real con la revista.
      Existe una aplicación llamada Adobe Content Viewer, que simula la pantalla del iPad en el ordenador, para que puedas hacer pruebas antes de pasarla al iPad.
      Supongo que viene integrada en la actualización a CS5.5, en la versión beta del Digital Publishing Suite no aparecía.

      • Raúl
        May 18, 2011

        Gracías por contestar.
        Sí, con el Adobe Content Viewer puedo hacer comprobaciones durante el trabajo, pero no sería capaz de entregarlo sin haberlo probado en su medio real, así que va ver que pillarse uno.

  2. maclane
    June 15, 2011

    Hola Miguel,

    es posible crear un campo de texto que el usuario pueda rellenar en la revista? No encuentro nada en Adobe Help, los resultados me derivan siempre a la creación de formularios en pdf pero no me refiero a eso. Perdona si no me he esplicado bien. Gracias.

    • miguel monge
      June 15, 2011

      Hola Raúl,
      Que yo sepa no se pueden rellenar campos de texto dentro de una revista producida con Adobe digital publishing.
      Tampoco permite seleccionar el texto de los artículos para copiarlo, compartirlo en redes sociales o enviarlo por email.
      Esto es debido a que el archivo final es una imagen que contiene elementos multimedia y es interactiva al tacto, pero no deja de ser un archivo cerrado.
      Es una de las desventajas de este sistema. Si existen soluciones vendrán por el camino de la programación.

  3. maclane
    June 15, 2011

    Entonces debo entender que hoy por hoy no es posible realizar contenidos didácticos en los que el usuario pueda introducir texto como si fuera un formulario de flash.

    Una vez más, muchas gracias.

    • miguel monge
      June 16, 2011

      Mientras no introduzcas código en el lenguaje Objective-C, no es posible introducir texto dentro de las páginas de la revista. Ojo, que yo sepa y en fecha actual, ya sabes que la tecnología cambia rápidamente.
      Puedes echarle un vistazo a la revista Popular Mechanics. Creo que está desarrollada con Objective-C; en este vídeo promocional puedes ver en el corte 3:34, que tiene un botón para el correo y redes sociales.
      Después de ver el vídeo, te darás cuenta de las maravillas y nivel que se pueden lograr en un trabajo realmente bueno.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Top Rated

May 2011
M T W T F S S
« Apr   Jun »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
%d bloggers like this: