# Confronto di altezze — un grafico affiancato che puoi scaricare

Scrivi le altezze, portati via l'immagine. Per disegnarla non viene mandato niente.

> Confronta le altezze una accanto all'altra. Aggiungi un uomo, una donna, un bambino, una bambina e degli oggetti — una porta, una finestra, una lavagna, un distributore automatico — in centimetri o in piedi e pollici, e scarica il grafico come PNG o SVG. Viene disegnato nel tuo browser.

Questa pagina è uno strumento interattivo che funziona interamente nel tuo browser, all'indirizzo https://abox.tools/it/confrontare-altezze/ — nulla di ciò che gli affidi viene caricato. Quanto segue è tutto ciò che la pagina dice dello strumento a parole; per usarlo, apri l'indirizzo.

## Qui non si caricano nomi, altezze e il grafico che ne esce, **mai**. Non c'è nessun server.

Un grafico delle altezze è aritmetica e un disegno: non c'è nessun file da mandare e nessun servizio da interrogare — e l'unico file che questa pagina accetta, un'immagine tua da mettere sul righello, viene letto qui e non va da nessuna parte. L'uomo, la donna, il bambino e la bambina sono disegni di pubblico dominio che viaggiano con questa pagina, e il bambino e la bambina sono disegni di bambini veri invece che di adulti fatti piccoli — ed è questo che impedisce a un grafico di famiglia di venire storto in un modo che nessuno sa nominare. Ogni passo avviene in qualche centinaio di righe di JavaScript in questa pagina, che puoi leggere. Non c'è nessuna funzione di rete di alcun tipo, e qui conta perché quello che scrivi è un elenco di persone e quanto è alta ciascuna.

- ✗ Niente caricamenti
- ✗ Nessun account
- ✗ Nessuna filigrana
- ✓ Funziona offline
- ✓ Open source

## Come fare un grafico di confronto delle altezze

1. **Aggiungi tutti prima, poi pensa a come viene.** Una riga è una figura, un nome, un'altezza e un colore. Il nome è facoltativo — un grafico di due sagome senza nome con le loro altezze sopra è spesso esattamente quello che uno vuole — e le frecce su ogni riga la spostano a sinistra o a destra se l'ordine conta.
2. **Scrivi l'altezza come la scrivi tu.** `173`, `1,73 m`, `5'8"`, `68 in` e `5 ft 8` vengono letti tutti correttamente. La riga sotto la casella mostra cosa è stato capito, in tutti e due i sistemi, così una lettura sbagliata si vede prima che sia disegnata invece che dopo che è stata stampata. Un numero da solo sono centimetri su un grafico metrico e pollici su uno imperiale, e un numero da solo sotto il tre sono metri — nessuno è alto 1,73 cm.
3. **Scegli la figura che corrisponde alla persona.** Un bambino è alto circa sei teste e un adulto sette e mezza, quindi un bambino disegnato come un adulto rimpicciolito viene male in un modo difficile da spiegare e facile da vedere. Il bambino e la bambina sono disegni di bambini veri invece che adulti rimpiccioliti, ed è gran parte di quello che fa sembrare una famiglia un grafico di famiglia. Ogni riga arriva anche con un'altezza già dentro, quindi aggiungere qualcuno disegna qualcuno — scrivici sopra direttamente.
4. **Metti sul grafico qualcosa di familiare.** Un numero è astratto e una porta no. Aggiungere un solo oggetto di una misura che tutti conoscono — una porta, una finestra, una lavagna di classe, un distributore automatico — è quello che trasforma un grafico che dichiara due altezze in uno che le mostra. Il menù ne tiene venti, raggruppati, e ognuno diventa una riga normale su cui puoi scrivere i tuoi numeri. Gli oggetti prendono una larghezza oltre a un'altezza, quindi una porta è 203 per 81 e non una striscia.
5. **Oppure metticene sopra uno tuo.** **La tua immagine** prende un file dalla tua macchina e lo mette sul righello all'altezza che gli dai — la cosa da usare quando il grafico parla di un prodotto, un veicolo o un edificio invece che di una persona. Un SVG viene disegnato nel colore della sua riga come ogni altra figura; una fotografia o un PNG ci va così com'è. Entrambi tengono le proprie proporzioni, ed entrambi vengono letti qui invece di essere mandati da qualche parte.
6. **Metti il righello nelle unità in cui pensa chi legge.** Passare da centimetri a piedi riscrive quello che c'è nelle caselle invece di reinterpretarlo, quindi il grafico in sé non si muove: cambia solo la notazione. Se il grafico è per due pubblici, l'altezza scritta sopra ogni figura è nell'unità del grafico e la riga sotto ogni casella le ha entrambe.
7. **Il PNG per incollare, l'SVG per stampare.** Il PNG è un'immagine all'altezza in pixel che hai impostato, ed è quello che vuole una finestra di chat, un documento o una slide. L'SVG è il grafico come istruzioni, quindi stampa nitido a qualsiasi dimensione e può ancora essere ricolorato dopo da qualunque cosa apra i vettori.

## La versione lunga

[Come fare un grafico di confronto delle altezze](https://abox.tools/it/guide/fare-un-grafico-di-altezze/): Trasformare un elenco di altezze in un'immagine affiancata: come scrivere le altezze, quale figura scegliere per un bambino, perché un solo oggetto familiare fa più di una terza persona, e come tirare fuori il grafico come PNG o SVG.

## Anche nella cassetta

- [Compressore di immagini](https://abox.tools/it/comprimere-immagine/): La dimensione la dici tu. Il resto lo calcola lui.
- [Ridimensionatore di immagini](https://abox.tools/it/ridimensionare-immagine/): Di' la dimensione, disegna il riquadro, scegli il formato.
- [Da HEIC a JPG](https://abox.tools/it/heic-in-jpg/): Le foto che fa un iPhone, in un formato che apre chiunque.
- [Creatore di foto tessera](https://abox.tools/it/foto-tessera/): Scegli il paese. Applica quella norma, esattamente.

## Domande

### Quello che scrivo viene mandato da qualche parte?

No. Il grafico viene disegnato dal JavaScript di questa pagina, sul tuo dispositivo, e questo strumento non ha nessuna funzione di rete di alcun tipo — non scarica mai niente e non manda mai niente. La `Content-Security-Policy` della pagina elenca ogni indirizzo che può contattare, e nessuno di questi è nostro. Vale la pena dirlo chiaramente qui, perché quello che si inserisce è un elenco di nomi di persone e di quanto è alta ciascuna, che è più personale di quasi tutto quello che questo sito maneggia.

### Posso scaricare il grafico?

Sì, come PNG o come SVG, senza filigrana e senza account. Il PNG viene disegnato all'altezza in pixel che imposti ed è quello da incollare in un documento, una slide o una chat. L'SVG è il grafico come istruzioni invece che come pixel: stampa nitido a qualsiasi dimensione e può essere aperto e ricolorato più avanti in qualunque editor vettoriale. Tutti e due sono fatti a partire dallo stesso markup che sta sullo schermo, quindi nessuno dei due può non essere d'accordo con l'anteprima.

### Come scrivo l'altezza — in centimetri o in piedi?

Come vuoi, in qualunque riga, nel modo in cui la scrivi di solito. `173`, `173 cm`, `1,73 m`, `5'8"`, `5 ft 8 in` e `68 in` vengono capiti tutti, e la riga sotto la casella mostra cosa è stato letto in tutti e due i sistemi. Un numero da solo sono centimetri quando il grafico è metrico e pollici quando è imperiale; un numero da solo sotto il tre viene preso per metri, perché 1,73 cm non è un'altezza che qualcuno scriva.

### Perché i bambini non sembrano adulti rimpiccioliti?

Perché un bambino non lo è. Le proporzioni del corpo cambiano con l'età: un bambino di due anni è alto più o meno quattro teste e mezza, uno di otto sei, un adulto sette e mezza — quindi la testa è quasi un quarto di un bambino piccolo e un ottavo di un adulto. Il bambino e la bambina qui sono disegni di bambini veri invece che una sola sagoma ridotta, ed è per questo che un grafico di famiglia sembra una famiglia invece che quattro adulti di misure diverse.

### Da dove vengono le figure?

Tutte e quattro sono disegni di altre persone, tutti di pubblico dominio: l'uomo di pitr, la donna di Madeleine Price Ball, la bambina di OpenClipart-Vectors e il bambino di Ryan Kissinger per la biblioteca NIH BioArt. Ogni file viaggia con questa pagina in `vendor/` così com'è stato pubblicato, quindi puoi confrontarli con gli originali. Il pubblico dominio non chiede niente, ed è proprio questo il punto: il disegno finisce dentro un'immagine che scarichi, e una licenza che richiedesse l'attribuzione attaccherebbe quella richiesta al tuo grafico.

### Posso mettere una mia immagine sul grafico?

Sì — **La tua immagine** prende un disegno o una fotografia e lo mette sul righello all'altezza che scrivi: un logo, una pianta, un pezzo di macchinario, un'auto, o una foto della cosa stessa. Le proporzioni sono le sue, quindi non c'è una larghezza da riempire. \
\
Un **SVG** viene disegnato in un solo colore pieno, quello su cui è impostata quella riga, perché è quello che è il resto del grafico — quindi un disegno fatto di contorni sottili invece che di forme piene esce come una macchia, e per quello questo è lo strumento sbagliato. Si tengono solo le *forme*: il file viene ricostruito da zero a partire da tracciati, rettangoli e cerchi, e tutto quello che potrebbe raggiungere la rete — un'immagine collegata, un foglio di stile, un font, uno script — resta fuori. \
\
Una **foto o un PNG** ci va così com'è e tiene i suoi colori, quindi il colore della riga si limita a darle un nome. Viene ridisegnata qui prima di andarci, il che limita quanto aggiunge al grafico e lascia fuori i metadati del file. La trasparenza si conserva, quindi uno scontorno sta pulito sul righello — e una foto si porta dietro lo sfondo, che conviene ritagliare prima. \
\
Nessuno dei due file va da nessuna parte. Conta due volte, perché il grafico che scarichi è un file che magari mandi a qualcuno.

### Perché non c'è un bimbo piccolo o un neonato?

Perché nessuno ne ha disegnato uno mettendolo di pubblico dominio. Wikimedia Commons ha esattamente un bambino libero utilizzabile — la bambina — e la biblioteca NIH BioArt il bambino; sotto l'età scolare la ricerca torna vuota, e ogni set libero e coerente di persone è un pittogramma da bagno pubblico con la stessa forma a ogni età, che è l'errore che questo strumento intero esiste per evitare. Per un po' c'è stato un bimbo piccolo disegnato dal codice di questa pagina, ed era l'unica figura del grafico che nessuno aveva disegnato: si vedeva, accanto a quattro che qualcuno aveva disegnato. Per chiunque sia più basso del bambino o della bambina, metti uno dei due all'altezza vera — è il righello che porta il confronto, e sarà giusto.

### Quante persone posso mettere su un grafico?

Dodici. Non è un limite tecnico — il disegno ne farebbe volentieri trenta — ma oltre la dozzina le colonne diventano più strette dei nomi scritti sopra e l'immagine smette di leggersi. Se te ne servono di più, spegnere i nomi ti restituisce la larghezza, oppure due grafici lo diranno meglio di uno.

### Posso mettere un oggetto sul grafico?

Sì — e la maggior parte arriva disegnata. Il menù ne tiene venti da cui partire, in quattro gruppi: porte e finestre, scuola e ufficio (una lavagna, una scrivania, un classificatore, uno schermo da proiezione), cose in giro per la città (un distributore automatico, un bidone con ruote, un canestro, un container da 20 ft) e cose in giro per casa. Diciassette di loro arrivano con un disegno — una porta con la maniglia, un frigorifero con il congelatore sopra, un divano che si vede che è un divano — e il disegno viene adattato all'altezza e alla larghezza della riga, così sono sempre i numeri a decidere la misura, e i tuoi, scritti sopra, valgono sempre. Gli altri tre sono semplici rettangoli, perché di loro non è saltato fuori nessun disegno libero che fosse insieme giusto e proporzionato bene, e un disegno sbagliato è peggio di un blocco onesto su un grafico che parla di scala. \
\
Alcune di queste misure sono davvero standard e altre misure tipiche, cosa che la pagina dice a voce alta. Un oggetto familiare fa per un grafico più di qualunque numero di persone in più: è quello che trasforma un confronto in un senso della scala.

### C'è una figura per un cane o un gatto?

No, ed è una mancanza voluta più che una dimenticanza. Tutti e due erano stati costruiti — di profilo, in piedi, con la testa all'altezza della spalla, in modo che la cima del disegno fosse l'altezza scritta accanto, che è dove ogni standard di razza misura un animale. Non sono venuti abbastanza bene da pubblicarli: un quadrupede visto di lato accanto a quattro persone viste di fronte si legge come uno sbaglio anche quando il disegno è buono. Un rettangolo all'altezza del garrese dell'animale è onesto nel frattempo.

### Posso condividere il grafico con un link?

Non da qui, ed è voluto. Gli strumenti che lo offrono lo fanno mettendo tutto l'elenco nell'indirizzo, il che vuol dire che ogni nome e ogni altezza finiscono in qualunque cosa il link attraversi — i log di un server di chat, uno scanner di posta, la cronologia di qualcuno, un servizio che va a prendere l'anteprima del link. Scarica l'immagine e manda quella: dice la stessa cosa e non si porta dietro nessun elenco.

### È gratis, e posso usare il grafico commercialmente?

È gratis, non c'è account e non c'è filigrana, e puoi mettere il risultato in una relazione, una presentazione, un annuncio o un prodotto. Il sito ha della pubblicità, ed è quella che lo mantiene. Di un grafico che fai qui non è nostro niente, e non viene tenuto niente.

### Perché il righello va di dieci in dieci e non di uno in uno?

Perché la spaziatura viene scelta da quante righe l'immagine riesce a portare invece che da un numero fisso. Un grafico di due adulti prende una riga ogni dieci centimetri; mettici un canestro e le righe passano a venticinque, perché novanta righe su un'immagine sono una velatura grigia e non un righello. In piedi e pollici la scala è uno, tre, sei e dodici pollici, così le righe cadono su pollici interi invece che vicino a loro.

### Posso mettere il grafico su una slide scura?

Sì. Imposta lo sfondo sul colore su cui starà e il righello e la scritta passano da scuro a chiaro per adattarsi — calcolato dalla luminanza del colore invece che indovinato. Poi spunta “nessuno sfondo” se vuoi l'immagine trasparente: il colore che hai scelto continua a decidere l'inchiostro, quindi un grafico trasparente diretto a una slide blu scuro ne esce leggibile.

### Funziona offline?

Sì. Carica la pagina una volta, poi stacca internet e continua a funzionare. È anche il modo più semplice per dimostrare che non viene caricato niente: uno strumento che mandasse via il tuo elenco per farci disegnare un grafico si fermerebbe nel momento in cui stacchi la spina.

## Come si verifica quello che promette

- **Un elenco di persone non è una cosa da poco da consegnare.** La maggior parte dei grafici delle altezze vuole un account, e quelli che non lo vogliono hanno comunque un server che vede ogni nome e ogni numero che scrivi. Quello che stai scrivendo qui è chi c'è nella tua famiglia e quanto è alto ciascuno, spesso con l'età di un bambino che si intuisce dalla figura accanto al nome. Niente di tutto questo viene mandato da nessuna parte, perché qui non c'è nessun posto dove possa andare.
- **Qui niente va a prendere niente.** Non c'è nessun `fetch`, nessun `XMLHttpRequest` e nessun `sendBeacon` da nessuna parte in `src/`. La Content-Security-Policy elenca ogni indirizzo che questa pagina può contattare, e nessuno di questi è nostro.
- **Nemmeno tra una visita e l'altra viene ricordato qualcosa.** Il grafico vive nella pagina e da nessun'altra parte. Chiudi la scheda e l'elenco è sparito: non c'è nessun account che lo tiene, nessun cookie che lo porta, e niente scritto nella memoria di questo browser — che è anche il motivo per cui un grafico che vuoi tenere è un grafico che scarichi.
- **Il link non porta con sé il grafico.** Parecchi strumenti come questo mettono tutto l'elenco nella barra degli indirizzi perché si possa condividere, e così trasformano ogni nome e ogni altezza in qualcosa che viene registrato da qualunque cosa attraversi il link — un server di chat, uno scanner di posta, la cronologia di qualcuno. L'indirizzo di questa pagina non cambia mai mentre scrivi.
- **Il PNG è fatto a partire dall'SVG che sta sullo schermo.** Il download non è un secondo rendering che potrebbe non essere d'accordo con l'anteprima. Lo stesso markup viene consegnato al browser e dipinto su un canvas, ed è anche per questo che si può fare con la rete staccata: non c'è nessun font da scaricare e nessuna immagine da caricarci dentro.
- **Un'immagine che aggiungi viene letta qui, e mai inviata.** Il file non lascia mai questa pagina — viene letto con il `FileReader` del browser stesso e analizzato in un documento inerte che non esegue niente. Quello che viene disegnato non è quel file: `src/import-svg.js` costruisce un disegno NUOVO da una lista bianca di forme e geometria, così che uno script, un foglio di stile, un font, un'immagine collegata o un riferimento a un altro documento resti fuori invece di passare. Conta due volte, perché il grafico che scarichi è un file che mandi ad altre persone: quello che fosse sopravvissuto sarebbe il loro browser che chiama il server di uno sconosciuto, giorni dopo, da qualcosa che ha scritto questa pagina. Una fotografia o un PNG non è un programma e non ha niente da ricostruire: la legge il decodificatore del browser stesso, e viene ridisegnata qui su un canvas prima di finire sul grafico. È quel ridisegno a lasciare fuori i metadati del file — la fotocamera, il luogo, il profilo, qualunque cosa ci fosse dentro —, perché niente di tutto questo sopravvive a un canvas. Quello che finisce nel grafico è un'immagine codificata da questa pagina, scritta dentro come dati e non come indirizzo, così il grafico continua a non puntare a niente.
- **I disegni sono qui, non vengono scaricati.** Tutte e quattro le figure sono illustrazioni di pubblico dominio, e vengono servite da questa origine insieme al resto della pagina — nessun font di icone, nessuna CDN, nessuno sprite tirato giù dal server di qualcun altro mentre scrivi. È anche per questo che il grafico si disegna ancora con la rete staccata.
- **Cosa carica Google, e cosa non gli arriva.** Gli script della pubblicità e della misurazione arrivano da Google, e il pulsante delle donazioni da Buy Me a Coffee. A nessuno dei due viene passato un nome o un'altezza. Ogni riga che trasforma il tuo elenco in un'immagine è servita da questa origine ed è elencata nel repository.
- **Funziona offline.** Stacca la rete e lo strumento è identico, perché un passo di rete non c'è mai stato. È la prova più semplice che ci sia.

**Verifica tu stesso.** Niente di quanto sopra va preso per buono. Questa pagina la genera, dai modelli e dalla configurazione del repository, uno script di build che puoi leggere ed eseguire anche tu, e il risultato finisce sul branch `dist`: puoi quindi confrontare quello che viene servito con quello che produce una build dei sorgenti. https://github.com/A-Box-of-Tools/website

I file da leggere per primi sono `config/site.toml` per la Content-Security-Policy, `src/traced.js` e `vendor/` per le quattro figure e da dove vengono i loro disegni, `src/figures.js` per l'elenco con cui è costruito il menù, `src/units.js` per come un'altezza scritta diventa un numero e come è etichettato il righello, `src/chart.js` per l'impaginazione, `src/save.js` per i due download — che sono l'SVG sullo schermo, e quello stesso SVG dipinto su un canvas — e `src/import-svg.js` per la lista bianca da cui un SVG caricato viene ricostruito, che è l'unico file qui dove sbagliare conterebbe.