Mistério Modelos HTML

Templates HTML de mistério editáveis para sites ricos em evidências

Os templates HTML de mistério chegam com a marcação necessária para uma investigação pronta para uso. Não é preciso editar o código-fonte HTML para personalizar um modelo no Nicepage, e o resultado pode ser exportado como arquivos HTML para o seu próprio servidor. O formato é ideal para casos montados a partir de evidências mistas, em que o depoimento de uma testemunha, uma pista cifrada e a foto de uma prova necessitam, cada um, de seu próprio tipo de bloco.

A marcação por trás de cada arquivo de caso

Um conjunto de componentes reutilizáveis costuma realizar a maior parte do trabalho em um template HTML de mistério:

1. Um header de arquivo de caso contém o número do caso, o título da investigação e uma data. Um boletim policial fictício pode reutilizá-lo acima do texto e dos anexos.
2. Um bloco de documento emparelha uma carta digitalizada com sua transcrição digitada, garantindo que a pista exista como texto real pesquisável por leitores e compatível com leitores de tela.
3. Um bloco de depoimento mantém o nome da testemunha e a data separados do relato, permitindo que uma longa transcrição seja alterada sem interferir na moldura de papel rasgado.

Os níveis de títulos podem acompanhar o andamento do caso, partindo do título da investigação até grupos de evidências e documentos individuais. Um cartão-postal codificado e uma mensagem interceptada podem compartilhar a mesma estrutura básica, recebendo apenas os campos exigidos por cada um. Cartões resumidos de evidências podem direcionar para documentos completos em arquivos HTML separados, mantendo a visão geral do caso organizada e leve. Um botão com o rótulo "Desbloquear evidências" continua sendo um link convencional até que alguém desenvolva um script para validar a resposta.

Quando as evidências chegam a telas estreitas

A exibição das evidências tende a falhar primeiro em telas pequenas porque muitos elementos surgem aos pares, como uma foto acompanhada de sua legenda. Os modos responsivos do Nicepage permitem verificar esses pares antes da exportação, e vários detalhes exigem uma análise cuidadosa:

1. Uma foto exibida ao lado de sua explicação no computador deve ser posicionada acima dela no celular, com cada legenda imediatamente abaixo de sua respectiva imagem.
2. Números de caso longos, títulos de documentos e transcrições devem quebrar linhas dentro de seus contêineres, evitando que todo o layout deslize para os lados.
3. A digitalização de uma carta inteira deve encolher para se ajustar à largura da tela, com um link para o arquivo original para os leitores que precisam verificar letras pequenas.

Verificação dos arquivos exportados antes da publicação

Os arquivos exportados podem ser integrados a um projeto web existente ou repassados a um desenvolvedor. A pré-visualização do editor exibe apenas a aparência visual, por isso abra esses arquivos antes de publicá-los. Toda transcrição deve constar como texto real, e os links entre um caso e suas evidências precisam continuar funcionando. Um teste rápido para qualquer template HTML de mistério consiste em adicionar mais uma peça de evidência à demonstração. O ideal é que isso exija apenas a cópia de um bloco e a inserção do novo texto, fazendo com que o décimo caso seja inserido com a mesma facilidade do segundo.