Recorte em A3/A4: Solução Web para Impressão de Painéis em Grande Formato

Uma solução web de página única desenvolvida para automatizar o fatiamento de imagens, ilustrações e PDFs em papéis formato A3 e A4, permitindo a criação simplificada de painéis e murais, visto a necessidade percebida de profissionais que faziam recorte de ilustrações em EVA ou outros materiais usando o papel como guia.

📌 Visão Geral & Contexto

• Meu papel: Idealizador e desenvolvedor assistido por IA
• Contexto: Comunicação institucional
• Escopo: Solução Web App, responsiva e mobile-first
• Link Oficial: Aplicação Online na Vercel
• Ferramentas & Stack: HTML5, CSS3, JavaScript (ES6+), Fabric.js, PDF.js, jsPDF, Cropper.js, Hammer.js, JSZip, Git, GitHub, Vercel, Engenharia de Prompt / IA.

🛠️ A Necessidade do Usuário

Observando a dinâmica de organizações que estruturam com frequência painéis e murais temáticos, como escolas, identifiquei uma falta operacional constante enfrentada por equipes de secretaria, educação e eventos na criação dessa forma de comunicação visual.

Para criar peças informativas e decorativas que frequentemente passavam de 1 metro de largura, a equipe precisava fatiar e imprimir imagens em folhas de tamanho padrão (A4 ou A3), que eram os únicos formatos disponíveis nas impressoras locais das filiais.

Principais Desafios

• Processo manual suscetível a erros: Sem uma ferramenta própria, as equipes faziam adaptações manuais em editores genéricos tentando fatiar imagens “no olho”, ou até nem usavam isso, só viam a referência e tentavam, geralmente com muita dificuldade.
• Desperdício de recursos: Múltiplas impressões incorretas geravam desperdício desnecessário de papel, tinta e tempo das equipes operacionais e administrativas.
• Desalinhamento visual: Margens e proporções ficavam desalinhadas na montagem física na parede ou nos painéis.

💡 A Solução

Para eliminar a dependência de softwares profissionais complexos (como Photoshop ou CorelDRAW) e resolver a dor direto na fonte, desenvolvi o Recorte em A3/A4 — uma Single Page Application web leve, gratuita e intuitiva.

A ferramenta permite a qualquer colaborador importar uma arte ou PDF, configurar um grid de páginas em tempo real e exportar os arquivos fatiados e prontos para impressão.

🔗 Acesse a aplicação em produção: recorte-cartazes.vercel.app

⚙️ Principais Funcionalidades e Arquitetura

O projeto foi desenhado focando em facilidade de uso no celular e no computador, com interface orientada a componentes visuais modernos (bottom-sheets, barras de ferramentas flutuantes e modais simples).

[ Upload (Imagem / PDF) ] ---> [ Engine Canvas (Fabric.js + PDF.js) ] ---> [ Grid & Layout A3/A4 ] ---> [ Compilador PDF / ZIP (jsPDF) ]

📐 Grid Configurável e Escala em Tempo Real

• Seleção flexível de papel (A3 ou A4) e orientação (Retrato ou Paisagem).
• Ajuste dinâmico do número de Linhas e Colunas por sliders simples.
• Cálculo automático de dimensões: A aplicação indica a medida real final do painel em centímetros (ex: 120 cm × 80 cm), eliminando réguas e cálculos manuais.

📄 Renderização e Processamento de PDFs (PDF.js)

• Importação nativa de documentos PDF diretamente do dispositivo.
• Importação Inteligente: Em PDFs com múltiplas páginas, o usuário pode escolher renderizar uma única página ou distribuir todas as páginas automaticamente nos quadros do grid.

🎨 Canvas Interativo e Design Integrado (Fabric.js & Cropper.js)

• Edição de Texto Rich-Text: Inserção de frases com mais de 20 fontes do Google Fonts carregadas dinamicamente, ajuste de espaçamento de letras e paleta de cores.
• Biblioteca de Formas Geométricas: Inserção de retângulos, círculos, estrelas, corações e balões de fala em vetor.
• Corte de Imagens (Crop): Ferramenta integrada de recorte para ajustar fotos e elementos antes do posicionamento.
• Suporte Touch & Gestos (Hammer.js): Recursos de pinch-to-zoom, pan (modo mão) e seleção tátil otimizados para telas de celular e tablets.

🖨️ Exportação Flexível e Pronta para Impressão (jsPDF + JSZip)

• PDF Único Compilado: Gera um único arquivo PDF com todas as folhas do painel organizadas na sequência exata de impressão.
• Exportação Fatiada em Pacote (ZIP): Opção para baixar as páginas individualmente em imagens JPG ou PDFs separados.
• Projetos Salváveis (JSON): Salva e recarrega arquivos de projeto editáveis para reutilização em campanhas futuras.

🧠 Processo de Desenvolvimento & Deployment (CI/CD)

Este projeto foi um real laboratório com a IA! Saí do processo simples e fraco de utilizar chatbots, e passei a compreender o uso de CLI ou IDE integrada, com o desenvolvimento de skills e mapas do projeto para o entendimento da Inteligência Artificial. Com conhecimentos em HTML, CSS e lógica de programação em JavaScript, utilizei técnicas de engenharia de prompt e desenvolvimento assistido para projetar a arquitetura completa e integrar bibliotecas complexas de manipulação de Canvas HTML5, vetores e exportação binária.

• Arquitetura & Engenharia de Prompts: Modelagem da lógica de estados (Undo/Redo), gerenciamento de memória no Canvas e cálculo de viewport transform.
• Otimização de UX Mobile: Ajustes de viewport com 100dvh, integração de regras de safe-area para iOS e gerenciamento de eventos de toque para evitar rolagem indesejada da página durante o desenho.
• Versionamento e Deploy Contínuo: Código versionado no GitHub e integrado à Vercel para deploy automatizado (CI/CD), permitindo atualizações ágeis e alta disponibilidade com monitoramento de métricas e analytics em tempo real.

📈 Impacto e Resultados Medíveis

• Adoção integral: A ferramenta tornou-se o padrão para 50+ profissionais.
• Ganho de eficiência: Redução drástica no tempo de montagem dos painéis, de horas de tentativa, impressão e erro para poucos minutos de configuração e impressão.
• Sustentabilidade e economia: Eliminação de impressões perdidas por erro de escala ou corte.
• Autonomia operacional: Empoderamento das equipes locais, que passaram a criar materiais de alto impacto visual sem depender de uma equipe de design para adaptações de formato.

📝 Lições Aprendidas

Este projeto demonstrou como o alinhamento entre visão de produto, empatia pelo usuário final e a utilização estratégica de ferramentas de IA permite construir soluções de engenharia robustas e com impacto real no dia a dia organizacional.