Questa pagina è in italiano perché è la lingua che chiede il tuo browser.
Il codice di questa pagina non è partito.
Se apri index.html direttamente da una cartella, i moduli JavaScript restano bloccati, quindi non succederà niente quando sceglierai chi finisce sul grafico. Servi invece la cartella via http:
Si apre appena scegli un file qui sopra.pronto — stacca la connessione e questo continua a funzionare.non disponibile in questo browser (tutto il resto funziona lo stesso).serve https:// oppure localhost per tenere una copia offline.qui non si può tenere una copia, ma non viene caricato niente in nessun caso.I tuoi file non sono andati da nessuna parte. {total} file caricati, tutti quanti di questo sito. {platform}Qualcosa ha contattato {hosts}, e questo strumento non lo fa mai. Vale la pena andare a vedere. {platform}Gli script del sito per la pubblicità, la misurazione e il pulsante delle donazioni sono arrivati da {hosts} host; a nessuno di questi è arrivato un file o un suo byte.Gli script del sito per la pubblicità, la misurazione e il pulsante delle donazioni sono arrivati da {hosts} host; a nessuno di questi è arrivato un file o un suo byte.Qualcosa è andato storto: {detail}. Ricarica la pagina per ricominciare.Lettura di {count} file…Lettura di {count} file…Prova un esempioCreazione di un esempio…Questo browser non è riuscito a creare l'esempio. Scegli un file.
Confronto di altezze — un grafico affiancato che puoi scaricare
Scrivi le altezze, portati via l'immagine. Per disegnarla non viene mandato niente.
● 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
Verifica dal vivo:verifica in corso…
Offline:verifica in corso…
Non devi crederci sulla parola: apri i DevTools, guarda la scheda di rete e scrivi un nome e un'altezza. Non una sola richiesta porta un carattere né dell'uno né dell'altra. Oppure stacca internet e fai il grafico lo stesso.
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.
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.
Se il software di sicurezza della tua azienda segnala un caricamento. Osserva il momento in cui un file viene scelto nel browser, e non può sapere se la pagina intende inviarlo — quindi avvisa alla scelta. Qui non viene inviato nulla: apri gli strumenti per sviluppatori, vai su Rete e scegli un file. Non c'è nessuna richiesta che lo trasporti, e nessuna richiesta a parte l'anteprima locale della pagina. È la stessa verifica che il tuo reparto IT può fare in mezzo minuto.
1 Di' chi stai confrontando
Un nome, un'altezza e che tipo di figura disegnare. Ogni riga parte da un'altezza su cui puoi scrivere sopra direttamente. Le altezze si possono scrivere come le scrivi tu — 173, 1,73 m, 5'8", 68 in — e la riga sotto ogni casella mostra cosa è stato capito, oppure lo dice in rosso se la casella è vuota o l'altezza non si riesce a leggere. Non viene mai indovinato niente di nascosto.
Dall'alto in basso qui è da sinistra a destra sul grafico. Trascina una riga dalla maniglia sul suo bordo sinistro per spostarla, oppure usa le frecce, che fanno la stessa cosa da tastiera. In tutti e due i casi il grafico torna al tuo ordine se stava ordinando per altezza.
Un SVG mette qualunque disegno sul righello — un logo, una pianta, un pezzo di macchinario. Viene letto in questa pagina e non va da nessuna parte. Si tiene solo quello che c'è dentro come forme: arriva in un unico colore pieno che scegli riga per riga, e tutto quello che potrebbe raggiungere la rete — un'immagine collegata, un foglio di stile, un font, uno script — resta fuori invece di finire dentro un grafico che magari mandi a qualcuno. Un disegno fatto di linee sottili invece che di forme piene esce come una macchia compatta, ed è l'unico caso in cui questo è lo strumento sbagliato.
Una foto o un PNG ci va così com'è e tiene i suoi colori, quindi il colore della riga si limita a nominarla. Anche questa viene letta qui, e ridisegnata prima di entrare — il che limita quanto fa crescere il grafico e lascia indietro i metadati del file. Ciò che è trasparente resta trasparente: un ritaglio sta pulito sul righello, mentre una foto si porta dietro lo sfondo, che conviene tagliare prima.
Quasi tutti arrivano disegnati e non come un blocco liscio — una porta con la maniglia, un frigorifero con il congelatore sopra, un divano che si vede che è un divano. Il disegno viene adattato ai due numeri della riga, quindi sono i numeri a decidere la forma: scrivi i tuoi sopra e l'immagine segue. Tre non hanno disegno, perché non ne è saltato fuori nessuno libero e con le proporzioni giuste: il canestro da basket, il container marittimo e il piano di lavoro della cucina arrivano come il rettangolo che prima era ogni oggetto.
Alcune di queste misure sono davvero fisse: un container marittimo da 20 ft è alto 259 cm per definizione, un canestro sta a 305, e una porta interna americana è 203 per 81. Le altre sono tipiche più che standard — porte, finestre e piani di lavoro cambiano da paese a paese e da casa a casa. Ognuna arriva come una riga normale, quindi misura la tua e scrivici sopra i numeri veri.
FiguraNomeAltezzaLarghezzaColore
2 Prenditelo
Il PNG è quello da incollare in un documento o in una chat. L'SVG è quello da tenere: è il grafico come istruzioni invece che come pixel, quindi stampa nitido a qualsiasi dimensione e può essere ricolorato dopo da qualunque cosa apra i vettori.
Disegna il righello Le righe che attraversano il grafico e i numeri sui due lati. Senza di loro l'immagine confronta ancora bene due persone, ma smette di dire quanto è alta ciascuna.
Scrivi nomi e altezze sopra ogni figura Spento, il grafico è sagome su un righello — ed è quello che vuoi se i nomi finiscono già in quello dove lo stai incollando.
Nessuno sfondo Trasparente, per posarlo su una slide che ha già un colore. Il righello e la scritta vengono disegnati scuri o chiari a seconda del colore scelto qui sopra, quindi imposta quello più o meno su ciò su cui finirà l'immagine, anche quando lo sfondo è spento.
Quella è l'altezza dell'area di disegno, quindi l'immagine finita è un po' più alta: i nomi stanno sopra. La larghezza viene da quante figure ci sono e da quanto è larga l'etichetta di ciascuna. La riga sotto l'immagine dice com'è venuta.
UomoDonnaBambinoBambinaOggettoLa tua immagineFigura della riga {n}Nome della riga {n}Altezza della riga {n}Larghezza della riga {n}Colore della riga {n}Sposta la riga {n} in suSposta la riga {n} in giùTogli la riga {n}Trascina per riordinareNome173 cm5'8"LarghezzaLetto come {height}Questa riga ha bisogno di un'altezza prima di poter essere disegnata.Questa non è un'altezza che qui si capisca. Prova 173, 1,73 m, 5'8" o 68 in.Troppo basso per disegnarlo — 5 cm è il minimo.Più alto di dove arriva il grafico — il limite è 12 metri.Aggiunto, disegnato da {shapes} forme di quel file. Per leggerlo non è stato caricato niente.In quel file non c'è niente da disegnare. Si tengono solo le forme — un file fatto solo di testo, effetti o immagini collegate non ne ha.Quel file non è un SVG leggibile qui.Quel file è troppo grande per essere una forma sola. Il limite è due megabyte.Aggiunta. L'immagine è stata letta in questa pagina e non è stato caricato niente.Quel file non è un'immagine leggibile qui.Quell'immagine è troppo grande. Il limite è dodici megabyte.Aggiungi qualcuno e il grafico comparirà qui.Ogni riga ha bisogno di un'altezza. Riempine una e il grafico comparirà qui.Dodici figure sono quante ne regge questo grafico restando leggibile.{count} figure, {width} per {height} pixel. Il righello va da terra fino a {top}, con una riga ogni {step}.Una figura, {width} per {height} pixel. Il righello va da terra fino a {top}, con una riga ogni {step}.Salvato. Per disegnarlo non è stato mandato niente da nessuna parte.{detail}. L'SVG si scaricherà lo stesso.Copiato. Incollalo dove ti serve.Questo browser non ha lasciato che la pagina scrivesse negli appunti. Scaricalo invece.Sul grafico non c'è ancora niente da salvare.questo browser non ha voluto disegnare l'SVGquesto browser non ha voluto scrivere un PNGi nomi e le altezze che hai scritto non sono andati da nessuna parte. {total} file caricati. {platform}Qualcosa ha contattato {hosts}, e questo strumento non lo fa mai. {platform}Gli script del sito per la pubblicità, la misurazione e il pulsante delle donazioni sono arrivati da {hosts} host; a nessuno di questi è arrivato un nome o un'altezza.Gli script del sito per la pubblicità, la misurazione e il pulsante delle donazioni sono arrivati da {hosts} host; a nessuno di questi è arrivato un nome o un'altezza.
Ha funzionato?
Cosa è andato storto?
Grazie — ci serve.
Viene inviata solo la risposta, e solo quando premi un pulsante. Mai il tuo file, né il suo nome, né niente che lo riguardi.
# 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.
Come fare un grafico di confronto delle altezze
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.
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.
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.
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.
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.
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.
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 altezzeTrasformare 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.
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.