Primeros pasos con PanelWave CMS

En este recorrido convertimos unas cuantas viñetas ya dibujadas en una pequeña novela gráfica interactiva lista para leer: dos páginas, una bifurcación, dos idiomas, publicada como enlace de vista previa que puedes mandar a quien quieras. Cada paso enlaza con la página correspondiente de la documentación de PanelWave, para que puedas profundizar cuando quieras. Si prefieres leer antes una versión más larga y llena de capturas, la documentación tiene un tutorial guiado: Tu primera novela gráfica.

Paso 1: Crea una obra

En PanelWave todo vive dentro de una obra: un proyecto autónomo con sus propios capítulos, recursos, personajes, traducciones y ajustes. En la pantalla My Works, haz clic en Create New Work. El asistente, en cuatro pasos, te pide un título y un slug de URL (comprueba al momento si está libre), el idioma predeterminado y los adicionales, los formatos de página que vas a diseñar, y una clasificación por edades con etiquetas. Si quieres partir de unos valores razonables, elige una plantilla inicial como Webcomic o Branching Novel.

Para este tutorial importan dos decisiones. En Languages, elige inglés como idioma predeterminado y marca alemán (o cualquier segundo idioma) para tener algo que traducir más adelante. En Page Formats, selecciona Mobile portrait y Desktop; las páginas se maquetan por separado en cada formato, así que elige solo los formatos que de verdad vayas a diseñar. Deja marcada la opción Start with a first chapter para que el editor se abra con el Capítulo 1 y una Página 1 vacía en cada formato. El asistente está documentado paso a paso en Crear una obra, y todos los ajustes se pueden cambiar después en Propiedades de la obra.

¿Ya tienes material? La misma pantalla ofrece Import Script para un guion en Fountain (Importar guion) e Import Pages, con el que la IA divide páginas terminadas en viñetas (Importar páginas). Aquí lo hacemos a mano, porque así se aprende antes el editor.

Paso 2: Sube tus ilustraciones

La obra se abre en el editor. En la barra lateral izquierda, cambia a la pestaña Assets y arrastra tus imágenes de viñetas a cualquier punto del editor; aparecerá una zona para soltarlas. Cada archivo muestra una tarjeta con el progreso de subida y, después, una etiqueta Processing mientras el proceso en segundo plano genera variantes AVIF y WebP, una miniatura y una serie de tamaños adaptables de 640 a 2560 píxeles. Puedes seguir trabajando mientras tanto; al leer, cada dispositivo recibirá automáticamente la mejor variante.

Dos hábitos que compensan desde el primer día. Crea una carpeta por capítulo en el panel de carpetas y selecciónala antes de subir, para que los archivos nuevos se archiven automáticamente. Y añade texto alternativo a las ilustraciones importantes con Edit Metadata: Preflight te lo recordará más adelante, y quienes usan lectores de pantalla lo necesitan. Todo lo demás está en Recursos, incluidas las subidas reanudables para vídeos grandes y la acción Replace File, que cambia una ilustración sin romper referencias.

Paso 3: Oriéntate en el editor

El editor tiene cuatro zonas alrededor de un lienzo central: la barra lateral izquierda con las pestañas Tree, Assets y Tools, el propio lienzo, el inspector de la derecha con las pestañas Panel, Layer, Hotspot, Speech y A11y, y la línea de tiempo en la parte inferior para animaciones y audio. Las dos barras laterales y la línea de tiempo se pueden redimensionar o plegar. La cabecera muestra la ruta de navegación, el estado de guardado, deshacer y rehacer, un selector de idioma y los botones Preview, Preflight y Publish. Tienes una visita guiada en la página Disposición del editor.

No hace falta guardar nunca. El editor guarda automáticamente dos segundos después de tu último cambio y la etiqueta pasa de Unsaved changes a Saved just now; Ctrl+S guarda al instante si estás a punto de previsualizar. El historial de deshacer cubre todas las ediciones en el lienzo, el árbol y el inspector. Otras dos teclas que conviene aprender ya: Ctrl+K (o Cmd+K) abre la paleta de comandos, y la tecla del signo de interrogación abre la superposición de atajos. La lista completa está en Atajos.

Paso 4: Maqueta tu primera página

Selecciona Page 1 en la pestaña Tree. El lienzo cambia a la vista de página, que muestra una página entera con todas sus viñetas. Ahora arrastra tu primera imagen desde la pestaña Assets a un espacio vacío del lienzo. Ese único gesto crea una viñeta, coloca la imagen como capa de fondo y ajusta la viñeta a la proporción de la imagen en todos los formatos de página que admite la obra. Repítelo con dos o tres imágenes más y después ordénalas: arrastra para mover, usa los tiradores de las esquinas para redimensionar sin deformar y deja que las guías inteligentes alineen bordes y centros. Con varias viñetas seleccionadas, el menú del botón derecho ofrece Align y Distribute.

Cada viñeta recibe una etiqueta azul numerada con su orden de lectura; arrastra las filas en el árbol para cambiarlo. Las posiciones de las viñetas se guardan como porcentajes de la página, así que la misma maquetación se adapta cuando cambias el selector de formato de la barra de herramientas del lienzo de Desktop a Mobile portrait. En Páginas y viñetas tienes el árbol de estructura y las propiedades de página, y en Lienzo, el zoom, la selección, el ajuste y la diferencia entre la vista de página y la vista de viñeta.

Hay un comportamiento del lienzo que sorprende a quien empieza: en la vista de página, arrastrar los tiradores laterales de una viñeta no la estira. Lo que hace es recortar el área visible, de modo que una viñeta puede mostrar un encuadre distinto en cada formato de página. Usa los tiradores de las esquinas cuando quieras redimensionar.

Paso 5: Añade una capa de texto

Haz doble clic en una viñeta para entrar en la vista de viñeta, donde editas lo que hay dentro. Una viñeta es una pila de capas: capas de imagen, vídeo, audio, texto y plugin que el reproductor combina en la imagen final. Pulsa T para la herramienta de texto y haz clic en el lienzo para añadir un texto; la pestaña Layer del inspector controla la fuente, el tamaño, el grosor, el color y la alineación, además de la transformación, la opacidad y el orden de apilamiento. La sección Layers de la pestaña Panel enumera todo lo que hay en la viñeta, con interruptores de visibilidad y botones arriba/abajo para el orden en z. Todo sobre las capas, incluidos el barrido opcional Drag Reveal y la profundidad con parallax, está en Capas.

Paso 6: Rotula con bocadillos

Todavía en la vista de viñeta, pulsa S para la herramienta de bocadillo y haz clic donde deba ir. Aparece un bocadillo y el editor de texto en línea se abre al instante; escribe la frase y pulsa Ctrl+Enter. El bocadillo crece y se encoge en directo con el texto, y lo dibuja el mismo motor de bocadillos que usa el PanelWave Player, de código abierto, así que el editor muestra exactamente lo que verá tu público. Arrastra el cuerpo para moverlo, arrastra la punta del rabillo para señalar a quien habla y haz doble clic en cualquier momento para volver a editar el texto.

El submenú Add Speech Bubble del botón derecho enumera los diez tipos de bocadillo: normal, rectángulo, pensamiento, grito, susurro, conector, y los cartuchos de narrador y de borde superior de la viñeta, que se ajustan al ras del borde. El estilo funciona en cascada: el valor predeterminado de la obra en Work Properties, un ajuste opcional por personaje y un ajuste por bocadillo en el panel Balloon Style. Define el estilo base una vez y todos los bocadillos lo siguen. La cascada, los ajustes del rabillo y el tamaño de la rotulación por formato se explican en Bocadillos.

Indica de quién es cada bocadillo. Abre el gestor de Personajes en el área Backstage, crea a tus dos protagonistas con un retrato y, si quieres, un estilo de bocadillo propio, y después elígelos en el desplegable Speaker del bocadillo. El nombre del personaje aparece encima del bocadillo en el lienzo y su estilo se aplica automáticamente.

Paso 7: Añade una decisión con una zona interactiva

Toda interacción empieza con una zona interactiva: un área de la viñeta en la que se puede hacer clic. En tu última viñeta, pulsa R y haz clic para colocar un rectángulo sobre algo que se pueda elegir, por ejemplo, una puerta. En la pestaña Hotspot, dale una etiqueta y una etiqueta ARIA, haz clic en Add Action y elige Set Variables: añade una fila que asigne a una variable llamada choice el valor left. Añade una segunda zona interactiva para la otra puerta que asigne a choice el valor right. Las formas, acciones, mutaciones y condiciones de las zonas interactivas se explican en Zonas interactivas.

Las variables son la memoria de tu historia. Tienen un tipo, un valor predeterminado y uno de cinco ámbitos, desde el nivel de página hasta el persistente entre sesiones. Para una decisión que toda la historia deba recordar, el ámbito adecuado es global. En Variables y condiciones verás cómo se definen, se cambian y se leen en las condiciones; el modelo de fondo está en el concepto de variables.

Paso 8: Conecta la historia en el Graph Editor

Primero, crea la Página 2 con dos viñetas, una para cada puerta. Después abre el Graph Editor desde la barra lateral de Backstage o desde el menú Work areas de la cabecera del editor. Cada capítulo tiene un grafo de flujo: las viñetas son nodos y las aristas son las flechas que sigue el reproductor. La viñeta de entrada aparece marcada en verde con una estrella, los callejones sin salida en rojo, y Auto-Layout (tecla L) ordena el mapa. Para conectar dos viñetas, selecciona la de origen, pulsa C, elige la de destino con las teclas de flecha y pulsa Enter. La arista se guarda al instante.

Conecta tu viñeta de decisión con las dos viñetas de las puertas, y después selecciona cada arista y dale una condición en JSON Logic, un pequeño formato de reglas que se lee como una pregunta: ¿la variable choice es igual a left? La página del grafo muestra la sintaxis exacta en Condiciones de las aristas, con ejemplos para copiar y adaptar. Las aristas condicionales pasan a ser naranjas y discontinuas. Usa Simulate para recorrer la historia con valores de variables en directo y vigila el panel de validación por si hay viñetas inalcanzables o callejones sin salida. Si los grafos son nuevos para ti, la página de concepto Navegación por grafo explica por qué PanelWave los usa en lugar de un orden de páginas fijo.

Paso 9: Traduce la obra

Abre Localization desde la barra lateral de Backstage. Haz clic en Extract Strings y todos los textos visibles para el público, incluidas las frases de tus bocadillos y los títulos de las viñetas, aparecen en una tabla con una clave estable, el texto original y una etiqueta Used in. Haz clic en una celda de traducción para escribir la frase en alemán, o haz clic en Translate untranslated para traducir automáticamente todo el idioma de una sola pasada; las traducciones automáticas llevan una etiqueta MT hasta que las confirmas. Como los bocadillos se vuelven a medir en cada idioma, las traducciones más largas siguen cabiendo. El selector de idioma de la cabecera del editor te permite revisar cada idioma en el lienzo.

En un proyecto real pasarías las cadenas a un traductor: el menú Export genera CSV o XLIFF 1.2 para herramientas TAO, e Import devuelve el resultado. La memoria de traducción sugiere trabajo anterior, un glosario mantiene la coherencia de los términos clave y la detección de desactualización marca las traducciones cuyo texto original ha cambiado. Todo ello está en Localización; los diálogos hablados se pueden grabar o generar por idioma en Localización de audio.

Paso 10: Previsualiza la obra

Haz clic en Preview Work en la cabecera del editor. El reproductor integrado es el mismo PanelWave Player de código abierto que muestra las obras publicadas, así que lo que ves no es una aproximación. Cambia de marco de dispositivo con las teclas 1, 2 y 3, cambia el idioma con L y usa el panel Variables para forzar choice a left y luego a right: así compruebas las dos ramas sin tocar las zonas interactivas. Guarda la combinación como escenario si vas a volver a probarla. Los controles, incluidos los derechos de acceso simulados para probar muros de pago, están documentados en Vista previa.

Paso 11: Valida y publica

Haz clic en Preflight. La validación revisa ocho categorías, desde la accesibilidad (capas de imagen sin texto alternativo) y la localización (traducciones que faltan) hasta el flujo (viñetas inalcanzables desde la entrada del capítulo), el rendimiento (recursos demasiado grandes) y la integridad (referencias rotas). Los errores bloquean la publicación, los avisos no. Cada incidencia tiene un enlace Open in editor que lleva a la viñeta exacta, y muchas tienen un botón Fix; las imágenes que superan el límite de tamaño de publicación reciben una corrección Optimize que las vuelve a codificar en segundo plano sin tocar tu original. Consulta Validación y Preflight y la referencia de códigos de incidencia.

Después haz clic en Publish. El asistente de cuatro pasos vuelve a ejecutar Preflight, te pide un entorno, ofrece una etiqueta de versión y una copia de seguridad, y muestra el progreso en directo mientras genera el manifiesto y sube los recursos. Para tu primera obra, elige el entorno Preview: genera un enlace imposible de adivinar y revocable que cualquiera puede abrir en un PanelWave Player sin iniciar sesión en el CMS. Mándaselo a alguien y mira qué puerta elige. Cada publicación queda en el historial de versiones, con comparación lado a lado y vista previa de reversión. Todo el flujo está en Publicación.

Adónde ir después

Ya tienes una novela gráfica ramificada de dos páginas y dos idiomas, y un enlace que lo demuestra. A partir de aquí el editor se abre en todas direcciones:

Y si alguna vez te preguntas qué escribe el CMS en tu nombre: es el manifiesto de PanelWave, abierto y documentado campo a campo en la referencia del esquema. Tu obra es tuya, en un formato que puedes leer.

• Animaciones y Audio: movimientos de cámara, fotogramas clave y una mezcla de cuatro buses con ambiente, música, efectos de sonido y voz en la línea de tiempo.
• Viñetas de vídeo: capas de vídeo con modos de reproducción y de inicio, bucles y fotogramas de póster.
• Canvas Layout: el lienzo infinito, donde las viñetas se sitúan en un único plano continuo con movimientos de cámara definidos por ti.
• Extras: portadas, fichas de personajes, ilustraciones extra y entrevistas dentro de la barra de herramientas del reproductor.
• Monetización: reglas de muro de pago por obra, capítulo o viñeta, y el simulador de derechos de acceso.
• Exportación: PDF para imprenta, PowerPoint para presentaciones, vídeo para tráilers y un archivo de obra que traslada todo el proyecto entre sistemas.
• Analíticas: el embudo de lectura, la interacción por viñeta y los mapas de calor de clics en zonas interactivas en cuanto llegue tu público.