<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.4">Jekyll</generator><link href="https://telario.github.io/feed.xml" rel="self" type="application/atom+xml" /><link href="https://telario.github.io/" rel="alternate" type="text/html" /><updated>2026-10-25T12:36:14+01:00</updated><id>https://telario.github.io/feed.xml</id><title type="html">Telario</title><subtitle>Il mockup c’è. La licenza no. Apri, esplora e modifica file .bmpr nel browser con Telario, un progetto personale di Antonio Trento.</subtitle><author><name>Antonio Trento</name></author><entry xml:lang="it"><title type="html">Salvare non è soltanto scaricare un file.</title><link href="https://telario.github.io/it/blog/salvare-non-e-solo-scaricare/" rel="alternate" type="text/html" title="Salvare non è soltanto scaricare un file." /><published>2026-10-24T09:00:00+02:00</published><updated>2026-10-24T09:00:00+02:00</updated><id>https://telario.github.io/it/blog/salvare-non-e-solo-scaricare</id><content type="html" xml:base="https://telario.github.io/it/blog/salvare-non-e-solo-scaricare/"><![CDATA[<p>Il pulsante «salva» sembra una promessa semplice. Hai modificato qualcosa, premi, ottieni un file. Nella pratica quella parola contiene almeno tre domande: il risultato conserva i dati, il formato è coerente e il programma che lo riceverà interpreta correttamente le modifiche? Un download riuscito risponde soltanto alla parte più visibile del percorso. La notifica del browser è rassicurante, ma non ha letto tutte le intenzioni dell’editor originale.</p>

<p>In Telario il salvataggio <code class="language-plaintext highlighter-rouge">.bmpr</code> è sperimentale. La frase è esplicita perché il progetto può leggere e modificare molti elementi senza avere ancora una certificazione di riapertura in Balsamiq per ogni operazione e versione. Il writer cerca di conservare ciò che non cambia, lavora su una copia in memoria e verifica l’integrità SQLite. Sono precauzioni concrete, che non vanno né sminuite né scambiate per una garanzia più ampia.</p>

<p>Questo articolo spiega come ragionare sul risultato. Non serve a trasformare ogni prova in una procedura burocratica. Serve a evitare che un gesto facile produca una fiducia sproporzionata. La regola pratica è breve: conserva l’originale, scegli il formato in base al prossimo passo e verifica la copia nel contesto in cui verrà usata. Il resto è il modo di rendere quella regola abbastanza precisa da essere utile.</p>

<h2 id="1-loriginale-è-un-punto-di-ritorno">1. L’originale è un punto di ritorno</h2>

<p>Un file sorgente conservato permette di tornare alla situazione ricevuta. Non è un segno di sfiducia verso ogni editor: è un riferimento utile quando confronti una proposta, indaghi una differenza o cerchi di capire quale revisione abbia introdotto un cambiamento. Se l’unica copia disponibile viene sostituita, anche una modifica piccola può cancellare il contesto necessario per valutarla.</p>

<p>Telario non sovrascrive automaticamente il documento scelto. Il salvataggio prepara un download di una copia. La decisione su nome e destinazione rimane però importante: l’utente può scegliere una cartella confusa o sostituire manualmente un file esistente. Un comportamento prudente dell’app non elimina ogni possibile ambiguità nel filesystem. Conservare l’originale con un nome riconoscibile rende il punto di ritorno visibile anche fuori dal browser.</p>

<p>Per una prova iniziale puoi lavorare su una copia del file ricevuto e usare un nome diverso per ogni risultato significativo. Non serve numerare ogni trascinamento, ma bisogna distinguere almeno ingresso, proposta e risultato verificato. Sono stati del lavoro, non semplicemente varianti del nome. La cartella dovrebbe permettere a un’altra persona di capire quale file confrontare senza dover chiedere quale dei cinque «finale» sia quello veramente originale.</p>

<h2 id="2-un-salvataggio-senza-modifiche-ha-una-prova-forte">2. Un salvataggio senza modifiche ha una prova forte</h2>

<p>Se non ci sono modifiche, il writer restituisce gli stessi byte originali. È un comportamento più preciso di una generica ricostruzione equivalente. Non viene creato un nuovo database soltanto per risalvare il contenuto letto. La corrispondenza byte per byte offre un criterio verificabile: il risultato deve coincidere con l’ingresso, non soltanto aprirsi nello stesso modo nell’editor.</p>

<p>Questa proprietà è utile come base di controllo, ma non va estesa oltre il caso a cui si riferisce. Dopo una modifica i byte devono cambiare, e il criterio diventa diverso. La verifica deve concentrarsi su dati aggiornati, risorse conservate e struttura del database. Confondere i due casi porta a pretendere una corrispondenza impossibile oppure a ritenere sufficiente una prova troppo debole.</p>

<p>La prova senza modifiche può essere eseguita con un documento sintetico e confronti automatici. Su un file reale aiuta a controllare il percorso di lettura e download, senza però dimostrare il comportamento di pagine aggiunte, gruppi ridimensionati o testi cambiati. Ogni operazione introduce una domanda specifica. Un buon piano di verifica riusa le garanzie già stabilite e aggiunge controlli dove il comportamento cambia, invece di usare una prova riuscita come lasciapassare generale.</p>

<h2 id="3-con-modifiche-si-lavora-su-una-copia-in-memoria">3. Con modifiche si lavora su una copia in memoria</h2>

<p>Quando ci sono cambiamenti, Telario apre una copia del database originale in memoria. Il writer aggiorna le righe delle pagine interessate, evitando di ricostruire indiscriminatamente tutte le tabelle e risorse a partire dal modello dell’interfaccia. Questo approccio è importante perché l’editor comprende soltanto un sottoinsieme delle strutture che l’archivio può contenere.</p>

<p>Le modifiche vengono applicate in una transazione. Le informazioni di revisione vengono aggiornate secondo i campi previsti e viene eseguito un controllo d’integrità. La copia diventa un candidato al download solo dopo il percorso di scrittura e verifica. L’originale scelto all’apertura rimane il riferimento da cui partire, non il bersaglio diretto di ogni gesto sul canvas.</p>

<p>Una transazione aiuta a mantenere coerente l’operazione nel database, ma non interpreta il significato grafico di un controllo. Può scrivere correttamente un valore che un altro programma usa in modo più complesso. Per questo la progettazione del writer e la prova di riapertura sono complementari. Il primo limita la superficie della modifica; la seconda verifica come il risultato viene letto nel flusso di destinazione. Nessuno dei due passaggi dovrebbe essere presentato come sostituto completo dell’altro.</p>

<h2 id="4-conservare-i-campi-sconosciuti-è-una-scelta-di-compatibilità">4. Conservare i campi sconosciuti è una scelta di compatibilità</h2>

<p>Un interprete parziale deve essere prudente verso ciò che non comprende. Telario conserva dati grezzi e campi non modificati, invece di trattare il modello visibile nell’interfaccia come l’unico contenuto legittimo del progetto. Risorse, commenti e altre tabelle non vengono ricostruiti automaticamente soltanto perché è stato cambiato un testo su una pagina.</p>

<p>Questa scelta riduce il rischio di cancellazioni indirette. Se il renderer non disegna una proprietà avanzata, la proprietà può comunque avere un ruolo per l’editor originale. Non usarla localmente non significa poterla eliminare. Il writer deve quindi distinguere la modifica richiesta da tutto il contesto che deve attraversare l’operazione senza essere reinterpretato.</p>

<p>La conservazione va verificata con confronti mirati. Un archivio può aprirsi dopo il salvataggio e aver perso un dettaglio non visibile nella pagina usata per la prova. Controllare risorse e campi non interessati offre una misura diversa dalla semplice apertura. È anche un criterio utile per i test sintetici: inserire dati sconosciuti riconoscibili e verificare che rimangano tali. Un campione piccolo costruito per questa domanda può dare più informazioni di una prova visiva generica su molte schermate.</p>

<h2 id="5-integrità-sqlite-non-significa-identità-funzionale">5. Integrità SQLite non significa identità funzionale</h2>

<p><code class="language-plaintext highlighter-rouge">PRAGMA integrity_check</code> serve a verificare la coerenza del database SQLite. Un esito positivo è importante: il contenitore deve essere leggibile e internamente valido. Ma quel controllo non conosce tutte le convenzioni del formato <code class="language-plaintext highlighter-rouge">.bmpr</code>, né le regole applicative di ogni versione Balsamiq. La validità del contenitore non certifica automaticamente il significato di ogni risorsa.</p>

<p>È una distinzione comune anche fuori dai mockup. Un file può essere formalmente valido e contenere una relazione inattesa per il programma che lo usa. Un testo può avere una codifica corretta ed essere nel campo sbagliato. Il controllo strutturale copre un livello, la verifica applicativa un altro. Non c’è bisogno di sminuire il primo per riconoscere che il secondo resta necessario.</p>

<p>La comunicazione all’utente deve quindi essere precisa: il writer esegue un controllo d’integrità, mentre la riapertura nel programma di destinazione non è ancora certificata per tutti i casi. Questa frase è meno spettacolare di «salvataggio perfettamente compatibile», ma permette una decisione migliore. Una promessa utile deve dire che cosa è stato verificato e dove termina l’evidenza. Soprattutto quando il risultato potrebbe entrare in un flusso di lavoro condiviso e diventare il riferimento di altre persone.</p>

<h2 id="6-le-miniature-possono-raccontare-una-revisione-vecchia">6. Le miniature possono raccontare una revisione vecchia</h2>

<p>Le miniature incorporate vengono conservate e non rigenerate. Dopo una modifica, un programma che mostra quell’anteprima potrebbe visualizzare una schermata precedente. Questo può creare un apparente contrasto: i dati della pagina sono cambiati, ma la rappresentazione di riepilogo non lo riflette. La miniatura non è quindi una prova sufficiente per giudicare il contenuto salvato.</p>

<p>Quando controlli una copia, apri la pagina vera nel programma di destinazione e confronta il dettaglio modificato. Non fermarti all’elenco dei progetti o alla galleria delle anteprime. Se devi consegnare un’immagine aggiornata insieme all’archivio, producila separatamente e indica da quale revisione proviene. L’esistenza di una miniatura interna non elimina la necessità di una vista condivisa affidabile.</p>

<p>Questo limite mostra perché un archivio contiene più rappresentazioni dello stesso lavoro. Dati editabili, anteprime e metadati possono avere percorsi di aggiornamento diversi. Un writer prudente conserva strutture che non sa rigenerare correttamente, ma deve anche dichiarare la conseguenza visibile. Conservare è una scelta di integrità, non la promessa che ogni rappresentazione secondaria venga aggiornata. Il controllo finale deve considerare il modo in cui il destinatario userà effettivamente il file, comprese le anteprime che potrebbero confonderlo.</p>

<h2 id="7-aggiungere-una-pagina-è-diverso-da-cambiare-una-parola">7. Aggiungere una pagina è diverso da cambiare una parola</h2>

<p>Una modifica a una pagina esistente può riutilizzare una struttura già presente. Aggiungere una pagina richiede invece creare nuove righe con i valori necessari allo schema dell’archivio. Se esistono colonne obbligatorie sconosciute, il writer può rifiutare il salvataggio invece di inventare dati. È un fallimento deliberato che protegge il documento da una ricostruzione non giustificata.</p>

<p>Per questo i test devono distinguere testo, posizione, pagine aggiunte e pagine eliminate o ripristinate. Non basta dire che «la scrittura funziona» dopo aver cambiato un’etichetta. Ogni classe di operazione esercita un percorso diverso. La superficie può sembrare simile nell’interfaccia, ma la struttura del database coinvolta non è necessariamente la stessa.</p>

<p>Se un salvataggio viene rifiutato, conserva il progetto aperto e valuta un’esportazione utile al tuo scopo. Non è necessario insistere sul formato originale quando ti serve soltanto una vista della proposta. Per una modifica strutturale da restituire all’autore, la verifica nel programma originale rimane il passo appropriato. Un limite esplicito è preferibile a un file scaricato con successo ma costruito indovinando requisiti che l’implementazione non conosce. L’assenza di un download può essere un comportamento corretto.</p>

<h2 id="8-otto-prove-manuali-dalla-meno-invasiva-alla-più-impegnativa">8. Otto prove manuali, dalla meno invasiva alla più impegnativa</h2>

<h3 id="aprire-osservare-non-cambiare">Aprire, osservare, non cambiare</h3>

<p>Scegli una pagina conosciuta e controlla i contenuti essenziali. Annota eventuali differenze già presenti prima della scrittura. Questo riferimento iniziale è necessario: se una resa era approssimata all’apertura, non potrai attribuirla correttamente al salvataggio soltanto perché la noti dopo. Una prova valida distingue il punto in cui compare un problema.</p>

<p>Non modificare il file per rendere il confronto più gradevole. Conserva lo stato ricevuto e identifica almeno un testo, una posizione e una risorsa riconoscibile. Il riferimento può essere un’immagine aggiornata dell’autore o una vista nel programma originale. Se non possiedi un confronto affidabile, dichiaralo. La mancanza di un riferimento non rende inutile la prova, ma limita la conclusione: puoi osservare che l’editor mostra una pagina, non certificare che la mostra fedelmente. Questa distinzione evita di costruire tutte le verifiche successive sopra una prima assunzione non controllata.</p>

<h3 id="scaricare-senza-modifiche">Scaricare senza modifiche</h3>

<p>Il risultato deve coincidere con i byte d’ingresso. Dai alla copia un nome distinto e verifica il confronto con strumenti adeguati. Aprirla visivamente può confermare un aspetto del percorso, ma non sostituisce la proprietà più forte della corrispondenza esatta prevista in questo caso. Usa il criterio giusto per la promessa che stai valutando.</p>

<p>La prova serve anche a conoscere il comportamento del browser durante il download: dove finisce il file, quale nome propone e come evitare una sostituzione manuale dell’originale. Sembrano dettagli esterni al writer, ma fanno parte del flusso reale dell’utente. Un risultato tecnicamente corretto conservato nella cartella sbagliata può diventare un altro piccolo blocco. Prima di procedere con le modifiche, assicurati di saper riconoscere ingresso e uscita. In questo modo le prove successive non dipendono dalla memoria di quale file fosse stato selezionato nell’ultimo tentativo.</p>

<h3 id="cambiare-una-parola-riconoscibile">Cambiare una parola riconoscibile</h3>

<p>Scegli un testo semplice e sostituiscilo con un valore che non possa essere confuso con l’originale. Salva una copia, riaprila e cerca quel punto. Se possibile, esegui il confronto anche nel programma di destinazione. Controlla inoltre un elemento vicino che non doveva cambiare: la correttezza non consiste soltanto nel trovare la nuova parola.</p>

<p>Una variazione minima rende più facile attribuire le differenze. Se modifichi contemporaneamente testo, geometria, pagine e risorse, un errore può richiedere molte prove per essere isolato. Dopo il primo risultato, puoi estendere il caso. L’ordine è utile proprio perché non pretende di testare tutto in una volta. Registra l’operazione eseguita e il criterio osservato. «Nuovo testo presente, testo vicino invariato, pagina apribile» è una descrizione concreta. «Sembra a posto» può essere vera, ma lascia poca evidenza a chi dovrà valutare o ripetere la verifica in un altro ambiente.</p>

<h3 id="spostare-e-ridimensionare">Spostare e ridimensionare</h3>

<p>La geometria merita un confronto separato. Scegli un controllo semplice, cambia posizione e dimensione in modo visibile e verifica la copia riaperta. Osserva se coordinate e ingombro corrispondono, senza lasciarti guidare soltanto dalla somiglianza complessiva della schermata. Una differenza piccola può essere significativa quando l’operazione riguarda proprio la geometria.</p>

<p>Controlla anche l’effetto sul contenuto interno, per esempio un testo che va a capo in modo diverso. La rappresentazione può usare font di sistema e quindi non coincidere perfettamente con il riferimento originale, ma la variazione deve essere interpretata con precisione. Distingui dati di dimensione e resa del testo. Se il problema compare già nel canvas, non è nato soltanto nel writer. Se compare dopo la riapertura altrove, hai una domanda di compatibilità da approfondire. La stessa sequenza di gesti può attraversare modello, rendering e scrittura: il confronto prima e dopo aiuta a non confondere i livelli.</p>

<h3 id="provare-un-gruppo-come-blocco">Provare un gruppo come blocco</h3>

<p>I gruppi si spostano e ridimensionano come unità, mentre i figli non sono modificabili singolarmente dall’interfaccia. La prova deve quindi osservare il blocco e la relazione fra i suoi elementi, non cercare comandi che l’app non offre. Usa un esempio sintetico o un gruppo di cui puoi confrontare il contenuto senza esporre dati privati.</p>

<p>Verifica la riapertura con particolare attenzione. La presenza di un rettangolo nella posizione corretta non dimostra che tutti i dettagli interni siano interpretati allo stesso modo dal programma destinatario. Confronta più elementi riconoscibili del gruppo e conserva il riferimento iniziale. Se il risultato è incerto, limita l’uso alla consultazione o a un’immagine di proposta. Il salvataggio dei gruppi ridimensionati è fra gli aspetti che richiedono verifica manuale nel flusso originale. La prudenza qui non è generica: è collegata a una struttura specifica e a un’operazione che coinvolge relazioni geometriche più complesse di un singolo controllo.</p>

<h3 id="aggiungere-eliminare-ripristinare-una-pagina">Aggiungere, eliminare, ripristinare una pagina</h3>

<p>Queste operazioni meritano prove distinte. Controlla elenco, nomi, contenuti e stato dopo la riapertura. Una pagina nuova non deve essere valutata soltanto perché appare nel menu durante la sessione. Il risultato importante è la copia salvata e il modo in cui il programma di destinazione ne riconosce la struttura.</p>

<p>Se il writer rifiuta lo schema, non aggirare l’errore modificando a mano campi sconosciuti senza comprenderli. Il rifiuto conserva un confine utile. Per segnalare il caso descrivi operazione e struttura minima osservata, mantenendo riservati i contenuti aziendali. Una fixture sintetica con una colonna obbligatoria sconosciuta può aiutare a testare il comportamento di rifiuto. Non tutti i test devono dimostrare un successo: alcuni devono provare che il software si ferma nel punto giusto, lascia l’originale disponibile e comunica l’impossibilità di completare l’operazione con le informazioni che possiede.</p>

<h3 id="verificare-ciò-che-non-hai-toccato">Verificare ciò che non hai toccato</h3>

<p>Una modifica corretta non dovrebbe cancellare risorse non interessate. Scegli controlli, immagini o campi riconoscibili fuori dal punto modificato e confrontali nella copia. Per i test automatici, i dati grezzi offrono un criterio più preciso dell’impressione visiva. Per la prova manuale, usa almeno riferimenti concreti e non soltanto la sensazione che la pagina sia simile.</p>

<p>Il controllo delle parti invariate è particolarmente importante per un interprete parziale. Il writer potrebbe conservare correttamente un contenuto che il renderer non mostra, e la sola schermata non permetterebbe di verificarlo. Quando possibile, separa confronto strutturale e confronto visivo. Ciascuno può rilevare problemi invisibili all’altro. Un test completo non deve scegliere una sola definizione di integrità; deve sapere quale aspetto sta controllando. La chiarezza del criterio rende più facile valutare un risultato misto, in cui il database è coerente ma un dettaglio applicativo richiede ancora un approfondimento.</p>

<h3 id="consegnare-soltanto-dopo-la-riapertura">Consegnare soltanto dopo la riapertura</h3>

<p>Prima di presentare una copia come materiale di lavoro condiviso, aprila nel contesto del destinatario. Se non puoi eseguire quel controllo, dichiara il limite e conserva un’esportazione leggibile per discutere la proposta. Non trasferire una prova incompleta sotto l’etichetta di compatibilità garantita. Il nome del file e la nota di accompagnamento devono riflettere lo stato della verifica.</p>

<p>Il destinatario dovrebbe sapere quale modifica è stata fatta, con quale strumento e quali aspetti sono stati controllati. Per una correzione minima bastano poche righe. Per operazioni strutturali può servire un confronto più articolato. La quantità di documentazione deve essere proporzionata, ma la provenienza non dovrebbe sparire. Telario nasce per ridurre un blocco di accesso: la sua utilità aumenta quando la nuova consegna non introduce un blocco di fiducia. Una copia spiegata bene è più facile da adottare, rifiutare o correggere senza dover ricostruire la sessione che l’ha prodotta.</p>

<h2 id="9-quando-conviene-esportare-invece-di-salvare-il-progetto">9. Quando conviene esportare invece di salvare il progetto</h2>

<p>Se lo scopo è mostrare una proposta, un’immagine può essere la consegna più adatta. Se devi recuperare testi, Markdown può bastare. Se stai analizzando una struttura, il JSON offre un punto di osservazione. Non ogni attività richiede di restituire un archivio editabile nel formato originale. Scegliere un’uscita più semplice può evitare una verifica di scrittura che non aggiungerebbe valore al compito.</p>

<p>Mermaid e draw.io richiedono una cautela diversa: i collegamenti vengono dedotti e vanno controllati. Non sono un’alternativa universale al salvataggio <code class="language-plaintext highlighter-rouge">.bmpr</code>, ma un tentativo di portare una struttura approssimata in un altro ambiente. Il criterio rimane quello del prossimo passo. A chi deve approvare un testo serve una vista leggibile; a chi deve continuare l’editing può servire il progetto originale con modifiche verificate.</p>

<p>La scelta del formato è parte della comunicazione tecnica. Un’esportazione non dovrebbe promettere più informazione di quanta ne contenga. Un PNG conserva un aspetto, non tutte le proprietà editabili. Un JSON rende visibili dati, non sostituisce automaticamente le regole applicative dell’editor. Una copia <code class="language-plaintext highlighter-rouge">.bmpr</code> cerca di conservare il progetto, ma richiede i controlli descritti. Distinguere questi obiettivi permette di usare lo strumento con meno ansia e con aspettative più corrette.</p>

<h2 id="10-un-piano-di-prova-breve-e-ripetibile">10. Un piano di prova breve e ripetibile</h2>

<p>Per una prima sessione puoi usare quattro passaggi: demo, documento conosciuto, modifica minima, confronto del risultato. Definisci prima cosa considererai riuscito. Se il tuo obiettivo è leggere le pagine, non serve concludere anche che il salvataggio è pronto per l’intero gruppo. Se vuoi restituire una copia modificata, la prova deve includere la riapertura e le parti che non dovevano cambiare.</p>

<p>Annota versione della build, tipo di operazione e risultato. Non occorre trasformare la nota in un verbale. Una descrizione di poche righe può essere sufficiente a ripetere la prova o segnalare un’anomalia. Quando trovi un problema, cerca il caso minimo con dati sintetici. Ridurre il contesto aiuta la diagnosi e impedisce che un archivio privato diventi il prezzo necessario per chiedere aiuto.</p>

<p>La documentazione di <a href="https://github.com/telario/telario/blob/main/VALIDAZIONE.md">validazione</a> raccoglie risultati e limiti delle prove del progetto. La <a href="/it/compatibilita/">compatibilità</a> presenta il perimetro all’utente. Queste pagine non sostituiscono il tuo controllo sul documento e sul programma che riceverà il file. Servono a decidere dove concentrare la prova, evitando di ripetere indistintamente tutto o di presumere che non serva verificare nulla.</p>

<h2 id="11-la-fiducia-cresce-per-livelli">11. La fiducia cresce per livelli</h2>

<p>Posso fidarmi della leggibilità di una pagina senza aver verificato la scrittura di un gruppo. Posso aver confrontato i byte di un salvataggio senza modifiche senza aver provato l’aggiunta di pagine. Posso sapere che il database è integro senza aver completato la riapertura nel programma originale. Queste affermazioni non si contraddicono: descrivono livelli diversi di evidenza.</p>

<p>La qualità di una prima versione funzionante dipende anche dalla capacità di dire dove si trova. Telario offre strumenti utili e controlli concreti, mantenendo il salvataggio sperimentale esplicito. Non è necessario nascondere la prudenza per rendere il progetto interessante. Per chi lavora con documenti reali, conoscere un limite prima della consegna è spesso più prezioso di una promessa brillante scoperta fragile troppo tardi.</p>

<p>Il prossimo passo puoi farlo dalla <a href="/it/inizia/">guida locale</a>, usando la demo e poi una copia di un documento noto. Conserva l’originale, verifica il risultato e scegli il formato che risponde alla tua necessità. Il pulsante «salva» rimane breve. La fiducia che gli attribuisci deve essere abbastanza precisa da sapere che cosa significa, in quel momento, per quel file e per il lavoro che viene dopo.</p>

<h2 id="12-se-qualcosa-non-torna-conserva-prima-le-prove">12. Se qualcosa non torna, conserva prima le prove</h2>

<p>Quando una copia appare diversa, la prima reazione può essere rifare subito l’operazione. Prima di farlo, conserva le informazioni minime che permettono di capire il caso: file di ingresso, azione eseguita, uscita prodotta e differenza osservata. Non significa pubblicare tutto. Significa evitare di sovrascrivere localmente la sola situazione che rendeva riproducibile il problema.</p>

<p>Se la discrepanza riguarda il testo, annota quale campo è cambiato e dove compare il risultato inatteso. Se riguarda geometria, distingui posizione, dimensioni e comportamento interno. Se riguarda una pagina, controlla nome, presenza nell’elenco e contenuto. La descrizione dovrebbe permettere a chi legge di formulare una prima ipotesi senza accedere immediatamente all’intero archivio. «Non salva bene» comunica urgenza; un confronto preciso permette di iniziare il lavoro.</p>

<p>Prova poi a ricreare il comportamento con una demo o un esempio sintetico. Se non riesci, il documento reale potrebbe contenere una struttura importante da investigare, ma la condivisione resta una decisione separata. Non caricare un file aziendale su una issue pubblica soltanto perché il problema è frustrante. Un buon rapporto tecnico può partire da proprietà, conteggi e sequenze di gesti, lasciando fuori nomi e contenuti che non servono alla diagnosi.</p>

<h2 id="13-il-download-non-protegge-dalle-ambiguità-di-versione">13. Il download non protegge dalle ambiguità di versione</h2>

<p>Una copia corretta può comunque essere la copia sbagliata per una consegna. Potresti aver aperto una revisione precedente, dimenticato una modifica concordata altrove o esportato una pagina diversa da quella discussa. Nessun controllo d’integrità del database può risolvere queste ambiguità organizzative. Per questo la verifica deve includere anche la provenienza del documento, non soltanto il comportamento del writer.</p>

<p>Prima di inviare il risultato, confronta il file di ingresso con il riferimento condiviso dal gruppo. Indica quando lo hai ricevuto e quale modifica hai applicato. Se stai lavorando su una proposta locale, chiamala proposta. La precisione dei nomi evita che il destinatario interpreti una copia sperimentale come nuovo originale approvato. Le cartelle e i messaggi fanno parte del sistema di versionamento effettivo quando non esiste uno strumento dedicato.</p>

<p>Questa attenzione vale anche quando il file arriva da una cartella sincronizzata. Telario non gestisce concorrenza o aggiornamenti Dropbox. Il download è un file nuovo, non una transazione condivisa con tutti gli altri collaboratori. Se qualcuno modifica il progetto nel frattempo, serve una decisione esplicita su come confrontare o integrare il lavoro. Il salvataggio locale riduce la dipendenza dallo strumento dell’autore, ma non elimina la necessità di una regola comune per le revisioni.</p>

<h2 id="14-memoria-tempo-e-il-momento-giusto-per-fermarsi">14. Memoria, tempo e il momento giusto per fermarsi</h2>

<p>Un criterio di arresto aiuta anche una prova tecnica: se il risultato non coincide con quello atteso, evita di accumulare altre modifiche prima di capire la differenza. Continuare rende meno leggibile la sequenza e può mescolare più problemi. Torna al riferimento, isola l’operazione e ripeti soltanto ciò che serve. È un’abitudine semplice che trasforma una sessione confusa in un caso verificabile, senza richiedere strumenti speciali o una procedura pesante. La calma, qui, è una forma molto concreta di risparmio del tempo.</p>

<p>Durante una sessione lunga è facile continuare ad aggiungere piccoli interventi. Una parola, una posizione, una pagina nuova: ciascun gesto sembra troppo piccolo per giustificare una pausa. Alla fine, però, il risultato può contenere abbastanza lavoro da rendere costosa la perdita della scheda. Il momento per conservare un’uscita utile non deve essere deciso soltanto dalla dimensione dell’ultima modifica.</p>

<p>Scegli punti riconoscibili: una proposta completa, una pagina controllata, un confronto da inviare. Verifica che il download sia presente e apribile prima di chiudere. Non è necessario produrre una nuova copia per ogni gesto, ma è utile sapere quale risultato potresti ricostruire se la sessione terminasse ora. Questa domanda rende concreto il limite dell’assenza di autosalvataggio persistente e aiuta a non attribuire alla cronologia una protezione che non offre.</p>

<p>Se il documento richiede operazioni oltre il perimetro dell’app, fermarsi è una scelta tecnica sensata. Puoi consegnare una vista annotata, formulare una richiesta precisa all’autore o usare il programma originale quando disponibile. Telario è nato per sbloccare il lavoro, non per obbligarti a completare ogni possibile attività con lo stesso attrezzo. La misura dell’utilità è la qualità del prossimo passo, anche quando quel passo consiste nel riconoscere che serve una verifica o uno strumento diverso.</p>]]></content><author><name>Antonio Trento</name></author><summary type="html"><![CDATA[Originali, copie, integrità SQLite e riapertura: come valutare il salvataggio sperimentale .bmpr senza confondere un download riuscito con una compatibilità certificata.]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://telario.github.io/assets/images/blog/saving-1600.webp" /><media:content medium="image" url="https://telario.github.io/assets/images/blog/saving-1600.webp" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry xml:lang="en"><title type="html">Saving is more than downloading a file.</title><link href="https://telario.github.io/en/blog/saving-is-more-than-downloading/" rel="alternate" type="text/html" title="Saving is more than downloading a file." /><published>2026-10-24T09:00:00+02:00</published><updated>2026-10-24T09:00:00+02:00</updated><id>https://telario.github.io/en/blog/saving-is-more-than-downloading</id><content type="html" xml:base="https://telario.github.io/en/blog/saving-is-more-than-downloading/"><![CDATA[<p>The Save button sounds like a simple promise. You changed something, pressed it, and received a file. In practice, the word contains at least three questions: does the result preserve the data, is its format consistent, and will the receiving application interpret the changes correctly? A successful download answers only the most visible part. The browser notification is reassuring, but it has not read every intention of the original editor.</p>

<p>In Telario, <code class="language-plaintext highlighter-rouge">.bmpr</code> saving is experimental. That wording is explicit because the project can read and edit many elements without having certified reopening in Balsamiq for every operation and version. The writer tries to preserve unchanged information, works on an in-memory copy, and checks SQLite integrity. These are concrete precautions. They should neither be dismissed nor mistaken for a broader guarantee.</p>

<p>This article explains how to assess the result without turning every trial into bureaucracy. The objective is avoiding confidence disproportionate to the evidence produced by an easy gesture. The practical rule is short: keep the original, choose an output for the next task, and check the copy where it will actually be used. The remaining detail makes that rule specific enough to guide a useful decision when the document matters to other people as well as to you.</p>

<h2 id="1-the-original-is-a-return-point">1. The original is a return point</h2>

<p>Keeping the source file lets you return to the received state. That is not a declaration of distrust towards every editor. It is a reference when comparing proposals, investigating differences, or identifying the revision that introduced a change. Replacing the only available copy can remove the context needed to evaluate even a small edit.</p>

<p>Telario does not automatically overwrite the selected document. Saving prepares a downloaded copy. Naming and destination still matter: a user can choose a confusing folder or manually replace an existing file. Cautious application behaviour does not remove every possible ambiguity in the filesystem. Keeping an unmistakably named original makes the return point visible outside the browser too.</p>

<p>For an initial trial, work from a copy of the received file and use a distinct name for each meaningful output. There is no need to number every drag gesture, but distinguish input, proposal, and verified result. Those are working states rather than merely different filenames. Someone else should be able to identify the reference without asking which of five “final” versions was actually the original. A small naming convention is useful precisely because it supports comparison later, when your memory of the session is no longer fresh and another person needs to understand what happened.</p>

<h2 id="2-saving-without-edits-has-a-strong-criterion">2. Saving without edits has a strong criterion</h2>

<p>With no changes, the writer returns the original bytes. That is more precise than a general claim of equivalent reconstruction. It does not create a fresh database merely to resave what it read. Byte-for-byte identity gives a testable criterion: output should match input, rather than only appearing to open the same way in the editor.</p>

<p>Do not extend this property beyond its scope. After edits, bytes must change, so the criterion changes too. Verification then concerns updated data, retained resources, and database structure. Confusing the two cases either demands an impossible identity or accepts evidence weaker than the claim being evaluated. The correct comparison depends on whether writing was necessary at all.</p>

<p>The unchanged case can be tested with synthetic documents and automated comparisons. On a real file, it helps check reading and downloading but says nothing conclusive about added pages, resized groups, or altered text. Each operation introduces a specific question. A useful validation plan reuses established evidence and adds checks where behaviour changes. One successful no-edit download is a baseline, not permission to assume every editing path has the same properties. Being precise about that boundary makes the strong guarantee genuinely useful instead of allowing it to become misleading through careless generalisation.</p>

<h2 id="3-changed-projects-are-written-to-an-in-memory-copy">3. Changed projects are written to an in-memory copy</h2>

<p>When changes exist, Telario opens a copy of the original database in memory. The writer updates affected page rows rather than indiscriminately rebuilding every table and resource from the interface model. That matters because the editor understands only a subset of the structures an archive may contain. Rebuilding solely from visible controls could discard information the application did not know how to display.</p>

<p>Changes are applied in a transaction. Revision information is updated according to expected fields, and an integrity check runs. Only after writing and verification does the copy become a download candidate. The file selected at opening remains the reference, not the direct target of every canvas gesture. The distinction reduces the surface of changes and supports comparison against a stable source.</p>

<p>A transaction helps keep the database operation consistent; it does not interpret every graphical meaning of a control. It can write a value correctly that another program handles through more complex conventions. Writer design and destination-application reopening are therefore complementary. One constrains how data changes; the other observes how the result is consumed. Neither should be sold as a complete replacement for the other. Understanding that separation helps users appreciate the precautions already implemented while still taking the remaining compatibility checks seriously.</p>

<h2 id="4-unknown-field-preservation-is-a-compatibility-choice">4. Unknown-field preservation is a compatibility choice</h2>

<p>A partial interpreter should be cautious about what it does not understand. Telario keeps raw data and unchanged fields instead of treating the interface model as the project’s only legitimate content. Resources, comments, and other tables are not automatically reconstructed merely because a label changed on one page. Local editing capability should not define the entire vocabulary allowed to survive in the archive.</p>

<p>This reduces indirect deletion risk. An advanced property the renderer ignores may still matter to the original editor. Not using it locally does not make it disposable. The writer must separate the requested change from surrounding context that should pass through without reinterpretation. That is particularly important for archives containing metadata or control features outside the app’s current scope.</p>

<p>Preservation needs targeted comparisons. A saved archive may open and still have lost a detail invisible on the page chosen for inspection. Checking unrelated resources and fields measures something different from opening success. Synthetic tests can insert recognisable unknown data and verify that it survives. A small sample designed around this question may provide more useful evidence than a general visual review of many screens. The test should establish which information was intended to change and which information was intentionally left alone, then compare both sides of that boundary.</p>

<h2 id="5-sqlite-integrity-is-not-functional-identity">5. SQLite integrity is not functional identity</h2>

<p><code class="language-plaintext highlighter-rouge">PRAGMA integrity_check</code> checks SQLite database consistency. A positive result matters: the container should be readable and internally valid. The check does not understand every <code class="language-plaintext highlighter-rouge">.bmpr</code> convention or every Balsamiq version’s application rules. Container validity cannot automatically certify the meaning of each resource or the behaviour of the program receiving it.</p>

<p>The distinction is familiar elsewhere. A formally valid file can hold a relationship unexpected by its consumer. Correctly encoded text can occupy the wrong field. Structural checking covers one level; application verification covers another. There is no need to devalue the first to recognise the continued importance of the second. Reliable workflows often depend on several independent checks precisely because no single layer knows everything.</p>

<p>Communication should therefore remain precise: the writer performs an integrity check, while destination reopening is not yet certified for every case. That is less spectacular than “perfectly compatible saving,” but it supports a better decision. A useful promise says what was checked and where evidence ends, particularly when the output may enter a shared workflow and become another person’s reference. Users can then choose a proportionate trial instead of assuming either complete danger or complete safety based on one technical term whose scope they were never told.</p>

<h2 id="6-thumbnails-can-describe-an-older-revision">6. Thumbnails can describe an older revision</h2>

<p>Embedded thumbnails are preserved rather than regenerated. After an edit, a program displaying that preview may show an earlier screen. This can create an apparent contradiction: page data changed, but its summary image did not. A thumbnail alone is therefore insufficient evidence about the saved page’s actual content.</p>

<p>When checking a copy, open the page itself in the destination application and inspect the edited detail. Do not stop at a project gallery or preview list. If an updated image is needed with the archive, produce it separately and identify its revision. An internal thumbnail does not remove the need for a reliable shared view when discussing the proposal with someone else.</p>

<p>The limitation shows why an archive can contain multiple representations of the same work. Editable data, previews, and metadata may have different update paths. A cautious writer preserves structures it cannot regenerate correctly, but should also declare the visible consequence. Preservation is an integrity choice, not a promise to update every secondary representation. Final checking should consider how recipients will actually use the file, including previews that could confuse them. A clear handoff note can prevent an old thumbnail from becoming evidence in a conversation about whether the new text was really saved.</p>

<h2 id="7-adding-a-page-differs-from-changing-a-word">7. Adding a page differs from changing a word</h2>

<p>Editing an existing page can reuse an established structure. Adding a page requires creating rows with values required by the archive schema. Unknown mandatory columns can cause the writer to refuse saving rather than invent data. That is a deliberate failure boundary, protecting the document from an unjustified reconstruction.</p>

<p>Tests should therefore distinguish text edits, position changes, new pages, and deleted or restored pages. Saying “writing works” after changing one label is too broad. Different operation classes exercise different paths even when they look equally simple in the interface. The number of clicks is not a reliable measure of structural complexity or compatibility risk.</p>

<p>If writing is refused, preserve the open working context and consider an export suitable for the task. There is no need to insist on the original format when an image of a proposal is sufficient. Structural changes intended for the author should be checked in the original application. An explicit boundary is preferable to a successful download constructed by guessing requirements the implementation does not understand. The absence of an output can be correct behaviour. What matters is that the app communicates the problem clearly and leaves a practical route to preserve useful work without pretending the requested archive operation was safely completed.</p>

<h2 id="8-eight-checks-from-observation-to-delivery">8. Eight checks, from observation to delivery</h2>

<h3 id="open-and-observe-before-changing-anything">Open and observe before changing anything</h3>

<p>Choose a familiar page and inspect essential content. Record differences already present before writing. This baseline matters: a rendering approximation visible at opening cannot later be attributed to saving merely because you noticed it afterwards. A valid comparison identifies where a discrepancy begins instead of assigning every later discovery to the most recent action.</p>

<p>Do not edit the document to make the comparison look nicer. Keep the received state and identify recognisable text, geometry, and a resource. A useful reference may be a current image from the author or a view in the original application. If no trustworthy comparison exists, say so. The trial remains useful, but its conclusion is narrower: the editor displays a page, not necessarily a faithful reproduction of it. This avoids building all subsequent checks on an untested first assumption. Honest baselines are especially important for partially supported controls, where appearance may already differ before the writer has performed any work.</p>

<h3 id="download-without-changes">Download without changes</h3>

<p>The result should match the input bytes. Give the copy a distinct name and use an appropriate comparison. Visual opening can check another aspect of the route, but does not replace the stronger exact-identity property expected here. Match the verification method to the promise being assessed rather than settling for whichever check is easiest to perform.</p>

<p>This also teaches the browser’s download behaviour: where the file goes, which name it suggests, and how to avoid manually replacing the original. These details sit outside the writer but inside the real user workflow. A technically correct result in the wrong folder can become another blocker. Before editing, ensure you can identify input and output reliably. Later comparisons should not depend on remembering which file was selected during the last attempt. Naming and placement do not prove format correctness, but they make format checks possible without introducing a separate version-selection mistake into the experiment.</p>

<h3 id="change-one-recognisable-word">Change one recognisable word</h3>

<p>Choose simple text and replace it with something unmistakably different. Save a copy, reopen it, and inspect that location. Where possible, repeat in the destination application. Also check a neighbouring element that should remain unchanged. Correctness involves more than finding the new word somewhere in the output; it includes preserving context around the intended change.</p>

<p>A minimal edit makes differences easier to attribute. Changing text, geometry, pages, and resources simultaneously can require many later experiments to isolate a fault. Extend the case after the first controlled result. Record the action and criterion observed. “New text present, neighbouring text unchanged, page opens” is concrete. “Seems fine” may be true, but leaves little evidence for someone repeating the trial elsewhere. The objective is not a long report. It is a short explanation of what was deliberately tested, what the output showed, and which questions remain outside that particular result.</p>

<h3 id="move-and-resize-a-simple-control">Move and resize a simple control</h3>

<p>Geometry deserves its own comparison. Select a simple control, visibly change position and dimensions, then inspect the reopened copy. Compare coordinates and extent rather than relying solely on overall resemblance. A small difference may matter when geometry is precisely the subject of the operation. Make the expected transformation clear before evaluating the outcome.</p>

<p>Observe internal content too, including text wrapping. System fonts can create visual differences from the original reference, but interpret those differences accurately. Separate stored dimensions from text rendering. A problem already visible on the canvas did not originate only in writing. A difference appearing after reopening elsewhere raises a different compatibility question. One gesture can cross model, rendering, and writing layers; before-and-after comparison helps avoid confusing them. When reporting an issue, include the smallest transformation that reveals it. “Resize this control from this extent to that extent” is a more actionable description than “the whole page looks slightly wrong after saving.”</p>

<h3 id="treat-a-group-as-a-block">Treat a group as a block</h3>

<p>Groups move and resize as units; individual children are not editable through the interface. A test should observe the block and relationships between its elements rather than search for commands the app does not provide. Use synthetic data or a group whose content can be compared without exposing private information.</p>

<p>Pay particular attention to reopening. A rectangle in the correct position does not prove that all internal details are interpreted identically by the receiving program. Compare several recognisable elements and preserve the initial reference. If the result is uncertain, limit the workflow to inspection or an image proposal. Resized groups are among the cases requiring manual checking in the original workflow. This is not vague caution: it concerns a specific structure and an operation involving more complex geometric relationships than one standalone control. Clear scope lets a user continue with a useful partial result without misrepresenting an unresolved group-editing case as fully validated compatibility.</p>

<h3 id="add-delete-and-restore-pages-separately">Add, delete, and restore pages separately</h3>

<p>These operations deserve distinct trials. Check the list, names, content, and state after reopening. A new page is not validated merely because it appears in the session menu. The important result is the saved copy and how the destination application recognises its structure. Interface success and archive-writing success happen at different points.</p>

<p>If the writer refuses a schema, do not bypass the error by editing unknown mandatory fields without understanding them. Refusal preserves a useful boundary. Report the operation and minimal observed structure while keeping business content private. A synthetic fixture with an unknown required column can test refusal. Not every test should demonstrate success: some should establish that software stops at the correct point, leaves the original available, and explains why available information is insufficient. Correct failure behaviour is part of data preservation, especially in an interpreter that must avoid inventing values merely to satisfy a desire to produce a downloadable file.</p>

<h3 id="check-what-you-did-not-touch">Check what you did not touch</h3>

<p>A correct edit should not remove unrelated resources. Choose recognisable controls, images, or fields away from the edited area and compare them in the copy. Automated tests can use raw data for a more precise criterion than visual impression. Manual checks should still use concrete references rather than a general sense that the page looks similar.</p>

<p>This matters especially for a partial interpreter. The writer may correctly preserve content the renderer does not display, so a screenshot cannot establish its survival. Where possible, separate structural and visual comparison. Each can detect problems invisible to the other. A complete trial does not need one universal definition of integrity; it needs clarity about the aspect under inspection. This helps assess mixed results, such as a consistent database with one unresolved application-specific detail. It also prevents a visual improvement from concealing unrelated metadata loss, or an unchanged metadata comparison from being mistaken for proof that every control still renders as intended.</p>

<h3 id="reopen-before-presenting-a-copy-as-ready">Reopen before presenting a copy as ready</h3>

<p>Before presenting a copy as shared working material, open it in the recipient’s context. If that is impossible, declare the limit and keep a readable export for discussing the proposal. Do not transfer an incomplete experiment under a label of guaranteed compatibility. Filename and accompanying note should reflect the actual verification state.</p>

<p>The recipient should know what changed, which tool produced it, and what was checked. A minimal correction needs only a few lines; structural work may need a more detailed comparison. Documentation should be proportionate, but provenance should not disappear. Telario aims to remove an access blocker. Its usefulness grows when the resulting handoff does not create a new trust blocker. An explained copy is easier to adopt, reject, or correct without reconstructing the session that produced it. The right outcome is not simply that a file has arrived. It is that the next person understands how much confidence to place in it and what action can safely follow.</p>

<h2 id="9-when-exporting-is-more-appropriate-than-saving">9. When exporting is more appropriate than saving</h2>

<p>An image may be the right handoff for showing a proposal. Markdown may be enough for recovering text. JSON offers a useful observation point for structure. Not every task requires returning an editable archive in the original format. Choosing a simpler output can avoid a writing validation that adds no value to the immediate objective.</p>

<p>Mermaid and draw.io need different caution: connections are inferred and require review. They are not universal substitutes for <code class="language-plaintext highlighter-rouge">.bmpr</code> saving, but attempts to carry an approximate structure into another environment. The next task remains the criterion. Someone approving wording needs a readable view; someone continuing the editing may need a verified modified project.</p>

<p>Output selection is technical communication. An export should not promise more information than it contains. PNG preserves an appearance, not all editable properties. JSON exposes data but does not automatically replace the application rules of an editor. A <code class="language-plaintext highlighter-rouge">.bmpr</code> copy attempts to preserve the project and needs the checks described above. Distinguishing objectives makes the software less stressful and expectations more accurate. It also prevents unnecessary use of an experimental path when a well-checked image would answer the question more directly and be easier for the recipient to inspect.</p>

<h2 id="10-keep-the-trial-short-and-repeatable">10. Keep the trial short and repeatable</h2>

<p>A first session can follow four stages: demo, familiar document, minimal edit, and result comparison. Define success before starting. If the objective is reading pages, the conclusion does not need to include saving readiness for the whole team. If the objective is returning an edited copy, reopening and unchanged-content checks belong in the trial.</p>

<p>Record the build version, operation type, and result. There is no need for a formal transcript. A short note may be enough to repeat the test or report an anomaly. When a problem appears, seek the smallest synthetic example. Reducing context helps diagnosis and avoids making a private archive the price of obtaining assistance. The example should preserve the technical question while removing unrelated business information.</p>

<p>The project’s <a href="https://github.com/telario/telario/blob/main/VALIDAZIONE.md">validation document</a> collects results and limits. <a href="/en/compatibility/">Compatibility information</a> presents the user-facing scope. Neither replaces checking your document and the application receiving it. They help decide where to focus rather than repeating everything indiscriminately or assuming nothing needs checking. Good documentation narrows the next experiment. It does not claim authority over evidence that has not been gathered in the environment where the result will actually matter.</p>

<h2 id="11-confidence-grows-in-layers">11. Confidence grows in layers</h2>

<p>Confidence in page readability does not establish resized-group writing. A byte comparison without edits does not establish new-page creation. Database integrity does not complete destination-application reopening. These statements do not contradict one another. They describe different levels of evidence, each useful when tied to the question it can answer.</p>

<p>A first working version should be able to say where it stands. Telario provides useful tools and concrete checks while keeping experimental saving explicit. Prudence does not make the project less interesting. For people working with real documents, knowing a limitation before delivery is often worth more than a brilliant promise discovered to be fragile afterwards.</p>

<p>Start with the <a href="/en/get-started/">local guide</a>, use the demo, then a copy of a familiar document. Preserve the original, inspect the result, and choose the format matching your need. The Save button remains short. The confidence attached to it should be precise enough to identify what it means at that moment, for that file, and for the work that follows. That precision makes the application useful without asking it to claim more maturity than its current evidence supports.</p>

<h2 id="12-preserve-evidence-before-repeating-a-failure">12. Preserve evidence before repeating a failure</h2>

<p>When a copy looks different, the immediate impulse may be to repeat the operation. First retain the minimum information needed to understand the case: input, action, output, and observed discrepancy. This does not mean publishing everything. It means avoiding local overwriting of the only situation that made the issue reproducible.</p>

<p>For text problems, identify the field and unexpected result. For geometry, distinguish position, extent, and internal behaviour. For a page, inspect its name, presence in the list, and content. The description should support an initial hypothesis without requiring the whole archive. “Saving is broken” communicates urgency; a precise comparison gives investigation a starting point.</p>

<p>Then try reproducing with the demo or synthetic data. Failure to reproduce may suggest a relevant structure in the real document, but sharing that document remains a separate decision. Do not upload business files to a public issue simply because the problem is frustrating. A useful technical report can begin with properties, counts, and action sequences while leaving customer names and content out. Careful reporting is not an obstacle to debugging. It is a way to preserve the actual question long enough for someone else to investigate it accurately.</p>

<h2 id="13-downloads-do-not-remove-revision-ambiguity">13. Downloads do not remove revision ambiguity</h2>

<p>A correct copy can still be the wrong copy for a handoff. You may have opened an older revision, missed a change agreed elsewhere, or exported a different page from the one under discussion. Database integrity cannot resolve these organisational ambiguities. Verification should therefore include document provenance, not just writer behaviour.</p>

<p>Before sending output, compare the input with the team’s shared reference. Identify when you received it and what change you applied. Call a local proposal a proposal. Precise naming prevents an experimental copy being interpreted as a newly approved original. Folders and messages become the effective versioning system when no dedicated system exists, so their clarity has real consequences.</p>

<p>The same applies to synchronised folders. Telario does not manage concurrency or Dropbox updates. A download is a new file, not a shared transaction with every collaborator. If somebody changes the project meanwhile, the work needs an explicit comparison or integration decision. Local saving reduces dependency on the author’s tool without removing the need for a common revision rule. That distinction keeps independence useful rather than allowing it to become a collection of incompatible copies, each confidently described as the latest version by the person who happened to produce it.</p>

<h2 id="14-memory-time-and-knowing-when-to-stop">14. Memory, time, and knowing when to stop</h2>

<p>A stopping criterion helps technical trials. When a result differs from expectation, avoid accumulating more edits before understanding it. Continuing can mix several problems and obscure the sequence. Return to the reference, isolate the operation, and repeat only what is necessary. This turns a confused session into an inspectable case without requiring specialised equipment or a heavyweight procedure.</p>

<p>Long sessions make small edits easy to accumulate: a word, a position, a new page. Each can feel too minor to justify a pause, yet together they may represent enough work to make losing the tab expensive. Choose preservation points based on the whole result, not the size of the last gesture. A complete proposal or checked page is a sensible moment to save a useful output.</p>

<p>Verify that the download exists and opens before closing. You need not create a new copy for every action, but know which result you could reconstruct if the session ended now. That makes the absence of persistent autosave concrete and avoids assigning recovery powers to undo history. If the task exceeds the app’s scope, stopping is a sound technical decision. An annotated view, a precise request to the author, or the original program may be the appropriate next tool.</p>

<p>Telario was built to unblock work, not to force every possible activity through one application. Its usefulness is measured by the quality of the next step, including recognising when another check or tool is required. Saving is successful when the resulting confidence matches the evidence and the recipient can continue without inheriting an unexplained risk. That is a more useful finish than a downloaded filename alone, and a much better reason to trust a small tool with a carefully defined job.</p>]]></content><author><name>Antonio Trento</name></author><summary type="html"><![CDATA[Originals, copies, SQLite integrity and reopening: assessing experimental .bmpr saving without confusing a successful download with certified compatibility.]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://telario.github.io/assets/images/blog/saving-1600.webp" /><media:content medium="image" url="https://telario.github.io/assets/images/blog/saving-1600.webp" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry xml:lang="it"><title type="html">Quel punto interrogativo non era nel mockup.</title><link href="https://telario.github.io/it/blog/il-punto-interrogativo/" rel="alternate" type="text/html" title="Quel punto interrogativo non era nel mockup." /><published>2026-10-23T09:00:00+02:00</published><updated>2026-10-23T09:00:00+02:00</updated><id>https://telario.github.io/it/blog/il-punto-interrogativo</id><content type="html" xml:base="https://telario.github.io/it/blog/il-punto-interrogativo/"><![CDATA[<p>Il file si apre, le schermate compaiono, le frecce sembrano al loro posto. Poi noti piccoli riquadri tratteggiati con un punto interrogativo. Non sono una scelta creativa del tuo capo. Sono il modo in cui l’editor dice: «Ho trovato un’icona, ma non so ancora disegnarla». Una frase molto ragionevole, tradotta in una grafica che somiglia vagamente a un problema più grave.</p>

<p>È successo durante una prova reale di Telario. La prima implementazione disegnava un insieme limitato di forme: database, ingranaggi, buste e poche altre. Le icone non riconosciute diventavano segnaposto. Il documento poteva contenere l’identificativo corretto; semplicemente il renderer non aveva una rappresentazione per quel nome. L’apertura dell’archivio era riuscita, mentre la copertura grafica era incompleta.</p>

<p>La soluzione non era aggiungere a mano soltanto le due forme visibili nello screenshot. Prima bisognava capire quale raccolta usasse il documento, dove reperirla e con quali condizioni fosse possibile distribuirla in un repository pubblico. Il risultato è un’integrazione locale di Font Awesome Free, con alias storici, licenza e verifiche. Il percorso è più interessante del conteggio finale, perché mostra quanto lavoro si nasconda dietro una piccola icona apparentemente ovvia.</p>

<h2 id="1-che-cosa-significa-davvero-il-segnaposto">1. Che cosa significa davvero il segnaposto</h2>

<p>Un segnaposto è una risposta dell’interprete, non una diagnosi universale sul file. Può significare che il controllo è stato letto ma non viene rappresentato, che una risorsa non è disponibile nel perimetro supportato o che un nome non trova corrispondenza nel catalogo. Prima di parlare di dati mancanti, bisogna distinguere questi casi. La grafica da sola non basta a stabilire se l’informazione sia stata persa.</p>

<p>Nel caso delle icone, Telario legge un identificativo nelle proprietà del controllo e lo passa al renderer. Se il nome non trova un percorso grafico riconosciuto, compare il riquadro con <code class="language-plaintext highlighter-rouge">?</code>. L’identificativo può rimanere nei dati originali. È quindi possibile conservare correttamente un’informazione e mostrarla male o non mostrarla ancora. Questo confine è fondamentale per non scambiare un limite di visualizzazione per un archivio danneggiato.</p>

<p>La prima verifica utile è guardare quali icone funzionano e quali no. Se il database compare e il desktop diventa un punto interrogativo, l’ipotesi di un catalogo parziale è più concreta di un generico problema di apertura. Poi si controlla l’identificativo. Il procedimento è piccolo: sintomo, dato letto, regola di risoluzione e risultato grafico. Serve a correggere il livello giusto, invece di tentare modifiche al documento nella speranza che il segnaposto smetta di protestare.</p>

<h2 id="2-il-nome-dellicona-è-un-dato-strutturato">2. Il nome dell’icona è un dato strutturato</h2>

<p>Un nome come <code class="language-plaintext highlighter-rouge">desktop-solid</code> non è soltanto una descrizione in inglese. Contiene almeno due informazioni: soggetto e stile. <code class="language-plaintext highlighter-rouge">folder-regular</code> e <code class="language-plaintext highlighter-rouge">folder-solid</code> possono rappresentare la stessa categoria di oggetto con tracciati differenti. La distinzione interessa sia la resa sia la risoluzione del catalogo. Cercare soltanto una parola contenuta nella stringa può funzionare per una demo e diventare ambiguo quando i nomi aumentano.</p>

<p>La versione iniziale riconosceva pochi casi con condizioni dirette. Era sufficiente a mostrare alcuni simboli comuni, ma non costituiva un catalogo. Un’integrazione più ampia deve invece distinguere un nome esatto, un alias e una richiesta di stile non disponibile. L’ordine delle regole conta: un nome moderno valido non deve essere trasformato prima da una regola pensata per un nome storico.</p>

<p>Il documento di prova conteneva desktop, cartelle, database, spunte e varianti di cerchio. Gli identificativi osservati sono stati utili per definire casi realistici di compatibilità, senza includere il progetto privato nel repository. I test possono usare quei nomi e dati sintetici. Per verificare la risoluzione di <code class="language-plaintext highlighter-rouge">desktop-solid</code> non serve distribuire il diagramma aziendale da cui è emersa la mancanza. Un buon esempio conserva la struttura tecnica necessaria e rimuove il contesto che non serve.</p>

<h2 id="3-la-fonte-originale-viene-prima-dellestrazione">3. La fonte originale viene prima dell’estrazione</h2>

<p>La documentazione Balsamiq dichiara l’uso di Font Awesome per le icone. È un punto di partenza migliore dell’idea di estrarre tutte le risorse da una copia installata del programma. Se una raccolta ha una fonte ufficiale separata, conviene verificare quella: provenienza, versione, formati e condizioni di utilizzo diventano più leggibili.</p>

<p>Questa verifica non autorizza a concludere che ogni icona di ogni versione Balsamiq sia disponibile nello stesso pacchetto aperto. Nel tempo possono cambiare cataloghi, stili e nomi; inoltre gli utenti possono importare risorse personalizzate. L’affermazione corretta è circoscritta: esiste una raccolta ufficiale Font Awesome Free utilizzabile secondo la sua licenza, e Telario può integrarla senza prendere risorse proprietarie dal programma originale.</p>

<p>La differenza è pratica. Un repository pubblico dovrebbe poter spiegare da dove arriva ogni asset distribuito. «Era nella cartella dell’app» è una provenienza tecnica, ma non chiarisce i diritti di redistribuzione. «È stato estratto dalla release ufficiale Free, con licenza e versione conservate» offre invece una catena verificabile. Non elimina ogni possibile domanda, ma evita di costruire l’integrazione su un presupposto invisibile. Prima si identifica il materiale utilizzabile; poi si scrive il resolver che lo rende compatibile con i nomi del documento.</p>

<h2 id="4-open-non-significa-senza-copyright">4. Open non significa senza copyright</h2>

<p>Le icone possono essere protette dal diritto d’autore e contemporaneamente distribuite con una licenza che consente uso e redistribuzione. Non c’è contraddizione. La licenza stabilisce le condizioni; il carattere aperto non cancella gli autori. Per questo la domanda utile non è soltanto «sono protette?», ma «quale materiale stiamo usando, con quale licenza e quali obblighi dobbiamo rispettare nella distribuzione?».</p>

<p>Font Awesome Free distingue i materiali: icone in SVG e JS sotto CC BY 4.0, font sotto SIL OFL 1.1 e codice non relativo a font o icone sotto MIT, secondo la licenza ufficiale della release. Telario usa i tracciati delle icone Free e include la licenza upstream insieme alle attribuzioni. La distinzione tra formati conta: non conviene applicare automaticamente a un file SVG la licenza che si è letta per un font.</p>

<p>Questa pagina descrive il materiale incluso nel progetto e la scelta adottata; non è una garanzia legale universale per qualunque risorsa futura. Se cambia la fonte o si aggiunge un altro catalogo, la verifica va rifatta sul componente concreto. Una procedura corretta è ripetibile proprio perché non dipende dall’idea generica che «le icone su Internet sono libere». Gli asset aperti sono utili anche perché permettono di documentare con precisione come possono essere usati.</p>

<h2 id="5-free-e-pro-non-sono-la-stessa-raccolta">5. Free e Pro non sono la stessa raccolta</h2>

<p>Un nome famoso non identifica automaticamente un’unica licenza per tutti i contenuti disponibili. Font Awesome offre materiale Free e materiale Pro. L’integrazione di Telario seleziona soltanto gli stili elencati come Free nei metadati della release scelta. Non include il catalogo Pro e non considera l’eventuale disponibilità di una risorsa in un altro prodotto come autorizzazione a distribuirla.</p>

<p>Questa regola ha una conseguenza visibile: un’icona può esistere nel pacchetto Free con uno stile e non con un altro. Se il documento richiede <code class="language-plaintext highlighter-rouge">database-regular</code>, Telario usa la variante Free disponibile <code class="language-plaintext highlighter-rouge">database-solid</code>. Il soggetto resta riconoscibile, ma l’aspetto non è identico. La sostituzione viene documentata e riguarda la visualizzazione, non il valore conservato nel documento.</p>

<p>È un compromesso esplicito. Per leggere un diagramma, una variante dello stesso soggetto può essere sufficiente. Per una revisione rigorosa dell’iconografia, potrebbe non esserlo. Il software non conosce automaticamente il livello di fedeltà richiesto dalla tua attività. Deve offrire un risultato coerente e informazioni sufficienti per valutarlo. La scelta più importante è evitare una promessa falsa: un catalogo Free completo non coincide necessariamente con tutte le varianti che qualcuno può aver usato in qualunque documento creato altrove.</p>

<h2 id="6-la-versione-fissata-rende-il-catalogo-riproducibile">6. La versione fissata rende il catalogo riproducibile</h2>

<p>Telario include 2.060 varianti della release Font Awesome Free 6.7.2. Il numero descrive varianti distribuite, non una garanzia di copertura totale di ogni possibile archivio Balsamiq. La release viene indicata perché una fonte senza versione può cambiare nel tempo, rendendo difficile riprodurre un risultato o capire perché un nome prima funzionasse in un certo modo.</p>

<p>Uno script legge i metadati ufficiali, estrae gli stili dichiarati Free, conserva dimensioni e tracciati, recupera alias e regole storiche e copia la licenza. L’output viene distribuito insieme all’app. Chi rigenera il catalogo può risalire alla stessa fonte invece di affidarsi a un insieme di file raccolti manualmente in momenti diversi.</p>

<p>La riproducibilità aiuta anche le verifiche. Se un aggiornamento modifica un tracciato, un alias o una disponibilità di stile, il cambiamento può essere confrontato con la release precedente. Non si tratta soltanto di aggiornare un numero nel README. Un catalogo è una dipendenza di rendering: può cambiare ciò che l’utente vede e la dimensione della build. Merita quindi un aggiornamento deliberato, accompagnato da controlli sui nomi e sulle geometrie, invece di un recupero automatico dell’ultima risorsa disponibile a ogni apertura dell’editor.</p>

<h2 id="7-i-vecchi-nomi-richiedono-una-mappa">7. I vecchi nomi richiedono una mappa</h2>

<p>Gli archivi durano spesso più delle convenzioni con cui sono stati creati. Un nome storico può riferirsi a un’icona che oggi ha un identificativo diverso. Le regole di compatibilità e gli alias consentono di collegare quelle convenzioni senza modificare il documento originale. È un problema simile a una traduzione: lo stesso concetto deve trovare una rappresentazione nel vocabolario corrente.</p>

<p>Telario usa gli alias dei metadati e le corrispondenze storiche della raccolta. Un nome come <code class="language-plaintext highlighter-rouge">file-o</code> richiede anche attenzione allo stile outline, non soltanto alla parola <code class="language-plaintext highlighter-rouge">file</code>. La risoluzione considera prima un identificativo moderno esatto; poi interpreta suffissi e corrispondenze. Il nome esatto ha precedenza per evitare che una regola storica trasformi un identificativo attuale già valido.</p>

<p>Questo ordine è stato importante nei test. Una collisione tra un nome moderno e una corrispondenza storica può produrre un’icona riconoscibile ma sbagliata. Se la verifica controlla soltanto «esiste un tracciato», il problema passa inosservato. Confrontare ogni variante del catalogo con la propria geometria impedisce invece che un resolver troppo zelante riscriva il significato di un nome valido. La compatibilità è utile quando amplia ciò che si riesce a leggere senza rompere ciò che era già espresso correttamente.</p>

<h2 id="8-i-tracciati-viaggiano-con-lapp">8. I tracciati viaggiano con l’app</h2>

<p>Le icone vengono disegnate come percorsi SVG. Non serve interrogare una CDN per ogni controllo o attendere che un font remoto venga caricato per sostituire un carattere. Questo si accorda con l’architettura locale dell’editor: una volta ricevuti gli asset dell’app, il renderer dispone della raccolta necessaria per i casi supportati.</p>

<p>La scelta aumenta il contenuto distribuito nella build. Non esistono cataloghi completi a dimensione zero. Il vantaggio è l’indipendenza delle rappresentazioni durante l’uso e la possibilità di includere percorsi vettoriali anche nelle esportazioni. La dimensione va misurata e organizzata, per esempio separando il catalogo in un chunk dedicato, senza fingere che una divisione dei file elimini i byte che devono comunque essere trasferiti.</p>

<p>In SVG ogni icona ha un sistema di coordinate e dimensioni proprie. Disegnare il tracciato nel <code class="language-plaintext highlighter-rouge">viewBox</code> corretto evita di deformare un’icona larga come se fosse quadrata. Il colore può essere applicato al percorso nel contesto del controllo. Sono dettagli tecnici piccoli, ma spiegano perché integrare una raccolta non significhi soltanto copiare un file JSON. I dati devono essere collocati correttamente nella rappresentazione della pagina e verificati anche quando escono dall’interfaccia per diventare un documento esportato.</p>

<h2 id="9-sei-casi-da-verificare-prima-di-dire-risolto">9. Sei casi da verificare prima di dire «risolto»</h2>

<h3 id="un-nome-moderno-esatto">Un nome moderno esatto</h3>

<p>Parti da un identificativo presente nel catalogo, per esempio <code class="language-plaintext highlighter-rouge">desktop-solid</code>. Il resolver dovrebbe restituire le dimensioni e il tracciato di quella variante, senza trasformazioni inattese. Il test più forte confronta il risultato con il dato incluso, non soltanto con l’esistenza di un oggetto. Altrimenti due icone differenti potrebbero passare entrambe come successo.</p>

<p>Questa verifica va estesa all’intero catalogo, perché gli errori di precedenza possono interessare nomi che non compaiono nella demo. Il documento di prova può aver rivelato il problema, ma non deve delimitare tutta la soluzione. Una correzione utile aggiunge capacità generale e controlla che il meccanismo funzioni anche lontano dal primo screenshot. La domanda non è «il desktop ora compare?». È «i nomi esatti continuano tutti a indicare la propria geometria?». Le due verifiche si completano e intercettano errori diversi.</p>

<h3 id="un-nome-storico-outline">Un nome storico outline</h3>

<p>Prova una corrispondenza come <code class="language-plaintext highlighter-rouge">file-o</code>. Il nome richiede una traduzione verso l’icona corrente e uno stile coerente con l’intenzione storica quando disponibile. Se il resolver ignora lo stile, può trovare un soggetto corretto e produrre una silhouette diversa da quella attesa. Il risultato sembra plausibile, ma perde una parte del significato visivo del nome.</p>

<p>Confronta l’uscita con la variante corrente corrispondente e verifica eventuali prefissi supportati. Non estendere automaticamente la regola a tutte le stringhe con la stessa terminazione senza controllare il catalogo. La compatibilità storica beneficia di una fonte strutturata più di quanto benefici di una serie crescente di sostituzioni intuitive. Un alias esplicito è leggibile e verificabile; una condizione generica può risolvere un esempio e alterarne altri. I test servono a rendere evidente quel confine prima che venga incontrato in un documento reale.</p>

<h3 id="una-variante-non-disponibile-come-free">Una variante non disponibile come Free</h3>

<p>Usa il caso <code class="language-plaintext highlighter-rouge">database-regular</code>. Il comportamento previsto è una sostituzione visiva con <code class="language-plaintext highlighter-rouge">database-solid</code>, disponibile nel catalogo incluso. La prova deve verificare sia la presenza dell’icona sia il fatto che la richiesta originale non venga riscritta nel modello del documento. Visualizzare un equivalente e cambiare il dato persistito sono due operazioni differenti.</p>

<p>Questa distinzione permette di migliorare in futuro il renderer senza dover annullare modifiche introdotte soltanto per la visualizzazione. Se una versione successiva dispone di una rappresentazione più adatta, può partire dall’identificativo originale conservato. L’utente dovrebbe conoscere la sostituzione quando la fedeltà dello stile conta. Per una mappa tecnica può bastare riconoscere il database; per una scelta di design serve il riferimento corretto. Il fallback è una capacità pratica, non un certificato di equivalenza grafica. Chiamarlo con il suo nome evita aspettative che il codice non può sostenere.</p>

<h3 id="un-suffisso-legato-alle-convenzioni-del-documento">Un suffisso legato alle convenzioni del documento</h3>

<p>Nel file osservato compariva <code class="language-plaintext highlighter-rouge">circle-small-solid</code>. La risoluzione lo collega al cerchio solido senza interpretare <code class="language-plaintext highlighter-rouge">small</code> come un soggetto diverso. Questo tipo di compatibilità va mantenuto stretto e comprensibile: il fatto di aver osservato una convenzione non autorizza a rimuovere arbitrariamente parole da qualsiasi nome.</p>

<p>Usa un test dedicato per il caso noto e confrontalo con la variante di base. Se trovi altre forme simili in futuro, verifica prima come sono usate e quale informazione esprimono. Dimensione del controllo, dimensione richiesta dell’icona e nome del soggetto possono convivere nelle proprietà senza essere intercambiabili. Un resolver troppo aggressivo può trasformare un nome sconosciuto in un’icona apparentemente valida ma semanticamente errata. A volte un segnaposto esplicito è preferibile a una rappresentazione sbagliata che nessuno pensa di controllare. La comodità della tolleranza deve restare subordinata alla chiarezza del risultato.</p>

<h3 id="unidentità-che-resta-sconosciuta">Un’identità che resta sconosciuta</h3>

<p>Un nome fuori dal catalogo deve continuare a produrre un esito riconoscibile. L’obiettivo dell’integrazione non è eliminare ogni punto interrogativo scegliendo un simbolo qualsiasi. Se manca una corrispondenza affidabile, il segnaposto segnala un limite reale e invita a verificare il documento. Nascondere il dubbio renderebbe l’interfaccia più pulita e il diagramma meno attendibile.</p>

<p>Prova un nome sintetico inesistente e controlla che non venga accidentalmente associato a una forma soltanto per una sottostringa. Il renderer precedente può ancora offrire alcune rappresentazioni specifiche, ma una stringa completamente sconosciuta deve restare distinguibile. Questa è una proprietà utile da conservare dopo l’ampliamento del catalogo. Un interprete parziale lavora meglio quando riconosce ciò che non comprende. Il punto interrogativo non è un fallimento estetico da cancellare a ogni costo; è un’informazione di stato da ridurre con copertura corretta e mantenere quando l’alternativa sarebbe inventare.</p>

<h3 id="licona-dentro-unesportazione">L’icona dentro un’esportazione</h3>

<p>La prova non finisce sul canvas. Esporta un controllo supportato e verifica che il risultato contenga percorsi vettoriali, dimensioni corrette e nessun riferimento necessario a un servizio esterno per disegnare l’icona. Un simbolo visibile nell’interfaccia può dipendere da risorse che non accompagnano l’uscita, se i due percorsi non sono stati progettati insieme.</p>

<p>Apri anche il PNG se quello sarà il formato della consegna. Una corretta struttura SVG è importante, ma la rasterizzazione è un passaggio ulteriore. Quando segnali una differenza, indica in quale livello compare: canvas, SVG esportato o PNG. Questa informazione riduce il campo dell’indagine e impedisce di correggere un resolver quando il problema riguarda scala o composizione dell’uscita. Il catalogo, il renderer e l’esportazione formano una catena. Ogni anello ha un criterio di verifica diverso e nessuno può essere sostituito interamente dalla soddisfazione di vedere finalmente sparire il primo punto interrogativo.</p>

<h2 id="10-i-marchi-richiedono-unattenzione-separata">10. I marchi richiedono un’attenzione separata</h2>

<p>Le raccolte di icone comprendono anche loghi di prodotti e aziende. La licenza delle forme non elimina i diritti sui marchi rappresentati. La licenza ufficiale Font Awesome ricorda che le icone dei marchi rappresentano i rispettivi titolari e non implicano approvazione o affiliazione. Per un progetto pubblico è una distinzione da mantenere anche nel testo del sito.</p>

<p>Rappresentare un servizio nominato in un diagramma non è la stessa cosa di usare quel logo come identità del proprio prodotto. Telario ha un marchio separato: una finestra e una griglia in petrolio e arancio. Non usa il marchio Balsamiq per presentarsi come versione ufficiale o come progetto collegato. Il nome del formato e del prodotto originale serve a spiegare la compatibilità, con la dichiarazione di indipendenza visibile.</p>

<p>Queste attenzioni non devono trasformarsi in un catalogo di paure ipotetiche. Servono a descrivere correttamente ciò che si distribuisce e il rapporto che esiste davvero. Fonte degli asset, attribuzione degli autori, diritti sui marchi e identità del progetto sono temi collegati ma distinti. Separarli rende più facile prendere decisioni concrete quando si aggiunge una risorsa, invece di affidarsi a un’unica frase vaga sulla libertà di usare tutte le icone.</p>

<h2 id="11-le-attribuzioni-devono-seguire-il-pacchetto">11. Le attribuzioni devono seguire il pacchetto</h2>

<p>Una nota in una conversazione non accompagna la build. Per questo la licenza ufficiale è inclusa nei file pubblici del progetto e nelle informazioni sulle librerie di terze parti. Chi scarica o serve l’app deve poter ritrovare la provenienza dei componenti senza conoscere la storia della loro integrazione. Le attribuzioni sono un contenuto distribuito, non soltanto una decisione presa una volta.</p>

<p>Lo script che raccoglie le licenze deve conservare anche quella delle icone. In caso contrario un aggiornamento ordinario potrebbe rigenerare il file delle note ed eliminare una sezione aggiunta a mano. È un piccolo esempio di manutenzione completa: correggere il risultato presente e il processo che lo ricrea. Un file giusto oggi è meno utile se il comando documentato lo rende sbagliato domani.</p>

<p>La documentazione delle icone specifica release, copertura, sostituzioni e modalità di rigenerazione. Questo permette a un futuro intervento di partire da informazioni concrete. Se si decide di aggiornare il catalogo o modificare i fallback, si sa quale comportamento deve essere confrontato. La chiarezza riduce anche il rischio di descrivere il progetto come interamente coperto da una licenza generale già scelta: la licenza dell’app resta una decisione distinta, mentre ogni dipendenza mantiene le proprie condizioni.</p>

<h2 id="12-copertura-e-fedeltà-sono-misure-diverse">12. Copertura e fedeltà sono misure diverse</h2>

<p>Un conteggio alto è facile da comunicare. Non risponde, da solo, alla domanda più importante: l’icona richiesta dal documento viene rappresentata con il soggetto e lo stile corretti? Un catalogo può contenere migliaia di varianti e comunque mancare un identificativo personalizzato. Può risolvere un nome con un fallback riconoscibile e non riprodurre l’aspetto originale. Copertura e fedeltà devono essere raccontate separatamente.</p>

<p>La verifica sul documento che ha fatto emergere il problema ha attraversato quattro pagine e settantadue icone, senza segnaposto <code class="language-plaintext highlighter-rouge">?</code> e senza errori JavaScript. È un risultato concreto su quel campione, non una certificazione su tutti gli archivi esistenti. I test automatici ampliano la fiducia nel meccanismo controllando tutte le varianti incluse e casi di alias. Le due prove rispondono a domande diverse e sono entrambe utili.</p>

<p>Per valutare il tuo documento, controlla prima se le icone importanti sono riconoscibili. Poi verifica gli stili che influenzano il significato o la revisione grafica. Se trovi una differenza, identifica il nome richiesto e il risultato mostrato. Una segnalazione precisa può portare a un nuovo alias, a una correzione di precedenza o alla documentazione di un limite. La domanda migliore non è «avete tutte le icone?», ma «che cosa succede a questo identificativo e perché?».</p>

<h2 id="13-una-manutenzione-sostenibile-comincia-da-casi-piccoli">13. Una manutenzione sostenibile comincia da casi piccoli</h2>

<p>Le regressioni possono nascondersi in una modifica che sembra soltanto additiva. Aggiungere un catalogo più grande cambia il percorso di risoluzione e può alterare icone già rappresentate. Per questo i test non si limitano ai simboli mancanti iniziali. Controllano le geometrie del catalogo, la differenza tra stili, i nomi storici e il comportamento delle identità sconosciute.</p>

<p>Quando compare un nuovo caso, conviene costruire una fixture sintetica con il minimo necessario: tipo <code class="language-plaintext highlighter-rouge">Icon</code>, identificativo, colore e dimensioni. Se il problema dipende da un gruppo o da una trasformazione, si aggiunge quel contesto. Il campione cresce per rispondere a una domanda, non perché il documento originale aveva molte altre informazioni. La riduzione rende il test più leggibile e protegge i contenuti privati.</p>

<p>Il risultato migliore è una correzione che un’altra persona può verificare leggendo poche righe e aprendo un esempio non riservato. In un piccolo progetto personale questo conta molto: la manutenzione futura non dovrebbe richiedere di ricordare quale cliente, quale pagina e quale messaggio avevano originato ogni regola. Il codice può conservare il caso tecnico mentre la storia aziendale rimane fuori dal repository. È un modo semplice di far crescere la compatibilità senza far crescere allo stesso ritmo il debito di contesto.</p>

<h2 id="14-cosa-controllare-nel-tuo-prossimo-mockup">14. Cosa controllare nel tuo prossimo mockup</h2>

<p>Parti dalla <a href="/it/compatibilita/">pagina di compatibilità</a> e usa la demo per conoscere l’interfaccia. Quando apri il tuo archivio, osserva le icone decisive per il diagramma e confronta almeno una pagina con un riferimento noto. Non interpretare automaticamente un simbolo diverso come errore del documento: potrebbe essere uno stile sostituito o una differenza del renderer.</p>

<p>I dettagli tecnici e la provenienza sono raccolti nella <a href="https://github.com/telario/telario/blob/main/docs/ICONE.md">documentazione delle icone</a>. Le condizioni dei materiali si trovano nella <a href="https://github.com/FortAwesome/Font-Awesome/blob/6.7.2/LICENSE.txt">licenza ufficiale Font Awesome Free</a>. La <a href="https://community.balsamiq.com/support/docs/creating-and-editing/images-and-icons/adding-icons/">documentazione Balsamiq sulle icone</a> chiarisce il rapporto con la raccolta di origine, senza trasformare Telario in un prodotto affiliato.</p>

<h2 id="15-una-procedura-per-aggiungere-la-prossima-corrispondenza">15. Una procedura per aggiungere la prossima corrispondenza</h2>

<p>Un criterio utile è chiedersi se la regola proposta descrive un fatto osservato oppure una somiglianza intuitiva. Nel primo caso puoi conservarne una prova. Nel secondo devi ancora verificare che il significato sia corretto. Questa domanda rallenta di pochi minuti una correzione e può risparmiare molto più tempo a chi leggerà un diagramma fidandosi delle icone. La velocità dell’implementazione ha valore quando non trasferisce il costo dell’incertezza al prossimo utilizzatore.</p>

<p>Quando trovi un nome non riconosciuto, conserva prima l’informazione esatta. Cambiare subito l’icona nell’editor originale può risolvere la singola immagine, ma nasconde il caso che avrebbe aiutato a migliorare l’interprete. Basta annotare identificativo, tipo di controllo e differenza osservata. Se il contenuto del progetto è privato, questi dati vanno separati dal contesto aziendale prima di preparare un esempio pubblico.</p>

<p>Il passo successivo è cercare una corrispondenza nel catalogo fissato. Esiste un nome esatto? È un alias storico? Lo stile richiesto è disponibile come Free? Ciascuna risposta suggerisce una correzione diversa. Un nome moderno mancante dalla risoluzione indica un problema del codice o dei dati distribuiti. Un alias richiede una mappa. Uno stile assente richiede un fallback documentato oppure un limite dichiarato. Non sono tre varianti dello stesso problema.</p>

<p>Prima di aggiungere una regola generica, prova il nome in isolamento e controlla i nomi vicini che potrebbero essere coinvolti. La tentazione di usare una sottostringa è forte perché produce un risultato veloce. Ma una regola che riconosce troppo può introdurre un errore silenzioso: il simbolo compare e nessuno sospetta che sia quello sbagliato. Il segnaposto, almeno, chiedeva attenzione. Un’immagine plausibile può ottenere fiducia senza meritarla.</p>

<p>Infine verifica l’esportazione e conserva il caso nel test. La soluzione deve sopravvivere alla prossima rigenerazione del catalogo e al prossimo intervento sul renderer. Aggiorna la documentazione soltanto quando cambia il perimetro visibile all’utente: un alias in più non richiede necessariamente una nuova promessa commerciale, mentre una sostituzione di stile merita una descrizione chiara. In questo modo l’integrazione cresce per prove concrete e rimane leggibile anche a chi non ha seguito la conversazione originaria.</p>

<p>Il piccolo punto interrogativo è stato un buon promemoria. Un programma può sembrare quasi completo finché non incontra il nome che non conosce. Risolverlo bene significa trovare la fonte, rispettarne le condizioni, interpretare i nomi e verificare il risultato. Poi, finalmente, il desktop torna a essere un desktop. Una conquista modesta, ma molto più comoda da mettere in un diagramma di una domanda senza risposta.</p>]]></content><author><name>Antonio Trento</name></author><summary type="html"><![CDATA[Come un’icona mancante ha portato a un catalogo Font Awesome Free: identificativi, alias, stili, attribuzioni e compatibilità senza promesse facili.]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://telario.github.io/assets/images/blog/icons-1600.webp" /><media:content medium="image" url="https://telario.github.io/assets/images/blog/icons-1600.webp" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry xml:lang="en"><title type="html">That question mark wasn’t in the mockup.</title><link href="https://telario.github.io/en/blog/the-question-mark/" rel="alternate" type="text/html" title="That question mark wasn’t in the mockup." /><published>2026-10-23T09:00:00+02:00</published><updated>2026-10-23T09:00:00+02:00</updated><id>https://telario.github.io/en/blog/the-question-mark</id><content type="html" xml:base="https://telario.github.io/en/blog/the-question-mark/"><![CDATA[<p>The file opens, screens appear, and the arrows seem to be in place. Then you notice little dashed boxes containing question marks. They are not a creative decision made by your boss. They are the editor saying, “I found an icon, but I do not know how to draw it yet.” A reasonable statement expressed through a graphic that looks vaguely like a much more serious problem.</p>

<p>This happened during a real Telario trial. The initial renderer drew a limited collection of shapes: databases, gears, envelopes, and a few others. Unrecognised icons became placeholders. The document could contain the correct identifier while the renderer had no representation for that name. Archive reading had succeeded; graphical coverage was incomplete. Those are different outcomes, even though users encounter both on the same canvas.</p>

<p>The answer was not simply drawing the two missing shapes visible in a screenshot. First, we needed to identify the collection behind the document, find its original source, and establish the conditions for distributing it in a public repository. The result was a local Font Awesome Free integration with historical aliases, licensing, and checks. The route matters more than the final count: it reveals the work hidden behind an apparently obvious little icon.</p>

<h2 id="1-what-a-placeholder-actually-means">1. What a placeholder actually means</h2>

<p>A placeholder is an interpreter response, not a universal diagnosis of the file. It can indicate a control that was read but is not rendered, a resource outside the supported scope, or a name that has no catalog match. Distinguish those cases before talking about missing data. Appearance alone cannot establish whether information has been lost.</p>

<p>For icons, Telario reads an identifier from control properties and passes it to the renderer. If the name has no recognised graphical representation, the dashed box and <code class="language-plaintext highlighter-rouge">?</code> appear. The original identifier may remain intact in the data. Information can therefore be preserved correctly and still be displayed poorly or not displayed yet. This boundary prevents an incomplete visual vocabulary from being mistaken for a damaged archive.</p>

<p>Start by comparing icons that work with those that do not. If a database appears while a desktop becomes a question mark, incomplete catalog coverage is a more concrete hypothesis than a generic opening failure. Inspect the identifier next. The diagnostic path is small: symptom, input data, resolution rule, and graphical result. It points to the appropriate layer instead of encouraging document edits in the hope that the placeholder will stop complaining. A useful fix begins by explaining the symptom rather than merely hiding it.</p>

<h2 id="2-an-icon-name-is-structured-data">2. An icon name is structured data</h2>

<p>A name such as <code class="language-plaintext highlighter-rouge">desktop-solid</code> is more than an English description. It includes at least a subject and a style. <code class="language-plaintext highlighter-rouge">folder-regular</code> and <code class="language-plaintext highlighter-rouge">folder-solid</code> can represent the same category through different paths. That distinction affects rendering and lookup. Searching only for a word somewhere in the string may work in a demo and become ambiguous as the vocabulary grows.</p>

<p>The first implementation recognised a few direct conditions. That displayed common symbols but did not constitute a catalog. A broader integration must distinguish an exact name, an alias, and an unavailable style request. Rule order matters: a valid modern identifier should not first be transformed by a compatibility rule intended for a historical name. A plausible icon is not necessarily the correct icon.</p>

<p>The trial document contained desktops, folders, databases, checks, and circle variants. These identifiers helped define realistic compatibility cases without including the private project in the repository. Tests can use the names and synthetic data. Checking <code class="language-plaintext highlighter-rouge">desktop-solid</code> does not require distributing the business diagram that revealed the gap. A good example retains necessary technical structure and removes irrelevant organisational context. That makes the issue easier to reproduce while avoiding the false choice between investigating a problem and publishing a document that should remain private.</p>

<h2 id="3-prefer-the-original-source-to-extraction">3. Prefer the original source to extraction</h2>

<p>Balsamiq documentation identifies Font Awesome as the source of its icons. That is a better starting point than extracting everything from an installed application. When a collection has a separate official source, investigate it first. Provenance, versions, formats, and usage conditions become easier to establish than when assets are gathered from another product’s installation directory.</p>

<p>This does not establish that every icon in every Balsamiq version is available in one open package. Catalogs, styles, and names can change, and users can import custom resources. The accurate conclusion is narrower: an official Font Awesome Free collection exists under its own licence, and Telario can integrate that material without taking proprietary assets from the original application.</p>

<p>A public repository should explain where distributed assets came from. “It was in the application folder” identifies a technical location but does not clarify redistribution rights. “It was extracted from the official Free release, with the version and licence retained” provides an inspectable chain. That does not answer every imaginable future question, but it avoids building on an invisible assumption. Identify usable material first, then implement the resolver connecting it to document names. The resulting separation between acquisition and interpretation also makes later catalog updates easier to review.</p>

<h2 id="4-open-does-not-mean-without-copyright">4. Open does not mean without copyright</h2>

<p>Icons can be protected by copyright and distributed under a licence permitting use and redistribution. There is no contradiction. The licence establishes conditions; openness does not erase authorship. Ask which material is being used, under which licence, and which distribution obligations apply. “Are the icons copyrighted?” is only the beginning of that investigation.</p>

<p>Font Awesome Free distinguishes its materials. SVG and JS icons use CC BY 4.0, fonts use SIL OFL 1.1, and non-font, non-icon code uses MIT according to the official release licence. Telario uses Free icon paths and includes the upstream licence and attribution. File format matters: a licence read for a font should not automatically be applied to an SVG file without checking the actual terms.</p>

<p>This article describes the material included in the project and the decision made for it. It is not a universal legal guarantee for every future resource. A new source or catalog requires checking the concrete component again. A repeatable process is valuable precisely because it does not depend on the vague belief that “icons on the Internet are free.” Open assets make accurate provenance and permitted uses easier to document. Respecting their terms is part of using them responsibly, rather than an optional administrative step added after the integration already ships.</p>

<h2 id="5-free-and-pro-are-different-collections">5. Free and Pro are different collections</h2>

<p>A familiar product name does not imply a single licence covering everything it offers. Font Awesome provides Free and Pro material. Telario’s integration selects only styles listed as Free in the chosen release metadata. It does not include the Pro catalog or treat availability inside another product as permission to redistribute that product’s resources.</p>

<p>The visible consequence is that an icon may exist in the Free package in one style but not another. If a document requests <code class="language-plaintext highlighter-rouge">database-regular</code>, Telario uses the available Free <code class="language-plaintext highlighter-rouge">database-solid</code> variant. The subject remains recognisable, but the appearance is not identical. This substitution is documented and affects visualisation rather than the identifier stored in the document. Preserving that identifier matters for future compatibility work.</p>

<p>This is an explicit compromise. A different style of the same subject may be enough to read a diagram, but unsuitable for a rigorous iconography review. The software cannot automatically know the fidelity required by your task. It should provide coherent output and enough information to assess it. The important promise is the accurate one: a complete included Free catalog does not necessarily cover every variant used in every document created elsewhere. A practical fallback improves usefulness without turning approximate resemblance into a claim of exact equivalence.</p>

<h2 id="6-pinning-a-release-makes-the-catalog-reproducible">6. Pinning a release makes the catalog reproducible</h2>

<p>Telario includes 2,060 variants from Font Awesome Free 6.7.2. The count describes distributed variants, not universal Balsamiq archive coverage. The release is named because an unversioned source can change over time, making results harder to reproduce and historical behaviour harder to explain. A catalog is part of rendering behaviour, not merely a decorative dependency.</p>

<p>A script reads official metadata, extracts styles declared Free, retains dimensions and paths, obtains aliases and historical shims, and copies the licence. The output travels with the app. Regeneration can return to the same source rather than depending on files manually collected at different times. That provides a clear basis for both technical review and asset provenance.</p>

<p>Reproducibility also supports testing. Changes in paths, aliases, or style availability can be compared with the earlier release. Updating the catalog means more than editing a version number in documentation: it can alter what users see and the build size. It deserves deliberate checks on names and geometry rather than an automatic request for whatever happens to be latest whenever the editor opens. A stable input makes a rendering difference easier to investigate. Without that stability, a bug report can become a moving target before anyone has reproduced the original result.</p>

<h2 id="7-historical-names-need-a-map">7. Historical names need a map</h2>

<p>Archives often outlive the conventions used to create them. A historical name may refer to an icon with a different current identifier. Compatibility rules connect those vocabularies without changing the original document. This resembles translation: the same concept needs a representation in the current catalog, while the original expression remains available as evidence.</p>

<p>Telario uses metadata aliases and historical mappings. A name such as <code class="language-plaintext highlighter-rouge">file-o</code> requires attention to outline style as well as the word <code class="language-plaintext highlighter-rouge">file</code>. Resolution first checks for an exact modern identifier, then interprets suffixes and compatibility mappings. Exact matching has priority so a historical rule cannot rewrite a current identifier that was already valid.</p>

<p>That order mattered during testing. A collision between a modern name and an old mapping can produce a recognisable but incorrect icon. Checking only whether some path exists would miss it. Comparing every bundled variant with its own geometry prevents an overenthusiastic resolver from changing the meaning of valid names. Compatibility should expand what can be read without breaking what was already expressed correctly. The principle applies beyond icons: tolerance at the input boundary is useful only when it does not quietly override a precise, supported representation that needed no interpretation in the first place.</p>

<h2 id="8-paths-travel-with-the-application">8. Paths travel with the application</h2>

<p>Icons are drawn as SVG paths. The renderer does not need a CDN request for each control or a remotely loaded icon font to substitute a character. That fits the editor’s local architecture: once application assets have loaded, the supported collection is available for rendering. Document content does not need to be sent elsewhere to ask what an icon looks like.</p>

<p>Bundling the collection increases distributed content. Complete catalogs do not have zero size. The benefit is independence during use and the ability to embed vector paths in exports. Size should be measured and organised, for example through a dedicated catalog chunk, without pretending that splitting files removes bytes that still need transferring. The trade-off should be described rather than hidden behind a claim of effortless completeness.</p>

<p>Each SVG icon also has its own coordinate system and dimensions. Using the correct <code class="language-plaintext highlighter-rouge">viewBox</code> avoids distorting a wide symbol as though it were square. Colour can be applied to the path within the control context. These small details explain why integration means more than copying JSON. Catalog data must be placed correctly within page rendering and checked when it leaves the interface as an export. The chain includes lookup, geometry, composition, and output; success at one step cannot automatically certify all the others.</p>

<h2 id="9-six-cases-to-check-before-saying-fixed">9. Six cases to check before saying “fixed”</h2>

<h3 id="an-exact-modern-name">An exact modern name</h3>

<p>Begin with a catalog identifier such as <code class="language-plaintext highlighter-rouge">desktop-solid</code>. Resolution should return that variant’s dimensions and paths without an unexpected translation. The stronger test compares against included data instead of merely checking whether an object exists. Otherwise, two different icons could both count as success simply because both produce a visible shape.</p>

<p>Extend this check across the entire catalog. Precedence errors can affect names absent from the demo, so the original document should not define the whole test boundary. A good correction adds general capability and checks the mechanism beyond the first screenshot. Ask whether exact identifiers still select their own geometry, as well as whether the missing desktop now appears. Those checks complement each other. One verifies the immediate user problem; the other protects the catalog’s internal meaning. Together they make the improvement reviewable without requiring a human to inspect thousands of icons by eye or assume that a larger collection is automatically a more reliable one.</p>

<h3 id="a-historical-outline-name">A historical outline name</h3>

<p>Try a name such as <code class="language-plaintext highlighter-rouge">file-o</code>. It requires a mapping to a current subject and a style consistent with its historical intention where available. Ignoring style can select the right subject while producing a different silhouette. The result looks plausible but drops part of the visual meaning encoded by the older convention.</p>

<p>Compare output with the corresponding current variant and check supported prefixes. Do not generalise to every string with a similar ending without consulting the catalog. Structured upstream mappings are more useful than a growing series of intuitive replacements. An explicit alias is inspectable; a broad condition can repair one example while changing others. Tests expose that boundary before a real document encounters it. Historical compatibility should retain meaning rather than reward the resolver for returning anything at all. If an old name contains both subject and style information, a useful translation accounts for both or clearly documents the approximation introduced.</p>

<h3 id="a-style-unavailable-in-free">A style unavailable in Free</h3>

<p>Use <code class="language-plaintext highlighter-rouge">database-regular</code>. The expected behaviour is a visual substitution with the available <code class="language-plaintext highlighter-rouge">database-solid</code> path. Check both that the icon appears and that the original request is not rewritten in the document model. Displaying an equivalent and changing persisted input are different operations, with different consequences for later use.</p>

<p>Keeping the identifier allows future renderer improvements without first undoing changes made only for display. If a later version provides a better representation, it can start from the original request. Users should know about substitution when style fidelity matters. Recognising the database may be enough for a technical map; a design decision requires the appropriate reference. A fallback is a useful capability, not a certificate of graphical equivalence. Describing it accurately prevents expectations the code cannot support. It also makes a bug report clearer: “the regular style is substituted” is a different issue from “the database icon is missing,” and the next action depends on which statement is true.</p>

<h3 id="a-document-specific-suffix-convention">A document-specific suffix convention</h3>

<p>The observed file included <code class="language-plaintext highlighter-rouge">circle-small-solid</code>. Resolution maps it to the solid circle rather than treating <code class="language-plaintext highlighter-rouge">small</code> as a different subject. Keep this compatibility rule narrow and understandable. Observing one convention does not justify deleting arbitrary words from every identifier in the hope of finding a familiar shape.</p>

<p>Give the known case a dedicated test and compare it with the base variant. When similar names appear later, inspect their use and meaning first. Control dimensions, requested icon size, and subject name can coexist in properties without being interchangeable. An aggressive resolver may turn an unknown identifier into a valid-looking but semantically incorrect icon. Sometimes an explicit placeholder is preferable to an incorrect symbol nobody thinks to question. Tolerance should remain subordinate to clarity. This principle protects diagrams in which symbols carry operational meaning: a neat-looking approximation can be more misleading than a visible request for investigation, particularly when readers assume every displayed symbol was resolved with exact knowledge of the source.</p>

<h3 id="a-genuinely-unknown-identity">A genuinely unknown identity</h3>

<p>A name outside the catalog should still produce a recognisable unresolved result. The objective is not to eliminate question marks by choosing arbitrary symbols. Without a reliable correspondence, a placeholder communicates a real limitation and invites checking. Hiding uncertainty would make the interface tidier and the diagram less trustworthy.</p>

<p>Try a synthetic nonexistent name and verify that a substring does not accidentally select a shape. The previous renderer may retain specific representations, but a completely unknown string should remain distinguishable. Preserve that property after expanding the catalog. A partial interpreter works better when it recognises what it does not understand. The question mark is not an aesthetic failure to erase at any cost. It is state information, reduced through correct coverage and retained when the alternative is invention. Reliable software should not be judged solely by whether the screen contains warnings. The relevant question is whether its visible certainty matches what the implementation actually knows.</p>

<h3 id="the-icon-inside-an-export">The icon inside an export</h3>

<p>The check does not finish on the canvas. Export a supported control and inspect vector paths, dimensions, and the absence of a required external service reference. An icon visible in the interface could otherwise depend on resources that fail to accompany the output. Rendering and exporting need a shared understanding of the asset.</p>

<p>Open the PNG too if that is the actual handoff format. A correct SVG structure matters, but rasterisation is another step. Describe where a discrepancy appears: canvas, exported SVG, or PNG. That narrows investigation and prevents a lookup fix being attempted when the problem concerns scale or output composition. Catalog, renderer, and exporter form a chain. Each link needs a different criterion, and none can be replaced by the satisfaction of seeing the first question mark disappear. A result becomes useful when it survives the route to the recipient, not merely when it looks correct in the development session where the integration was first demonstrated.</p>

<h2 id="10-brand-marks-require-separate-attention">10. Brand marks require separate attention</h2>

<p>Icon collections also contain company and product logos. A licence for graphical assets does not eliminate rights associated with the represented trademarks. Font Awesome’s official licence notes that brand icons represent their respective owners and do not imply endorsement or affiliation. A public project should preserve that distinction in its presentation as well as its asset notices.</p>

<p>Showing a service named in a diagram differs from adopting its logo as your own product identity. Telario has a separate mark: a window and grid in petrol blue and orange. It does not use Balsamiq branding to imply an official version or partnership. References to the format and original product explain compatibility, accompanied by a visible statement of independence.</p>

<p>These considerations do not need to become a catalog of hypothetical fears. They help describe what is actually distributed and which relationship actually exists. Asset provenance, author attribution, trademark rights, and project identity are related but distinct subjects. Separating them supports concrete decisions when adding a resource, instead of relying on one vague sentence claiming that all icons are free to use. Clear identity also makes the personal story stronger: this is an independent solution to a specific workflow gap, not a borrowed product identity used to lend the project an authority it does not possess.</p>

<h2 id="11-attribution-must-travel-with-the-package">11. Attribution must travel with the package</h2>

<p>A note in a conversation does not accompany a build. The official licence is therefore included among public project files and third-party notices. Someone downloading or serving the application should be able to find component provenance without knowing the integration’s history. Attribution is distributed content, not merely a decision made once during development.</p>

<p>The notice-generation script must preserve the icon licence too. Otherwise an ordinary update could regenerate notices and remove a manually added section. Complete maintenance corrects both today’s result and the process that recreates it. A correct file is less useful if the documented command makes it incomplete tomorrow. This is a small example of why support tooling matters even in a personal project.</p>

<p>Icon documentation specifies release, coverage, substitutions, and regeneration steps. A future change can therefore start from concrete information. Catalog updates and fallback changes have a baseline for comparison. Clarity also prevents the project from being described as having one already-chosen overall licence: the application’s licensing decision remains separate, while dependencies keep their existing terms. Public source visibility, dependency licensing, and permission to redistribute the application should not be collapsed into one assumption simply because all three topics appear near each other in a repository.</p>

<h2 id="12-coverage-and-fidelity-are-different-measures">12. Coverage and fidelity are different measures</h2>

<p>A high count is easy to communicate. It does not answer whether a document’s requested icon is rendered with the correct subject and style. A catalog can contain thousands of variants and still lack a custom identifier. It can resolve a name through a recognisable fallback without reproducing the original appearance. Coverage and fidelity need separate descriptions if users are to assess suitability for their tasks.</p>

<p>The local check on the document revealing this issue traversed four pages and seventy-two icons, with no question-mark placeholders and no JavaScript errors. That is a concrete result for that sample, not certification of every existing archive. Automated tests broaden confidence in the mechanism by checking included variants and alias cases. The two forms of evidence answer different questions and complement each other.</p>

<p>For your own project, first check whether important symbols are recognisable. Then inspect styles affecting meaning or graphical review. When reporting a difference, identify the requested name and observed result. A precise report can lead to another alias, a precedence correction, or a documented limitation. The useful question is not simply “do you have all the icons?”. It is “what happens to this identifier, and why?”. That narrower question can lead to an answer grounded in catalog data rather than an untestable promise of universal coverage.</p>

<h2 id="13-sustainable-maintenance-starts-with-small-cases">13. Sustainable maintenance starts with small cases</h2>

<p>Regressions can hide in apparently additive changes. A larger catalog changes lookup paths and may alter icons that already worked. Tests should therefore cover more than the originally missing symbols: catalog geometry, style differences, historical names, and unknown identities all matter. Adding capability should not silently weaken established behaviour elsewhere.</p>

<p>For a new issue, build a synthetic fixture with only the necessary elements: <code class="language-plaintext highlighter-rouge">Icon</code> type, identifier, colour, and dimensions. Add a group or transformation only when it affects the result. Let the example grow to answer a question rather than because the source archive contained more data. Reduction makes tests readable and keeps private content outside the repository.</p>

<p>The best correction is one another person can verify through a few lines and a nonconfidential example. That matters in a small personal project: future maintenance should not require remembering which customer, page, and message originally motivated every rule. The code can preserve the technical case while business history remains outside the repository. Compatibility grows without the same increase in context debt. A fixture becomes a durable explanation of a requirement, whereas a memory of a screenshot becomes less reliable every time the person maintaining the project returns to it after a few months away.</p>

<h2 id="14-check-the-next-mockup-deliberately">14. Check the next mockup deliberately</h2>

<p>Begin with <a href="/en/compatibility/">compatibility information</a> and learn the interface using the demo. When opening an archive, inspect symbols important to the diagram and compare at least one page with a known reference. Do not automatically interpret a different symbol as an error in the document: it could reflect a style fallback or renderer difference. Identify the layer before attempting a correction.</p>

<p>Technical details and provenance are in the <a href="https://github.com/telario/telario/blob/main/docs/ICONE.md">icon documentation</a>. Material conditions are in the <a href="https://github.com/FortAwesome/Font-Awesome/blob/6.7.2/LICENSE.txt">official Font Awesome Free licence</a>. <a href="https://community.balsamiq.com/support/docs/creating-and-editing/images-and-icons/adding-icons/">Balsamiq’s icon documentation</a> explains the source collection without making Telario an affiliated product.</p>

<p>The links serve different purposes: one describes this integration, one supplies licence terms, and one describes the original editor’s use of icons. Keeping those roles separate makes the evidence easier to assess. None should be used as a shortcut to claim that every custom resource or every Pro style is covered by the Free package. Accurate references support a precise statement; they do not expand it beyond what the source actually establishes.</p>

<h2 id="15-a-process-for-the-next-missing-correspondence">15. A process for the next missing correspondence</h2>

<p>Preserve the exact unknown identifier before changing the source icon. Replacing it immediately may fix one image while hiding the case that could improve the interpreter. Record identifier, control type, and observed difference. Separate this technical information from private business context before preparing a public example. Most lookup issues do not need a whole project attached.</p>

<p>Next, inspect the pinned catalog. Is there an exact name, a historical alias, or an unavailable Free style? Each answer suggests a different action. A current name missing from resolution points to code or distributed-data problems. An alias needs a mapping. An absent style needs a documented fallback or declared limit. These are not interchangeable versions of the same defect.</p>

<p>Before introducing a broad rule, test the name in isolation and check neighbouring names the rule could affect. Substring matching is tempting because it produces fast results. It can also create silent errors: a symbol appears, so nobody suspects it is wrong. The placeholder at least requested attention. A plausible image can receive trust it has not earned. Ask whether the rule describes an observed fact or merely an intuitive resemblance, then preserve evidence for the chosen interpretation.</p>

<p>Finally, verify export and retain the case in tests. The fix should survive catalog regeneration and the next renderer change. Update user-facing documentation when visible scope changes, particularly for style substitution. Integration should grow through concrete evidence and remain understandable to someone who never read the original conversation.</p>

<p>That little question mark was a useful reminder. Software can feel nearly complete until it encounters the name it does not know. Solving the problem properly means finding the source, respecting its conditions, interpreting names, and checking the result. Then the desktop finally becomes a desktop again. A modest achievement, but considerably easier to place in a diagram than an unanswered question.</p>]]></content><author><name>Antonio Trento</name></author><summary type="html"><![CDATA[How a missing icon led to a Font Awesome Free catalog: identifiers, aliases, styles, attribution and compatibility without easy promises.]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://telario.github.io/assets/images/blog/icons-1600.webp" /><media:content medium="image" url="https://telario.github.io/assets/images/blog/icons-1600.webp" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry xml:lang="en"><title type="html">A database in your tab. The mockup stays on your computer.</title><link href="https://telario.github.io/en/blog/a-database-in-your-tab/" rel="alternate" type="text/html" title="A database in your tab. The mockup stays on your computer." /><published>2026-10-22T09:00:00+02:00</published><updated>2026-10-22T09:00:00+02:00</updated><id>https://telario.github.io/en/blog/a-database-in-your-tab</id><content type="html" xml:base="https://telario.github.io/en/blog/a-database-in-your-tab/"><![CDATA[<p>Opening an application in a browser does not tell you where its work happens. It might be the interface of a remote service, a static document with a few interactions, or a program executing most of its logic on your machine. To understand what happens to files, follow the data rather than the shape of the window.</p>

<p>In Telario, the selected document is read and processed in the browser. The server delivers the application: HTML, JavaScript, CSS, and the WebAssembly module used for SQLite. The editor does not send the project to a conversion service. That decision answers a concrete need: opening a working archive without turning it into an attachment destined for another server.</p>

<p>“Local” is not a complete explanation, however. Memory, dependencies, compatibility, downloads, and persistence still matter. A tab can execute a database and lose undownloaded changes when closed. A server on the same machine can deliver the app without knowing the document being opened. These distinctions become especially important when moving from a successful demo to a real project containing many pages and images. Understanding them makes the convenience useful rather than mysterious.</p>

<h2 id="1-the-server-delivers-tools-not-document-processing">1. The server delivers tools, not document processing</h2>

<p>In the Docker workflow, Telario is built and served through Nginx. The browser requests application files and executes them. There is no need to mount a mockup directory inside the container: document selection happens through the browser interface. Separating these stages avoids a common assumption that every file opened by a web page must necessarily pass through the server that delivered the page.</p>

<p>The first setup still needs a network connection to download Docker images and dependencies. After building, the editor does not need CDNs or external services to process documents. This describes the app’s intended path, not every process running on the operating system. Browser extensions, the synchronised folder containing your file, and other installed software have their own behaviour. A statement about the editor should not quietly become a claim about the whole machine.</p>

<p>The useful question is precise: which requests does the editor produce when a document is opened and edited? Browser tests also check for unexpected external requests along the tested paths. Observable behaviour is stronger evidence than the word “privacy” printed beside a button. Architecture should make the promise inspectable in code and use. It should also help distinguish an app request from activity produced by the surrounding environment when investigating an unexpected result.</p>

<h2 id="2-a-bmpr-contains-more-than-an-image">2. A .bmpr contains more than an image</h2>

<p>Telario treats a <code class="language-plaintext highlighter-rouge">.bmpr</code> as a SQLite archive. The reader looks for required tables, reads format information, and retrieves resources and pages. Page data describes controls: types, coordinates, dimensions, properties, and other information. What you see is a representation of those structures, not a PNG hidden beneath a different file extension.</p>

<p>This explains why successful opening requires more than renaming a file. The app must interpret structure, recognise elements, and choose how to draw them. A button has text and geometry; an arrow has endpoints and style; a group contains other controls. Some details are understood, while others are preserved without being completely rendered. Preservation and visualisation are different capabilities, and treating them as identical leads to misleading conclusions about both missing graphics and saved data.</p>

<p>The reader retains original bytes and raw JSON. That avoids reconstructing the entire archive solely from the subset understood by the interface. Unknown fields matter here: the absence of a command in the property inspector should not automatically delete existing information. The first rule of a partial interpreter is to avoid confusing “I do not use this” with “nobody needs this.” Keeping source information available creates a better basis for subsequent editing, inspection, and cautious writing than a model that silently discards everything outside its current vocabulary.</p>

<h2 id="3-how-sqlite-lives-in-a-browser">3. How SQLite lives in a browser</h2>

<p>The app uses sql.js to initialise SQLite through a WebAssembly module distributed with the build. The code imports the <code class="language-plaintext highlighter-rouge">.wasm</code> asset location, supplies it during initialisation, and reuses the result. If initialisation fails, the cached promise is cleared so a later attempt can retry rather than keeping the whole session trapped in a failed state.</p>

<p>When a user selects a file, its bytes become the input to an in-memory database. Queries read tables and resources without a remote database connection. There is no separate SQLite server to install, no database user to create, and no company connection string to configure. The complexity remains within the program and the resources of the device running the browser. The interface may look like a website, but the document-processing work is happening on the client.</p>

<p>Convenience does not mean zero cost. File content, the editor’s model, and editing history all consume memory. A large document can demand more resources than its download size suggests. The opening limit is 100 MB, but that is an input check rather than a universal performance guarantee. Performance questions always need a file, an operation, and a device as context. Without those, “runs in the browser” says almost nothing about how a particular project will feel during actual use.</p>

<h2 id="4-the-model-separates-documents-from-gestures">4. The model separates documents from gestures</h2>

<p>After reading the archive, the model exposes pages and controls through functions for text, geometry, and properties. The interface does not need every SQLite query detail to move an element. The renderer does not decide how the final download is created. This separation makes the information path easier to inspect and helps place fixes at the appropriate level.</p>

<p>The repository makes these responsibilities visible. <code class="language-plaintext highlighter-rouge">src/io</code> handles archives; <code class="language-plaintext highlighter-rouge">src/model</code> handles data and geometry; <code class="language-plaintext highlighter-rouge">src/render</code> draws; <code class="language-plaintext highlighter-rouge">src/editor</code> manages history; <code class="language-plaintext highlighter-rouge">src/export</code> produces outputs; and <code class="language-plaintext highlighter-rouge">src/ui</code> implements controls and interactions. These are not six separate products. They are different responsibilities within a small application that should remain understandable when it changes. Directory names are useful when they reflect real ownership of behaviour rather than simply making the tree look organised.</p>

<p>A graphical fix should not alter the writer. An icon-alias correction should not rewrite persisted document identifiers. A new property-inspector action does need checking against the data it produces. Separation does not eliminate regressions, but it makes relevant tests easier to choose and indirect effects easier to reason about. The practical benefit appears when a change can be described precisely: which layer changes, which output should improve, and which document properties should stay the same. That is a stronger review than “the app still opens.”</p>

<h2 id="5-svg-is-the-canvas-language">5. SVG is the canvas language</h2>

<p>The renderer draws controls using SVG. Geometry, text, and paths remain vector elements transformed relative to page coordinates. Zoom changes the view without requiring every control to be replaced by a fresh raster image. SVG export can reuse the representation system, preserving a readable relationship between what the app displays and what it produces outside the editor.</p>

<p>The application does not use Balsamiq’s proprietary graphical assets to reproduce every control exactly. Fonts come from the system, and several shapes have an independent rendering. rough.js provides an optional sketch appearance. That hand-drawn effect is a visual mode, not certification that the result matches the original product. The difference matters whenever a review depends on typography, alignment, or a specific visual convention.</p>

<p>Vector rendering also makes it possible to embed icons as paths instead of depending on a remote icon font. It does not solve every problem automatically. Rich text, tables, groups, and curved arrows may still require approximations. The advantage is the ability to inspect drawing rules element by element. The limitation is having to implement those rules rather than assuming that enough data in an archive makes every rendering decision obvious. A useful renderer needs both geometry and an honest description of what its interpretation does not yet cover.</p>

<h2 id="6-images-are-not-all-equivalent-resources">6. Images are not all equivalent resources</h2>

<p>Supported embedded resources include PNG, JPEG, GIF, and WebP. The reader recognises expected raster signatures and builds data the browser can use. External resources, links, and embedded SVG are not loaded or executed. This is deliberate: opening an archive should not automatically execute active content or retrieve addresses found inside the document.</p>

<p>That behaviour may differ from the author’s environment. An externally linked image could be available there and absent from the local interpretation. The correct response is to identify the resource type and the boundary, rather than promise that every missing picture can be recovered without additional conditions. A missing visual does not necessarily imply broken database reading, and not every visual difference has the same cause.</p>

<p>A useful report often needs only to establish whether the resource was embedded, which format it used, and which control referenced it. Publishing a customer photograph is unnecessary to demonstrate a decoding issue when a synthetic image in the same format can isolate the behaviour. Preservation and display should again be evaluated separately: an unrendered resource is not automatically a deleted resource. The distinction guides both investigation and communication, preventing a visual symptom from being reported as data loss before the archive has actually been examined.</p>

<h2 id="7-history-is-working-memory">7. History is working memory</h2>

<p>Undo and redo allow exploration without treating every gesture as final. Telario maintains history for up to one hundred operations. That is useful within the session, but it is not a permanent revision archive. Closing or reloading the tab can lose work that has not been downloaded, even if the undo button was available a moment earlier.</p>

<p>This affects user expectations. Many web applications encourage the assumption that every change has already been saved somewhere. In a local editor without persistent autosave, that assumption is wrong. Results must be deliberately exported and kept in a recognisable location. A page continuing to display a change is not evidence that a durable copy exists. History, visible state, and saved output answer different questions and should not be treated as interchangeable proof of preservation.</p>

<p>For a long trial, produce intermediate outputs appropriate to the task: an image, JSON, or an experimentally saved copy that has been checked. The right format depends on the next step. Saving everything indiscriminately can create confusion; saving nothing relies too heavily on a tab surviving. Between those extremes lies a conscious choice. A small routine of checking the downloaded file before ending a session is often more valuable than assuming that a familiar browser interface necessarily provides familiar cloud-document recovery features.</p>

<h2 id="8-six-exports-answer-six-different-questions">8. Six exports answer six different questions</h2>

<p>SVG and PNG describe a page as an image. Markdown extracts text from all pages. JSON exposes data for inspection. Mermaid and draw.io attempt to reconstruct a diagram structure, inferring connections from endpoint proximity. These are not equivalent outputs and should not be presented as six interchangeable ways to preserve the complete project.</p>

<p>Choose an image when the task is showing a screen, then inspect its rendering. Start with Markdown when reusing text, then restore the relevant context. Use JSON when examining data. For a diagram editable elsewhere, review inferred relationships node by node. An arrow close to two shapes does not necessarily contain the same semantics as an explicitly modelled connection in another application. Convenience in generating an output cannot remove the need to validate the meaning of that transformation.</p>

<p>PNG output is constrained to 8,192 pixels per side and approximately thirty-two megapixels. Very large pages may therefore be reduced. Before using an image in a handoff, check text readability, framing, and completeness. Successful export begins the inspection of the result; it does not finish it. A correctly downloaded file can still be unsuitable for its intended purpose. The useful test is opening the actual output in the environment where the recipient will use it and verifying the details that matter to the decision.</p>

<h2 id="9-ten-experiments-for-understanding-the-architecture">9. Ten experiments for understanding the architecture</h2>

<h3 id="follow-the-pages-network-requests">Follow the page’s network requests</h3>

<p>Open browser developer tools and observe requests while the app loads, then select a test document. Distinguish requests for the editor’s tools from any transmission of project content. Do not automatically publish screenshots of developer tools: URLs, paths, and unrelated details may expose information that is unnecessary for the investigation.</p>

<p>Begin with the demo and a recognisably named synthetic file. Note what happens when changing pages and exporting. If an unexpected request appears, determine whether it came from app code, a browser extension, or surrounding context. Repeat with a clean environment where possible. The objective is not proving an absolute word such as “secure.” It is checking a concrete behaviour: the editor does not upload the document to a remote service for processing. That narrower question can receive an evidence-based answer. It also helps explain precisely what was observed if another user’s environment produces a different network trace.</p>

<h3 id="open-an-invalid-archive">Open an invalid archive</h3>

<p>A <code class="language-plaintext highlighter-rouge">.bmpr</code> extension does not automatically make a file a supported database. Testing invalid input checks how the app communicates failure and whether it preserves the currently open project. An input error should not quietly become a loss of existing working context. The recipient needs to tell a failed opening apart from an empty project.</p>

<p>Use synthetic data and observe the message; there is no reason to rename an important document for this test. After the error, return to the previous page and check that it remains available. This tests the interface and reader together: a failed attempt should be recognisable without replacing the existing project. Error quality is part of a local application’s usability. Without a remote operator to explain the result, the program should at least distinguish failure from success and leave enough context to continue safely. A clear error can turn an unfamiliar file into a reportable compatibility question rather than a frightening suspicion of lost work.</p>

<h3 id="compare-the-demos-pages">Compare the demo’s pages</h3>

<p>The synthetic demo is useful because it contains no company data and can be reproduced. Moving between its pages helps explain the relationship between the page list, selection, and canvas. Try zooming and observe whether you are changing the view or document geometry. Those operations are different, and learning the distinction makes later work easier.</p>

<p>This familiarity prevents confusion during a real-project trial. A missing element could be outside the view, on another page, or represented differently than expected. Fitting the page and checking its name are simple steps before concluding that content disappeared. The demo cannot prove compatibility with every archive, but it provides stable ground for learning gestures. It is the right place to make a mistaken click without turning the mistake into a question about a customer project. Once the interface is familiar, an unexpected real-file result becomes easier to separate from an unfamiliar command or an accidental view change.</p>

<h3 id="change-text-undo-and-redo">Change text, undo, and redo</h3>

<p>Select a demo label, change its content, and undo the change. Then redo it. Observe the text both on the canvas and in the property inspector. This checks whether the interface, model, and history describe the same state rather than each updating independently. A small recognisable change is easier to assess than a large collection of edits.</p>

<p>Later, try a sequence involving movement and resizing, but keep a question for each experiment. Which relationship are you checking? A useful manual test produces a specific observation. Clicking many controls until something looks odd can reveal a problem, but it often creates a long reconstruction task. Even exploratory work benefits from a little discipline when data lives only within the session. Record the shortest sequence that produces the discrepancy. That sequence is usually more valuable to investigation than a lengthy description of everything attempted before noticing the final symptom on the screen.</p>

<h3 id="export-one-element-as-svg-and-png">Export one element as SVG and PNG</h3>

<p>The two outputs let you compare vector representation with rasterisation. Open both outside the editor and inspect edges, text, images, and background. Confirm that the intended page was exported and that its filename does not create confusion with an older result. A successful download alone establishes very little about final image quality.</p>

<p>If a difference appears, identify where it begins: only in PNG, in SVG too, or already on the canvas. That helps locate the problem between shared rendering and rasterisation. Do not modify the document before understanding which level is involved. Text clipped only in the raster output calls for a different investigation from text already interpreted incorrectly in the model. Comparing multiple outputs from the same data exposes where a transformation introduced a difference. It is a simple diagnostic technique that often provides more information than repeatedly exporting the same page and hoping a new filename will improve the result.</p>

<h3 id="try-a-synthetic-raster-resource">Try a synthetic raster resource</h3>

<p>An example image can test a format without exposing real content. Compare a supported embedded resource with an external reference, remembering that the latter is not loaded by the editor. Define the expected difference first; otherwise, an intentional boundary may be mistaken for random behaviour. Expected results are part of designing a useful experiment.</p>

<p>Observe the resource in SVG and PNG exports as well as the canvas. Evaluate the complete workflow you actually intend to use. If the image is visible in the editor but absent from an output, that differs from an initial reading failure. Preserve that distinction in the report. A small project containing one control and a synthetic image can be more useful than an archive full of unrelated pages. Reducing the example does not minimise the importance of the issue. It removes distractions so the relevant cause can be investigated without accessing business content or reconstructing a much larger document.</p>

<h3 id="measure-an-operation-not-an-impression">Measure an operation, not an impression</h3>

<p>Choose an observable event when evaluating performance: opening, page switching, dragging, or exporting. A general feeling of slowness mixes activities with very different costs. Note approximate document size, pages involved, and image presence without including private details in a public report. Those observations turn an impression into something another person can investigate.</p>

<p>Repeat the same operation under similar conditions and treat first loading separately from subsequent actions. Initialising WebAssembly is not the same event as every page change. Avoid turning one measurement into a promise for all computers. The objective is identifying a concrete constraint rather than building an improvised benchmark league. “PNG export on this page takes longer than switching pages” is modest but informative. It can guide a fix or simply help choose the right output format. Separating input loading, rendering, interaction, and export also prevents an improvement in one area from concealing an unresolved delay in another part of the workflow.</p>

<h3 id="reload-only-after-exporting">Reload only after exporting</h3>

<p>This experiment makes the difference between memory and persistence explicit. With synthetic data, modify an element, export the result you need, and reload. The app does not provide persistent project autosave. If you expected work to return automatically, you have discovered an expectation worth correcting before an important session. The demonstration should be educational rather than costly.</p>

<p>Do not use a real document to prove that undownloaded changes can disappear. The demo is enough. Instead, confirm that the downloaded file exists and can be opened, because that is the durable result of your action. Tab memory is useful for working; it is not a hidden folder guaranteeing recovery. Naming the distinction supports a simple habit: before closing, verify what has actually been preserved outside the app. The check takes little time and prevents an avoidable surprise. It also helps recipients understand why the presence of undo history does not mean a project has already been saved somewhere permanent.</p>

<h3 id="read-json-without-mistaking-it-for-a-specification">Read JSON without mistaking it for a specification</h3>

<p>Data inspection can help explain an unknown control or a property the renderer does not handle. Seeing a field in JSON does not automatically reveal all its rules. It may depend on a version, control type, or context requiring further investigation. Raw visibility is a useful starting point, not the same thing as complete format knowledge.</p>

<p>Use the data to form observable hypotheses: which identifier is read, which coordinates exist, and which property distinguishes two cases? Then compare behaviour. Avoid publishing an entire private project’s JSON to ask about one icon. A reduced structure with synthetic values is often sufficient. Inspection is diagnostic, not an invitation to treat every observed field as official documentation. Good analysis separates what was observed, what was inferred, and what remains unverified. Maintaining those categories makes later corrections easier because a hypothesis can be revised without pretending that the original observation was false or that a partial understanding was ever a universal rule.</p>

<h3 id="compare-website-claims-with-code-and-behaviour">Compare website claims with code and behaviour</h3>

<p>A presentation page can age faster than software. When a feature matters, compare its description with the README, documented limits, and the version being used. The website should make that comparison easy by linking project references rather than asking users to trust its tone. Documentation is part of the interface between the project and its users.</p>

<p>A mismatch between copy and build behaviour deserves correction even if the code is functioning as designed. For Telario, the important boundaries remain explicit: a first working version, approximate rendering for various controls, and experimental <code class="language-plaintext highlighter-rouge">.bmpr</code> saving. An interesting architecture does not make those notes less necessary. The easier it becomes to run a successful demo, the more useful it is to explain what that success establishes and which checks it does not replace. Accurate language helps a user adopt the app for a suitable task without unintentionally turning a narrow demonstration into evidence for a much wider promise.</p>

<h2 id="10-what-changes-when-a-file-gets-large">10. What changes when a file gets large</h2>

<p>An in-memory architecture moves work onto the user’s device. Embedded images, control counts, and editing history can increase resource consumption. Two equally sized archives are not necessarily equivalent: one may hold a few heavy images, another many pages of geometry and text. Observe the operations relevant to your own workflow instead of relying on file size as a complete complexity measure.</p>

<p>The 100 MB limit prevents some excessive openings, but it is not a complete performance forecast. Choose a representative archive for an initial trial and preserve the original material. Check essential pages first, then required exports. You do not need to exercise every feature simply because the file opened. A proportionate trial gives better evidence than a long random session.</p>

<p>When delays appear, describe the point in the process: reading, model construction, page switching, drawing, or output generation. Users may not be able to isolate the exact implementation layer, but they can usually identify the gesture preceding the wait. That information lets development begin in the right place rather than searching vaguely “in the browser.” The browser is the room. Finding the problem also requires knowing which tool was being used inside it.</p>

<h2 id="11-a-readable-scope-is-a-feature">11. A readable scope is a feature</h2>

<p>A small app does not need to pretend to be a complete platform. Telario does not manage users, provide online collaboration, or synchronise projects. The server does not receive mockups or act as a shared document archive. These boundaries reduce some complexity and leave other responsibilities with the people organising work: preservation, revisions, machine access, and handoff validation.</p>

<p>Local processing offers a concrete benefit when it fits the problem. I can open a document without creating a conversion service or turning a small personal need into file-management infrastructure. The trade-off is accepting session limits and partial interpretation. This is not a universal formula. It is a coherent choice for a particular activity, and that coherence is more useful than a fashionable architectural label.</p>

<p>Try the <a href="/en/get-started/">setup guide</a>, compare features with <a href="/en/compatibility/">compatibility and limits</a>, and inspect the <a href="https://github.com/telario/telario">app source</a> to follow the path from bytes to canvas. For me, the interesting part is not simply a database inside a tab. It is that the tab can finally show the document and let me return to work while explaining what it is not doing. That combination of utility and clear boundaries is the real architectural objective.</p>

<h2 id="12-updating-the-app-without-confusing-tools-and-documents">12. Updating the app without confusing tools and documents</h2>

<p>A new build changes the tools used to read a project. It does not update previously downloaded files, repair older images, or recover edits left in another tab’s memory. Preserve required results before refreshing the page or rebuilding during a session. Separating software from documents helps only if everyday operations respect that separation too.</p>

<p>Compare two app versions using the same input archive and page. Changing software, file, and procedure simultaneously makes differences difficult to attribute. Record the build version or commit when checking a regression. This is unnecessary for every informal consultation, but important when a comparison guides a renderer or writer correction. A small amount of provenance makes an observation reproducible.</p>

<p>Check what should remain unchanged as well as what should improve. An icon update can improve display without altering stored identifiers. Interface CSS should not change document geometry. A clearly bounded expected effect helps select meaningful checks and detect side effects. Responsibilities become practical quality criteria rather than abstract design vocabulary. That is how a small codebase can support careful change without pretending that any test suite proves the absence of every possible regression.</p>

<h2 id="13-local-dependencies-should-not-become-invisible-dependencies">13. Local dependencies should not become invisible dependencies</h2>

<p>The app bundles libraries with distinct jobs: React for the interface, sql.js for SQLite, rough.js for sketch rendering, and Font Awesome Free for the icon catalog. Serving these locally does not remove their authors or licences. Attribution belongs in the distributed package and should follow dependency updates. The project’s own licensing decision is separate from those existing component licences.</p>

<p>Provenance and versioning also have technical value. If an icon changes name or a component changes behaviour, knowing the included release makes comparison less ambiguous. Reproducibility concerns external components as well as project code. An understandable build can explain where its tools came from and why a particular output was produced.</p>

<p>The icon catalog therefore comes from a specific official release and travels with the app. Drawing a control does not require requesting its path from a remote service. Avoiding that request improves independence after loading, while increasing the initial build size. This is a concrete trade-off between distributed assets and autonomy during use, best evaluated through measurements rather than an abstract preference for ever smaller files.</p>

<p>These choices may evolve. What should remain stable is how they are described: which components are included, what work they perform, which requests they make, and which data crosses the machine boundary. Answer those questions and “local” stops being a reassuring adjective. It becomes an observable property of the data’s actual route through the application.</p>]]></content><author><name>Antonio Trento</name></author><summary type="html"><![CDATA[From a .bmpr file to an SVG canvas: a tour of Telario’s local architecture, including SQLite, WebAssembly, memory, exports and practical limits.]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://telario.github.io/assets/images/blog/local-1600.webp" /><media:content medium="image" url="https://telario.github.io/assets/images/blog/local-1600.webp" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry xml:lang="it"><title type="html">Un database nella scheda. Il mockup resta sul tuo computer.</title><link href="https://telario.github.io/it/blog/un-database-nella-scheda/" rel="alternate" type="text/html" title="Un database nella scheda. Il mockup resta sul tuo computer." /><published>2026-10-22T09:00:00+02:00</published><updated>2026-10-22T09:00:00+02:00</updated><id>https://telario.github.io/it/blog/un-database-nella-scheda</id><content type="html" xml:base="https://telario.github.io/it/blog/un-database-nella-scheda/"><![CDATA[<p>Il fatto che un’app si apra nel browser non dice ancora dove lavori. Può essere l’interfaccia di un servizio remoto, un documento statico con qualche interazione o un programma che esegue quasi tutta la logica sulla macchina dell’utente. Per capire che cosa succede ai file bisogna seguire il percorso dei dati, non fermarsi alla forma della finestra.</p>

<p>In Telario il documento scelto viene letto ed elaborato nel browser. Il server consegna l’applicazione: HTML, JavaScript, CSS e il modulo WebAssembly necessario a SQLite. Il progetto non viene inviato dall’editor a un servizio di conversione. Questa scelta risponde a un’esigenza concreta: aprire un archivio di lavoro senza trasformarlo in un allegato destinato a un altro server.</p>

<p>Dire «locale», però, non basta. Restano memoria, dipendenze, compatibilità, download e persistenza. Una scheda può eseguire un database e comunque perdere le modifiche quando viene chiusa. Un server sulla stessa macchina può servire l’app senza conoscere il documento aperto. Le differenze contano, soprattutto quando si passa da una demo riuscita a un file reale con molte pagine e immagini.</p>

<h2 id="1-il-server-porta-gli-attrezzi-non-prende-il-progetto">1. Il server porta gli attrezzi, non prende il progetto</h2>

<p>Nel percorso Docker, Telario viene compilato e poi servito da Nginx. Il browser richiede i file dell’app e li esegue. Non occorre montare la cartella dei mockup nel container: la selezione del documento avviene dall’interfaccia del browser. Separare queste due fasi evita un equivoco comune, cioè pensare che ogni file aperto da una pagina web debba necessariamente transitare dal server che ha consegnato quella pagina.</p>

<p>Il primo avvio ha comunque bisogno di rete per scaricare immagini Docker e dipendenze. Dopo la compilazione, l’editor non richiede CDN o servizi esterni per lavorare sui documenti. Questa è una descrizione del percorso previsto dall’app, non una promessa generale su ogni processo presente nel sistema operativo. Un’estensione del browser, la cartella sincronizzata da cui scegli un file e il software della tua macchina hanno comportamenti propri.</p>

<p>La domanda utile è quindi precisa: quali richieste produce l’editor quando apro e modifico un documento? I test browser controllano anche richieste esterne inattese durante i percorsi previsti. Un controllo osservabile vale più della sola parola «privacy» stampata vicino al pulsante. L’architettura deve rendere la promessa verificabile nel codice e nel comportamento, non soltanto gradevole nel titolo della pagina.</p>

<h2 id="2-un-bmpr-contiene-più-di-unimmagine">2. Un .bmpr contiene più di un’immagine</h2>

<p>Telario tratta il <code class="language-plaintext highlighter-rouge">.bmpr</code> come un archivio SQLite. Il lettore cerca le tabelle necessarie, legge le informazioni di formato e recupera risorse e pagine. Dentro una pagina ci sono dati che descrivono controlli: tipo, coordinate, dimensioni, proprietà e altre informazioni. L’immagine che vedi è una rappresentazione di questi dati, non un PNG semplicemente nascosto sotto un’estensione diversa.</p>

<p>La distinzione spiega perché un’apertura riuscita richieda più lavoro di una conversione del nome file. Bisogna interpretare la struttura, riconoscere gli elementi e scegliere come disegnarli. Un pulsante ha un testo e una geometria; una freccia ha estremi e stile; un gruppo contiene altri controlli. Alcuni dettagli sono riconosciuti, altri vengono conservati senza essere completamente rappresentati. Conservazione e visualizzazione sono capacità differenti.</p>

<p>Il lettore mantiene i byte originali e i JSON grezzi. Questa scelta permette di non ricostruire l’intero archivio soltanto a partire da ciò che l’interfaccia comprende. È importante per i campi sconosciuti: l’assenza di un comando nel pannello proprietà non deve diventare automaticamente la cancellazione di dati esistenti. La prima regola di un interprete parziale è non confondere «non lo uso» con «non serve a nessuno».</p>

<h2 id="3-perché-sqlite-può-vivere-nel-browser">3. Perché SQLite può vivere nel browser</h2>

<p>L’app usa sql.js per inizializzare SQLite attraverso un modulo WebAssembly distribuito insieme alla build. Il codice importa il percorso del file <code class="language-plaintext highlighter-rouge">.wasm</code>, lo passa all’inizializzazione e riutilizza il risultato. Se l’inizializzazione fallisce, la promessa memorizzata viene azzerata per consentire un tentativo successivo, invece di trasformare un errore temporaneo in uno stato irrecuperabile per l’intera sessione.</p>

<p>Quando l’utente seleziona un file, i byte diventano l’input di un database in memoria. Le query leggono tabelle e risorse senza richiedere un database remoto. Non serve installare un server SQLite separato, creare utenti o configurare una connessione aziendale. La complessità rimane nel programma e nelle risorse della macchina che esegue il browser.</p>

<p>Questa comodità non equivale a costo zero. Il contenuto deve stare in memoria, così come il modello usato dall’editor e la cronologia delle modifiche. Un documento grande può richiedere più risorse di quanto suggerisca la dimensione del download. Il limite di apertura è 100 MB, ma quella soglia è un controllo d’ingresso, non una garanzia di fluidità universale. La domanda sulle prestazioni va sempre collegata al file, all’operazione e al computer usato.</p>

<h2 id="4-il-modello-separa-il-documento-dai-gesti">4. Il modello separa il documento dai gesti</h2>

<p>Una volta letto l’archivio, il modello espone pagine e controlli con funzioni dedicate a testo, geometria e proprietà. L’interfaccia non deve conoscere ogni dettaglio delle query SQLite per spostare un elemento. Il renderer non deve decidere come viene scaricato il file finale. Questa divisione rende più semplice controllare il percorso delle informazioni e correggere un difetto nel punto adatto.</p>

<p>Nel repository la struttura è visibile: <code class="language-plaintext highlighter-rouge">src/io</code> si occupa dell’archivio; <code class="language-plaintext highlighter-rouge">src/model</code> dei dati e della geometria; <code class="language-plaintext highlighter-rouge">src/render</code> del disegno; <code class="language-plaintext highlighter-rouge">src/editor</code> della cronologia; <code class="language-plaintext highlighter-rouge">src/export</code> delle esportazioni; <code class="language-plaintext highlighter-rouge">src/ui</code> dei comandi e delle interazioni. Non sono sei prodotti separati. Sono responsabilità distinte dentro una piccola applicazione che deve rimanere comprensibile quando viene modificata.</p>

<p>Una modifica grafica non dovrebbe cambiare il writer. Una correzione agli alias delle icone non dovrebbe riscrivere gli identificativi nel documento. Un’aggiunta al pannello proprietà deve invece essere verificata anche rispetto ai dati che produce. Separare i livelli non elimina le regressioni, ma aiuta a scegliere test pertinenti e a capire quali effetti possono essere indiretti. L’ordine delle cartelle è utile quando corrisponde a un ordine delle responsabilità.</p>

<h2 id="5-svg-come-linguaggio-del-canvas">5. SVG come linguaggio del canvas</h2>

<p>Il renderer disegna i controlli usando SVG. Questo permette di rappresentare geometrie, testi e tracciati come elementi vettoriali, trasformabili rispetto alle coordinate della pagina. Lo zoom cambia la vista; non richiede di sostituire ogni elemento con una nuova immagine raster. L’esportazione SVG può riutilizzare lo stesso sistema di rappresentazione, mantenendo una relazione leggibile tra ciò che l’app mostra e ciò che produce.</p>

<p>L’applicazione non usa le risorse grafiche proprietarie di Balsamiq per imitare esattamente ogni controllo. I font sono quelli disponibili nel sistema e varie forme hanno una resa indipendente. rough.js aggiunge uno stile sketch opzionale. Quel tratto disegnato a mano è una modalità visiva, non una certificazione di corrispondenza con il programma originale.</p>

<p>La scelta del vettoriale aiuta anche a incorporare le icone come tracciati, senza dipendere da un font remoto. Ma non risolve automaticamente tutti i problemi: testo ricco, tabelle, gruppi e curve possono richiedere interpretazioni approssimate. Il vantaggio è poter controllare il disegno elemento per elemento. Il limite è dover implementare davvero quelle regole, una alla volta, senza affidarsi al fatto che un file contenga già abbastanza informazioni per renderle ovvie.</p>

<h2 id="6-le-immagini-non-sono-tutte-la-stessa-cosa">6. Le immagini non sono tutte la stessa cosa</h2>

<p>Le risorse incorporate supportate comprendono PNG, JPEG, GIF e WebP. Il lettore riconosce firme raster previste e costruisce dati utilizzabili nel browser. Le risorse esterne, i link e gli SVG incorporati non vengono caricati o eseguiti. È una scelta esplicita: aprire un archivio non deve trasformarsi automaticamente nell’esecuzione di contenuti attivi o nel recupero di indirizzi contenuti nel documento.</p>

<p>Questo comportamento può produrre una differenza rispetto a ciò che l’autore vede nel proprio ambiente. Un’immagine collegata esternamente potrebbe essere disponibile a lui e non comparire nell’interpretazione locale. La risposta corretta è identificare il tipo di risorsa e il limite, non promettere che ogni immagine assente sia recuperabile dall’app senza altre condizioni.</p>

<p>Per una segnalazione utile basta spesso sapere se la risorsa era incorporata, quale formato aveva e quale controllo la riferiva. Non serve pubblicare la fotografia del cliente per dimostrare un problema di decodifica. Un’immagine sintetica nello stesso formato può isolare il comportamento. Anche qui la conservazione dell’archivio e la resa visiva devono essere valutate separatamente: una risorsa non rappresentata non è necessariamente una risorsa cancellata.</p>

<h2 id="7-la-cronologia-è-memoria-di-lavoro">7. La cronologia è memoria di lavoro</h2>

<p>Annulla e ripeti permettono di esplorare modifiche senza trattare ogni gesto come definitivo. Telario mantiene una cronologia fino a cento operazioni. È una capacità utile durante la sessione, ma non un archivio permanente delle revisioni. Chiudere o ricaricare la scheda può perdere il lavoro non scaricato, anche se un attimo prima era possibile premere «annulla».</p>

<p>Questa differenza riguarda l’aspettativa dell’utente. Molte applicazioni web abituano a pensare che ogni modifica sia già stata salvata da qualche parte. In un editor locale senza autosalvataggio persistente, quella supposizione è sbagliata. Il risultato va esportato deliberatamente e conservato in una posizione riconoscibile. Il fatto che il browser continui a mostrare la pagina non prova l’esistenza di una copia durevole.</p>

<p>La cronologia serve a lavorare meglio, non a sostituire una politica di salvataggio. Per una prova lunga conviene produrre risultati intermedi proporzionati allo scopo: un’immagine, un JSON o una copia sperimentale verificata. Il formato giusto dipende dal passo successivo. Salvare tutto indiscriminatamente può creare confusione; non salvare nulla affida troppo alla sopravvivenza di una scheda. Fra i due estremi c’è una scelta consapevole e molto meno drammatica.</p>

<h2 id="8-sei-esportazioni-sei-domande-diverse">8. Sei esportazioni, sei domande diverse</h2>

<p>SVG e PNG descrivono la pagina come immagine. Markdown recupera i testi di tutte le pagine. JSON offre una rappresentazione dei dati utile all’ispezione. Mermaid e draw.io cercano una struttura di diagramma, deducendo collegamenti dalla vicinanza degli estremi. Queste uscite non sono equivalenti e non andrebbero presentate come sei modi intercambiabili di conservare l’intero progetto.</p>

<p>Se devi mostrare una schermata, scegli un’immagine e controllane la resa. Se devi riutilizzare testi, parti da Markdown e ricostruisci il contesto. Se devi analizzare i dati, il JSON può aiutare. Se vuoi un diagramma modificabile altrove, verifica nodo per nodo le relazioni dedotte. Una freccia vicina a due forme non contiene necessariamente la stessa semantica di un collegamento dichiarato nel modello dell’altro strumento.</p>

<p>Il PNG viene contenuto entro 8192 pixel per lato e circa trentadue megapixel. Questo limita la dimensione della rasterizzazione, ma può comportare una riduzione per pagine molto grandi. Prima di usare l’immagine per una consegna controlla leggibilità, ritaglio e testi. L’esportazione riuscita è l’inizio della verifica del risultato, non la sua conclusione. Un file scaricato correttamente può ancora essere inadatto allo scopo per cui lo stai preparando.</p>

<h2 id="9-dieci-prove-per-capire-larchitettura-senza-leggerla-tutta">9. Dieci prove per capire l’architettura senza leggerla tutta</h2>

<h3 id="segui-le-richieste-della-pagina">Segui le richieste della pagina</h3>

<p>Apri gli strumenti di sviluppo del browser e osserva la rete durante il caricamento dell’app. Poi seleziona un documento di prova. La distinzione da cercare è tra richieste per gli attrezzi dell’editor e invio del contenuto del progetto. Non pubblicare automaticamente schermate degli strumenti: URL, percorsi e altri dettagli possono rivelare informazioni che non servono alla verifica.</p>

<p>Usa prima la demo, poi un file sintetico con un nome riconoscibile. Annota cosa succede quando cambi pagina o esporti. Se una richiesta inattesa compare, identifica chi l’ha prodotta: codice dell’app, estensione del browser o altro contesto. Il test dovrebbe essere ripetibile con un ambiente pulito. Lo scopo non è dimostrare una parola assoluta come «sicuro», ma verificare un comportamento concreto: l’editor non carica il documento su un servizio remoto per elaborarlo. È una domanda più piccola e proprio per questo può ricevere una risposta fondata.</p>

<h3 id="apri-un-archivio-non-valido">Apri un archivio non valido</h3>

<p>Un file con estensione <code class="language-plaintext highlighter-rouge">.bmpr</code> non è automaticamente un database supportato. La prova con un file non valido serve a controllare come l’app comunica il problema e se mantiene il progetto già aperto. Un errore di ingresso non dovrebbe trasformarsi silenziosamente in una perdita del contesto di lavoro esistente.</p>

<p>Prepara dati sintetici e osserva il messaggio. Non serve rinominare un documento importante per fare la prova. Dopo l’errore torna alla pagina precedente e verifica che sia ancora disponibile. Questo test riguarda una proprietà dell’interfaccia e del lettore insieme: il nuovo tentativo di apertura deve fallire in modo riconoscibile, senza essere scambiato per un progetto vuoto. La qualità degli errori fa parte dell’esperienza locale. Quando non esiste un operatore remoto a cui chiedere cosa sia successo, il programma deve almeno distinguere il problema dal successo.</p>

<h3 id="confronta-due-pagine-della-demo">Confronta due pagine della demo</h3>

<p>La demo sintetica è utile perché non contiene dati aziendali ed è riproducibile. Navigare fra due pagine permette di capire il rapporto tra elenco, selezione e canvas. Prova uno zoom e osserva se stai modificando la vista o i dati di geometria. Sono operazioni diverse, e l’interfaccia dovrebbe consentire di distinguerle.</p>

<p>Questa familiarità evita errori nelle prime prove su un progetto reale. Se non trovi un elemento, potrebbe essere fuori dalla vista, appartenere a un’altra pagina o non essere rappresentato come ti aspetti. Usare «adatta» e verificare il nome della pagina sono controlli semplici prima di concludere che un contenuto sia sparito. Una demo non dimostra la compatibilità con tutti gli archivi, ma offre un terreno stabile per imparare i gesti. È il posto adatto per sbagliare un clic senza trasformarlo in una domanda sul progetto del cliente.</p>

<h3 id="cambia-un-testo-e-annulla">Cambia un testo e annulla</h3>

<p>Scegli un’etichetta della demo, cambia il contenuto e usa annulla. Poi ripeti l’operazione con ripeti. Osserva il testo sul canvas e nel pannello proprietà. La prova verifica che interfaccia, modello e cronologia descrivano lo stesso stato, invece di aggiornarsi ciascuno per conto proprio.</p>

<p>Non è necessario modificare dieci campi contemporaneamente per capire la funzione. Una variazione riconoscibile è più facile da osservare e da riportare in caso di errore. In seguito puoi provare una sequenza più lunga con spostamento e ridimensionamento. Mantieni però un obiettivo per ogni prova: quale relazione stai controllando? Un test manuale utile produce un’osservazione specifica. Cliccare molte cose fino a quando qualcosa sembra strano può scoprire un problema, ma lascia spesso un lungo lavoro di ricostruzione. Anche l’esplorazione beneficia di una piccola disciplina, soprattutto quando i dati vivono soltanto nella sessione.</p>

<h3 id="esporta-lo-stesso-elemento-in-svg-e-png">Esporta lo stesso elemento in SVG e PNG</h3>

<p>Le due uscite servono a confrontare vettoriale e rasterizzazione. Aprile fuori dall’editor e guarda bordi, testo, immagini e sfondo. Verifica che la pagina prevista sia quella esportata e che il nome non crei ambiguità con un risultato precedente. Il download riuscito non garantisce da solo la qualità dell’immagine finale.</p>

<p>Se trovi una differenza, descrivi dove compare: soltanto nel PNG, anche nell’SVG o già sul canvas. Questa distinzione aiuta a localizzare il problema fra rendering condiviso e rasterizzazione. Non correggere il documento prima di aver capito il livello coinvolto. Un testo tagliato soltanto nell’immagine raster richiede un’analisi diversa da un testo già interpretato male nel modello. La prova insegna una regola generale dell’architettura: confrontare più uscite dello stesso dato rende visibile il punto in cui una trasformazione introduce la differenza.</p>

<h3 id="prova-una-risorsa-raster-sintetica">Prova una risorsa raster sintetica</h3>

<p>Un’immagine di esempio permette di verificare un formato senza esporre contenuti reali. Confronta una risorsa incorporata supportata con un riferimento esterno, sapendo che quest’ultimo non viene caricato dall’editor. La differenza attesa va definita prima della prova; altrimenti un limite intenzionale può essere segnalato come comportamento casuale.</p>

<p>Osserva anche come l’immagine si comporta nell’esportazione SVG e PNG. Il risultato dovrebbe essere valutato nel flusso completo che userai davvero. Se la risorsa compare nel canvas ma non nell’uscita, il problema è diverso da una mancata lettura iniziale. Quando prepari una segnalazione, conserva questa distinzione. Uno schema minimo con un solo controllo e un’immagine sintetica può risultare più utile di un archivio pieno di pagine. Ridurre il caso non serve a sminuire il problema: serve a renderne visibile la causa.</p>

<h3 id="misura-unoperazione-non-unimpressione">Misura un’operazione, non un’impressione</h3>

<p>Se vuoi capire le prestazioni, scegli un evento osservabile: apertura, cambio pagina, trascinamento o esportazione. Una sensazione generale di lentezza mescola attività con costi molto diversi. Annota dimensione indicativa del documento, numero di pagine coinvolte e presenza di immagini, senza includere dettagli privati nel resoconto pubblico.</p>

<p>Ripeti la stessa operazione in condizioni simili e considera il primo caricamento separatamente dai successivi. Un’inizializzazione WebAssembly non è la stessa cosa di ogni cambio pagina. Evita di convertire una singola misura in una promessa valida per tutti i computer. L’obiettivo della prova è individuare un vincolo concreto, non costruire una classifica improvvisata. Un risultato come «il PNG di questa pagina richiede più tempo del cambio pagina» è modesto ma informativo. Può guidare una correzione o semplicemente aiutarti a scegliere il formato più adatto alla consegna.</p>

<h3 id="ricarica-soltanto-dopo-aver-esportato">Ricarica soltanto dopo aver esportato</h3>

<p>Questa prova rende evidente la differenza fra memoria e persistenza. Su dati sintetici, modifica un elemento, esporta il risultato necessario e poi ricarica. L’app non offre autosalvataggio persistente del progetto. Se ti aspettavi di ritrovare il lavoro automaticamente, hai appena identificato un’aspettativa da correggere prima di una sessione importante.</p>

<p>Non usare un documento reale per dimostrare a te stesso che puoi perdere modifiche. La demo è sufficiente. Controlla invece che il file scaricato sia presente e leggibile, perché quello è il risultato durevole della tua azione. La memoria della scheda è comoda per lavorare, ma non è una cartella nascosta che garantisce recupero. Dare un nome preciso a questa differenza permette di costruire un’abitudine semplice: prima di chiudere, verificare cosa è stato effettivamente conservato fuori dall’app. Il gesto richiede poco tempo e previene un tipo di sorpresa del tutto evitabile.</p>

<h3 id="leggi-il-json-senza-confonderlo-con-una-specifica">Leggi il JSON senza confonderlo con una specifica</h3>

<p>L’ispezione dei dati può aiutare a capire un controllo sconosciuto o una proprietà che il renderer non gestisce. Vedere un campo nel JSON, però, non significa conoscere automaticamente tutte le sue regole. Può appartenere a una versione, a un tipo di controllo o a un contesto che richiede ulteriori verifiche.</p>

<p>Usa i dati per formulare ipotesi osservabili: quale identificativo viene letto, quali coordinate sono presenti, quale proprietà distingue due casi? Poi confronta con il comportamento. Evita di pubblicare l’intero JSON di un progetto privato per fare una domanda su una sola icona. Una struttura ridotta con valori sintetici è spesso sufficiente. L’ispezione è uno strumento diagnostico, non un invito a considerare ogni campo come documentazione ufficiale del formato. Una buona analisi mantiene separati ciò che è stato osservato, ciò che è stato dedotto e ciò che deve ancora essere verificato.</p>

<h3 id="confronta-il-codice-con-il-testo-del-sito">Confronta il codice con il testo del sito</h3>

<p>Una pagina di presentazione può invecchiare più velocemente del software. Quando una funzione ti serve davvero, confronta la descrizione con README, limiti documentati e comportamento della versione usata. Il sito deve facilitare questa verifica, collegando le fonti del progetto invece di chiedere fiducia soltanto al tono della pagina.</p>

<p>Se il testo promette una cosa e la build ne fa un’altra, la discrepanza è un problema da correggere anche quando il codice funziona come previsto. La documentazione è parte dell’interfaccia fra progetto e utilizzatore. Nel caso di Telario il confine più importante rimane chiaro: prima versione funzionante, rendering parziale per vari controlli e salvataggio <code class="language-plaintext highlighter-rouge">.bmpr</code> sperimentale. Un’architettura interessante non rende meno necessari questi avvisi. Anzi, più è facile avviare una demo, più è utile spiegare cosa quel successo dimostra e quali verifiche non sostituisce.</p>

<h2 id="10-cosa-cambia-quando-il-file-diventa-grande">10. Cosa cambia quando il file diventa grande</h2>

<p>Un’architettura in memoria sposta il lavoro verso il dispositivo dell’utente. Immagini incorporate, numero di controlli e quantità di stati mantenuti nella cronologia possono aumentare il consumo di risorse. Due archivi della stessa dimensione non sono necessariamente equivalenti: uno può contenere poche immagini pesanti, l’altro molte pagine con geometrie e testi. Il comportamento va osservato sulle operazioni che contano per il tuo flusso.</p>

<p>Il limite di 100 MB evita alcune aperture eccessive, ma non è una valutazione preventiva completa della complessità. Per una prova iniziale scegli un archivio rappresentativo e conserva il materiale originale. Controlla prima le pagine essenziali, poi le esportazioni richieste. Non è necessario esercitare ogni funzione soltanto perché il file si è aperto. Una prova proporzionata produce informazioni migliori di una sessione casuale molto lunga.</p>

<p>Se emergono rallentamenti, descrivi il punto del percorso: lettura, costruzione del modello, cambio pagina, disegno o produzione dell’uscita. Non sempre l’utente può isolare il livello preciso, ma può almeno dire quale gesto ha preceduto l’attesa. Questa informazione consente a chi sviluppa di cominciare dal posto giusto, invece di cercare genericamente «nel browser». Il browser è la stanza; per trovare il problema serve sapere quale attrezzo era in uso.</p>

<h2 id="11-un-perimetro-leggibile-è-una-funzione">11. Un perimetro leggibile è una funzione</h2>

<p>Una piccola app non deve fingere di essere un sistema completo. Telario non gestisce utenti, non offre collaborazione online e non sincronizza progetti. Il server non riceve i mockup e non costituisce un archivio condiviso dei documenti. Questi confini riducono alcune complessità e ne lasciano altre a chi organizza il lavoro: conservazione, revisioni, accesso alla macchina e verifica delle consegne.</p>

<p>Il vantaggio dell’elaborazione locale è concreto quando corrisponde al problema. Posso aprire un documento senza predisporre un servizio di conversione e senza trasformare una piccola esigenza personale in un’infrastruttura di gestione file. Il costo è accettare i limiti della sessione e dell’interprete. Non è una formula universale; è una scelta coerente con un’attività precisa.</p>

<h2 id="12-aggiornare-lapp-senza-confondere-programma-e-documenti">12. Aggiornare l’app senza confondere programma e documenti</h2>

<p>Una build nuova modifica gli attrezzi con cui leggi il progetto. Non aggiorna magicamente i file che hai già scaricato, non corregge le immagini precedenti e non porta con sé le modifiche rimaste nella memoria di un’altra scheda. Prima di aggiornare la pagina o ricompilare durante una sessione, conserva quindi i risultati che ti servono. La separazione fra software e documento è utile finché viene rispettata anche nelle operazioni quotidiane.</p>

<p>Per confrontare due versioni dell’app usa lo stesso archivio di ingresso e la stessa pagina. Se cambi contemporaneamente software, file e procedura, una differenza diventa difficile da attribuire. Registra la versione o il commit della build quando il confronto serve a verificare una regressione. Non occorre farlo per ogni consultazione informale, ma è importante quando il risultato guida una correzione del renderer o del writer.</p>

<p>Una buona verifica comprende anche ciò che non deve cambiare. Un aggiornamento alle icone può migliorare la visualizzazione senza alterare gli identificativi conservati nel progetto. Una modifica al CSS dell’interfaccia non dovrebbe cambiare la geometria del documento. Se l’effetto atteso è ben delimitato, è più facile scegliere una prova significativa e accorgersi di un effetto collaterale. I confini delle responsabilità diventano così criteri concreti per il controllo della qualità.</p>

<h2 id="13-dipendenze-locali-non-significa-dipendenze-invisibili">13. Dipendenze locali non significa dipendenze invisibili</h2>

<p>L’app incorpora librerie con compiti distinti: React per l’interfaccia, sql.js per SQLite, rough.js per lo stile sketch e Font Awesome Free per il catalogo di icone. Il fatto che questi componenti vengano serviti localmente non elimina i loro autori o le loro licenze. Le attribuzioni sono parte del pacchetto distribuito e devono seguire gli aggiornamenti delle dipendenze.</p>

<p>Questo dettaglio ha anche una conseguenza tecnica: fissare una provenienza e una versione aiuta a riprodurre il risultato. Se un’icona cambia nome o un componente modifica un comportamento, sapere quale release era inclusa rende il confronto meno ambiguo. La riproducibilità non riguarda soltanto il codice scritto nel progetto; riguarda gli elementi esterni su cui quel codice si appoggia. Una build comprensibile racconta anche da dove arrivano i suoi attrezzi.</p>

<p>Per lo stesso motivo il catalogo delle icone viene ricavato da una release precisa della fonte ufficiale e distribuito insieme all’app. Non è necessario chiedere un tracciato a un servizio remoto ogni volta che appare un controllo sul canvas. L’assenza di quella richiesta migliora l’autonomia dell’editor dopo il caricamento, ma comporta una dimensione iniziale maggiore della build. È uno scambio concreto fra risorse distribuite e indipendenza durante l’uso, da valutare con misure e non con una preferenza astratta per file sempre più piccoli.</p>

<p>Queste scelte restano modificabili nel tempo. Ciò che deve rimanere stabile è il modo di descriverle: quali componenti sono inclusi, quale lavoro svolgono, quali richieste fanno e quali dati attraversano il confine della macchina. Se sappiamo rispondere a queste domande, «locale» smette di essere un aggettivo rassicurante e diventa una proprietà osservabile del percorso dei dati.</p>

<p>Per provarla, parti dalla <a href="/it/inizia/">guida di avvio</a> e confronta le funzioni con la <a href="/it/compatibilita/">pagina di compatibilità</a>. Il <a href="https://github.com/telario/telario">codice dell’app</a> permette di seguire il percorso dai byte al canvas. La parte più interessante di questa architettura, per me, non è il database dentro una scheda. È il fatto che quella scheda possa finalmente mostrarmi il documento e lasciarmi tornare al lavoro, con le informazioni necessarie per capire anche ciò che non sta facendo.</p>]]></content><author><name>Antonio Trento</name></author><summary type="html"><![CDATA[Dal file .bmpr al canvas SVG: un viaggio nell’architettura locale di Telario, tra SQLite, WebAssembly, memoria, esportazioni e limiti pratici.]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://telario.github.io/assets/images/blog/local-1600.webp" /><media:content medium="image" url="https://telario.github.io/assets/images/blog/local-1600.webp" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry xml:lang="it"><title type="html">Il PNG arriva dopo. Intanto ho scritto un editor.</title><link href="https://telario.github.io/it/blog/il-png-arriva-dopo/" rel="alternate" type="text/html" title="Il PNG arriva dopo. Intanto ho scritto un editor." /><published>2026-10-21T09:00:00+02:00</published><updated>2026-10-21T09:00:00+02:00</updated><id>https://telario.github.io/it/blog/il-png-arriva-dopo</id><content type="html" xml:base="https://telario.github.io/it/blog/il-png-arriva-dopo/"><![CDATA[<p>Il messaggio, in genere, è molto rassicurante: «Ti ho mandato il mockup». L’allegato esiste, il nome sembra quello corretto, la scadenza è confermata. Tutto suggerisce che il lavoro possa iniziare. Poi fai doppio clic e scopri che il passaggio di consegne contiene un piccolo buco: chi ha preparato il progetto possiede lo strumento per aprirlo; tu possiedi soprattutto l’urgenza di capire che cosa rappresenta.</p>

<p>Nel mio caso lo strumento è Balsamiq. Il mio capo lo usa per disegnare schermate e flussi. Io devo leggere quei disegni e trasformarli in lavoro. Non ho la licenza disponibile, e qualche volta manca anche l’esportazione in immagine. Il documento è arrivato, ma l’informazione è ancora dall’altra parte della porta. La porta, naturalmente, non risponde ai messaggi.</p>

<p>Telario nasce qui. Non da una teoria generale sul futuro dei wireframe, ma dal desiderio di smettere di chiedere lo stesso PNG. È un progetto personale, costruito per aprire archivi <code class="language-plaintext highlighter-rouge">.bmpr</code>, mostrare le pagine, fare modifiche essenziali e produrre esportazioni utili. La motivazione è personale; le funzioni, invece, devono essere verificabili. Questa distinzione tiene il racconto divertente senza trasformarlo in una promessa troppo larga.</p>

<h2 id="1-un-allegato-non-è-ancora-una-consegna">1. Un allegato non è ancora una consegna</h2>

<p>Inviare un file significa trasferire dei byte. Consegnare un lavoro significa rendere possibile il passo successivo. Sono operazioni vicine, ma non identiche. Un archivio di progetto può essere corretto, aggiornato e completo per chi lo ha creato, e comunque inutilizzabile per chi deve riceverlo. Basta una differenza di strumenti, di versione o di accessi. La completezza va misurata dalla parte di chi comincia il lavoro successivo.</p>

<p>Un mockup serve a comunicare una struttura. Se la persona incaricata di svilupparla deve prima inseguire un’esportazione, quella comunicazione è rimasta incompleta. Il costo non si vede nella dimensione dell’allegato: compare nei messaggi, nel cambio di attività, nell’incertezza e nella difficoltà di distinguere un ritardo tecnico da un requisito ancora da chiarire. La cartella contiene tutto, tranne il momento in cui possiamo effettivamente partire.</p>

<p>Per questo la domanda utile non è soltanto «hai ricevuto il file?». È «riesci ad aprirlo, sai quale revisione usare e puoi verificare la pagina di cui stiamo parlando?». Tre domande piccole. Se mancano, il progetto diventa una caccia al tesoro con un calendario condiviso come unica mappa.</p>

<h2 id="2-il-costo-nascosto-di-te-lo-giro-dopo">2. Il costo nascosto di «te lo giro dopo»</h2>

<p>«Dopo» è una parola economica per chi la pronuncia. Per chi aspetta può significare tenere aperto un contesto mentale: quale schermata, quale dettaglio, quale controllo andava verificato? Quando l’immagine finalmente arriva, una parte del lavoro consiste nel ricostruire la domanda. Il tempo di attesa non è l’unico costo; c’è anche il costo del ritorno.</p>

<p>Non serve drammatizzare ogni esportazione dimenticata. Succede. Il punto è osservare se il problema ritorna e se dipende sempre dalla disponibilità di una singola persona. Un inciampo occasionale è normale. Un flusso che si blocca regolarmente nello stesso punto merita una piccola correzione di processo, oppure uno strumento che riduca quella dipendenza. Telario appartiene a questa seconda categoria, senza impedire la prima.</p>

<p>La soluzione organizzativa più semplice rimane eccellente: insieme al progetto, inviare immagini aggiornate e una nota sui cambiamenti. Ma gli strumenti personali nascono anche per le giornate in cui il processo ideale prende ferie. In quelle giornate vorrei poter leggere la schermata senza aprire una pratica diplomatica. Se il software mi restituisce venti minuti e un po’ di autonomia, ha già una ragione concreta di esistere.</p>

<h2 id="3-accesso-al-contenuto-e-disponibilità-della-licenza">3. Accesso al contenuto e disponibilità della licenza</h2>

<p>Un documento può essere legittimamente destinato a una persona che non dispone dello stesso software dell’autore. È il caso normale di molte collaborazioni: chi disegna, chi sviluppa e chi approva non hanno necessariamente strumenti identici. La consegna deve tenere conto di questa asimmetria. Non è una gara a chi ha installato più applicazioni, anche se qualche riunione sembra volerlo dimostrare.</p>

<p>Telario lavora sul documento che scegli di aprire. Non fornisce una licenza Balsamiq, non attiva Balsamiq e non rappresenta una versione ufficiale del prodotto. Offre un’interpretazione indipendente di dati di progetto con un proprio renderer e limiti dichiarati. Sono piani diversi: accesso a un contenuto, utilizzo di un’applicazione e condizioni di distribuzione dei componenti richiedono ciascuno la propria attenzione.</p>

<p>Nel racconto personale posso dire «non avevo la licenza, avevo del lavoro da fare». Nel testo tecnico devo aggiungere cosa succede davvero: apertura locale, disegno dei controlli supportati, modifiche essenziali ed esportazioni. Non posso trasformare una frase simpatica nella garanzia che ogni file o funzione del programma originale sia riprodotto perfettamente. Una buona battuta deve aprire la pagina, non chiudere la discussione sulle compatibilità.</p>

<h2 id="4-prima-leggere-poi-eventualmente-modificare">4. Prima leggere, poi eventualmente modificare</h2>

<p>Il primo risultato utile non è cambiare il documento. È comprenderlo. Vedere l’elenco delle pagine, leggere le etichette e seguire la disposizione degli elementi può già sbloccare gran parte del lavoro. La lettura ha un rischio diverso dalla scrittura: posso ottenere informazioni senza introdurre una nuova versione dell’archivio nel flusso del gruppo.</p>

<p>Questa separazione aiuta a scegliere una prova iniziale proporzionata. Apro la demo sintetica per conoscere l’interfaccia, poi un documento reale di cui conosco almeno una pagina. Confronto testo, posizione e relazioni. Se il diagramma è comprensibile, posso usarlo come supporto per le domande. Se un controllo appare approssimato, lo tratto come informazione da verificare, non come autorizzazione a indovinare la specifica.</p>

<p>Solo dopo penso alle modifiche. Una correzione di testo per un confronto può essere esportata in immagine senza diventare immediatamente un nuovo archivio di riferimento. Il salvataggio <code class="language-plaintext highlighter-rouge">.bmpr</code> è un passaggio ulteriore e rimane sperimentale. Fare le cose in questo ordine evita che il successo della prima apertura venga scambiato per una certificazione di tutto ciò che potrebbe succedere dopo.</p>

<h2 id="5-la-prima-consegna-utile-è-una-vista-condivisa">5. La prima consegna utile è una vista condivisa</h2>

<p>Quando una discussione si blocca sul documento, spesso serve una vista stabile: una schermata che tutti possano aprire e indicare. Il PNG ha un pregio molto semplice: non chiede a chi lo riceve di conoscere il modello interno del progetto. L’SVG aggiunge la comodità di una grafica vettoriale, ma va comunque aperto e controllato nel contesto in cui sarà usato.</p>

<p>Un’immagine non contiene tutte le intenzioni dell’autore. Non spiega automaticamente cosa succede al clic, quale stato viene mostrato o quale elemento è provvisorio. Per questo la vista deve essere accompagnata da una frase di contesto: pagina, revisione, scopo. «Schermata accesso, revisione di martedì, da discutere solo il messaggio di errore» elimina più ambiguità di un nome file scritto interamente in maiuscolo.</p>

<p>Telario rende possibile produrre quella vista quando l’esportazione manca, entro i limiti del suo renderer. Il risultato non va presentato come screenshot dell’editor originale. È un’esportazione da Telario. Se una resa grafica influenza una decisione, la sua provenienza deve essere chiara. Il gruppo può così usare l’immagine per avanzare, senza attribuirle una fedeltà che nessuno ha verificato.</p>

<h2 id="6-il-nome-del-file-è-parte-del-lavoro">6. Il nome del file è parte del lavoro</h2>

<p><code class="language-plaintext highlighter-rouge">finale</code>, <code class="language-plaintext highlighter-rouge">finale2</code> e <code class="language-plaintext highlighter-rouge">finale_vero</code> descrivono soprattutto uno stato emotivo. Per lavorare meglio conviene indicare almeno progetto, pagina o ambito e data della revisione. Non serve inventare una tassonomia aziendale per rinominare tre immagini. Serve che un’altra persona possa capire quale aprire senza leggere la cronologia completa della chat.</p>

<p>La provenienza conta quanto il nome. Se esporto una pagina dopo una modifica locale, il file dovrebbe distinguersi dall’immagine arrivata dall’autore. Se preparo una proposta, la chiamo proposta. Se fotografo lo stato ricevuto, lo dico. Le parole evitano che un’annotazione di lavoro venga promossa a requisito ufficiale per semplice anzianità nella cartella Download.</p>

<p>Un piccolo registro può stare in un messaggio: «ricevuto progetto A; esportata pagina B con Telario; testo C ancora da confermare». È un modo economico di conservare il percorso delle decisioni. Il vantaggio dello strumento non è produrre più file, ma rendere meno costoso capire che cosa significano. Nessuna funzione di esportazione può sostituire interamente questa responsabilità umana.</p>

<h2 id="7-sedici-situazioni-in-cui-il-passaggio-di-consegne-cambia">7. Sedici situazioni in cui il passaggio di consegne cambia</h2>

<p>I casi seguenti non sono funzionalità aggiuntive dell’app. Sono modi pratici di usare un documento e le sue esportazioni. Servono a scegliere l’azione più piccola che restituisce chiarezza, invece di trasformare ogni allegato in un progetto di migrazione. L’obiettivo è molto meno spettacolare: capire il lavoro e proseguire.</p>

<h3 id="il-progetto-arriva-cinque-minuti-prima-della-riunione">Il progetto arriva cinque minuti prima della riunione</h3>

<p>Aprire subito tutte le pagine e tentare una ricostruzione completa è una tentazione comprensibile. In cinque minuti, però, la priorità è individuare la schermata di cui si parlerà e controllare che il suo contenuto sia leggibile. Se il nome della pagina non basta, chiedi all’autore quale sia il punto di ingresso. La domanda è più utile di una navigazione frettolosa con lo schermo condiviso.</p>

<p>Prepara una vista e una lista breve di dubbi. Non introdurre modifiche locali durante la riunione senza segnalarle: chi guarda potrebbe pensare di vedere l’originale. Se un’icona o un gruppo è approssimato, chiamalo esplicitamente. A fine incontro registra le decisioni, non soltanto lo screenshot. Il file ricevuto rimane il riferimento documentale finché il gruppo non concorda una revisione diversa. In questo scenario Telario serve soprattutto a rendere possibile la conversazione, non a fingere che cinque minuti siano una fase di analisi completa.</p>

<h3 id="il-png-cè-ma-non-corrisponde-al-progetto">Il PNG c’è, ma non corrisponde al progetto</h3>

<p>Un’immagine esportata settimane prima può essere più ingannevole di un’immagine assente: sembra risolvere il problema dell’accesso mentre introduce una divergenza di revisione. Controlla un dettaglio riconoscibile, per esempio un titolo cambiato o una pagina aggiunta. Se archivio e PNG raccontano cose diverse, non decidere automaticamente quale sia più recente in base al solo nome.</p>

<p>Chiedi quale revisione fa fede e conserva entrambi i materiali con provenienza chiara. Telario può aiutare a produrre una nuova vista del progetto disponibile, ma non conosce la storia delle decisioni fuori dal file. La data di download non equivale alla data di approvazione. Quando mandi il confronto, descrivi la differenza in una frase concreta: «nel progetto il pulsante è sotto il campo, nel PNG è a destra». È una domanda verificabile; «sono diversi» è soltanto l’inizio di un’altra attesa.</p>

<h3 id="la-pagina-contiene-testo-che-devi-riutilizzare">La pagina contiene testo che devi riutilizzare</h3>

<p>Trascrivere a mano un’intera schermata è un ottimo modo per introdurre errori piccoli e difficili da notare. Se il testo è leggibile dall’editor, l’esportazione Markdown può aiutare a recuperare i contenuti di tutte le pagine. Il risultato deve essere rivisto: ordine visivo, associazione con i controlli e significato dei messaggi non vengono garantiti dalla semplice presenza delle parole.</p>

<p>Usa l’esportazione come materiale di lavoro, poi collega i testi al contesto. Un’etichetta ripetuta in due pagine può avere funzioni diverse. Un messaggio di esempio può non essere un testo definitivo. Segna queste distinzioni prima di inserirle nel codice o in una traduzione. La cosa da preservare non è soltanto l’ortografia: è il ruolo di ogni frase. Telario riduce il lavoro meccanico, mentre la verifica editoriale rimane necessaria. Anche un testo estratto correttamente può essere usato nel posto sbagliato.</p>

<h3 id="devi-fare-una-domanda-su-un-singolo-elemento">Devi fare una domanda su un singolo elemento</h3>

<p>Non sempre serve spedire l’intero progetto a un’altra persona. Se la domanda riguarda un campo, puoi preparare una vista della pagina e indicare il controllo interessato nel messaggio. Il contesto circostante dovrebbe bastare a capire dove si trova, senza esporre parti del documento che non servono alla discussione. Il principio è semplice: condividere abbastanza per risolvere la domanda.</p>

<p>Evita indicazioni come «quello lì» o «il secondo pulsante», soprattutto quando il destinatario potrebbe vedere una revisione diversa. Usa nome della pagina, testo visibile e relazione con gli elementi vicini. Se hai corretto qualcosa nell’immagine, distingui lo stato ricevuto dalla proposta. Una domanda ben preparata può ricevere una risposta breve. Una domanda vaga distribuisce il lavoro di ricostruzione su più persone e poi sembra misteriosamente lenta. Lo strumento ti aiuta a mostrare; la precisione della richiesta resta una scelta di chi scrive.</p>

<h3 id="il-documento-è-privato-e-il-problema-è-pubblico">Il documento è privato e il problema è pubblico</h3>

<p>Una issue su GitHub è un luogo pubblico, anche quando nasce da un errore osservato sul tuo computer. Prima di allegare file o screenshot, considera se contengono nomi di clienti, indirizzi, sistemi interni o dettagli che non sei autorizzato a diffondere. Un problema di rendering non richiede automaticamente la pubblicazione del progetto che lo ha rivelato.</p>

<p>La segnalazione iniziale può descrivere versione dell’app, tipo di controllo, risultato atteso e risultato osservato. Se possibile, ricrea il comportamento con dati sintetici. Questo rende la prova più piccola, più facile da capire e meno dipendente dal contesto aziendale. L’assenza di un allegato privato non impedisce di cominciare l’analisi. Se il caso richiede davvero dati reali, la loro condivisione va valutata separatamente. Il fatto che l’elaborazione dell’editor sia locale non rende sicuro pubblicare manualmente tutto ciò che compare sullo schermo.</p>

<h3 id="la-correzione-sembra-minuscola">La correzione sembra minuscola</h3>

<p>Cambiare una parola può avere un effetto tecnico limitato e un effetto organizzativo grande: chi ha autorizzato quel testo? La modifica serve a illustrare una proposta o rappresenta un requisito approvato? Prima di scaricare una nuova versione, chiarisci lo scopo. Il controllo sul documento è anche controllo sul significato delle revisioni.</p>

<p>Per una discussione puoi modificare il testo nel canvas ed esportare una vista, indicando che è una proposta locale. Conserva il materiale ricevuto e non chiamare «definitivo» il risultato soltanto perché la correzione era facile. Se devi restituire un <code class="language-plaintext highlighter-rouge">.bmpr</code>, entrano in gioco le verifiche del salvataggio sperimentale e della riapertura nel programma di destinazione. La dimensione della modifica non elimina questi passaggi. Un piccolo intervento può essere semplice da fare e comunque meritare una consegna chiara. La tecnologia riduce i clic; non dovrebbe ridurre la tracciabilità delle decisioni.</p>

<h3 id="la-schermata-è-leggibile-ma-graficamente-diversa">La schermata è leggibile ma graficamente diversa</h3>

<p>Una differenza di font o di spaziatura non ha sempre lo stesso peso. Se stai cercando il nome di un campo, può essere irrilevante. Se stai discutendo un allineamento preciso o la capienza di una tabella, può diventare decisiva. La valutazione dipende dalla domanda, non dal desiderio generale che ogni pixel coincida.</p>

<p>Confronta prima gli elementi che influenzano la decisione. Se la resa è approssimata, usa il risultato come supporto informativo e chiedi un riferimento originale per la parte sensibile. Non correggere automaticamente il mockup per compensare una differenza introdotta dal renderer: rischieresti di trasformare un limite di visualizzazione in una modifica del documento. Telario usa font di sistema e una grafica indipendente; la distinzione deve rimanere visibile nel modo in cui interpreti il risultato. Poter leggere è già utile, ma non coincide con poter certificare la composizione grafica originale.</p>

<h3 id="un-gruppo-contiene-dettagli-che-non-riesci-a-cambiare">Un gruppo contiene dettagli che non riesci a cambiare</h3>

<p>I gruppi possono essere spostati e ridimensionati come blocchi, ma i singoli figli non sono modificabili dall’interfaccia. Questo limite non significa che il documento abbia perso quei dettagli. Significa che il livello di editing disponibile non coincide con tutta la struttura che il file può contenere.</p>

<p>Se la tua esigenza è leggere il gruppo, verifica che il contenuto essenziale sia visibile. Se devi cambiare un figlio specifico, non improvvisare una ricostruzione distruttiva solo per ottenere un’immagine apparentemente uguale. Puoi descrivere la correzione richiesta o preparare una proposta separata, lasciando il gruppo originale come riferimento. Per lavorare con sicurezza serve distinguere tra ciò che il modello conserva, ciò che il renderer mostra e ciò che l’interfaccia permette di modificare. Sono tre capacità correlate, ma non intercambiabili. Il limite dichiarato evita di promettere un controllo che l’app non offre ancora.</p>

<h3 id="il-collega-vuole-solo-approvare-la-disposizione">Il collega vuole solo approvare la disposizione</h3>

<p>Una revisione di layout non richiede sempre l’archivio editabile. Un’immagine accompagnata da una domanda precisa può essere sufficiente e più comoda. Indica quali aspetti sono in valutazione: ordine dei campi, posizione delle azioni, sequenza del percorso. Esplicitare il perimetro protegge la discussione dalle deviazioni accidentali su dettagli non ancora definiti.</p>

<p>Se usi un’esportazione Telario, controlla che le approssimazioni non alterino proprio l’aspetto da approvare. Un’icona sostituita può essere accettabile in una revisione di struttura e problematica in una revisione dell’iconografia. La stessa immagine può quindi essere adeguata a una domanda e inadeguata a un’altra. Alla fine registra il risultato: approvato, da correggere o da confrontare con il riferimento originale. «Visto» non è sempre sinonimo di «approvato», anche quando il messaggio contiene una spunta verde molto convincente.</p>

<h3 id="il-file-è-nella-cartella-dropbox">Il file è nella cartella Dropbox</h3>

<p>Se il documento si trova in una cartella sincronizzata, Telario lo apre come file disponibile sul computer. Non gestisce la sincronizzazione, non coordina revisioni concorrenti e non aggiorna automaticamente l’archivio condiviso. Il nome del servizio nella barra del percorso non aggiunge funzioni collaborative all’editor.</p>

<p>Prima di cominciare verifica che il file sia disponibile localmente e che la revisione sia quella attesa. Dopo un’esportazione, scegli consapevolmente dove salvare il risultato e come nominarlo. Non assumere che un download nella cartella sbagliata venga raccolto dal flusso del gruppo. Se due persone lavorano sullo stesso progetto, serve comunque una regola per decidere quale copia fa fede. Telario affronta il problema dell’apertura e dell’editing locale; la gestione delle versioni condivise resta una responsabilità distinta. È un confine pratico, e ricordarlo evita molte sorprese perfettamente sincronizzate.</p>

<h3 id="hai-venti-pagine-e-non-sai-da-dove-iniziare">Hai venti pagine e non sai da dove iniziare</h3>

<p>La quantità di pagine può rendere l’apertura riuscita soltanto il primo minuto dell’analisi. Cerca un percorso di lavoro: quale schermata introduce il flusso, quali rappresentano gli stati alternativi, quali sono dettagli secondari? Se l’organizzazione non è evidente, una domanda all’autore può risparmiare più tempo di una navigazione completa.</p>

<p>Annota i nomi delle pagine che usi per la tua attività e il motivo della scelta. Non trattare l’ordine nell’elenco come prova definitiva della sequenza funzionale. Nei documenti complessi possono esserci revisioni, rami o alternative. L’app elenca pagine senza offrire una gestione completa dei rami: leggere l’elenco non equivale a ricostruire tutta la storia del progetto. Una piccola mappa di lavoro, anche scritta in un messaggio, aiuta a separare il percorso corrente dal materiale di contorno. Prima scegli la domanda, poi attraversa l’archivio con un criterio.</p>

<h3 id="stai-lavorando-su-un-portatile-meno-potente">Stai lavorando su un portatile meno potente</h3>

<p>Il browser esegue davvero il lavoro: questa è una qualità dell’architettura locale e anche un consumo di risorse sulla tua macchina. Archivi grandi, molte immagini e una cronologia di modifiche possono incidere sulla memoria e sulla reattività. Il limite di apertura non è una promessa che ogni file vicino alla soglia sarà altrettanto fluido su ogni computer.</p>

<p>Comincia da una pagina rappresentativa e osserva il comportamento. Evita di avviare contemporaneamente esportazioni pesanti e modifiche non necessarie solo per misurare quanto riesci a mettere in difficoltà la scheda. Se la sessione diventa lenta, conserva prima i risultati importanti. Quando segnali un problema, descrivi dimensione indicativa del file e tipo di operazione senza pubblicare contenuti riservati. Le prestazioni sono parte dell’usabilità, ma richiedono un contesto concreto. «È lento» è un sintomo; sapere quando e su quale struttura rallenta è già un passo verso la diagnosi.</p>

<h3 id="vuoi-confrontare-due-proposte">Vuoi confrontare due proposte</h3>

<p>Un confronto utile mantiene stabili gli elementi che non stanno cambiando. Se produci due esportazioni con zoom, ritaglio o contenuti diversi, chiedi al destinatario di ricostruire anche il contesto. Prepara invece due viste confrontabili e dichiara la differenza che vuoi discutere: un testo, una sequenza, una disposizione.</p>

<p>Se una proposta nasce da una modifica locale, indicane la provenienza. Non sovrascrivere il riferimento ricevuto e non affidarti alla memoria per ricordare quale file fosse la variante. L’esportazione può aiutare a portare la discussione fuori dall’editor, ma la comparabilità è una decisione di chi prepara il materiale. Dopo il confronto conserva l’esito insieme alla scelta. Una coppia di immagini senza conclusione è un archivio di possibilità, non una decisione di progetto. Il piccolo investimento nel contesto evita che la stessa domanda torni la settimana successiva con nomi file leggermente più creativi.</p>

<h3 id="il-lavoro-deve-passare-a-un-terzo-sviluppatore">Il lavoro deve passare a un terzo sviluppatore</h3>

<p>Chi entra dopo non possiede i messaggi che avevi in mente mentre guardavi il canvas. Prepara una consegna che includa il progetto di riferimento, una vista leggibile e le decisioni essenziali. Se Telario è servito a esportare o correggere una proposta, spiega questo passaggio senza obbligare il collega a ricostruirlo dai dettagli grafici.</p>

<p>Indica quali parti sono state verificate e quali restano da confrontare con Balsamiq. Un’avvertenza concreta è più utile di un generico «controlla tutto»: per esempio, il gruppo nella seconda pagina o i collegamenti del diagramma esportato. Non distribuire una copia sperimentale come unico originale disponibile. La continuità del lavoro dipende dalla possibilità di tornare a un riferimento affidabile. Uno strumento nato per ridurre un blocco non dovrebbe creare una nuova dipendenza dalla persona che sa come è stata prodotta l’ultima immagine. La documentazione minima serve proprio a evitarlo.</p>

<h3 id="il-capo-finalmente-manda-anche-il-png">Il capo finalmente manda anche il PNG</h3>

<p>È una buona notizia, non una sconfitta del progetto. Se l’immagine è aggiornata e basta alla tua attività, usala. L’obiettivo non è dimostrare che ogni passaggio debba attraversare Telario. È rendere il lavoro meno fragile quando lo strumento disponibile e il documento ricevuto non si incontrano.</p>

<p>L’editor rimane utile per navigare nell’archivio, recuperare testi o preparare una piccola proposta. Ma un processo di consegna migliorato può ridurre la necessità di aprirlo, ed è un risultato positivo. I buoni strumenti personali non devono difendere il problema che li ha fatti nascere. Possono diventare una possibilità in più, pronta quando serve. Se il flusso normale funziona, tanto meglio: il software può aspettare senza offendersi. A differenza della scadenza, che continua a presentarsi con una puntualità davvero ammirevole e nessuna disponibilità a esportare immagini.</p>

<h3 id="la-richiesta-diventa-facciamolo-usare-a-tutti">La richiesta diventa «facciamolo usare a tutti»</h3>

<p>Una soluzione utile sulla mia macchina non è automaticamente pronta per ogni gruppo. Prima di allargare l’uso servono domande diverse: chi farà assistenza, quali file sono rappresentativi, quali limiti sono accettabili, quali condizioni di distribuzione si applicano? La visibilità pubblica del codice non risolve da sola queste scelte.</p>

<p>Parti da una prova piccola, con documenti non riservati e criteri di successo espliciti. Verifica apertura, leggibilità ed esportazioni prima di includere il salvataggio nel formato originale. Raccogli gli errori come casi riproducibili, non come giudizi generici. La promessa di Telario rimane proporzionata: ridurre un blocco concreto, con una prima versione funzionante e limiti documentati. Portarlo a più persone può essere un’evoluzione sensata, ma richiede lavoro ulteriore. Il fatto che una battuta sul PNG faccia sorridere metà ufficio è incoraggiante; non sostituisce un piano di adozione.</p>

<h2 id="8-la-consegna-minima-che-vorrei-ricevere">8. La consegna minima che vorrei ricevere</h2>

<p>Il pacchetto ideale è piccolo: il progetto originale, un’esportazione aggiornata delle pagine importanti, una nota sulla revisione e le domande ancora aperte. Non chiedo un manuale per ogni wireframe. Chiedo che il destinatario possa distinguere cosa guardare, perché e con quale grado di definitività. Un file può contenere molte schermate; una consegna dovrebbe contenere almeno un’intenzione comprensibile.</p>

<p>Se questa abitudine diventa normale, Telario può restare un attrezzo laterale. Se l’abitudine manca, l’app mi restituisce una possibilità di azione. In entrambi i casi il punto è lo stesso: ridurre il tempo speso a organizzare l’accesso all’informazione e aumentare quello dedicato al lavoro che quell’informazione rende possibile.</p>

<p>La storia del progetto non richiede un antagonista. Balsamiq fa il suo mestiere, il mio capo disegna e io provo a sviluppare. Il problema nasce nello spazio tra strumenti diversi e consegne imperfette. Telario è un ponte piccolo, costruito a misura di quel punto. Il traffico previsto è modesto: qualche pagina, qualche testo, un’immagine da aprire finalmente senza chiedere un favore.</p>

<h2 id="9-dove-provare-e-con-quali-aspettative">9. Dove provare, e con quali aspettative</h2>

<p>Puoi partire dalla <a href="/it/inizia/">guida di avvio</a>, aprire la demo sintetica e verificare le operazioni essenziali. Prima di usare un archivio reale, leggi la pagina di <a href="/it/compatibilita/">compatibilità</a>. Per il comportamento preciso e i risultati delle prove, il riferimento è il <a href="https://github.com/telario/telario">repository di Telario</a>. Il salvataggio <code class="language-plaintext highlighter-rouge">.bmpr</code> resta sperimentale; conserva gli originali e verifica le copie nel flusso di destinazione.</p>

<p>Il mio risultato preferito non è una statistica: è quel momento in cui il file si apre e posso tornare a ragionare sulla schermata. Non devo aspettare il collega giusto, il messaggio giusto e l’esportazione giusta nello stesso intervallo di tempo. Posso cominciare con quello che ho, sapendo che cosa sto guardando e quali aspetti devo ancora controllare.</p>

<p>Un ultimo dettaglio pratico: annota anche lo strumento con cui hai prodotto l’esportazione. Non è una formalità. Se domani qualcuno nota una differenza, sapere che l’immagine proviene da Telario permette di controllare il renderer prima di mettere in discussione il progetto originale. Una riga di contesto può risparmiare un’intera conversazione sbagliata. È esattamente il tipo di piccola economia per cui questo progetto ha senso.</p>

<p>Il PNG, poi, può anche arrivare dopo. Nel frattempo il lavoro è già ripartito.</p>]]></content><author><name>Antonio Trento</name></author><summary type="html"><![CDATA[La storia di Telario e una guida pratica al passaggio di consegne: il file giusto deve arrivare insieme a un modo concreto per leggerlo.]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://telario.github.io/assets/images/blog/handoff-1600.webp" /><media:content medium="image" url="https://telario.github.io/assets/images/blog/handoff-1600.webp" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry xml:lang="en"><title type="html">The PNG will follow. Meanwhile, I wrote an editor.</title><link href="https://telario.github.io/en/blog/the-png-will-follow/" rel="alternate" type="text/html" title="The PNG will follow. Meanwhile, I wrote an editor." /><published>2026-10-21T09:00:00+02:00</published><updated>2026-10-21T09:00:00+02:00</updated><id>https://telario.github.io/en/blog/the-png-will-follow</id><content type="html" xml:base="https://telario.github.io/en/blog/the-png-will-follow/"><![CDATA[<p>The message usually sounds reassuring: “I sent you the mockup.” The attachment exists, the filename looks plausible, and the deadline has been confirmed. Everything suggests that work can begin. Then you try to open it and discover a small gap in the handoff: the person who created the project has the software to read it. You mostly have an urgent need to understand what the project contains.</p>

<p>In my case, that software is Balsamiq. My boss uses it to sketch screens and flows. My job is to understand those sketches and turn them into implementation. I don’t have the licence available, and sometimes the image export is missing too. The document has arrived, but the information is still on the other side of a door. The door, naturally, does not respond to messages.</p>

<p>Telario started there. No grand theory about the future of wireframes: just a desire to stop asking for the same PNG. It is a personal project for opening <code class="language-plaintext highlighter-rouge">.bmpr</code> archives, displaying pages, making essential edits, and producing useful exports. The motivation is personal; the behaviour needs to be verifiable. That distinction keeps the story entertaining without turning it into a promise larger than the software.</p>

<h2 id="1-an-attachment-is-not-yet-a-handoff">1. An attachment is not yet a handoff</h2>

<p>Sending a file transfers bytes. Handing work over makes the next step possible. Those actions are related, but they are not identical. A project archive can be correct, current, and complete for its author while remaining unusable to its recipient. A difference in tools, versions, or access can be enough. Completeness needs to be assessed from the side of the person beginning the next task.</p>

<p>A mockup communicates structure. If the developer must chase an export before understanding that structure, the communication is incomplete. The cost does not show up in the attachment size. It appears in messages, interrupted activities, uncertainty, and the difficulty of distinguishing a technical delay from an unresolved requirement. The folder contains everything except the moment when work can actually start.</p>

<p>The useful question is therefore bigger than “did you receive the file?”. Ask whether the recipient can open it, knows which revision matters, and can identify the page under discussion. Three small questions, each removing a different uncertainty. Without them, the project becomes a treasure hunt whose only map is the shared calendar. Receiving an attachment is easy to verify. Receiving enough context to work requires a little more care from both sides of the exchange.</p>

<h2 id="2-the-hidden-cost-of-ill-send-it-later">2. The hidden cost of “I’ll send it later”</h2>

<p>“Later” is an inexpensive word for the person saying it. For the person waiting, it may mean keeping a question alive in working memory: which screen, which detail, which control needed checking? When the image eventually arrives, some of the effort goes into reconstructing the question. Waiting time is only one cost. There is also the cost of returning to the task.</p>

<p>There is no need to dramatise every forgotten export. People forget things. The useful observation is whether the same problem keeps returning and whether progress always depends on one person being available. An occasional stumble is normal. A workflow that regularly stops at the same point deserves a small process improvement or a tool that reduces the dependency. Telario addresses the second possibility while leaving plenty of room for the first.</p>

<p>The simplest organisational solution remains excellent: send current images and a revision note with the editable project. Personal tools also exist for the days when the ideal process takes time off. On those days, I would like to read a screen without opening a diplomatic negotiation. If a small application gives me twenty minutes and a little independence, it already has a practical reason to exist. No mission statement involving industry disruption is required.</p>

<h2 id="3-reading-a-document-and-having-a-product-licence">3. Reading a document and having a product licence</h2>

<p>A document can legitimately be intended for someone who does not use the author’s software. That is common in collaborative work: designers, developers, and reviewers do not necessarily have identical tools. A useful handoff accounts for this asymmetry. It is not a competition to install the largest application collection, although some meetings seem determined to become one.</p>

<p>Telario works on the document you choose to open. It does not provide a Balsamiq licence, activate Balsamiq, or represent an official edition of that product. It independently interprets project data through its own renderer, with declared limitations. Access to content, use of an application, and distribution conditions for dependencies are different subjects. Each deserves its own accurate description rather than being bundled into a convenient slogan.</p>

<p>In a personal story, I can say, “I didn’t have the licence; I did have work to do.” In technical documentation, I must explain what actually happens: local opening, supported-control rendering, essential editing, and exports. The joke cannot become a guarantee that every file and every feature of the original editor will be reproduced perfectly. Good humour gets someone onto the page. Clear compatibility information helps them decide whether the software is appropriate for their work once they arrive.</p>

<h2 id="4-read-first-decide-about-editing-afterwards">4. Read first; decide about editing afterwards</h2>

<p>The first useful outcome is understanding the document, not changing it. Seeing the page list, reading labels, and following element placement may unblock most of the task. Reading has a different risk profile from writing: it can provide information without introducing another archive revision into the team’s workflow.</p>

<p>That separation helps define a proportionate first test. Open the synthetic demo to learn the interface, then a real document containing at least one familiar page. Compare text, placement, and relationships. If the diagram is understandable, use it to prepare questions. If a control looks approximate, treat it as something to verify rather than permission to invent the missing specification. A visible result is evidence about a particular page, not about every future operation.</p>

<p>Only then consider edits. A local text correction prepared for discussion can be exported as an image without immediately becoming a new authoritative project archive. Saving <code class="language-plaintext highlighter-rouge">.bmpr</code> is a further step, and it remains experimental. Following that order prevents the excitement of a successful first opening from becoming an accidental certification of everything that could happen afterwards. It also gives the recipient a useful way to stop: sometimes reading the page is all the work requires.</p>

<h2 id="5-a-shared-view-is-often-the-first-useful-deliverable">5. A shared view is often the first useful deliverable</h2>

<p>When discussion gets stuck on a document, a stable view can help: a screen everyone can open and point at. A PNG has a very simple advantage. Its recipient does not need to understand the project’s internal model. SVG adds vector graphics, but it still needs checking in the application or environment where it will be used.</p>

<p>An image does not contain all the author’s intentions. It does not automatically explain click behaviour, the represented state, or which element is provisional. Accompany it with a short context statement: page, revision, and purpose. “Login screen, Tuesday’s revision, reviewing the error message only” removes more ambiguity than a filename written entirely in capital letters. A clean image with no context can still be a remarkably efficient generator of incorrect assumptions.</p>

<p>Telario makes that view possible when an export is missing, within the limits of its renderer. Do not present the result as a screenshot from the original editor. It is an export from Telario. If rendering differences could affect a decision, identify the source clearly. The team can then use the image to move forward without silently assigning it a level of fidelity nobody has tested. Provenance becomes useful context rather than a footnote added after confusion has already spread.</p>

<h2 id="6-filenames-are-part-of-the-work">6. Filenames are part of the work</h2>

<p><code class="language-plaintext highlighter-rouge">final</code>, <code class="language-plaintext highlighter-rouge">final2</code>, and <code class="language-plaintext highlighter-rouge">really_final</code> mostly describe an emotional journey. A more useful name identifies the project, page or scope, and revision date. There is no need to invent a corporate taxonomy to rename three images. Someone else simply needs to know which one to open without reading the entire chat history.</p>

<p>Provenance matters as much as naming. If I export a page after a local edit, the result should be distinguishable from the image supplied by its author. If it is a proposal, I call it a proposal. If it records the received state, I say so. A working annotation should not become an official requirement merely because it is the oldest surviving file in somebody’s Downloads folder.</p>

<p>A small record can fit in one message: “received project A; exported page B using Telario; wording C still needs confirmation.” That cheaply preserves the route by which a decision was reached. The purpose of the tool is not to generate more files. It is to reduce the effort of understanding what the files mean. No export feature can take over that human responsibility completely. A carefully named image and two clear sentences can provide a better handoff than a large archive dropped into a channel with a cheerful thumbs-up.</p>

<h2 id="7-sixteen-situations-that-change-the-handoff">7. Sixteen situations that change the handoff</h2>

<p>The following situations are workflow examples, not additional application features. They help choose the smallest action that restores clarity rather than turning every attachment into a migration project. The ambition is deliberately modest: understand the work and continue. The right outcome may be an image, a question, a comparison, or simply a decision to ask for the original reference.</p>

<h3 id="the-project-arrives-five-minutes-before-the-meeting">The project arrives five minutes before the meeting</h3>

<p>Opening every page and reconstructing the whole system is an understandable temptation. With five minutes available, the priority is finding the screen under discussion and checking whether its essential content is readable. If page names are ambiguous, ask the author for the starting point. That question is more useful than hurried navigation while everyone watches a shared screen.</p>

<p>Prepare one view and a short list of uncertainties. Avoid making unannounced local edits during the meeting: viewers may assume they are seeing the original. Explicitly identify approximate icons or groups. Record decisions afterwards, rather than keeping only a screenshot. The received file remains the documentary reference until the team agrees on another revision. Here, Telario makes the conversation possible; it does not make five minutes equivalent to a full analysis phase. That is already valuable. A meeting can start from an honest partial understanding instead of a confident interpretation assembled under pressure and immediately mistaken for a specification.</p>

<h3 id="there-is-a-png-but-it-disagrees-with-the-project">There is a PNG, but it disagrees with the project</h3>

<p>An image exported weeks earlier can be more misleading than no image at all. It appears to solve access while quietly introducing a revision mismatch. Check a recognisable detail, such as a changed heading or an added page. If the archive and image disagree, do not choose the authoritative version solely from their filenames.</p>

<p>Ask which revision should govern the work and preserve both sources with clear provenance. Telario can produce a new view of the available project, but it does not know the history of decisions made outside the file. Download time is not approval time. Describe the difference concretely: “the project places the button below the field; the PNG places it to the right.” That is a verifiable question. “These are different” is only the beginning of another waiting period. The useful deliverable is a resolved revision question, not merely two pictures that document the existence of confusion.</p>

<h3 id="the-page-contains-text-you-need-to-reuse">The page contains text you need to reuse</h3>

<p>Transcribing an entire screen is an excellent way to introduce small errors that are difficult to notice. If the editor can read the text, Markdown export can help retrieve content from all pages. Review the result: visual order, association with controls, and message meaning are not guaranteed merely because the words appear in the output.</p>

<p>Use the export as working material and reconnect the text to its context. The same label on two pages may serve different purposes. An example message may not be final copy. Mark those distinctions before putting text into implementation or translation files. What matters is more than spelling: it is the role of each phrase. Telario reduces mechanical effort while editorial checking remains necessary. Correctly extracted text can still be used in the wrong place. For a useful handoff, note any wording that remains provisional and identify who can approve it. That prevents a convenient extraction from silently becoming an unintended content specification.</p>

<h3 id="you-need-an-answer-about-one-element">You need an answer about one element</h3>

<p>You do not always need to send the entire project to another person. If the question concerns a field, prepare a page view and identify that control in the message. Include enough surrounding context to locate it without exposing unrelated material. The principle is straightforward: share enough information to answer the question.</p>

<p>Avoid references such as “that one” or “the second button,” especially if the recipient might have another revision open. Use the page name, visible wording, and relationship to neighbouring elements. Distinguish the received state from a local proposal if you changed anything. A well-prepared question can receive a short answer. A vague question distributes reconstruction work across several people and then appears mysteriously slow. The software helps you show something; precision in the request remains a choice made by the writer. If the difference matters to implementation, record the answer somewhere more durable than the memory of the person who happened to read the conversation first.</p>

<h3 id="the-document-is-private-and-the-issue-tracker-is-public">The document is private and the issue tracker is public</h3>

<p>A GitHub issue is public even when the error was observed on your own computer. Before attaching a file or screenshot, consider customer names, addresses, internal systems, and details you are not authorised to disclose. A rendering problem does not automatically require publication of the project that revealed it.</p>

<p>An initial report can describe the app version, control type, expected result, and observed result. Recreate the behaviour with synthetic data where possible. That makes the example smaller, easier to understand, and less dependent on company context. A private attachment is not required to begin analysis. If investigation genuinely needs real data, sharing it is a separate decision. Local processing in the editor does not make it safe to manually publish everything visible on the screen. The strongest report often removes business context altogether while retaining the geometry, control properties, or sequence of actions needed to reproduce the fault. Clear reproduction and careful disclosure can support each other.</p>

<h3 id="the-correction-looks-tiny">The correction looks tiny</h3>

<p>Changing one word can have a small technical effect and a large organisational effect. Who approved the wording? Does the edit illustrate a proposal or represent an accepted requirement? Clarify the purpose before downloading another revision. Document control also means controlling what revisions are understood to mean.</p>

<p>For discussion, change the text locally and export a view labelled as a proposal. Keep the received material and avoid calling the result “final” merely because the edit was easy. Returning a <code class="language-plaintext highlighter-rouge">.bmpr</code> introduces the additional checks associated with experimental saving and reopening in the destination application. A small change does not remove those steps. An intervention can be simple to perform and still deserve a clear handoff. Technology reduces clicks; it should not reduce decision traceability. The practical question is whether another person can tell what changed, why it changed, and whether they are expected to adopt the result. If those answers are missing, the smallest correction can start a surprisingly large conversation.</p>

<h3 id="the-screen-is-readable-but-visually-different">The screen is readable but visually different</h3>

<p>A font or spacing difference does not always have the same importance. It may be irrelevant when you need a field name. It may be decisive when discussing precise alignment or table capacity. Assess the result against the question being asked, rather than against a general wish that every pixel should match.</p>

<p>Compare the elements that influence the decision first. If rendering is approximate, use the result as informational support and request an original reference for sensitive details. Do not automatically edit the mockup to compensate for a renderer difference: that would turn a display limitation into a document change. Telario uses system fonts and independent graphics. Keep that distinction present when interpreting its output. Reading is useful, but it is not the same as certifying the original composition. A meaningful review can say, “the content is clear, but this alignment needs checking in the original.” That is more useful than either rejecting the entire page or pretending its appearance is exact.</p>

<h3 id="a-group-contains-details-you-cannot-edit">A group contains details you cannot edit</h3>

<p>Groups can be moved and resized as blocks, but individual children cannot be edited through the interface. This does not mean the underlying document has lost those details. It means the available editing level does not cover every structure the file can contain.</p>

<p>If you only need to read the group, check whether its essential content is visible. If a specific child needs changing, do not improvise a destructive reconstruction merely to obtain a superficially similar image. Describe the required correction or prepare a separate proposal while preserving the original group as a reference. Safe work distinguishes what the model preserves, what the renderer displays, and what the interface lets you change. Those are related capabilities, not interchangeable ones. A declared limitation prevents the app from promising control it does not yet provide. It also helps define a useful issue report: the missing capability is editing a particular nested element, not necessarily opening or preserving the entire group structure.</p>

<h3 id="a-colleague-only-wants-to-approve-the-arrangement">A colleague only wants to approve the arrangement</h3>

<p>A layout review does not always require an editable archive. An image accompanied by a precise question may be sufficient and more convenient. Specify the subject: field order, action placement, or navigation sequence. Defining the scope protects the discussion from accidentally drifting towards details that are not settled yet.</p>

<p>When using a Telario export, check that approximations do not alter the very aspect being approved. A substituted icon may be acceptable for structural review and unsuitable for an iconography review. The same image can therefore be appropriate for one question and inappropriate for another. Record the outcome afterwards: approved, needs correction, or requires comparison with the original. “Seen” does not always mean “approved,” even when the message contains a highly persuasive green checkmark. The export should make the decision easier to express. It cannot decide what counts as approval on behalf of the team, and it should not be used to conceal an unresolved question behind a polished screenshot.</p>

<h3 id="the-file-lives-in-a-dropbox-folder">The file lives in a Dropbox folder</h3>

<p>When a document is in a synchronised folder, Telario opens it as a file available on the computer. It does not manage synchronisation, coordinate concurrent revisions, or automatically update the shared archive. A service name in the filesystem path does not add collaboration features to the editor.</p>

<p>Before starting, check that the file is available locally and represents the expected revision. After exporting, deliberately choose where to save the result and how to name it. Do not assume a download placed in the wrong directory will enter the team’s workflow. If two people work on a project, a rule is still needed to decide which copy is authoritative. Telario addresses opening and local editing; shared version management remains a separate responsibility. Remembering that boundary prevents many perfectly synchronised surprises. It also stops a local proposal from being mistaken for an automatic update to everybody else’s project simply because the source file originally arrived through a shared service.</p>

<h3 id="there-are-twenty-pages-and-no-obvious-starting-point">There are twenty pages and no obvious starting point</h3>

<p>With many pages, a successful opening is only the first minute of analysis. Look for a working route: which screen introduces the flow, which pages represent alternative states, and which are supporting details? If the structure is unclear, one question to the author may save more time than browsing the entire archive.</p>

<p>Record the page names relevant to your task and why you selected them. The order of the list is not definitive evidence of functional sequence. Complex projects may contain revisions, branches, or alternatives. The app lists pages without providing full branch management; reading the list does not reconstruct the project’s entire history. Even a small working map in a message helps separate the current route from supporting material. Choose the question first, then navigate with a purpose. This approach is especially useful when a page name is meaningful to the author but ambiguous to a new recipient. The archive stores content; shared understanding still benefits from a small amount of explanation.</p>

<h3 id="you-are-using-a-less-powerful-laptop">You are using a less powerful laptop</h3>

<p>The browser really performs the work. That is a benefit of local architecture and a demand on your machine’s resources. Large archives, many images, and a history of edits can affect memory and responsiveness. An opening limit does not promise that every file close to the threshold will feel equally smooth on every computer.</p>

<p>Start with a representative page and observe the behaviour. Avoid running heavy exports and unnecessary edits simultaneously merely to discover how much pressure the tab can withstand. Preserve important results before a slow session becomes an unstable one. In a report, describe approximate file size and operation type without publishing confidential content. Performance is part of usability, but diagnosis needs concrete context. “It is slow” is a symptom; knowing when and on which structure it slows down is already a step towards an explanation. Useful reporting distinguishes opening time, page switching, dragging, and export time rather than treating every delay as evidence of the same underlying problem.</p>

<h3 id="you-want-to-compare-two-proposals">You want to compare two proposals</h3>

<p>A useful comparison keeps unchanged elements stable. Two exports with different content, framing, or scale force the recipient to reconstruct context before evaluating the proposal. Prepare comparable views and state the difference you want discussed: wording, sequence, or arrangement. Make the comparison about the choice rather than the presentation.</p>

<p>Identify the provenance of any locally edited proposal. Do not overwrite the received reference or rely on memory to remember which file was the variant. Exporting moves the discussion outside the editor, but comparability is a decision made by the person preparing the material. Preserve the outcome alongside the selected option. Two images without a conclusion form an archive of possibilities, not a project decision. A small investment in context prevents the same question from returning next week under slightly more imaginative filenames. It also helps the next developer understand whether the alternative was rejected, deferred, or simply never reviewed, three states that can otherwise look remarkably similar in a folder.</p>

<h3 id="the-work-is-moving-to-a-third-developer">The work is moving to a third developer</h3>

<p>The next person does not possess the messages you had in mind while looking at the canvas. Prepare a handoff containing the reference project, a readable view, and the essential decisions. If Telario was used for exporting or preparing a proposal, explain that step instead of requiring someone to infer it from visual details.</p>

<p>Identify verified areas and anything still needing comparison with Balsamiq. A specific note is more useful than “check everything”: for example, the group on page two or the inferred links in a diagram export. Do not distribute an experimental copy as the only surviving original. Continuity depends on returning to a trustworthy reference. A tool intended to remove one blocker should not create a new dependency on the person who knows how the latest image was produced. Minimal documentation avoids that outcome. The test of the handoff is practical: can the next person identify the reference, understand the proposal, and continue without first reconstructing your private working context?</p>

<h3 id="the-boss-finally-sends-the-png">The boss finally sends the PNG</h3>

<p>That is good news, not a defeat for the project. If the image is current and sufficient for your task, use it. The objective is not to prove that every workflow must pass through Telario. It is to make work less fragile when available tools and received documents fail to meet.</p>

<p>The editor remains useful for browsing the archive, extracting text, or preparing a small proposal. An improved handoff process may reduce the need to open it, and that is a positive result. Good personal tools do not need to defend the problem that created them. They can become another option, ready when necessary. If the normal process works, excellent: software can wait without taking offence. Unlike the deadline, which continues to arrive with admirable punctuality and absolutely no willingness to export images. The measure of success is less blocked work, whether that improvement comes from this application, a better export habit, or a combination of the two.</p>

<h3 id="the-request-becomes-let-everyone-use-it">The request becomes “let everyone use it”</h3>

<p>A solution useful on my machine is not automatically ready for every team. Wider use introduces different questions: who provides support, which files are representative, which limitations are acceptable, and which distribution conditions apply? Public code visibility does not settle those choices by itself.</p>

<p>Start with a small trial using nonconfidential documents and explicit success criteria. Verify opening, readability, and exports before including original-format saving. Gather failures as reproducible cases rather than general verdicts. Telario’s promise remains proportionate: reduce a concrete blocker through a first working version with documented limitations. Bringing it to more people may be a sensible evolution, but it requires additional work. The fact that a PNG joke makes half the office smile is encouraging; it does not replace an adoption plan. A good trial should end with clear findings about suitable tasks, known gaps, and the next decision, rather than an expectation that one successful demonstration has removed every future support responsibility.</p>

<h2 id="8-the-minimum-handoff-i-would-like-to-receive">8. The minimum handoff I would like to receive</h2>

<p>The ideal package is small: the original project, current exports of important pages, a revision note, and unresolved questions. I am not asking for a manual with every wireframe. I am asking that recipients can distinguish what to inspect, why it matters, and how final it is. A file can contain many screens; a handoff should contain at least one understandable intention.</p>

<p>If that habit becomes normal, Telario can remain a tool at the edge of the workflow. When the habit is absent, the app restores an opportunity to act. Either way, the objective is the same: spend less time arranging access to information and more time doing the work that information enables. The application and the process improvement are compatible ways to reach that outcome.</p>

<p>The story does not need a villain. Balsamiq does its job, my boss makes designs, and I try to develop them. The problem lives between different tools and imperfect handoffs. Telario is a small bridge built for that particular crossing. Expected traffic is modest: a few pages, some text, and an image that can finally be opened without asking for a favour. That is enough of an engineering brief to justify a personal project, and specific enough to keep its claims grounded in actual behaviour.</p>

<h2 id="9-where-to-try-it-and-what-to-expect">9. Where to try it, and what to expect</h2>

<p>Start with the <a href="/en/get-started/">setup guide</a>, explore the synthetic demo, and verify essential operations. Before using a real archive, read <a href="/en/compatibility/">compatibility and limits</a>. For precise behaviour and validation results, the reference is the <a href="https://github.com/telario/telario">Telario repository</a>. Saving <code class="language-plaintext highlighter-rouge">.bmpr</code> remains experimental. Keep originals and check saved copies in the destination workflow before relying on them.</p>

<p>My favourite result is not a statistic. It is the moment a file opens and I can return to thinking about the screen. Progress no longer requires the right colleague, message, and export to appear in the same time window. I can start with what I have while understanding what I am viewing and which details still need checking. That combination of independence and explicit limits is more useful than confidence without evidence.</p>

<p>One last practical detail: record which tool produced an export. This is not ceremony. If someone notices a difference tomorrow, knowing that the image came from Telario helps them check the renderer before questioning the original project. One line of context can prevent an entire conversation from heading in the wrong direction. That is precisely the kind of small economy that makes this project worthwhile.</p>

<p>The PNG can follow later. Meanwhile, the work has already restarted.</p>]]></content><author><name>Antonio Trento</name></author><summary type="html"><![CDATA[The story behind Telario and a practical guide to handoffs: the right file needs to arrive with a workable way to read it.]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://telario.github.io/assets/images/blog/handoff-1600.webp" /><media:content medium="image" url="https://telario.github.io/assets/images/blog/handoff-1600.webp" xmlns:media="http://search.yahoo.com/mrss/" /></entry></feed>