Elysia Tools
Navegação
Workflow Playbook
Compare versões de uma página em janelas equivalentes, investigue alterações de layout e cor e entregue capturas e decisões revisadas para orientar a publicação.
Temas
Este roteiro atende desenvolvimento e testes que avaliam um redesenho específico. Entrega matriz, capturas, achados explicados e decisão humana, não uma suíte executada automaticamente. Use páginas públicas autorizadas nos capturadores de servidor. Estados privados exigem um método externo aprovado, sem credenciais na URL.
Preserve a versão anterior ou suas evidências originais antes da implantação. Registre versão, dados, idioma, fontes, janela, modo de captura, preferência de cor e espera. Mantenha ferramenta e ambiente. Sem referência, uma captura nova não demonstra ausência de regressão.
Larguras de 375, 768, 1024 e 1440 pixels com altura combinada são exemplos, não padrões universais. A ferramenta de pontos de quebra captura uma URL em duas a seis larguras. Use o modo adjacente. Seus mapas comparam imagens escaladas, não versões históricas ou componentes reconhecidos semanticamente.
Revise cortes de texto, sobreposições, transbordamento horizontal inesperado e conteúdo ausente. Colunas e quebras de linha podem mudar corretamente. A captura de janela não cobre todo o documento; revise áreas restantes por outro meio. Guarde ZIP e relatório sem transformar porcentagem de pixels em decisão de publicação.
Capture cada versão com Website Screenshot e confira os arquivos com metadados. Para dimensões arbitrárias, evite o modo móvel: atualmente ele usa uma janela fixa de 375 por 667. Prefira PNG sem perda, fundo opaco e canais compatíveis.
Image Difference estica entradas desiguais para uma tela comum. Recapture em vez de tratar esse redimensionamento como equivalência. A ferramenta não entende semântica de layout; canais incompatíveis também exigem interromper e normalizar externamente ou capturar novamente.
Mantenha os originais completos. Recortes precisam de coordenadas, dimensões e contexto dos dois lados. Um elemento deslocado pode sair da mesma região; volte à imagem inteira. Recortar não garante remoção segura de dados confidenciais.
Confira animações, datas, imagens remotas, carregamento de fontes e dados. Esperar mais não garante estabilidade. Ocultar elementos aplica display none e pode reorganizar a página; documente e não exclua conteúdo necessário para aceitação.
A paleta extraída é uma amostra, não prova do par texto/fundo. Confirme valores renderizados antes do contraste, considerando transparência, gradientes e suavização. Um par aprovado não certifica a acessibilidade da página. Separe mudança desejada, defeito confirmado, ruído de captura e caso pendente.
Para cada achado registre largura, posição, originais, coordenadas opcionais, esperado, observado, responsável e reteste. Confira traduções longas, áreas fora da tela e interação em testes externos autorizados. Capturas não comprovam teclado, menus, formulários ou toque.
Entregue arquivos locais de referência e candidato, relatórios, diferenças, matriz e decisão de aceitar, corrigir, adiar ou bloquear. Calcule SHA-256 dos arquivos compartilháveis finais; identifica cópias, não correção. Os fluxos relacionados atendem inventário de estilos, revisão ampliada de acessibilidade e preparação tipográfica.
Guia de fluxo de trabalho
Registre a matriz, mantenha ajustes iguais e confira as dimensões reais dos arquivos.
Use pontos adjacentes, revise capturas e métricas de transbordamento e guarde relatório e ZIP.
Confirme dimensões e canais antes das diferenças, preservando contexto ao recortar regiões opcionais.
Trate a paleta como pista e confirme valores de texto e fundo quando precisar avaliar contraste. Separe intenção, defeito e casos não testados.
O relatório de pontos de quebra observa uma versão em várias larguras. A comparação de versões exige capturas separadas sob condições equivalentes.
Guarde originais completos e registre coordenadas e contexto dos recortes. Não corte um transbordamento para obter aprovação.
Confira dados, fontes e conteúdo dinâmico primeiro. Investigue paleta e contraste apenas quando uma mudança de cor justificar esse ramo.
Guarde capturas reais de reteste, decisões e limites; calcule SHA-256 dos arquivos locais finais.