Fluxo
Preparar e testar um QR code para um folheto impresso
Coloque um endereço HTTPS estável num QR code pronto para impressão e decodifique o PNG e o SVG antes de imprimir o folheto.
Objetivo
Gerar um QR code que abre a página de contato da Kitly e confirmar que os arquivos baixados contêm esse endereço antes de qualquer impressão.
Esta página é HTML estático. O Gerador de QR Code precisa de JavaScript porque desenha o código no navegador. Dá para ler os ajustes, o endereço e os limites com JavaScript desligado. O gerador não envia o conteúdo.
Entradas
O conteúdo é https://kitlyapp.com/en/contact/, com 32 caracteres, incluindo a barra final. Os arquivos abaixo foram gerados com qrcode 1.5.4, a mesma biblioteca e as mesmas opções que a ferramenta usa: correção Q, margem 4, 320 px, frente #171313ff e fundo #ffffffff.
Decisões
Codificar a página final, não um link curto
O folheto deve continuar abrindo a página de contato sem um registro no servidor. Um QR code estático não muda depois de impresso. Este guia não cria um link curto.
Trocar só a correção de erro
O gerador começa em https://kitlyapp.com/, 320 px, margem 4, correção Média e as cores #171313 e #ffffff. Para este folheto, substitua o endereço e mude a correção para Quartil. Deixe tamanho, margem e cores como estão.
Criar um link curto só em outra visita, e à mão
Se mais tarde o código precisar conter um endereço kitlyapp.com/s/, crie-o no Encurtador de URL, copie o HTTPS resultante e cole no campo do QR code. As duas ferramentas não passam o endereço. A página do encurtador não edita nem expira o link.
Sequência verificada
Não imprima o valor inicial do campo. Se ele continuar https://kitlyapp.com/, o código abre a página inicial, não o contato.
- Abra o Gerador de QR Code. Substitua o texto por https://kitlyapp.com/en/contact/. O resumo deve mostrar 32 caracteres.
- Deixe o tamanho em 320 px e a margem em 4 zona quieta. Mude a correção de erro de Média para Quartil. Deixe a frente em #171313 e o fundo em #ffffff.
- Baixe o PNG e o SVG. A ferramenta nomeia os arquivos kitly-qr-code.png e kitly-qr-code.svg. As cópias desta página usam nomes descritivos e foram geradas com as mesmas opções.
- Antes de imprimir, decodifique os dois arquivos. Nesta verificação, o BarcodeDetector do Chrome leu o endereço de contato no PNG e no SVG rasterizado em 320×320.
- Imprima uma prova e escaneie com um telefone. A decodificação deste guia foi na tela, não no papel.
- Não crie um link curto para repetir este exemplo. O Encurtador de URL fica de fora do resultado medido.
Resultado observado
Gerado com qrcode 1.5.4 pelas mesmas chamadas da ferramenta, toDataURL para o PNG e toString para o SVG. Decodificado no Headless Chrome 154.0.8037.99 com BarcodeDetector. Nenhum link curto foi gravado.
Conteúdo decodificado
https://kitlyapp.com/en/contact/| Endereço | https://kitlyapp.com/en/contact/ — 32 caracteres, com a barra final. |
|---|---|
| Ajustes | 320 px, margem 4, correção Q (Quartil), frente #171313, fundo #ffffff. A biblioteca recebe #171313ff e #ffffffff. |
| PNG | 320×320, 2267 bytes, mostrado como 2.2 KB, image/png. O BarcodeDetector leu o endereço de contato. |
| SVG | 320×320, 1643 bytes, mostrado como 1.6 KB. Rasterizado em 320×320, o BarcodeDetector leu o mesmo endereço. |
| Contraste claro, não publicado | Um PNG separado com frente #f2f3f4 sobre #ffffff também foi decodificado pelo mesmo detector. Ele não está nesta página, porque um acerto na tela não recomenda essa cor para impressão. |
Limites
- A decodificação na tela não prova que a página impressa vai escanear. Imprima uma prova.
- O teste com frente #f2f3f4 ainda decodificou na tela. Use a frente escura #171313 deste guia.
- O conteúdo é estático. Se o endereço mudar, imprima de novo. O QR code não consulta um destino editável.
- O encurtador aceita slugs opcionais de 3 a 64 letras minúsculas, números e hífens, recusa destinos locais ou privados e aplica 10 pedidos por minuto e 60 por hora. Não há edição, expiração nem exclusão na interface.
- Este guia não criou um link de produção. Campo vazio apaga o QR code. Este endereço de 32 caracteres foi gerado sem erro.
Ferramentas neste idioma
Abra cada ferramenta neste mesmo idioma. O endereço não passa de uma para a outra.
- Gerador de QR Code Desenha o PNG e o SVG locais para o endereço de contato com os ajustes de impressão acima.
- Encurtador de URL Fora deste resultado. Use só se o código impresso precisar conter um endereço /s/, e cole esse endereço no gerador você mesmo.