Se si ha una nipotina quasi-settenne, gran produttrice di disegni, e si vuole assecondarne la creatività al contempo risparmiando carta, allora serve un’app o un sito web per disegnare con lo stilo (o un dito).
Ma se non si trova nulla che sia senza pubblicità, sicuro e gratuito, non rimane che ricorrere al fai da te.

Per chi avesse fretta, il risultato è qui.

Lo spunto

Una ricerca sul web mi ha fatto scoprire l’articolo Build A Drawing App in HTML CSS & JavaScript, un codice bello e pronto per confezionare semplici disegni con un browser su pc. È disponibile anche una pagina demo del codice:

L'app è molto semplice, il codice ben commentato. L’ideale punto di partenza per quello che avevo in mente: html, javascript e css con cui costruire una pagina del mio sito web.
Oltre alle basilari funzioni grafiche, il codice prevede anche la possibilità di salvare il disegno sul proprio dispositivo.
Andavano solo apportate alcune migliorie.

I miglioramenti essenziali

Il codice originale gestisce gli eventi da mouse e non da touch, il che vuol dire che non si presta all’utilizzo su tablet e iPad.
La modifica è ragionevolmente semplice: basta aggiungere del codice js per tradurre gli eventi touch nei corrispondenti eventi mouse, quando si verificano nell’area di disegno (canvas).
E naturalmente inibirne, sempre nell’area canvas, il comportamento di default.
Ho preferito memorizzare questo codice in un file a sé, nell’eventualità di riutilizzo in altre pagine del sito.

Altra modifica, banale ma utile, è la sostituzione dei testi della pagina con i corrispettivi in italiano.

Per completare l’usabilità dello strumento ho trovato utile sdoppiare il controllo dello spessore dei tratti, che nell’originale è in comune con lo spessore della gomma. Con lo sdoppiamento si può regolare lo spessore della gomma senza toccare quello del tratto.
La realizzazione è decisamente semplice: si duplica l’oggetto html, si adegua il css per controllarne l’aspetto e si modifica il js per gestirne gli eventi.

Qualche funzionalità in più

Tra le forme geometriche mancava la semplice linea retta.
Per aggiungerla è stato sufficiente inserire l’icona della linea con il relativo testo nell’elenco degli strumenti e il segmento di codice per la gestione nel file js. Non c'era da inventare nulla di particolare per il codice, è bastato modificare una copia della sezione relativa alla tracciatura del triangolo, composto da tre linee rette.

Per meglio identificare il disegno è anche utile inserire un titolo, magari con una data.
Anche questa modifica è contenuta: un campo input inserito tra gli strumenti e la relativa funzione js che ne copia il contenuto nell’angolo in basso a sinistra del disegno, quando viene digitato Enter.

Una funzionalità utilissima è l’undo (Torna indietro), per rimediare a un eventuale tratto infelice senza ricorrere alla gomma.
In realtà nella primissima versione data in pasto alla nipotina non avevo implementato l’undo, ma una improvvida cancellazione del disegno e la relativa reazione dell’Artista mi hanno spinto a realizzarla overnight.
La faccenda in questo caso è un filo più complessa. Ho definito una lista destinata a contenere le istantanee del disegno a ogni sua modifica: aggiunta di una forma, passaggio della gomma, inserimento del titolo, cancellazione.
Ogni pressione sul Torna indietro consuma un elemento della lista ripristinando l’area di disegno al valore precedente.
Sarebbe stato carino anche ingrigire l’icona dell'undo quando si è tornati al punto di partenza e la lista è vuota, ma la pigrizia mi ha spinto a lasciar perdere.

Alla fine l'app si presenta così:

L’utilizzo

La pagina, una volta inserita nel mio sito, è fruibile via internet da un qualunque pc o tablet/iPad. Vale la pena ricordare che l’utilizzo non è tracciato né da cookie né in altro modo, nel pieno rispetto della Privacy.
Sconsiglio l’utilizzo da smartphone, a meno che non si abbia la pazienza di scrollare la pagina per utilizzare l’intera area di disegno.
Su tablet/iPad non ho gestito la rotazione del dispositivo, che va utilizzato in posizione portrait (orizzontale). Avrei potuto (forse) gestire la rotazione dello schermo tenendo conto del ridimensionamento e riposizionamento dell’area di disegno con la rotazione, oppure anche solo mostrare un avviso quando il dispositivo è verticale. L’incertezza della prima soluzione e la pigrizia in generale mi hanno spinto a lasciare le cose così.

La nipotina utilizza la pagina su un iPad Air di seconda generazione che girava per casa, ancora ragionevolmente supportato nonostante l’età (l’ultimo aggiornamento di sicurezza della release 15.8.2 è avvenuto lo scorso marzo).
Nel browser Safari, oltre a Netflix (perché la 15.8.2 non supporta l’app più recente), ho aggiunto anche un po’ siti educativi per la scuola primaria, oltre all'app di disegno e qualche altro giochino sempre dal mio sito.

Ringraziamenti

Il credito fondamentale va all’articolo citato in apertura, che mi ha consentito di partire con la ragionevole certezza di arrivare al fondo.
Come sempre mi sono appoggiato a Perplexity.ai per farmi suggerire le modifiche html/css/js. Non sempre funzionano al primo colpo e vanno comunque integrate nel progetto, ma il risparmio di tempo nella ricerca documentale è incredibile. Questa volta, tra l’altro, Perplexity mi ha anche fornito le due icone svg necessarie, in base alla semplice descrizione verbale.

E infine un grazie alla nipotina quasi-settenne che si sta occupando con rigore del controllo qualità. E meno male che di parolacce ne conosce ancora poche.

A fine dicembre 2023 ho installato l'ultima versione di Zorin OS, la 7, sul mio Asus E210 (pc di fascia bassa con Celeron N4020, 4 GB di memoria). Con gli aggiornamenti di questi primi tre mesi, la versione è stata rinominata in 7.1.
Sono decisamente soddisfatto delle prestazioni, l'utilizzo del pc rimane fluido anche in condizioni di carico abbastanza sostenuto.
Con l'aiuto di un paio di script Bash, riportati in Quanta memoria utilizza il mio Linux, nei giorni scorsi ho raccolto qualche dato puntuale sull'utilizzo della memoria e delle aree di swap in una condizione di carico reale che, per il mio utilizzo, posso ritenere sostenuto.

La descrizione di cosa produco e come è qui di seguito. L'analisi dei numeri seguirà nel post successivo.

Cosa produco

Preparo settimanalmente un mini-giornalino per la mia nipotina Luna di 6 anni e la sua cuginetta Cecilia di 7: due fogli A4, stampati fronte-retro, piegati in due e fascicolati in modo da avere 8 facciate.
L'impaginazione della Settimana Lunare al momento è di due tipi. Il primo:

• due unisci i puntini da 1 a 20;
• due cerca la parola in una foresta di lettere;
• un racconto breve con un disegno da colorare (paginone centrale);
• due labirinti da attraversare.

Nel secondo tipo di impaginazione, una filastrocca da leggere sostituisce un unisci i puntini, e il racconto breve è sostituito da due esercizi di coding unplugged, tema sul quale sto in realtà sperimentando.

Il materiale è prevalentemente preso da Internet, lecitamente, visto che il fine non è commerciale e la stampa si limita a due copie.

Il flusso di lavoro

La preparazione di un numero del giornalino segue questa scaletta:

• avvio il pc;
• apro il file manager, raggiungo la directory con i file in formato odt, duplico il file con il numero del giornalino da cui voglio partire e lo rinomino correttamente;
• apro in edit il file con LibreOffice Writer;
• modifico l'intestazione (numero, data);
• inserisco nuovi giochi in sostituzione dei precedenti:
  • apro un file LibreOffice Impress, per creare i due giochini della foresta di lettere, e i due coding unplugged (se previsti);
  • apro il Browser Brave (che ha già 13 tab aperti), per scaricare due labirinti dal sito  Mazegenerator.net;
  • sempre da internet (Pinterest oppure siti per l'infanzia) scarico un paio di unisci i puntini e, quando previste, una breve favoletta o una filastrocca;
  • attualmente utilizzo caratteri maiuscoli per il racconto e la filastrocca (le minuscole arrivano l'anno prossimo); la conversione in maiuscola la effettuo con LibreOffice Calc, inserendo il racconto in una cella e applicando la formula =MAIUSC(...);
• i file dei labirinti, scaricati in svg, vengono prima modificati con l'editor di testo per aumentarne le dimensioni, poi modificati con GIMP per inserire all'interno del percorso qualche gadget da recuperare, ad esempio un tesoro oppure una mela, e infine incollati nel documento odt;
• l'icona del gadget la recupero come carattere Unicode dal sito Symbl.cc;
• finita l'impaginazione, da Writer salvo in formato pdf;
• apro il file pdf con il browser Edge di Microsoft, secondo me più completo per questa funzione, e:
  
  • verifico il risultato;
  • torno a Writer per un paio di inevitabili correzioni;
  • stampo una copia;
  • se necessario riciclo su Writer per ulteriori piccole modifiche;
  • stampa finale.

Il carico

A questo punto sul pc sono in esecuzione, distribuiti su 3 o 4 spazi di lavoro:

1. Brave ed Edge;
2. LibreOffice Writer, Impress e Calc;
3. un paio di istanze di file manager;
4. un text editor con due finestre aperte;
5. Gimp con 3 immagini in editing (2 labirinti e un gadget).

Per raccogliere i dati di utilizzo di memoria e swap, inoltre, sono in esecuzione anche un paio di finestre di terminale per i due script di raccolta dati.
Solo a stampa completata chiudo le app che non servono più.

In quest condizioni l'usabilità del pc rimane ottima, senza che si percepiscano rallentamenti.

Utilizzare lo stesso pc in esecuzione con Windows 11, l'os nativo, sarebbe impensabile, visto che già aprire Edge e un tool di LibreOffice porta a rallentamenti sensibili.

Qualche foglio di carta A4, un righello, una matita, un paio di forbici e una mezz'ora di tempo regalano un interessante momento con il Nastro di Möbius.
La procedura per costruirne uno vale anche come definizione:

• tagliate da un foglio di carta A4 una striscia per il lato lungo;
• portate i due bordi corti della striscia a combaciare, dopo aver impresso mezzo giro a uno dei due;
• unite i due bordi con della colla o del nastro adesivo.

La "cosa" che avete tra le mani non è più semplice carta, ma è un Nastro di Möbius.

Se fate scorrere un dito sulla superficie di carta nel senso della lunghezza, il dito passerà su entrambi i lati della carta. Il nastro, quindi, ha una sola faccia, e non due come ci si potrebbe aspettare.
Se avessimo invece impresso un giro intero alla striscia di carta, avremmo ottenuto un oggetto con due facce, che si chiama anello. Ed è così in generale: un numero dispari di mezzi giri dà un nastro (una sola faccia), un numero pari un anello (due facce).

A cosa serve il Nastro di Möbius

Il simbolo universale del riciclo è un nastro di Möbius:

È quindi probabile imbattercisi nel retro di una confezione alimentare.
Il nastro di Möbius trova anche degli utilizzi pratici, nei casi in cui si voglia aumentare la superficie utile di un nastro (es.: una cinghia di trasmissione, distribuendo l'usura sulle due facce). Lo dice Wikipedia, sarà certamente vero.
Quello che non dice Wikipedia, è che potete usarlo anche per far uscire di senno il prossimo.

Come impazzire con il Nastro di Möbius

Tagliare un nastro di Möbius per il senso della lunghezza regala risultati sorprendenti, a seconda della posizione del taglio.

Istruzioni:

• preparate un Nastro di Möbius;
• tagliate il nastro, nel senso della lunghezza, a metà della larghezza.

Viene fuori un anello.
Per convincersene basta posizionare il dito indice su un punto del nastro posto sulla parte esterna della metà sotto il taglio, e farlo scorrere. Arrivati al punto di incollaggio, il dito passa alla parte interna della metà sopra il taglio. Proseguendo ancora, tornati al punto di incollaggio, ci si ritrova al punto di partenza, dopo aver attraversato due mezze torsioni.
Il dito ha toccato senza discontinuità tutta la carta (quindi è un pezzo unico), ma non ha toccato le superfici interna inferiore ed esterna superiore, che quindi sono la seconda faccia dell'anello. L'anello ha una lunghezza pari al doppio della lunghezza del nastro iniziale.

E se taglio in due un anello?

In questo caso si hanno effettivamente due pezzi, della stessa forma dell'originale, della stessa lunghezza ma di altezza metà (per via del taglio) e intrecciati tra di loro.
La faccenda può essere iterata, tagliando a metà ciascuna delle due metà, moltiplicando in modo esponenziale il numero di anelli. Non è però così semplice andare oltre un secondo taglio, a causa dell'altezza del nastro che si dimezza via via, e del groviglio di strisce di carta generato.

Taglio del nastro di Möbius a un terzo dell'altezza

Cosa accade se si taglia il nastro di Möbius non a metà altezza ma più sotto, mettiamo a un terzo dell'altezza?

Partiamo dal punto del taglio e facciamo scorrere il dito lungo la parte esterna inferiore del taglio.
Arrivati al punto di incollaggio, il dito si trasferisce dopo una mezza torsione nella parte interna superiore, anch'essa alta un terzo. Dopo un po' ripassiamo all'altezza del taglio, ma siamo nel terzo superiore del nastro.
Continuando ancora, si ripassa dal punto di incollaggio dove, con una seconda mezza torsione, si torna alla parte esterna inferiore e quindi si raggiunge nuovamente il punto esatto da cui è partito il taglio.

Non dovrebbe essere difficile riconoscere che si è prodotto anche in questo caso un anello (due mezze torsioni e due facce), ma di altezza pari a un terzo dell'altezza originale.
Il resto della carta è la porzione centrale del nastro, che non ha subìto alterazioni, ed è quindi ancora un nastro di Möbius, ma di altezza un terzo.

Il taglio a un'altezza diversa da metà porta quindi a due oggetti, un nastro e un anello.
Ulteriori tagli a un terzo di altezza avranno quindi questi effetti:

• dal nastro di Möbius iniziale si ottiene ancora un nastro (lungo come l'originale, altezza un terzo) e un anello (lunghezza doppia dell'originale, altezza un terzo);
• dall'anello si ottengono invece due anelli della stessa lunghezza; l'altezza dei due anelli dipende da dove si effettua il taglio.

Qualche consiglio pratico

Per costruire i miei nastri di Möbius, sono partito dividendo due fogli A4 in due parti uguali da 10.5 cm per quasi 15 cm. Ho poi incollato le 4 strisce arrivando quindi a un nastro lungo quasi 60 cm e alto 10.5 cm.
Questo consente di effettuare almeno due giri di taglio, anche con altezza pari a un terzo. Dopo di che il garbuglio che si genera rende praticamente impossibile riconoscere correttamente gli anelli.

Prima di incollare il nastro di partenza ho marcato una faccia della striscia di carta con dei tratti a matita a intervalli regolari.
Questo consentirà poi di rendere più semplice riconoscere, almeno dopo il primo taglio, la natura di nastro o anello.

Il 34° presidente degli Stati Uniti, Dwight D. Eisenhower, comandante dell'Operazione Overlord che portò allo sbarco in Normandia, citò in un discorso una frase attribuita al rettore di una università:

Ho due tipi di problemi: quelli urgenti e quelli importanti. Quelli urgenti non sono importanti e quelli importanti non sono mai urgenti.

Questa citazione diede a Stephen Covey, scrittore, educatore e uomo d'affari statunitense, lo spunto per ideare la Matrice di Eisenhower, un ausilio grafico utilissimo a mettere in fila le attività che dobbiamo portare a termine, districandoci tra importanza e urgenza e massimizzando l'efficacia della nostra azione.

Nell'organizzare le attività della giornata (o della settimana, mese, anno) il primo passo, fondamentale, è quello di elencare queste attività, senza dimenticare quelle più antipatiche o noiose. Il secondo consiste invece nel distribuire le attività nei quattro quadranti della matrice:

1. in alto a sinistra le attività importanti e urgenti;
   queste vanno affrontate subito e direttamente;
2. in alto a destra le attività importanti, ma non urgenti;
   non c'è fretta, ma meglio pianificarne l'esecuzione con una data precisa, per evitare che si spostino nel quadrante 1;
3. in basso a sinistra le attività urgenti ma non importanti;
   vanno fatte rispettando l'urgenza, ma se si riesce a delegarne l'esecuzione si liberano energie per i primi due quadranti;
4. infine, in basso a destra, le attività né urgenti né importanti;
   è proprio il caso di farle?

La matrice di Eisenhower nella pratica

In qualità di marito, sono spesso delegato a fare le cose che il Capo reputa urgenti ma non importanti.
Ovviamente, nel mio piccolo, ho anch'io diritto a una mia personale matrice di Eisenhower. Quindi le Q3 del Capo finiscono nel mio Q1, in quanto per essere urgenti, sono urgenti, e importanti lo diventano perché arrivano da Lei.
Anzi, si posizionano in cima al mio Q1, per non essere sorpreso a fare altre cose, importantissime e urgenti per me, ma non per Lei.

In ambito lavorativo la catena di comando è generalmente ancora più lunga, ci saranno tre o quattro livelli se non di più.
E ogni Q3 che cade dall'alto si posiziona nel Q1 del poveraccio sottostante, sempre che questi non riesca a sbolognarlo al livello successivo. Finché non si arriva all'ultimo livello, che un suo Q1 bello e tondo se lo può solo sognare.