Histórico Modelos HTML

Modelos HTML de Logs Transparentes para Páginas de Registros Estruturados

Um modelo HTML de logs justifica seu uso quando a parte tediosa já está pronta: cada registro tem um local fixo para seu carimbo de data/hora, gravidade e mensagem. O que resta é substituir as entradas de demonstração por entradas reais e verificar se seus próprios campos têm onde ser inseridos.

Layout de Tabela, Linha do Tempo ou Painel

Os layouts prontos se enquadram em algumas famílias reconhecíveis, e o mais adequado depende da finalidade do registro. Campos que precisam de um local fixo em qualquer um deles:

• um carimbo de data/hora com data, alinhado para que a coluna seja lida verticalmente;

• um nome de evento ou ação curto o suficiente para ser lido rapidamente;

• um rótulo de gravidade com distância visível entre aviso e erro;

• a origem, o serviço ou o usuário responsável pela entrada.

Um registro de sistema denso é melhor visualizado como uma tabela, onde as colunas alinhadas permitem que o olhar percorra a página verticalmente. O histórico de auditoria funciona melhor como uma linha do tempo, já que a ordem de quem fez o quê tem mais significado do que o alinhamento das colunas. Layouts no estilo painel de controle posicionam contadores e filtros acima do fluxo de dados, o que é ideal para uma tela que permanece aberta o dia todo.

Filtragem por Gravidade, Origem e Data

Uma captura de tela oculta tudo isso, então abra a demonstração ao vivo e use os controles. Registros longos se recolhem sem uma maneira de restringi-los, e os úteis oferecem filtragem baseada na gravidade. Este campo de busca suporta a correspondência de mensagens de eventos ou IDs de requisição, bem como um seletor de intervalo de datas.

Verifique também o que acontece após algumas centenas de entradas. A paginação, um botão "Carregar mais" ou um histórico que preserva a posição de rolagem diferenciam uma demonstração de algo que uma equipe pode usar continuamente. Linhas expansíveis desempenham uma função semelhante, resumindo um rastreamento de pilha ou um serviço afetado em uma única linha, e os registros de auditoria usam o mesmo mecanismo para detalhes de atores e objetos.

A maioria das demonstrações é fornecida com cerca de 20 linhas de exemplo, que é exatamente o número em que cada layout ainda parece organizado.

O que permanece legível em um celular

Linhas largas de desktop precisam ser adaptadas para serem legíveis em uma tela de cinco polegadas, e os modelos lidam com isso de maneiras diferentes. Alguns agrupam cada registro em um cartão compacto, outros descartam colunas desnecessárias em dispositivos móveis, e outros ainda ocultam metadados atrás de um toque. As entradas críticas devem permanecer reconhecíveis em todos os três casos.

O Nicepage inclui Elementos e Blocos predefinidos para composições de texto e grade, que fornecem uma grade para linhas de registros repetidas quando o modelo de conteúdo se adequa.

A demonstração responde ao restante. Role até o final do fluxo de exemplo, ajuste a largura do navegador para a largura de um celular e observe se o carimbo de data/hora, sua gravidade e sua mensagem permanecem juntos. Um modelo que atenda a essas necessidades exigirá muito menos trabalho posteriormente.