Criador de tier list

O que é uma tier list: e o que ela não é

Uma tier list agrupa itens comparáveis em faixas ordenadas, como S, A, B e C. Uma faixa mais alta normalmente indica maior preferência, melhor desempenho ou maior adequação ao critério escolhido. A ferramenta não calcula uma pontuação nem decide onde cada item deve ficar.

Por isso, uma tier list é diferente de outros dois quadros comuns:

Use uma tier list para opiniões e avaliações comparativas: álbuns favoritos, opções de produtos, personagens de jogos, receitas para repetir ou ideias a priorizar. Use uma lista de verificação para acompanhar conclusões e um quadro Kanban quando os itens passam por etapas de trabalho.

Escolha faixas úteis antes de classificar

Os rótulos padrão de S a F são uma convenção, não uma obrigação. Renomeie-os de acordo com a decisão: Excelente / Bom / Talvez / Ignorar, Primeira opção / Reserva / Inadequado ou qualquer outra escala de significado claro. É possível usar até 12 faixas.

Defina o critério antes de mover os itens. Classificar por “melhor custo-benefício” pode produzir um quadro muito diferente de “melhor qualidade”. Se outras pessoas só verão a imagem exportada, um título preciso e nomes de faixas descritivos facilitam a compreensão do resultado.

Os itens de uma mesma faixa também podem ser reordenados. Use essa ordem se quiser indicar uma preferência da esquerda para a direita; caso contrário, considere equivalentes todos os itens da faixa.

Itens de texto e imagens locais

O quadro aceita até 100 itens no total, incluindo no máximo 60 imagens. Itens de texto funcionam bem para nomes, opções e ideias. As imagens são normalizadas no navegador para que dimensões diferentes caibam em blocos previsíveis e metadados desnecessários não sejam levados ao projeto salvo.

Os formatos de origem aceitos são PNG, JPEG e WebP. Cada arquivo pode ter até 8 MiB, nenhum lado pode exceder 8192 pixels e a imagem decodificada pode conter no máximo 16 megapixels. Quando necessário, imagens aceitas são redimensionadas localmente para até 512 × 512 pixels. Os dados de imagem normalizados são limitados a 32 MiB por projeto.

URLs de imagens remotas e uploads de SVG não são aceitos de propósito. Trabalhar apenas com imagens raster locais decodificadas evita recursos externos indisponíveis, erros de origem cruzada no Canvas e conteúdo SVG/XML ativo. O File Upload Cheat Sheet da OWASP recomenda permitir apenas os formatos necessários, impor limites de tamanho, verificar além do tipo MIME declarado e regravar imagens como camadas de defesa de upload.

Arrastar é opcional

Arrastar e soltar é conveniente, mas não é a única forma de classificar. Coloque o foco em um item e use os controles de movimentação ou pressione Enter ou Espaço para entrar no modo de movimentação pelo teclado. As setas mudam a faixa e a posição sugeridas; Enter ou Espaço confirma, e Escape cancela.

Isso também torna o editor prático no celular, onde arrastar com precisão pode ser difícil. A orientação do W3C sobre movimentos de arrastar no WCAG 2.2 explica por que uma função baseada em arrastar precisa de uma alternativa mais simples de ponteiro. Aqui, o mesmo movimento pode ser feito arrastando, pelo teclado e com clique ou toque.

O que é salvo neste navegador

O título, as faixas, os textos dos itens, os dados das imagens e a classificação ficam no armazenamento deste navegador, neste dispositivo. Eles não são colocados na URL da página nem enviados ao servidor como dados do editor. A cópia de recuperação local usa IndexedDB, portanto uma atualização comum da página pode restaurar seu trabalho.

Recuperação local não é armazenamento em nuvem. Outro navegador ou dispositivo não consegue ver o projeto, limpar os dados do site o remove e alguém que use o mesmo perfil do navegador pode conseguir reabri-lo. Use Limpar projeto em um dispositivo compartilhado e exporte o JSON do projeto quando quiser um backup deliberado.

JSON, PNG e SVG têm finalidades diferentes

A importação de JSON é validada antes de substituir o projeto atual. Um arquivo malformado, incompatível ou grande demais não altera o projeto aberto. O JSON do projeto é limitado a 48 MiB.

O PNG é desenhado diretamente no navegador com as imagens locais normalizadas. O método padrão do navegador canvas.toBlob() cria o download. Como imagens remotas não são usadas, o Canvas não fica contaminado por dados de origem cruzada e continua exportável.

A exportação SVG é gerada a partir de um conjunto pequeno e não interativo de formas, textos e elementos de imagem. Os pixels dos itens PNG, JPEG ou WebP são incorporados ao SVG, sem serem vetorizados. A MDN documenta que o elemento SVG <image> exibe imagens raster. O arquivo exportado não copia SVG arbitrário enviado pelo usuário, scripts, links ou HTML.

Limites para uma exportação confiável

As larguras de exportação são 800, 1200, 1600 ou 2400 pixels. O PNG pode ser gerado em 1× ou 2× quando o bitmap resultante permanece dentro de 8192 pixels por lado e 16 × 1024 × 1024 pixels (cerca de 16,8 megapixels). Se uma exportação em 2× exceder um limite seguro do navegador, a ferramenta explica o problema em vez de reduzir o quadro silenciosamente. A exportação SVG segue o mesmo limite de segurança de 48 MiB para projeto e arquivo.

Por padrão, itens não classificados não aparecem na imagem final. Ative Incluir itens não classificados para renderizá-los como uma última faixa neutra. Sempre confira a prévia: um título muito longo, muitas faixas ou muitos itens podem deixar um quadro tecnicamente válido difícil de ler quando compartilhado em tamanho pequeno.

Erros comuns em tier lists

• Mudar o critério no meio do processo. Escreva a comparação no título antes de classificar.
• Usar nomes de faixa pouco claros. Rótulos como “Talvez” e “Evitar” comunicam mais do que cores sem explicação.
• Tratar uma faixa como pontuação exata. Os itens de uma faixa compartilham uma categoria; a distância para outra faixa não é uma medida.
• Esquecer os itens não classificados. Eles não entram automaticamente em uma exportação final.
• Compartilhar apenas o arquivo do projeto. JSON serve para reabrir o editor; use PNG ou SVG quando a outra pessoa só precisa ver o resultado.