Cómo añadir archivos HTML a una publicación para tableta creada con InDesign y Adobe DPS

    El objetivo

    Queremos incorporar directamente archivos HTML a una aplicación hecha con InDesign y Adobe DPS y no queremos colocar nada en una página de InDesign, sino usar el "Folio Builder" como una especie de empaquetador directo para procesar uno o muchos artículos HTML.

    Es perfectamente posible y las posibilidades disponibles mejoran en cada versión de Adobe DPS. De hecho, según algunas personas, la incorporación de HTML 5 es la vía de futuro de Adobe DPS —yo, como no soy gurú de nada, no sabría decir tanto. Lo cierto es que es una vía que tiene muchas ventajas. Una de las principales es que el usuario puede seleccionar el texto colocado así en nuestra aplicación con Adobe DPS. De momento es la única manera de conseguir este objetivo —que para algunos editores es importante.

    En todo caso, es una forma rápida y sencilla —si se controla algo de HTML— para añadir contenido en masa a una publicación.

    Incorporar un artículo HTML simple

    Cuando se trata de un único artículo HTML —sin imágenes ni hojas de estilo ni JavaScript— es muy sencillo:

    Ventana de Folio Builder de Adobe DPS.

    Si aún no hemos creado la publicación, desde InDesign, abrimos Folio Builder y vamos al submenú "Crear nueva publicación" —no olvidemos crearla con doble orientación, por cierto.

    Ventana de Folio Builder de Adobe DPS.

    La publicación se puede ver, vacía, en Folio Builder. Comenzaremos por añadir un único artículo sencillo a la publicación destinada al iPad. Sin fuentes, sin hoja de estilo aparte, sólo el archivo HTML.

    Ventana de Folio Builder de Adobe DPS.

    Vamos a la esquina superior derecha de la ventana y abrimos el submenú "Importar".

    En las "Opciones de importación", elegimos "Importar un único artículo" y escribimos el nombre del artículo.

    Advertencias importantes

    • Primera advertencia: Es buena práctica acostumbrarse a llamar exactamente igual al archivo HTML original, a la carpeta que lo contiene y al artículo de Adobe DPS. Eso establece una relación unívoca que, además de ahorrarnos muchos dolores de cabeza, facilita la automatización en el trabajo de importación o actualización de contenidos.

      Puedes llamar al artículo de Adobe DPS como quieras. Pero si no respetas esa correspondencia de igual a igual, tendrás momentos de gran melancolía en tu jornada laboral.

    • Segunda advertencia: No debemos usar nunca espacios o signos diacríticos (marcas de acento, etc…) en los nombres de los elementos que vayamos a usar. Eso provoca errores inesperados o inadvertidos —sin aviso o pista— en Adobe DPS. De hecho, es conveniente evitarlos en otras cosas como las hojas de estilo y similares.

    • Tercera advertencia: Comienza tus carpetas por un número que establezca una secuencia de aparición en la publicación. Cuando vayas a subir muchos artículos de forma automática, Folio Builder las procesará según aparezcan por orden alfabético. Si se numeran por el orden que quieres que tengan los artículos, te ahorrarás el trabajo y complicaciones de hacerlo posteriormente.

    • Cuarta advertencia: En la carpeta que contiene el archivo HTML no debe haber ningún otro archivo importable por Adobe DPS —otro documento de InDesign o archivo HTML—. Folio Builder no sabrá a quién importar primero y actuará a su libre albedrío.

    Y dicho todo eso:

    • En "Formato predeterminado" lo más usual será "Automático". La mejor opción sería "PDF que permite al usuario hacer zoom pellizcando la pantalla sin perder calidad en los elementos de texto y vectoriales. El problema es que las más de las veces no vamos a poder elegirlo ya que ese formato tiene ciertas limitaciones con si usamos "desplazamiento suave" y las páginas son largas —más de dos pantallas—, algo que va a ocurrir fácilmente con artículos HTML.

    • En "Calidad JPEG" podemos dejarlo con el valor predeterminado de "Alta". En ningún caso debemos elegir un valor menor.

    • En "Desplazamiento suave" Debemos marcar "Ambas direcciones". Esta denominación es equívoca, ya que en realidad debería decir "Ambas orientaciones". Se refiere a si el diseño y la orientación de la lectura se deben readaptar si el dispositivo se coloca en posición vertical u horizontal.

      Como queremos —y podemos— hacer un diseño que se adapte, marcamos "Ambas direcciones". Si quisieramos que nuestra publicación se lea sólo en formato apaisado, marcamos "Sólo horizontal". Si queremos que se lea sólo en formato vertical, marcamos "Sólo vertical".

      La opción "Desactivado (ajustar a página)" no tiene mucho sentido al hablar de importación directa de archivos HTML, en mi opinión.

    • En "Sólo barrido horizontal" Es una opción que se va a desactivar automáticamente al elegir el valor anterior de "Desplazamiento suave: Ambas direcciones"

    • En "Ubicación", pinchamos sobre el icono de la carpeta y navegamos hasta el directorio donde se encuentre el documento que queremos importar.

    Ventana de Folio Builder de Adobe DPS.

    Una vez especificados todos esos valores, pulsamos "OK".

    Ventana de Folio Builder de Adobe DPS.

    Y comienza la subida del artículo con Folio Builder.

    Ventana de Folio Builder de Adobe DPS.

    Una vez terminada, al ir a la interfaz web de "Folio producer" veremos que el artículo está disponible como parte de la publicación.

    Y, si vamos a nuestra copia en el iPad de Adobe Content Viewer y descargamos la prueba previa de la publicación, veremos que el artículo forma parte de ella.

    Incorporar un artículo HTML con imágenes y vínculos a archivos locales

    Avanzando en la complejidad, ahora queremos añadir un artículo que incluye imágenes y enlaces a vídeos y arhivos de audio locales. El procedimiento es igual al anterior con una salvedad: Dónde guardamos esos archivos locales vinculados.

    Podemos hacerlo de muchos modos, pero si luego queremos automatizar el trabajo de subida y actualización, la mejor es poner todos eos archivos dependientes de imagen o vídeos dentro de una carpeta llamada "links" situada al mismo nivel que el archivo HTML —es decir, dentro de la misma carpeta.

    Así, cualquier enlace a esos archivos locales será siempre "links/nombredearchivo", sin importar cómo se llame la carpeta madre del artículo.

    Estructura de archivos para trabajar con HTML.

    Un ejemplo de lo explicado se puede ver arriba: Un archivo HTML llamado "<04_katyn.htm" iría dentro de una carpeta llamada "<04_katyn, con su carpeta "links", que lleva dentro la imagen llamada "katyn.jpg".

    Incorporar hojas de estilo o JavaScript externos y comunes

    Cuando tenemos un conjunto de artículos HTML, lo usual es reunir todas las descripciones de estilo en un archivo CSS. Lo mismo ocurre cuando hacemos llamadas a un guión de JavaScript desde varias páginas: Ponemos el código en un archivo *.js y lo llamamos desde un enlace en cada archivo que lo usa.

    En este caso, Adobe DPS obliga a usar una metodología muy concreta —no es opcional—: Esos archivos CSS y JS deben colocarse dentro de un archivo comprimido llamado HTMLResources.zip.

    Para poder trabajar cómodamente en el desarrollo del sitio web antes de subirlo con Folio Builder, una buena es crear en la raiz del sitio una carpeta llamada "HTMLResources", al mismo nivel que las carpetas de los temas individuales que contienen cada archivo HTML y allí colocar todos los elementos CSS y JavaScript mencionados.

    Una vez hayamos terminado de trabajar con ellos, los añadimos a un archivo comprimido HTMLResources.zip que creamos dentro de esa misma carpeta.

    vamos al menú "Ventana - Folio Builder" y desde el submenú contextual de su esquina superior derecha, llamamos a la opción "Importar recursos HMTL...".

    Seleccionamos el archivo "HTMLResources.zip" que hemos creado antes. Si necesitásemos añadir o alterar contenidos en ese fichero, lo volvemos a crear y a importar todas las veces que haga falta.

    Cualquier enlace a archivos que vayan dentro de ese paquete debe hacerse con la forma "../HTMLResources/nombredearchivo". Dos ejemplos:

    • Un archivo CSS llamado "noticias.css" se declararía en la cabecera de un archivo HTML con la forma <link href="../HTMLResources/noticias.css" rel="stylesheet" type="text/css">".

    • Un archivo JavaScript jquery.js se declararía en la cabecera de un archivo HTML con la forma "<script type="text/javascript" src="../HTMLResources/jquery.js"></script>"

    Añadir nuevo comentario