Le titre en H1

J’ai mis quelques tags et métadonnées bidon pour les tests, faudra que je pense à les virer quand on a fini. Rappel — il existe des fiches avec bcp de tags, des fiches qui ont deux voire trois power levels, et deux voire trois rôles.

Rappel 2 – Game system: DC Heroes Role-Playing Game est actuellement en dur sur les fiches, mais avec le recul c’était pas une bonne idée. Les game systems (presque toujours DC Heroes, et parfois Game Adventures) sont désormais ajoutés manuellement, et sont désormais un lien vers les game stats correspondantes au sein de l’article.

Une image verticale assez haute. Toutes les images verticales font 500px de large. Mais nous aurons donc maintenant des images qui font 725px de large sur moins de 601 px de haut (qualité jpg 60) et, quand possible, des images qui font 1200px de large et moins de 601px de haut (mais pas trop fines non plus) (qualité jpg 50). Toutes ces images sont zoomables vers une image de la même largeur, mais probablement plus haute et en qualité 75.

Titre h2 précédé d’un hr

Nous cherchons donc à avoir de plus gros titres (stack envisagée – Georgia/Cambria/serif, soit des fontes systèmes) et du plus gros texte plus aéré (Open Sans envisagé, en taille plus importante que notre affichage actuel, appelée depuis les serveurs Google). Avec plus de padding entre paragraphes, plus de padding avant et après les sections, plus de line-height pour les headings…

Nos colonnes de texte ne doivent jamais faire plus de 80 caractères de large.

Titre h3

Le titre suivant va être un h4. Ils sont actuellement trop petits puisque je ne pensais pas les utiliser et bon en fait si.

Un titre en h4 pas assez visible

Ici je met un hyperlien en exemple — comment déclarer les champs ACF pour jetpack. https://wordpress.org/support/topic/how-do-i-index-fields-ffrom-acf-plug-in/.

Comme noté dans les spécifications, on soulignera maintenant les hyperliens, je sais par pkoi j’ai laissé passer des hyperliens pas soulignés.

Test de rendu de caractères accentués

This is a test § for font legibility. Texte français accentué, œil naïf à être où ère là. Some more standard ASCII text with some use of bold type INCLUDING CAPITALS before returning to normal case. Việt Nam and Nguyễn diacritics. Kasumi Gōtō knows about o-macron characters. And now for the inevitable italics, as a frequent issue with legibility. Can we do bold italics, even though that almost never happens ? Nobody knows. ½ ¼

Tests de rendu kanji, kana et cyrillique

魂の刈り取り

デザインノート

山城龍

Я твой слуга Я твой работник

Et allez un peu d’hébreu, ça arrive aussi סמל ראשון אלבז . Et un peu de thai, ça arrive parfois ช็อคโกแลต .

Exemple d’une section “sequence”

Elles indiquent un ordre de lecture dans l’introduction d’un article. Pour l’instant ce sont de bêtes listes ordonnées, ce qui n’attire pas assez l’attention.

Halt, comrade ! For this profile is part of a series, to be read in order :

Et maintenant…

… une section “Background” typique du Bouchonnois. Avec le recul le texte vert sombre, couleur aussi utilisée pour les liens déjà cliqués, était pas une bonne idée.

Background

Quelques éléments inclus dans les textes

Je pensais vaguement à une drop cap après les éléments h2, mais c’est probablement une idée à la con.

Les trop petites glyphes actuelles sont un lien extérieur façon Wikipedia  , blabla blabla un mot technique expliqué dans le glossairedéfinition : technique expliqué technique expliqué technique expliqué technique expliqué, blabla blabla et un lien sponsorisé vers Amazon blabla blabla blabla blabla blabla blabla lien interne glossaire  .

Actuellement quand un lien va vers une vidéo j’avertis en disant lien vers une vidéo . C’est un peu naze, utiliser un petit icône de vidéo (en général ça va vers YouTube) remplacerait avantageusement la mention en exposant.

La notion de glossaire sera maintenant développée avec des info-bulles (pour les définitions courtes) ou des liens à la signalétique différente (quand le texte serait trop long pour une infobulle et qu’il faut linker sur notre glossaire, ou sur un site externe).

Les textes qui sont en exposant (où plutôt superscript) sont actuellement trop hauts pour la line-height mais on va augmenter cette dernière pour aérer le texte. Exemple d’exposants – XX^ème siècle ou XIII^ème arrondissement.

Des articles techniques utilisent aussi de petites glyphes quand il y’a des stats pour plusieurs jeux de rôles.
DCH Derringer [BODY 02, Projectile weapons (Diminishing): 03, Ammo: 02, Miniaturisation: 02, R#03, Drawback: Long Reload].

M&M Derringer [Ranged Ballistic Damage 2, Diminished Range 3, Limited 1 (Two shots), Feature 1 (Tiny size)].

Images

Une image de 725 px de large (les images bannière font tjrs 725 px de large) sur 440px de haut.

Et là je met une légende, qui est donc un parag de classe “caption”. Mmm en fait je vais faire une légende un peu longue, puisque je trouve que ça se confond trop avec le texte du dessous quand il y’a plusieurs lignes – même grisées et italicisées. Surtout pour les gens dont les yeux voient moins les contrastes, genre moi.

Et enfin un élément lightboxé sous FancyBox, tel que je l’utilise actuellement. Dans cet exemple précis la grande image est un gros format, et l’image-vignette est un détail de ladite. C’est rare que je fasse ça donc oui je pourrais les refaire à la main si ça interfère avec un truc.

The village of Arroyo. Click for an extended version.

Cette image a été manuellement encadrée par deux HR dans leur version light. Ils sont ici appelés par un shortcode.

Encarts et blurbs

Voici maintenant un encart, encadré par le shortcode special /special.

On va maintenant montrer un exemple de blurb — un bidouillage que j’utilise rarement, mais qui est bien utile quand j’ai pas d’illustrations (genre un personnage de roman). Actuellement ils sont codés à l’arrache pas propre.

Eddie became a world class fencer and even threw an international competition in London out of boredom. It was here that he met Jocasta Rose, the trainer for the British team. Eddie was merely 14 as contrasted to Jocasta’s 36. She swept him off his feet and seduced him. Eddie and Jocasta were together for 13 short months before she succumbed to a terminal illness.

Articles avec des tables des matières

Un exemple — https://www.writeups.org/dc-heroes-rpg-new-rules-powers/

La TDM est actuellement une simple liste hyperliée vers des ancres HTML sur la même page. Actuellement, ces ancres sont donc affichées “sous” le header du site, comme on peut le constater en cliquant sur un lien dans la TDM.

Tables partie 1

Il y’a une douzaine d’articles de désambiguation utilisant actuellement un tableau. Je les refait sans tableau. Voici un extrait de https://www.writeups.org/black-canary-guide-profiles/ refait, avec des images refaites spécifiquement pour cette page. Oui, c’est à l’arrache – l’objectif est de montrer l’approche HTML, pas de faire une mise en page définitive. Les classes et autres éléments sont ajoutées à la main.

La même mise en page peut être utilisée pour la page “Top Ten” que l’on s’est proposé de rajouter, et qui reprend quelques éléments de design de la colonne “top 10” située sur la home actuelle.

1 The prototype version

The earliest take, in 1947/48. At this point she’s a bad girl and a thief, a bit like 1940s Catwoman or Harlequin.

2 The (late) Golden Age Black Canary.

Black Canary as she appears from 1948 to 1951. She’s reinvented as a heroine, and even joins the Justice Society of that time.

Tables partie 2

Certains articles techniques ont de vrais gros tableaux. Il n’y a pas à ce stade de budget pour le faire en responsive, puisque les consulter sur smartphone est un cas d’utilisation parfaitement marginal. On peut donc se contenter de les gérer en overflow horizontal, en rajoutant la div à la main. Oui, je sais que c’est pas beau.

To be continued !

Pour les articles en plusieurs parties, on a donc vers la fin une ou deux phrases qui indiquent que l’article continue, et donne le lien vers la partie suivante. Pour l’instant c’est du bête texte avec un lien, donc on cherche à rendre ça mieux. Le nouvel encart orange, peut-être ?

Pubs Adsense

Une pub Adsense au format bannière. Appelée par le shortcode pouet5, elle est conçue pour s’insérer dans du texte.

Par contre, les pubs appelées par les shortcodes pouet4 et pouet6 sont conçues pour s’insérer avant une HR + H2.

Pub Amazon

Voici une pub Amazon manuelle. Par opposition aux pubs programmatiques, qui ne s’affichent que sur certains marchés et qu’on ne peut donc pas voir avec une adresse IP française.

Elle est légèrement différente de l’habituel, parce que les pubs manuelles Amazon s’affichent différemment quand elles sont dans la colonne de droite que quand elles sont dans la colonne de gauche, comme ici.

Cet exemple a donc trois éléments, actuellement présentés de façon verticale, et dont j’ai contraint la largeur à 300px maximum via argument dans l’URL. 300 px de large max c’est ce qui marche le mieux dans la colonne de droite.

Pub Humble Bundle

Elles sont mises en forme par le shortcode add2 /add2. Il y’a un exemple dans la colonne de droite, pour Din’s Curse.

J’en met une ci-dessous pour les tests, mais comme tu peux le voir c’est pas le bon chapo qui s’affiche, puisque le shortcode add2 c’est juste un truc que j’ai bricolé quand on a eu le partenariat avec Humble.

Ces images là je ne peux pas les contraindre en taille, donc elles se conforment à l’espace disponible.

Soundtrack

Un exemple de lien vidéo. Ils sont traités automatiquement par le plugin Lazy Load for Video (tant qu’il voit une URL YouTube seule sur une ligne), qui génère une image plutôt que de charger les tonnes de bordel et de mouchards qui sont appelés par un embed YouTube normal.

Exemples de listes

On passe maintenant à deux trucs actuellement pas trop mis en forme

A savoir les sections rézosocio et postes en rapport, respectivement appelés par les shortcodes shariff et jetpack-related-posts.

Nous pouvons maintenant passer à un exemple bidon de section game stats, mise en forme par le shortcode statsdch /statsdch. D’abord la section DC Heroes présente sur la majorité des pages, puis une section DC Adventures (encadrée par les shortcodes statsdca /statsdca), plus rare.

DC Heroes RPG

Tell me more about the game stats

Alessa the Chosen One (Earliest)

Dex: 04	Str: 02	Bod: 04
Int: 05	Wil: 05	Min: 05
Inf: 05	Aur: 04	Spi: 05
Init: 016		HP: 020

Powers:

Iron will: 05, Obscure: 08, Sealed systems: 02, Superspeed: 01

Skills:

Acrobatics (Climbing): 04, Artist (Actress): 03, Charisma (Intimidation, Persuasion): 05, Martial artist (AV, EV): 04, Martial Artist (OV, RV): 03, Medicine: 02, Military science (Survival): 01, Thief (Locks and safes): 05, Weaponry (Firearms): 04, Weaponry (Melee): 05

Motivation:

Psychopath.

Occupation:

Adventurer.

Wealth:

001.

Equipment:

• Sharpened spear [BODY 02, Enhance (EV): 01 (cap is 06), Descriptor: Bludgeoning, Piercing, R#03, Limitation: Limited penetration] and a backup spear [BODY 02, Enhance (EV): 01 (cap is 05), Descriptor: Bludgeoning, Piercing, R#05, Limitation: Limited penetration]. If the spearwielder’s opposition is within a four feet range, the spearwielder gets a -1 to the final roll of their melee attacks while the opposition gets a +1 to the final roll of their melee attacks. If the range is greater, these are reversed.
• PIP-Boy 2000 handheld computer in a forearm sheath [BODY 02, Data storage (incl. audiovisual): 10, Military science (Cartography): 02, Medicine (Treatment): 03 (Limitation – Medicine is limited to simple diagnoses)].
• Healing powder (x8) [BODY 01, Damage Transference (No Delay, No Damage Taken): 01, Grenade Drawback].

---

Note

Dans une section gamestats, les HR deviennent la version light du HR.

Design Notes

La section “design notes” (qui explique et commente les choix techniques faits dans les game stats) revient très souvent, et pourrait avoir sa propre signalétique.

Sous-section dans les design notes

Parfois les design notes parlent de trucs très compliqués, et le texte devient assez long pour que je doive mette des sous-sections.

DC Adventures RPG

Tell me more about the game stats

N’Kama — Averaged PL 6.4

STR	STA	AGL	DEX
02	02	02	02
FGT	INT	AWE	PRE
05	01	01	01

Combat Advantages

Close attack 3, Defensive Roll 2, Improved Smash, Improved Trip, Move-by Action.

Other Advantages

Equipment 2, Language (Zulu), Tracking.

Skills

Athletics 4 (+6), Close combat (Zulu-ish weapons) 1 (+9), Deception 1 (+2), Expertise (Hunter) 6 (+7), Insight 1 (+2), Perception 3 (+4), Ranged combat (Zulu-ish weapons) 7 (+9), Stealth 7 (+9)

Equipment

Spear Strength-based close piercing Damage 3, Improved Critical 1 ● 4 point
Knife Strength-based close piercing Damage 1, Improved Critical 1 ● 2 points

Offense

Initiative +2

Unarmed +8, Close, Damage 2.

Spear +9, Close, Damage 5, Crit 19-20.

Knife +9, Close, Damage 3, Crit 19-20.

Defence

Dodge	10
Fortitude	06
Parry	10
Toughness	02*/04
Will	03

* Without Defensive Roll.

---

Complications

• Killer elite N’Kama is a mercenary hitman.

Powers Levels

• Trade-off areas. Attack/Effect PL 7, Dodge/Toughness PL 7, Parry/Toughness PL 7, Fort/Will PL 5.
• Points total 78. Abilities 32, Defences 19, Skills 15, Powers 00, Devices 00, Advantages 12. Equiv. PL 6.

Design Notes

La section “design notes” (qui explique et commente les choix techniques faits dans les game stats) revient très souvent, et pourrait avoir sa propre signalétique.

Et donc, toooouuut à la fin, on a le pied d’article avec des classes spécifiques. Penser à remplacer l’horloge par un calendrier même si bon oui c’est trivial.

By Sébastien Andrivet.

Source of Character: Marvel Universe.

Helper(s): Phil Dixon, Sean MacDonald, Chris Cottingham, Gareth Lewis. M&M stats by Pawsplay.

Writeup completed on the 3^rd of March, 2020.

Mes anciens tests de police, je garde juste les noms.
Alright Sans
Rival Sans
Open Sans. How original.
FF Tisa Sans
Proxima Nova
Neue Haas Unica