Primi passi con PanelWave CMS

Questa guida prende qualche immagine di vignette finite e la trasforma in una piccola graphic novel interattiva, già leggibile: due pagine, una ramificazione, due lingue, pubblicata come link di anteprima da mandare a chi vuoi. Ogni passo rimanda alla pagina corrispondente della documentazione di PanelWave, così puoi approfondire quando vuoi. Se preferisci leggere prima una versione più lunga e ricca di screenshot, la documentazione ha un tutorial guidato: Your First Graphic Novel.

Passo 1: crea un’opera

In PanelWave tutto vive dentro un’opera: un progetto autonomo con capitoli, asset, personaggi, traduzioni e impostazioni propri. Nella schermata My Works clicca Create New Work. La procedura guidata in quattro passi chiede titolo e slug per l’URL (con verifica immediata della disponibilità), lingua predefinita e lingue aggiuntive, i formati di pagina per cui vuoi progettare, una classificazione per età e alcuni tag. Se vuoi partire con impostazioni predefinite sensate, scegli un modello come Webcomic o Branching Novel.

Per questo tutorial contano due scelte. In Languages scegli l’inglese come lingua predefinita e spunta il tedesco (o un’altra seconda lingua): così più avanti avremo qualcosa da tradurre. In Page Formats seleziona Mobile portrait e Desktop. Le pagine si impaginano separatamente per ogni formato, quindi scegli solo quelli per cui progetterai davvero. Lascia spuntato Start with a first chapter: l’editor si aprirà con il capitolo 1 e una pagina 1 vuota in ogni formato. La procedura è descritta passo per passo in Creating a work, e ogni impostazione si può cambiare in seguito in Work Properties.

Hai già del materiale? La stessa schermata offre Import Script per una sceneggiatura Fountain (Script Import) e Import Pages, con cui l’IA divide in vignette le immagini delle tavole finite (Page Import). In questo tutorial costruiamo tutto a mano: è il modo più rapido per imparare a usare l’editor.

Passo 2: carica le illustrazioni

L’opera si apre nell’editor. Nella barra laterale sinistra passa alla scheda Assets e trascina le immagini delle vignette in un punto qualsiasi dell’editor: comparirà una zona di rilascio. Per ogni file appare una scheda con l’avanzamento del caricamento, poi un badge Processing mentre la pipeline in background genera le varianti AVIF e WebP, una miniatura e una scala responsive da 640 a 2560 pixel. Nel frattempo puoi continuare a lavorare; più tardi i lettori riceveranno in automatico la variante migliore per il loro dispositivo.

Due abitudini ripagano fin dal primo giorno. Crea una cartella per ogni capitolo nel pannello delle cartelle e selezionala prima di caricare: i nuovi file finiranno lì in automatico. E aggiungi un testo alternativo alle illustrazioni importanti con Edit Metadata: il controllo pre-pubblicazione te lo ricorderà, e a chi usa uno screen reader serve. Il riferimento completo è in Assets, compresi i caricamenti riprendibili per i video di grandi dimensioni e l’azione Replace File, che sostituisce un’illustrazione senza rompere i riferimenti.

Passo 3: orientati nell’editor

L’editor ha quattro zone attorno al canvas centrale: a sinistra la barra laterale con le schede Tree, Assets e Tools; il canvas stesso; a destra l’inspector con le schede Panel, Layer, Hotspot, Speech e A11y; in basso la timeline per animazioni e audio. Le due barre laterali e la timeline si possono ridimensionare o comprimere. L’intestazione mostra il percorso di navigazione, lo stato del salvataggio, annulla e ripeti, un selettore della lingua e i pulsanti Preview, Preflight e Publish. Una visita guidata è nella pagina Editor Layout.

Non serve mai premere salva. L’editor salva in automatico due secondi dopo l’ultima modifica, e il badge passa da Unsaved changes a Saved just now; se stai per aprire l’anteprima, Ctrl+S salva subito. La cronologia degli annullamenti copre ogni modifica a canvas, albero e inspector. Altri due tasti da imparare subito: Ctrl+K (o Cmd+K) apre la palette dei comandi, il punto interrogativo apre la panoramica delle scorciatoie. L’elenco completo è in Shortcuts.

Passo 4: impagina la prima pagina

Seleziona Page 1 nella scheda Tree. Il canvas passa alla vista pagina, che mostra la pagina intera con tutte le vignette. Ora trascina la prima immagine dalla scheda Assets in uno spazio vuoto del canvas. Con quel solo gesto nasce una vignetta: l’immagine diventa il suo livello di sfondo e la vignetta si adatta alle proporzioni dell’immagine in ogni formato di pagina dell’opera. Ripeti con altre due o tre immagini, poi disponile: trascina per spostarle, usa le maniglie agli angoli per ridimensionarle senza deformarle e lascia che le guide intelligenti allineino bordi e centri. Se selezioni più vignette, il menu del tasto destro offre Align e Distribute.

Ogni vignetta riceve un badge blu numerato con il suo ordine di lettura; per cambiarlo, trascina le righe nel Tree. Le posizioni delle vignette sono salvate in percentuale rispetto alla pagina, quindi la stessa impaginazione si adatta quando, nella barra degli strumenti del canvas, passi da Desktop a Mobile portrait con il selettore di formato. Leggi Pages and Panels per l’albero della struttura e le proprietà della pagina, e Canvas per zoom, selezione, aggancio e la differenza tra vista pagina e vista vignetta.

Un comportamento del canvas sorprende chi inizia: nella vista pagina, trascinando le maniglie sui lati di una vignetta non la allunghi, ma ne ritagli l’area visibile. Così una vignetta può mostrare un’inquadratura diversa in ogni formato di pagina. Per ridimensionarla, usa le maniglie agli angoli.

Passo 5: aggiungi un livello di didascalia

Fai doppio clic su una vignetta per entrare nella vista vignetta, dove ne modifichi il contenuto. Una vignetta è una pila di livelli (immagine, video, audio, testo e plugin) che il player compone nell’immagine finale. Premi T per lo strumento Testo e clicca sul canvas per aggiungere una didascalia. La scheda Layer dell’inspector controlla font, dimensione, peso, colore e allineamento, oltre a trasformazione, opacità e ordine di sovrapposizione. La sezione Layers della scheda Panel elenca tutto ciò che c’è nella vignetta, con interruttori di visibilità e pulsanti su/giù per l’ordine dei livelli. Tutto sui livelli, compresi l’effetto opzionale Drag Reveal e la profondità in parallasse, è in Layers.

Passo 6: fai il lettering con i balloon

Sempre nella vista vignetta, premi S per lo strumento Speech Bubble e clicca dove vuoi il balloon. Il balloon compare e l’editor di testo si apre subito: scrivi la battuta e premi Ctrl+Invio. Il balloon cresce e si restringe in tempo reale insieme al testo. Lo disegna lo stesso motore dei balloon del player open source, quindi l’editor mostra esattamente ciò che vedranno i lettori. Trascina il corpo per spostarlo, trascina la punta della coda verso chi parla e fai doppio clic quando vuoi per modificare di nuovo il testo.

Nel menu del tasto destro, il sottomenu Add Speech Bubble elenca tutti e dieci i tipi di balloon: normale, rettangolare, pensiero, urlo, sussurro, connettore, e i riquadri di didascalia del narratore e in testa alla vignetta, che si agganciano a filo del bordo. Lo stile funziona a cascata: l’impostazione predefinita dell’opera in Work Properties, una personalizzazione opzionale per personaggio e una per singolo balloon nel pannello Balloon Style. Imposti lo stile di base una volta e ogni balloon si adegua. La cascata, le impostazioni della coda e la dimensione del lettering per formato sono spiegate in Speech Bubbles.

Assegna al balloon chi parla. Apri il gestore Characters nell’area Backstage, crea i due protagonisti con un ritratto e, se vuoi, uno stile di balloon dedicato, poi sceglili nel menu a tendina Speaker del balloon. Il nome del personaggio compare sopra il balloon sul canvas e il suo stile si applica in automatico.

Passo 7: aggiungi una scelta con un hotspot

L’interattività comincia con un hotspot: un’area cliccabile su una vignetta. Sull’ultima vignetta premi R e clicca per disegnare un rettangolo su qualcosa che il lettore potrebbe scegliere, per esempio una porta. Nella scheda Hotspot dagli un’etichetta e un’etichetta ARIA, poi clicca Add Action e scegli Set Variables: aggiungi una riga che imposta una variabile chiamata choice sul valore left. Aggiungi un secondo hotspot per l’altra porta, che imposta choice su right. Forme, azioni, mutazioni e condizioni degli hotspot sono spiegate in Hotspots.

Le variabili sono la memoria della storia. Hanno un tipo, un valore predefinito e uno di cinque ambiti, dalla singola pagina fino alla persistenza tra una sessione e l’altra. Per una decisione che tutta la storia deve ricordare, l’ambito giusto è global. Come si definiscono, si modificano e si leggono le variabili nelle condizioni lo trovi in Variables and Conditions; il modello di fondo è nel concetto di variabili.

Passo 8: collega la storia nel Graph Editor

Prima crea la pagina 2 con due vignette, una per ciascuna porta. Poi apri il Graph Editor dalla barra laterale del Backstage o dal menu Work areas nell’intestazione dell’editor. Ogni capitolo ha un grafo di flusso: le vignette sono i nodi, i collegamenti sono le frecce che il player segue. La vignetta d’ingresso è verde con una stella, i vicoli ciechi sono rossi, e Auto-Layout (tasto L) mette in ordine la mappa. Per collegare due vignette seleziona l’origine, premi C, scegli la destinazione con le frecce e premi Invio. Il collegamento viene salvato subito.

Collega la vignetta della scelta a entrambe le vignette delle porte, poi seleziona ogni collegamento e assegnagli una condizione in JSON Logic, un piccolo formato di regole che si legge come una domanda: la variabile choice è uguale a left? La pagina del grafo riporta la sintassi esatta in Edge conditions, con esempi da copiare e adattare. I collegamenti condizionali diventano arancioni e tratteggiati. Con Simulate percorri la storia con i valori reali delle variabili; tieni d’occhio il pannello Validation per vignette irraggiungibili e vicoli ciechi. Se i grafi sono una novità per te, la pagina concettuale Graph Navigation spiega perché PanelWave li preferisce a un ordine fisso delle pagine.

Passo 9: traduci l’opera

Apri Localization dalla barra laterale del Backstage. Clicca Extract Strings: ogni testo destinato ai lettori, comprese le battute nei balloon e i titoli delle vignette, compare in una tabella con una chiave stabile, il testo di origine e un badge Used in. Clicca su una cella di traduzione per scrivere la battuta in tedesco, oppure clicca Translate untranslated per tradurre in automatico l’intera lingua in un solo passaggio; le traduzioni automatiche portano un badge MT finché non le confermi. I balloon si ridimensionano per ogni lingua, quindi anche le traduzioni più lunghe ci stanno. Con il selettore della lingua nell’intestazione dell’editor controlli ogni lingua sul canvas.

In un progetto reale passeresti le stringhe a un traduttore: il menu Export produce CSV o XLIFF 1.2 per gli strumenti CAT, e Import riporta dentro il risultato. La memoria di traduzione suggerisce il lavoro già fatto, un glossario mantiene coerenti i termini chiave e il rilevamento delle traduzioni obsolete segnala quelle il cui testo di origine è cambiato. Trovi tutto in Localization; in Audio Localization puoi registrare o generare le battute parlate per ogni lingua.

Passo 10: provala come un lettore

Clicca Preview Work nell’intestazione dell’editor. Il player integrato è lo stesso PanelWave Player open source che riproduce le opere pubblicate: non è un’approssimazione. Cambia la cornice del dispositivo con i tasti 1, 2 e 3, cambia lingua con L e usa il pannello Variables per forzare choice prima su left e poi su right: così verifichi entrambi i rami senza cliccare sugli hotspot. Se vuoi ripetere il test, salva la combinazione come scenario. I comandi, compresi i diritti di accesso simulati per testare il paywall, sono documentati in Preview.

Passo 11: controlla e pubblica

Clicca Preflight. Il controllo pre-pubblicazione verifica otto categorie: dall’accessibilità (livelli immagine senza testo alternativo) e dalla localizzazione (traduzioni mancanti) fino al flusso (vignette irraggiungibili dall’ingresso del capitolo), alle prestazioni (asset troppo pesanti) e all’integrità (riferimenti rotti). Gli errori bloccano la pubblicazione, gli avvisi no. Ogni problema ha un link Open in editor che porta alla vignetta esatta, e molti hanno un pulsante Fix; per le immagini oltre il limite di dimensione c’è la correzione Optimize, che le ricodifica in background lasciando intatto l’originale. Vedi Validation and Preflight e il riferimento dei codici dei problemi.

Poi clicca Publish. La procedura guidata in quattro passi ripete il controllo pre-pubblicazione, chiede un ambiente, propone un tag di versione e un backup, e mostra l’avanzamento in tempo reale mentre crea il manifest e carica gli asset. Per la prima opera scegli l’ambiente Preview: genera un link non indovinabile e revocabile, che chiunque può aprire in un PanelWave Player senza accedere al CMS. Mandalo a un’amica o a un amico e guarda quale porta sceglie. Ogni pubblicazione finisce nella cronologia delle release, con confronto affiancato e anteprima del rollback. L’intero flusso è descritto in Publishing.

Come proseguire

Ora hai una graphic novel ramificata di due pagine, in due lingue, e un link che lo dimostra. Da qui l’editor si apre in tutte le direzioni:

E se ti chiedi che cosa scrive il CMS al posto tuo: è il manifest PanelWave aperto, documentato campo per campo nel riferimento dello schema. La tua opera è tua, in un formato che puoi leggere.

• Animazioni e Audio: movimenti di camera, keyframe e un mix a quattro bus di ambiente, musica, effetti sonori e voce sulla timeline.
• Vignette video: livelli video con modalità di riproduzione e di avvio, loop e fotogrammi poster.
• Canvas Layout: la tela infinita, dove le vignette stanno su un unico piano continuo con movimenti di camera definiti dall’autore.
• Extra: copertine, schede dei personaggi, illustrazioni bonus e interviste, direttamente nella barra degli strumenti del player.
• Monetizzazione: regole di paywall per opera, capitolo o vignetta, e il simulatore dei diritti di accesso.
• Export: PDF per la stampa, PowerPoint per le presentazioni, video per i trailer e un archivio dell’opera che sposta l’intero progetto da un sistema all’altro.
• Analisi: funnel di lettura, coinvolgimento per vignetta e heatmap dei clic sugli hotspot, appena arrivano i lettori.