Contenido del artículo

Un QR por dentroEl escudo: varios intentos para que cupieraDibujar el QR alrededor del escudoQué cuidar al decorar un QRUn enlace más corto para un código más livianoLo que acompaña al códigoComprobar antes de dar algo por buenoLo que conviene recordar

Hice una mejora en el código QR de AURA, un sistema de registro de asistencia a eventos de la Universidad de La Guajira hecho en el semillero SIIS2, para que llevara el escudo institucional en el centro y fuera mejor visualmente. En AURA cada evento tiene su QR, que los asistentes escanean para registrar su asistencia, y durante meses fue el que genera la librería por defecto, cuadros negros, 200 píxeles, sin ninguna señal de a quién pertenecía, de modo que funcionaba, pero podía ser de cualquier sitio.

¿Cómo puede leerse un QR al que le tapas el centro? Porque guarda la información repetida, como si escribieras la dirección de tu casa dos veces en el sobre: si una parte se mancha, todavía se entiende. Para ver hasta dónde llega esa repetición, conviene empezar por cómo está hecho un QR.

Un QR por dentro

El QR de AURA tiene 49 × 49 cuadritos, 2.401 en total, que se llaman módulos, y cada uno es claro u oscuro; esa secuencia de unos y ceros es el enlace. Los tres cuadros grandes de las esquinas, que llaman ojos, le indican al lector dónde empieza el código y cómo está girado, y en códigos más grandes aparecen además unos cuadros pequeños, los patrones de alineación, con los que corrige la inclinación cuando lo fotografías de lado.

Además del enlace, el QR guarda información repetida, y por eso se puede leer aunque le falte una parte. Cuánta repetición lleve se elige con un nivel de protección, y hay cuatro: el más bajo tolera perder cerca de 7 de cada 100 cuadritos, el siguiente cerca de 15, el tercero cerca de 25 y el más alto cerca de 30. Yo usé el tercero. Más protección significa más cuadritos para guardar el mismo enlace, o sea un código más grande y más denso. En el control de abajo esos niveles se llaman L, M, Q y H, que es como los nombra el estándar.

Así que tapar el centro con un logo no es una trampa, el lector reconstruye lo que falta, y el límite es cuánto del código sacrificas. Pruébalo tú mismo:

Prueba: ¿cuánto puede tapar el escudo?

Mueve el control y mira qué niveles de protección todavía lo aguantan.

Lado del hueco

31 %

Tapa 9,6 % del área

Nivel LNo aguanta

Nivel MAguanta

Nivel QAguanta

Nivel HAguanta

Volver a mi elección (31 %)

Aproximación para ilustrar: la recuperación real depende de qué módulos se tapan. Mi elección en AURA fue un hueco de 15 módulos sobre 49 de lado.

El escudo: varios intentos para que cupiera

Yo solo tenía el logo como imagen PNG, a color y con un trenzado bastante complejo.

Quería una sola tinta, del mismo color del código, para que el escudo se leyera como parte del QR y no como un sello pegado encima. Eso me obligó a vectorizarlo.

La primera versión fue la fiel: seguí el contorno del original, con sus arcos, el gancho, el trenzado y las cintas. Era la más parecida, pero en los pocos milímetros que ocupa en el centro de un QR ese detalle se volvía ruido. Luego hice una simplificada, redibujada con geometría limpia: tres arcos y un trenzado regular. Se veía ordenada, pero al simplificar perdía los rasgos que hacen reconocible el escudo, y dejó de parecerse al de la Universidad. Probé después una versión pixelada, y también una con píxeles más gruesos. Me quedé con la primera.

El hallazgo que hizo funcionar la versión pixel fue medir el paso real entre las bandas del logo original, unos 16 píxeles. Si alineas la cuadrícula a ese ritmo, cada banda ocupa dos celdas y cada separación una, y los contornos caen justo en los huecos. Así salió una cuadrícula de 50 × 67 celdas. De paso, el escudo quedó emparentado con el lenguaje del propio QR, que también está hecho de módulos.

Dibujar el QR alrededor del escudo

Para saber qué módulos van oscuros usé el codificador que ya traía la aplicación. El dibujo lo hice yo, módulo por módulo, para controlar el aspecto: círculos en vez de cuadrados, los tres ojos con esquinas redondeadas, todo en el azul institucional, y un hueco en el centro con una placa blanca para el escudo.

$matrix = Encoder::encode($url, ErrorCorrectionLevel::Q())->getMatrix();

// Cada módulo oscuro se dibuja como círculo, salvo los ojos, los patrones de
// alineación (van sólidos) y el hueco donde va el escudo.
if ($matrix->get($c, $r) !== 1 || $isFinder($r, $c) || $inHole($r, $c) || $inAlign($r, $c)) {
    continue;
}
$dots .= sprintf('<circle cx="%s" cy="%s" r="%s"/>', /* ... */);

El tamaño del hueco es una sola constante:

/** Fracción del lado (en módulos) que ocupa el hueco del escudo. */
private const HOLE = 0.27;

Con los enlaces de producción el código queda en 49 cuadritos de lado. El 27 % de 49 son 13,2, y el código lo sube hasta 15 para que el hueco quede centrado (49 es impar, así que el hueco también tiene que serlo). Son 15 × 15 de 49 × 49, cerca del 9 % del área. El nivel que usé, el tercero (la Q del código), permite recuperar cerca del 25 %, así que el escudo tapa bastante menos de lo que el código aguanta. Podía haber usado el más alto (H), que aguanta aún más, pero ese llevaba el código a 57 cuadritos de lado: cuadritos más pequeños para el mismo tamaño impreso, y por tanto más difíciles de leer.

Qué cuidar al decorar un QR

Decorar un QR tiene un límite: el lector necesita reconocer ciertas piezas aunque el resto cambie de aspecto. Hay tres cosas que conviene tener en cuenta.

La primera es que cambiar los cuadrados por puntos no cambia los datos, pero deja más espacio en blanco entre módulos, y con un tamaño pequeño o una foto desenfocada eso puede dificultar la lectura. Conviene comprobar el código reducido y con desenfoque.

La segunda es que lo que orienta al lector no se decora. Los tres ojos y los patrones de alineación son su guía. Por eso los dibujé sólidos, con las esquinas redondeadas pero sin puntos sueltos: si esas piezas se vuelven ambiguas, el lector no sabe cómo orientar el resto.

La tercera es que el hueco tiene techo. El nivel de protección fija cuánto puedes tapar: con el que usé, cerca del 25 %. Mi hueco ocupa cerca del 9 % del área. Conviene dejar margen, porque la protección también tiene que absorber suciedad, dobleces o una impresión pobre, y si el hueco se come todo el margen, cualquier otro daño ya no se puede compensar.

Para evitar el problema: dibuja sólidos los elementos de orientación, no pases del hueco que tolera el nivel de protección y comprueba el resultado con un lector, a varios tamaños y con desenfoque, antes de darlo por bueno.

Un enlace más corto para un código más liviano

Un QR es más denso cuanto más largo es el texto que guarda, y los enlaces de los eventos eran largos porque incluían el título completo. Revisé los 573 eventos que había: el QR típico tenía 53 × 53 módulos y el más grande llegaba a 81 × 81.

Rediseñé el enlace con una ruta corta (/e/), el título recortado a 40 caracteres sin partir palabras, la fecha y un sufijo aleatorio de cinco caracteres que evita las letras que se confunden, como la o con el cero o la l con el uno. Con ese formato ningún evento pasa de 49 × 49 módulos. Los eventos anteriores conservaron su enlace y la ruta antigua sigue funcionando, para no romper los QR que ya estaban impresos.

Lo que acompaña al código

El escudo me hizo preguntarme qué más debía ir junto al QR. Le di contexto a quien escanea: la fecha, la hora de inicio, el lugar y una instrucción breve, “Escanea para registrar tu asistencia”. Descarté otros elementos, como la hora de finalización y una franja de colores, porque recargaban la pieza sin ayudar a nadie a escanear.

Terminé con dos versiones del mismo componente. En la página del evento se muestra una tarjeta compacta, porque el título ya está escrito arriba. La que se descarga o se comparte por WhatsApp y correo es la completa: lleva el encabezado de la Universidad, el escudo y el título del evento, y sale en alta resolución con un margen blanco, lista para imprimir o proyectar.

Comprobar antes de dar algo por bueno

Antes de darla por buena, decodifiqué la tarjeta con un lector automático en condiciones adversas: eventos reales con títulos largos, en mayúsculas o sin lugar, escalas desde el 60 % hasta cuatro veces el tamaño original y desenfoques que simulan una foto movida. Todas las variantes devolvieron el enlace correcto. Después la escaneé con celulares y se leyó bien, aunque no puedo asegurar que ocurra con todos los modelos.

Lo que conviene recordar

Un QR aguanta que le tapen una parte porque guarda información repetida, pero todo lo que le quitas es protección que ya no tiene para otros daños. Una versión más simple de un logo no siempre lo representa mejor: la simplificada del escudo era la más limpia y dejó de parecerse al de la Universidad. Y acortar el enlace fue una mejora importante en limpieza, porque un texto más corto necesita menos cuadritos.

Queda una limitación que prefiero dejar dicha: el escudo que usé es una vectorización mía, no el archivo oficial de la oficina de comunicaciones, y si llega ese archivo, el sistema está preparado para reemplazarlo.