Cómo automatizar la composición de un libro online

Estoy armando un sitio web que personaliza libros de cuentos para niños con una amplia gama de opciones: texto e ilustraciones.

A medida que construimos el sitio web y somos nuevos en el espacio de diseño/libros, ¿puede señalarnos las mejores herramientas/paquetes para componer estos libros a través de nuestro sitio web y automatizar la composición para que podamos enviarlos en formato PDF y mostrarlos instantáneamente al usuario?

La composición (ocultar/mostrar diferentes capas en función de las elecciones del usuario, cambios de texto en función de las elecciones del usuario) se realizará en el back-end, se creará un PDF (resolución pequeña) para luego mostrárselo al usuario a través de un libro html de página rotatoria.

Estaremos recibiendo todas las escenas base, personajes e ilustraciones personalizadas como archivos individuales.

Estoy pensando en 2 opciones principales:

  • Secuencias de comandos de InDesign (o similar) en el back-end
  • Usar lienzo HTML5 para ocultar/mostrar capas

¡Gracias!

Hola Chris, no estoy del todo seguro de lo que estás preguntando. ¿Quiere hacer un libro y mostrarlo tal cual en un sitio web, o quiere crear libros y luego mostrar las portadas en un sitio, o quiere crear un libro y un sitio web separado? ¿Podría editar su pregunta y explicar qué es exactamente lo que quiere hacer?
Gracias, he agregado más detalles sobre el objetivo, principalmente automatizando la composición (ocultar/mostrar capas) para crear un PDF de alta y baja resolución. El PDF de baja resolución se mostraría al usuario a través de una biblioteca html5/javascript

Respuestas (2)

Su apuesta más profesional es comprar y utilizar el software Adobe InDesign Server-edition, que está hecho para manejar la entrada automática de cara al cliente (de forma legal y no gratuita) y presentar el resultado para la web y para impresión, siguiendo las estándares de Adobe de clase mundial.

O bien, puede optar por crear su propia forma indirecta de crear una experiencia personalizada del lado del cliente que aún se puede procesar para "llevar" la entrada a los estándares de Adobe mediante el uso de la tecnología SVG basada en navegador.

Con los SVG (Gráficos vectoriales escalables) puede aprovechar el procesamiento rápido del cliente y la implementación de Illustrator.

Comience con los siguientes principios:

  1. Los SVG tienen una amplia implementación de navegador que solo crece y crece a medida que pasa el tiempo y los navegadores se vuelven aún más avanzados en el manejo de gráficos SVG.

  2. El manejo de SVG de Adobe Illustrator puede exportar e importar el formato de manera consistente, pero usando solo un subconjunto limitado de la implementación del navegador.

Por lo tanto, puede invertir en el desarrollo de su software propietario para renunciar a la opción del servidor oficial de InDesign para sus necesidades de impresión desde la web aprovechando las funciones SVG de Illustrator.

Ahora, ¿a qué me refiero con resaltar las diferencias entre el navegador e Illustrator cuando se trata de SVG? Consulte este ejemplo vinculado en CodePen:

https://codepen.io/VHall/pen/BrdwLz

Plantilla SVG en línea de tarjeta de visita

Abra el enlace y escriba alguna información si lo desea. Observe cómo se justifica el texto como cabría esperar: los campos de nombre y título están justificados en el centro mientras que los números de teléfono están justificados a la derecha. Ahora presione el botón "Enviar" y reciba el archivo SVG descargado en su carpeta "Descargas". Ahora abra el SVG dentro de Adobe Illustrator. Si tiene la fuente Helvetica adecuada, el documento de Illustrator creado a partir del SVG interpretado debería verse exactamente igual que la representación del navegador.

La estructura de capas dentro del documento SVG abierto en Illustrator

Ahora, examine la ilustración para ver varios rectángulos con nombre alrededor del texto y el texto mismo. Notará que todo el texto es, de hecho, texto de puntos, y todo está justificado a la izquierda con el punto de anclaje del texto completamente en el lado izquierdo.

La vista de esquema que muestra el metaarte dentro del documento SVG abierto en Illustrator

Por el contrario, cree un nuevo documento de Illustrator con el texto del área justificado a la derecha y expórtelo como un SVG. Cuando se cierra el documento y se abre el SVG en Illustrator, verá que el texto cambia de tipo de área a tipo de punto con las sangrías resultantes de la justificación a la derecha que se convierte en el punto de anclaje del lado izquierdo en varias ubicaciones.

Lo que esto significa:

Si bien, de hecho, tenemos un ejemplo de una plantilla en línea del lado del cliente que se puede abrir en Illustrator y luego procesar para imprimir, con la obra de arte en los lugares donde debe estar, para algunos aspectos del arte es necesario hacer un un montón de trabajo adicional dentro de la plantilla original de Illustrator, así como javascript del lado del cliente en el navegador para que funcione como lo desea. En la base de la plantilla de la tarjeta de presentación, el documento de Illustrator que se usó para crearla contenía rectángulos invisibles que representan los límites del texto y se nombraron con nombres especiales para especificar qué tipo de justificación se necesita para un bloque en particular.

Además, inspeccione el panel javascript del codepen para ver los diversos códigos para 'justificar' automáticamente el texto del punto SVG del navegador para que se mueva hacia la izquierda o hacia la derecha cada vez que el usuario escriba algo. Así es, lo que es nativo y sin esfuerzo en el manejo de texto de Illustrator tiene que tener un montón de lógica en el navegador para replicar ese aspecto.

Extracto de javascript en el navegador para impulsar la interactividad del usuario para el SVG en línea

Sin embargo, si puede hacer que funcione e invertir en la lógica de traducción patentada entre los archivos SVG de la web y los documentos de Illustrator, entonces podría ser una solución viable sin suscripción anual que puede ayudar a impulsar su negocio en los años venideros. También agregaré que esta opción solo es viable si sus casos de obras de arte tienen un alcance limitado y puede confiar con seguridad en el hecho de que solo las características con las que se siente cómodo estarán representadas en su arte.

¿Te has cansado de apache? Fop it free y sortof hace lo mismo que el procesamiento xml de indesigns, sí, no tienes un motor de tipo adobes pero aún así
Gracias @Silly-V. Es bueno entender las diferencias. Sin embargo, no busco pasar necesariamente de HTML/SVG a InDesign/Photoshop. Nuestro sitio web permitiría al usuario seleccionar opciones que podrían enviarse a InDesign a través de un json de algún tipo para ingresar en scripts del lado del servidor, o las opciones ocultarían/mostrarían capas en el lienzo html5 donde habremos traído la escena base y todo opciones personalizadas desactivadas.
Como Illustrator tiene soporte nativo para el tipo de implementación de svg que describo, se puede usar con la automatización como escribí, para lograr una consistencia que podría ser beneficiosa en términos de adaptabilidad del navegador (por lo que puede renunciar a dibujar en lienzo como SVG son dibujos), así como la animación y el diseño de SVG: sería fácil encontrar personas que puedan hacer diseños SVG para usted en Illustrator y codificadores experimentados que también puedan manipular y animar esos SVG. Pero, en cuanto a InDesign, echa un vistazo a este producto también: ( ajarproductions.com/pages/products/in5 )

Puede buscar en Google "narración de desplazamiento de paralaje" y encontrará muchos buenos ejemplos y tutoriales. Ha sido popular durante algún tiempo cuando se cuenta una historia en la web. Puedo recomendar Adobe Muse para construir la página.

Hola Mikael, ¿podrías editar tu respuesta y explicar cómo la técnica que mencionaste puede ayudar al interrogador a resolver su problema?