# Comparar alturas — un gráfico lado a lado que puedes descargar

Escribe las alturas, llévate la imagen. No se envía nada para dibujarla.

> Compara alturas lado a lado. Añade un hombre, una mujer, un niño, una niña y objetos — una puerta, una ventana, una pizarra, una máquina expendedora — en centímetros o en pies y pulgadas, y descarga el gráfico como PNG o SVG. Se dibuja en tu navegador.

Esta es una herramienta interactiva de navegador en https://abox.tools/es/comparar-alturas/. Los archivos se procesan en el dispositivo donde se ejecuta ese navegador. La página explica las funciones opcionales de red y los envíos deliberados. Lo que sigue es su explicación escrita; abre la dirección para usarla.

## Tus nombres, alturas y el gráfico que forman se **procesan en tu navegador**. No se suben para procesarlos.

Un gráfico de alturas es aritmética y un dibujo: no hay archivo que enviar ni servicio al que preguntar — y el único archivo que esta página acepta, una imagen tuya para poner en la regla, se lee aquí y no va a ninguna parte. El hombre, la mujer, el niño y la niña son ilustraciones de dominio público que viajan con esta página, y el niño y la niña son dibujos de niños de verdad en lugar de adultos hechos pequeños — que es lo que evita que un gráfico de familia se vea mal de una manera que nadie sabe nombrar. Cada paso ocurre en unos cientos de líneas de JavaScript de esta página que puedes leer. No hay función de red de ningún tipo, y eso importa aquí porque lo que escribes es una lista de personas y cuánto mide cada una.

- ✗ Sin subidas
- ✗ Sin cuenta
- ✗ Sin marca de agua
- ✓ Funciona sin conexión
- ✓ Código abierto

## Cómo hacer un gráfico de comparación de alturas

1. **Añade a todos primero y luego preocúpate del aspecto.** Una fila es una figura, un nombre, una altura y un color. El nombre es opcional — un gráfico de dos siluetas sin nombre con sus alturas encima suele ser exactamente lo que alguien quiere — y las flechas de cada fila la mueven a izquierda o derecha si el orden importa.
2. **Escribe la altura como tú la escribas.** `173`, `1.73 m`, `5'8"`, `68 in` y `5 ft 8` se leen todos correctamente. La línea de debajo de la casilla muestra qué se ha entendido, en los dos sistemas, así que una mala lectura se ve antes de dibujarse y no después de imprimirse. Un número solo son centímetros en un gráfico métrico y pulgadas en uno imperial, y un número solo por debajo de tres son metros — nadie mide 1,73 cm.
3. **Elige la figura que corresponde a la persona.** Un niño mide unas seis cabezas y un adulto siete y media, así que un niño dibujado como un adulto encogido se ve mal de una forma difícil de nombrar y fácil de notar. El niño y la niña son dibujos de niños de verdad y no adultos hechos pequeños, y eso es la mayor parte de lo que hace que un gráfico familiar parezca una familia. Cada fila llega además con una altura ya puesta, así que añadir a alguien dibuja a alguien — escribe directamente encima.
4. **Pon algo familiar en el gráfico.** Un número es abstracto y una puerta no. Añadir un solo objeto de un tamaño que todo el mundo conoce — una puerta, una ventana, una pizarra de aula, una máquina expendedora — es lo que convierte un gráfico que enuncia dos alturas en uno que las muestra. El menú tiene veinte, agrupados, y cada uno llega como una fila normal sobre la que puedes escribir tus propios números. Los objetos llevan una anchura además de una altura, así que una puerta es 203 por 81 y no una raya.
5. **O pon encima tu propio dibujo.** **Tu propia imagen** coge un archivo de tu equipo y lo pone en la regla a la altura que le des — lo que hay que usar cuando el gráfico va de un producto, un vehículo o un edificio en lugar de una persona. Un SVG se dibuja con el color de su fila, como cualquier otra figura; una fotografía o un PNG entra tal cual. Los dos conservan sus propias proporciones, y los dos se leen aquí en vez de mandarse a ninguna parte.
6. **Pon la regla en las unidades en las que piensa quien lo lee.** Cambiar entre centímetros y pies reescribe lo que hay en las casillas en lugar de reinterpretarlo, así que el gráfico en sí no se mueve: solo cambia la notación. Si el gráfico es para dos públicos, la altura escrita encima de cada figura va en la unidad del gráfico y la línea de debajo de cada casilla tiene las dos.
7. **El PNG para pegar, el SVG para imprimir.** El PNG es una imagen a la altura en píxeles que hayas puesto, que es lo que quiere una ventana de chat, un documento o una diapositiva. El SVG es el gráfico como instrucciones, así que se imprime nítido a cualquier tamaño y todavía puede recolorearse después con cualquier cosa que abra vectores.

## La versión larga

[Cómo hacer un gráfico de comparación de alturas](https://abox.tools/es/guias/hacer-un-grafico-de-alturas/): Convierte una lista de alturas en una imagen lado a lado: cómo escribir las alturas, qué figura elegir para un niño, por qué un objeto familiar hace más que una tercera persona, y cómo sacar el gráfico como PNG o SVG.

## También en la caja

- [Vista previa del perfil de empresa](https://abox.tools/es/vista-previa-del-perfil-de-empresa/): Escribe los datos y ve cómo quedaría la ficha. Nada se envía para dibujarla.
- [Compresor de imágenes](https://abox.tools/es/comprimir-imagen/): Tú dices el tamaño. Del resto se encarga él.
- [Redimensionador de imágenes](https://abox.tools/es/redimensionar-imagen/): Di el tamaño. Dibuja la caja. Elige el formato.
- [HEIC a JPG](https://abox.tools/es/convertir-heic-a-jpg/): Las fotos que hace un iPhone, en un formato que abre todo el mundo.

## Preguntas

### ¿Se envía a alguna parte algo de lo que escribo?

No. El gráfico lo dibuja JavaScript de esta página, en tu propio dispositivo, y esta herramienta no tiene función de red de ninguna clase — nunca descarga nada y nunca envía nada. La `Content-Security-Policy` de la página nombra todas las direcciones que puede contactar, ninguna de las cuales es nuestra. Vale la pena decirlo claramente aquí porque la entrada es una lista de nombres de personas y de lo que mide cada una, que es más personal que casi todo lo que maneja este sitio.

### ¿Puedo descargar el gráfico?

Sí, como PNG o como SVG, sin marca de agua y sin cuenta. El PNG se dibuja a la altura en píxeles que pongas y es el que se pega en un documento, una diapositiva o un chat. El SVG es el gráfico como instrucciones en lugar de como píxeles: se imprime nítido a cualquier tamaño y puede abrirse y recolorearse más tarde en cualquier editor vectorial. Los dos se hacen a partir del mismo marcado que está en pantalla, así que ninguno puede discrepar de la vista previa.

### ¿Cómo escribo la altura — en centímetros o en pies?

Como quieras, en cualquier fila, de la manera en que la escribas normalmente. `173`, `173 cm`, `1.73 m`, `5'8"`, `5 ft 8 in` y `68 in` se entienden todos, y la línea de debajo de la casilla muestra qué se ha leído en los dos sistemas. Un número solo son centímetros cuando el gráfico es métrico y pulgadas cuando es imperial; un número solo por debajo de tres se toma como metros, porque 1,73 cm no es una altura que nadie escriba.

### ¿Por qué los niños no parecen adultos pequeños?

Porque un niño no lo es. Las proporciones del cuerpo cambian con la edad: un niño de dos años mide más o menos cuatro cabezas y media, uno de ocho seis, y un adulto siete y media — así que la cabeza es casi un cuarto de un niño pequeño y un octavo de una persona adulta. El niño y la niña de aquí son dibujos de niños reales y no una sola silueta reducida, que es por lo que un gráfico familiar parece una familia y no cuatro adultos de tamaños distintos.

### ¿De dónde salen las figuras?

Las cuatro son ilustraciones de otras personas, todas de dominio público: el hombre de pitr, la mujer de Madeleine Price Ball, la niña de OpenClipart-Vectors, y el niño de Ryan Kissinger para la biblioteca NIH BioArt. Cada archivo viaja con esta página en `vendor/` tal como se publicó, así que puedes cotejarlos con los originales. El dominio público no pide nada, que es de lo que se trata: la ilustración acaba dentro de una imagen que te descargas, y una licencia que exigiera atribución le pegaría esa exigencia a tu gráfico.

### ¿Puedo poner mi propia imagen en el gráfico?

Sí — **Tu propia imagen** coge un dibujo o una fotografía y lo pone en la regla a la altura que escribas: un logotipo, un plano, una pieza de maquinaria, un coche, o una foto de la cosa en sí. Sus proporciones son las suyas, así que no hay ancho que rellenar. \
\
Un **SVG** se dibuja en un solo color plano, el que tenga puesto esa fila, porque eso es lo que es el resto del gráfico — así que un dibujo hecho de contornos finos en lugar de formas rellenas sale como un borrón, y para eso esta es la herramienta equivocada. Solo se conservan las *formas*: el archivo se reconstruye desde cero a partir de trazados, rectángulos y círculos, y todo lo que pudiera alcanzar la red — una imagen enlazada, una hoja de estilos, una fuente, un script — se queda fuera. \
\
Una **foto o un PNG** entra tal cual y conserva sus propios colores, así que el color de la fila solo le pone nombre. Se vuelve a dibujar aquí antes de entrar, lo que acota cuánto añade al gráfico y deja atrás los metadatos del archivo. La transparencia se conserva, así que un recorte se sostiene limpio sobre la regla — y una foto trae consigo su fondo, que conviene recortar antes. \
\
Ninguno de los dos archivos va a ninguna parte. Eso importa dos veces, porque el gráfico que descargas es un archivo que quizá le mandes a alguien.

### ¿Por qué no hay un bebé ni un niño pequeño?

No encontramos dibujos de bebés o niños pequeños que cumplieran los requisitos de dominio público y dibujo de esta herramienta. Las figuras incluidas son un niño y una niña, no un catálogo completo. Para un niño menor, ajusta la altura medida o añade una imagen propia adecuada; la regla lleva la medida.

### ¿Cuánta gente puedo poner en un gráfico?

Doce. No es un límite técnico — el dibujo haría treinta encantado — pero pasada la docena las columnas se vuelven más estrechas que los nombres escritos encima y la imagen deja de leerse. Si necesitas más, apagar los nombres te devuelve la anchura, o dos gráficos lo dirán mejor que uno.

### ¿Puedo poner un objeto en el gráfico?

Sí — y la mayoría llegan dibujados. El menú tiene veinte para empezar, en cuatro grupos: puertas y ventanas, escuela y oficina (una pizarra, una mesa, un archivador, una pantalla de proyección), cosas de la ciudad (una máquina expendedora, un contenedor con ruedas, una canasta de baloncesto, un contenedor marítimo de 20 ft) y cosas de casa. Diecisiete de ellos vienen con dibujo — una puerta con su picaporte, un refrigerador con el congelador encima, un sofá que se ve que es un sofá —, y el dibujo se ajusta a la altura y la anchura de la fila, así que los números siguen decidiendo el tamaño y los tuyos, escritos encima, siguen valiendo. Los otros tres son rectángulos sin más, porque no apareció ningún dibujo libre de ellos que fuera a la vez correcto y bien proporcionado, y un dibujo equivocado es peor que un bloque honesto en un gráfico que va de escala. \
\
Algunas de estas medidas son normas de verdad y otras tamaños típicos, cosa que la página dice en voz alta. Un objeto familiar hace más por un gráfico que cualquier cantidad de personas de más: es lo que convierte una comparación en una noción de escala.

### ¿Hay una figura para un perro o un gato?

No, y es un hueco deliberado más que un descuido. Los dos se construyeron — de perfil, de pie, con la cabeza a la altura del hombro, para que lo alto del dibujo fuese la altura escrita al lado, que es donde todo estándar de raza mide a un animal. No salieron lo bastante bien como para publicarlos: un cuadrúpedo visto de lado junto a cuatro personas vistas de frente se lee como un error aunque el dibujo sea bueno. Un rectángulo a la altura de la cruz del animal es honesto mientras tanto.

### ¿Puedo compartir el gráfico con un enlace?

Desde aquí no, y es deliberado. Las herramientas que lo ofrecen lo hacen metiendo la lista entera en la dirección, lo que significa que cada nombre y cada altura acaban en todo aquello por lo que viaja el enlace — los registros de un servidor de chat, un escáner de correo, el historial de alguien, un servicio que va a buscar la vista previa del enlace. Descarga la imagen y manda eso: dice lo mismo y no lleva ninguna lista consigo.

### ¿Es gratis? ¿Puedo usar el gráfico comercialmente?

Es gratis, no hay cuenta ni marca de agua, y puedes poner el resultado en un informe, una presentación, un anuncio o un producto. El sitio lleva publicidad, que es lo que lo paga. Nada de un gráfico que hagas aquí es nuestro, y no se guarda nada.

### ¿Por qué la regla va de diez en diez y no de uno en uno?

Porque el espaciado se elige a partir de cuántas líneas puede llevar la imagen y no de un número fijo. Un gráfico de dos adultos lleva una línea cada diez centímetros; pon una canasta de baloncesto y las líneas se van a veinticinco, porque noventa líneas en una imagen son un velo gris y no una regla. En pies y pulgadas la escalera es de una, tres, seis y doce pulgadas, así que las líneas caen en pulgadas enteras en lugar de cerca de ellas.

### ¿Puedo poner el gráfico en una diapositiva oscura?

Sí. Pon el fondo del color sobre el que va a ir y la regla y el texto cambian entre oscuro y claro para que le vaya bien — calculado a partir de la luminancia del color y no adivinado. Después marca «sin fondo alguno» si quieres la imagen transparente: el color que elegiste sigue decidiendo la tinta, así que un gráfico transparente que va a una diapositiva azul marino sale legible sobre ella.

### ¿Funciona sin conexión?

Sí. Carga la página una vez, desconéctate de internet y sigue funcionando. Esa es también la forma más simple de demostrar que no se sube nada: una herramienta que mandara tu lista fuera para que le dibujaran un gráfico se pararía en el momento en que te desconectaras.

## Cómo se comprueba la promesa de privacidad

- **El procesamiento se hace en este navegador.** La herramienta procesa entradas y resultados en el navegador. Su código no los sube para procesarlos. Content-Security-Policy limita recursos y destinos, pero los hosts permitidos pueden recibir solicitudes: no inspecciona sus datos ni prueba por sí sola que nada se envíe. Compara código y solicitudes de la operación concreta o complétala desconectado.
- **Aquí nada descarga nada.** No hay ningún `fetch`, ningún `XMLHttpRequest` ni ningún `sendBeacon` en todo `src/`. La Content-Security-Policy nombra todas las direcciones que esta página puede contactar, y ninguna de ellas es nuestra.
- **Tampoco se recuerda nada entre una visita y otra.** El gráfico vive en la página y en ningún otro sitio. Cierra la pestaña y la lista desaparece: no hay cuenta que la guarde, ni cookie que la lleve, ni nada escrito en el almacenamiento de este navegador — que es también por lo que un gráfico que quieras conservar es un gráfico que te descargas.
- **El enlace no lleva el gráfico.** Varias herramientas como esta meten la lista entera en la barra de direcciones para poder compartirla, y eso convierte cada nombre y cada altura en algo que registra todo aquello por donde pasa el enlace — un servidor de chat, un escáner de correo, el historial de alguien. La dirección de esta página no cambia nunca mientras escribes.
- **El PNG se hace a partir del SVG que está en pantalla.** La descarga no es una segunda representación que pudiera discrepar de la vista previa. El mismo marcado se le entrega al navegador y se pinta sobre un lienzo, que es también por lo que puede hacerse con la red desconectada: no hay ninguna fuente que descargar ni ninguna imagen que cargar dentro.
- **Una imagen que añadas se lee aquí, y nunca se envía.** El archivo no sale nunca de esta página — se lee con el propio `FileReader` del navegador y se analiza en un documento inerte que no ejecuta nada. Lo que se dibuja no es ese archivo: `src/import-svg.js` construye un dibujo NUEVO a partir de una lista blanca de formas y geometría, así que un script, una hoja de estilos, una fuente, una imagen enlazada o una referencia a otro documento se queda fuera en vez de pasar. Eso importa dos veces, porque el gráfico que descargas es un archivo que mandas a otra gente: cualquier cosa que hubiera sobrevivido sería el navegador de ellos llamando al servidor de un desconocido, días después, desde algo que escribió esta página. Una fotografía o un PNG no es un programa y no tiene nada que reconstruir: lo lee el propio decodificador del navegador, y se vuelve a dibujar aquí en un canvas antes de pasar al gráfico. Ese redibujado es lo que deja atrás los metadatos del archivo — la cámara, el lugar, el perfil, lo que hubiera dentro —, porque nada de eso sobrevive a un canvas. Lo que acaba en el gráfico es una imagen que codificó esta página, escrita como datos y no como una dirección, así que el gráfico sigue sin apuntar a nada.
- **Las ilustraciones están aquí, no se descargan.** Las cuatro figuras son ilustraciones de dominio público, y se sirven desde este origen junto con el resto de la página — sin fuente de iconos, sin CDN, sin hoja de sprites traída del servidor de otro mientras escribes. Es también por lo que el gráfico sigue dibujándose con la red desconectada.
- **Qué carga Google, y qué no llega a ver.** Los scripts de publicidad y de medición vienen de Google, y el botón de donación de Buy Me a Coffee. A ninguno se le entrega un nombre ni una altura. Cada línea que convierte tu lista en una imagen se sirve desde este origen y está en el repositorio.
- **Funciona sin conexión.** Desconecta la red y la herramienta sigue igual, porque nunca hubo un paso de red en ella. Es la prueba más simple de todas.

**Compruébalo tú.** Nada de lo anterior hay que aceptarlo por fe. Esta página se genera a partir de las plantillas y la configuración del repositorio, con un script de compilación que puedes leer y ejecutar por tu cuenta, y el resultado se publica en la rama `dist`. Así puedes comparar lo que se sirve con lo que sale de compilar las fuentes: https://github.com/A-Box-of-Tools/website

Los archivos por los que conviene empezar son `config/site.toml`, donde está la Content-Security-Policy, `src/traced.js` y `vendor/` para las cuatro figuras y de dónde salió su ilustración, `src/figures.js` para la lista con la que se monta el menú, `src/units.js` para cómo una altura escrita se vuelve número y cómo se rotula la regla, `src/chart.js` para la maquetación, `src/save.js` para las dos descargas — que son el SVG que está en pantalla, y ese mismo SVG pintado sobre un canvas — y `src/import-svg.js` para la lista blanca con la que se reconstruye un SVG subido, que es el único archivo de aquí donde equivocarse importaría.