Journaux Modèles HTML

Modèles HTML de journaux transparents pour pages d'enregistrements structurés

Un modèle HTML de journal est utile dès lors que la partie la plus fastidieuse est déjà réalisée : chaque enregistrement dispose d'un emplacement fixe pour son horodatage, sa gravité et son message. Il ne reste plus qu'à remplacer les entrées de démonstration par des entrées réelles et à vérifier que vos propres champs ont bien leur place.

Mise en page : Tableau, Chronologie ou Tableau de bord

Les mises en page prédéfinies se répartissent en quelques familles facilement reconnaissables, et le choix de la mise en page appropriée dépend de l'objectif du journal. Les champs suivants doivent impérativement figurer à un emplacement fixe :

• un horodatage avec la date, aligné verticalement ;

• un nom d'événement ou d'action suffisamment court pour être lu en un coup d'œil ;

• une étiquette de gravité avec une différence visible entre avertissement et erreur ;

• la source, le service ou l'utilisateur à l'origine de l'entrée.

Un journal système dense est plus lisible sous forme de tableau, où les colonnes alignées permettent une lecture verticale. L'historique d'audit est plus efficace sous forme de chronologie, car l'ordre des actions est plus significatif que l'alignement des colonnes. Les mises en page de type tableau de bord placent les compteurs et les filtres au-dessus du flux, ce qui convient parfaitement à un écran laissé ouvert toute la journée.

Filtrage par gravité, source et date

Une capture d'écran masque toutes ces informations ; ouvrez donc la démo en direct et utilisez les commandes. Les journaux longs se réduisent sans possibilité de les rétrécir, et les plus utiles proposent un filtrage par gravité. Ce champ de recherche prend en charge la correspondance des messages d'événement ou des ID de requête, ainsi qu'un sélecteur de plage de dates.

Observez également ce qui se passe au-delà de quelques centaines d'entrées. La pagination, un bouton « Charger plus » ou un historique conservant la position de défilement distinguent une démo d'une solution utilisable au quotidien par une équipe. Les lignes extensibles remplissent une fonction similaire, en repliant une trace de pile ou un service affecté sur une seule ligne de résumé, et les enregistrements d'audit utilisent le même mécanisme pour les détails des acteurs et des objets.

La plupart des démos sont fournies avec une vingtaine de lignes d'exemple, soit le nombre idéal pour que chaque mise en page reste claire.

Ce qui reste visible sur mobile

Les lignes larges d'un ordinateur de bureau doivent être adaptées pour être lisibles sur un écran de 5 pouces, et les modèles gèrent cela différemment. Certains empilent chaque enregistrement dans une fiche compacte, d'autres suppriment les colonnes inutiles en déplacement, et d'autres encore masquent les métadonnées en appuyant dessus. Les entrées importantes doivent rester reconnaissables dans les trois cas.

Nicepage inclut des éléments et des blocs prédéfinis pour la composition de texte et de grille, qui permettent d'intégrer les lignes d'enregistrements répétées dans une grille lorsque le modèle de contenu le permet.

La démo répond au reste. Faites défiler jusqu'en bas du flux d'exemple, réduisez la largeur de votre navigateur à celle d'un téléphone et vérifiez si l'horodatage, le niveau de gravité et le message restent groupés. Un modèle adapté à leurs besoins nécessite beaucoup moins de travail par la suite.