Rapport d'état des lieux II

Les pages d'aperçu et de catégories

Cet article a pour but d'offrir une vue d'ensemble des rapport d'état des lieux disponibles. Le design devrait être nettement différent des pages de catégories actuelles.

J'ai expliqué les raisons qui m'ont poussé à créer ce nouveau format de contenu dans la première partie du rapport d'état des lieux. Il s'agissait d'un nouveau format autonome, avec une mise en page qui me permettait d'ajouter suffisamment de photos au contenu, de commenter mes réflexions sur le contenu. L'idée est que les lecteurs m'accompagnent dans le développement du texte, du début jusqu'à de nouvelles recherches et de nouveaux ajouts. 

Honnêtement, je ne sais pas encore où tout cela va me mener, c'est en tout cas une manière très laborieuse de développer et d'écrire un texte, mais j'y reviendrai plus tard.

Anniversaire !

Je suis également très heureux qu'il s'agisse aujourd'hui du 60e article de mon blog. Soixante postes depuis le premier nouveau poste du 1er mai 2019, qui était naturellement aussi un billet de la salle des machines. 

Mise en page

Pages de catégories et aperçus

Lors du redémarrage du blog en 2019, il n'y avait pas encore de pages de catégories du tout. Le système de gestion de contenu derrière cronhill.de et blog.cronhill.de est MODX. Contrairement à Wordpress, MODX n'est pas conçu pour le blogging, les points forts de MODX résident plutôt dans le templating propre et la création structurée de pages avec différentes mises en page. Il existe un système de commentaires (QUIP), mais les catégories ne font pas partie de l'équipement de base. De plus, j'écris en trois langues et ce n'est pas si simple dans Wordpress. 

Chaque catégorie doit être créée en tant que page. Cela semble compliqué au premier abord, mais la discipline est étonnamment bonne. À mes yeux, les lecteurs ne sont guère aidés par un système de tags et de catégories pléthorique si, après un clic, seuls un ou deux articles se cachent derrière un terme de catégorie. Avec quelques catégories générales, on obtient une plus grande profondeur et moins d'expansion latérale. 

Jusqu'en octobre 2010, les catégories, comme ici dans cet article, n'étaient accessibles que sur la gauche, sous les méta-informations. Entre le début et le milieu de l'année 2021, j'ai listé les catégories sur la page du blog avec un lien dans l'en-tête, il y avait alors 11 catégories. Et enfin, à partir de juillet 2021, il y a six catégories mises en évidence. La mise en évidence se fait manuellement, ce qui signifie que je peux toujours mettre l'accent sur de nouvelles catégories. Ainsi, il est probable que Star Trek soit prochainement retiré après la décevante deuxième saison de Star Trek Picard, et qu'à la place je mette peut-être la catégorie De la salle des machines à cet endroit.

Les images donnent une touche plus émotionnelle à la page du blog, auparavant très réduite, et rendent les sujets plus vivants et intéressants.

Techniquement, cela fonctionne très simplement. Comme chaque catégorie du système est une page, liée à ses frères et sœurs anglais et français, ces pages ont simplement une mise en page différente, le modèle pour les catégories mises en évidence s'appelle par exemple 04.02.Blog.Category.Highlight. Tous les templates de mon système ont des numéros et des noms. La méthode de numérotation doit me rester de mes années d'école, car le premier langage de programmation que j'ai appris là-bas vers 1982 était Basic sur un ordinateur Wang 3000. Et en Basic, chaque ligne de programme est numérotée, et le principal conseil de mon professeur de mathématiques, le Dr Braun, était d'utiliser dès le début des numéros de ligne à trois chiffres, par incréments de 10.

Si les catégories de points forts ont un modèle différent, comme décrit ci-dessus, je peux simplement lister toutes les catégories avec ce modèle dans l'en-tête de la page principale du blog. Ce sont les six tout en haut. Toutes les autres sont simplement listées en dessous sous forme de liste simple. 

Pour les catégories phares, un petit snippet (merci G.) calcule la somme des mots et additionne le temps de lecture. Je ne peux pas dire si cela aide les lecteurs ici, mais je trouve que c'est un joli gadget. Il permet par exemple de constater que mes articles sur le jardin sont généralement plus courts que mes articles sur le rossignol suédois Jenny Lind

En tant que pages de catégories, j'avais donc déjà le choix entre deux mises en page possibles et je ne voulais pas m'en écarter à ce point avec ma page de rapport d'état des lieux.

Inspiration

The State of Play Reports Overview Page

La page de rapport de l'état des lieux est en effet un terme très encombrant, peut-être même un peu bureaucratique. Pour la mise en page, deux circonstances m'ont inspiré. 

Gwern Branwen

Le site web de Gwern Branwen m'a beaucoup inspiré dans sa mise en page et la densité de texte possible. Son site est un mélange de blog, de base de connaissances et de protocoles d'exploration personnelle. Chaque petite étape est inlassablement documentée. Pour les développeurs web, son site au contenu incroyablement profond est une source d'inspiration intéressante.

J'ai depuis longtemps un faible pour ses initiales, voir par exemple sur cette page. Les initiales sont des lettres de début de chapitre agrandies et généralement décorées. Au Moyen-Âge, les initiales étaient peintes dans les livres par le rubricateur.

Le rubricateur

Un rubricateur était un scribe et un peintre chargé du rubricage, c'est-à-dire de l'insertion d'éléments de texte rouges dans le manuscrit déjà écrit. Il réalisait entre autres, le plus souvent à la main, les capitaux de rubrication en rouge et bleu. Pour éviter les erreurs d'écriture lors de la mise en couleur, l'imprimeur imprimait un espace réservé (représentant) pour l'initiale. Celui-ci était ensuite peint par le rubricateur.

Le métier de rubricateur s'est éteint avec l'augmentation des tirages grâce à l'impression mécanique des livres. Les livres n'étaient plus tirés à 10 ou 20 exemplaires, mais à 100 ou 1000, et il était tout simplement plus avantageux d'imprimer directement une initiale.

Initiale

Je voulais donc absolument une initiale. J'ai un peu fouillé dans les anciens catalogues de polices et j'ai trouvé quelques polices initiales intéressantes, mais j'ai finalement opté pour une autre solution, qui a beaucoup à voir avec le logo légèrement modifié de blog.cronhill.de.

Ici, le mot blog est composé en bleu à partir de la Georgia, une fonte antiquaire moderne du vingtième siècle, derrière la monotype IBM Plex. Georgia a été dessinée en 1993 par le créateur de fontes britannique Matthew Carter pour Microsoft. Elle devait être lisible sur les écrans à faible résolution et présente un contraste très élevé entre les caractères normaux et gras, de grands espaces entre les lettres et un dessin de caractères qui doit éviter autant que possible toute confusion entre le 1, le l et le I. J'ai opté pour la Géorgie pour différentes raisons, mais je souhaite bloguer à ce sujet une autre fois, l'essai traîne ici depuis 2019, prêt à 75 %. La famille IBM Plex a été développée en 2017 par Mike Abbink chez IBM en collaboration avec l'agence néerlandaise Bold Monday pour IBM.

Et comme dans le logo modifié de blog.cronhill.de, je voulais aussi créer les initiales. Et voilà à quoi elles ressemblent maintenant :

Initiale de Plex Mono d'IBM et de Georgia de Microsoft
Initiale de Plex Mono d'IBM et de Georgia de Microsoft
La mise en texte

Une inspiration du siècle dernier

La composition du texte dans la colonne de gauche de la nouvelle page d'aperçu a également quelque chose de particulier. Je me suis inspiré du Desk Book of Type Specimens - Borders Ornaments Brass Rules and Cuts Catalogue of Printing Machinery and Printers' Supplies 1900 de l'American Type Founders Company. Everything for the printer", dit le catalogue, et ce n'est vraiment pas un mot trop fort. Ce que ce catalogue présente sur ses 1267 pages bien remplies devrait être le rêve humide de tout imprimeur vintage. Quelle diversité a été proposée ici !

Et la page numérique 10 du document lié contient déjà la source d'inspiration pour la composition du texte, il s'agit du texte d'introduction au catalogue qui commence avec dignité et modestie par les mots : « To the printer » ou, en français, "An den Drucker". Bien sûr, la composition numérique n'est pas à la hauteur de son original, mais j'ai aimé intégrer cette citation de mise en page dans ma page, quasiment comme une petite réminiscence.

Desk Book of Type Specimens - Borders Ornaments Brass Rules and Cuts Catalogue of Printing Machinery and Printers' Supplies 1900 der American Type Founders Company von 1900
Desk Book of Type Specimens - Borders Ornaments Brass Rules and Cuts Catalogue of Printing Machinery and Printers' Supplies 1900 der American Type Founders Company von 1900 / Lien : Desk Book of Type Specimens
Mise en œuvre technique

Javascript, mon rubricateur personnel

Dans la page, il y a maintenant un petit javascript qui remplace pour moi la première lettre du paragraphe. Dans le style.css, toutes les lettres sont déposées dans des classes, et c'est à peu près tout. Ainsi, je n'ai pas besoin de me soucier de la bonne initiale pendant que j'écris, le script mime en quelque sorte le rubricateur.

La ligne entre les lignes est créée avec un fond dégradé répétitif. Ceux qui souhaitent en savoir plus peuvent examiner le texte source avec un inspecteur web de leur choix.

Dans la troisième partie, nous continuons avec la mise en page de base du modèle pour le rapport d'état proprement dit.

tl, dr;

Cette partie concerne l'aperçu des rapports de situation, une page indépendante pour laquelle je me suis inspiré d'autres mises en page.

Commentaires (0)


Ecrire un commentaire




En envoyant ce commentaire, j'accepte que le nom et l'adresse e-mail de cronhill.de soient stockés en relation avec le commentaire que j'ai écrit. L'adresse e-mail ne sera pas publiée ou transmise à des tiers.