BoyWiki:Agora/27 novembre 2012

Agora/27 novembre 2012

Couleur de fond

Y a-t-il un moyen simple (genre tag) de générer une couleur de fond ? Je sais que ça peut se faire dans un tableau (sur Wikipédia tout au moins — je n'ai pas essayé sur BoyWiki) ; mais avant d'en venir à cette solution je voudrais vérifier s'il n'existe rien de plus simple.

Autre question, qui rejoint la première : quel code de couleur faudrait-il mettre pour obtenir un bleu à peu près semblable au fond d'écran de LG ? Sans le motif BLogo, trop compliqué à insérer dans des pages de BoyWiki, mais de façon à donner une impression visuelle comparable. Le but étant de reproduire presque à l'identique des messages publiés sur LG.

Caprineus 27 novembre 2012 à 10:41 (GMT)

Le moyen n'est pas compliqué mais dépend de la forme souhaitée : une sorte de citation courte ? un paragraphe ? un bloc de texte affiché hors du flux de l'article ? Selon le cas il est possible d'ajouter des options au modèle {{Citation courte}}, {{P}}, ou {{Conteneur}} par exemple. Ou en créer un nouveau.

Manuellement (ou pour tester) tu peux utiliser les tags html <div> ou <p> :

aaaaaaaaaa bbbbbbbbb ccccccccccc dddddddddd eeeeeeeeeeeee

... mais c'est moins pratique.

Ajouter le motif n'est pas plus compliqué mais nécessite de copier l'image du bout de logo répétitif sur médiawiki.

Pinocchio 27 novembre 2012 à 22:26 (GMT)

Sur les pages donnant les questions et les réponses du jeu des Huit Nuits de BoyWiki, on pourrait présenter le texte tel qu'il a été publié sur LG, c'est-à-dire avec les fonds d'écran.

Par exemple, sur la page Les Huit Nuits de BoyWiki 2011 — Questions A1-A9, depuis « Comme promis, voici les questions […] » jusqu'à « […] il sera environ midi. », il faudrait mettre le fond neigeux de Noël 2010-2011 (mais pas en début ni en fin de page). Puis, dans les boîtes déroulantes des réponses, le fond standard de LG.

Puisque tu dis que c'est facile, vois ce que tu peux faire sur cette page. Je recopierai ensuite le code au fur et à mesure que je complèterai les autres. Mais si ça pose problème, un fond de couleur uniforme, comme je le pensais tout d'abord, fera très bien l'affaire.

Caprineus 28 novembre 2012 à 11:16 (GMT)

(Un petit problème sur ces mêmes pages, tant que j'y pense : lorsque le titre d'une boîte déroulante est long — genre Réponse poétique et musicale à la question A5 (24 décembre), cum commentum — et que l'affichage se fait sur un écran pas très large, les derniers mots sont rejetés sur une deuxième ligne. Or celle-ci n'est pas intégrée dans le cadre de la boîte, ce qui n'est pas très esthétique (quand la boîte est ouverte, cette deuxième ligne empiète même sur le texte affiché). Est-il possible d'améliorer ça ?

Caprineus 28 novembre 2012 à 11:16 (GMT)

Devant la spécificité du fond j'ai préféré créer un nouveau modèle dédié plutôt que modifier l'existant.

Comme d'habitude avec les contenus dans un modèle, il faut penser à protéger les caractères réservés comme "=" ou "|", vu qu'il y en a à profusion autour des tags font...

Il y a un problème avec la neige : je ne me souviens pas comment elle avait été ajoutée sur LG, mais je me demande si l'image qui a été copiée sur mediawiki est de format identique (.jpg) à celle d'origine, laquelle possédait, j'imagine, un canal transparence, que ne gère pas le format jpg ?

Pinocchio 28 novembre 2012 à 22:40 (GMT)

Pour la boite de la question A5, il existe un argument hauteur qui permet de mettre le titre sur deux lignes.

Fond BLogo : L'image qui a été chargée sur Media-BoyWiki est bien la même que tu avais indiquée plus haut. Je ne comprends pas ce que tu appelles « spécificité du fond ».

Le résultat actuel est bon, mais quand même pas très facile à mettre en œuvre. J'avais cru, à te lire, qu'il existait un moyen simple de composer un fond en indiquant simplement quelle image devait être utilisée pour cela. En revanche, s'il faut créer un modèle différent pour chaque fond, c'est un peu lourd, non ?

(C'est vrai que jusqu'à maintenant, nous n'avions pas utilisé de fonds. Mais si ça devenait facile, avec virtuellement une infinité de fonds, ça pourrait être un bon moyen pour rendre les pages plus diverses et plus attrayantes.)

Neige : Si, si, c'est bien la même image. Je suis allé sur une des pages concernées de LG (voir les liens sur Les Huit Nuits de BoyWiki 2011), et j'ai enregistré la page HTML par un clic-droit ; ensuite je suis allé voir dans le dossier enregistré, où se trouvait cette image .jpg. Si tu vas voir toi-même, tu ne trouveras sans doute rien d'autre. (Précisons que cette neige est statique : elle ne tombe pas !)

Faudra-t-il là aussi faire un nouveau modèle ?

Titre de boîte déroulante : Si je comprends bien, c'est à moi de scinder le titre et de mettre un argument, uniquement dans certains cas. Bon, s'il n'y a pas d'autre solution je le ferai — ce n'est pas un gros travail. Mais ç'aurait été préférable que ça se fasse automatiquement, parce qu'on ne sait jamais quelle sera la largeur d'écran de tel ou tel lecteur. (Et avec les téléphones portables qui affichent maintenant des pages internet, ça ne va pas faciliter !)

Taille de la police : Le fond avec le BLogo tend à rendre le texte un peu moins lisible. Ça reste acceptable pour la partie "banale" de la page ; mais dans les boîtes déroulantes le texte est légèrement plus petit, et ça devient plus difficile de lire un texte long. Pourrait-on faire en sorte que, par défaut, la taille de la police soit la même dans les boîtes déroulantes que dans le reste de la page ?

Caprineus 29 novembre 2012 à 01:33 (GMT)

Spécifique parce que j'ai supposé que l'utilisation du fond lg est limitée aux articles du jeu. Maintenant si on veut généraliser l'usage de fonds, effectivement, un modèle plus générique s'impose. Mais il ne sera pas plus simple à utiliser puisqu'il faudra préciser en paramètre soit la couleur soit l'image. La difficulté provient, à mon avis, moins du modèle lui-même qui reste simple (on a vu bien pire...) que des contraintes inhérentes à l'utilisation d'un modèle (la protection des nombreux caractères réservés), mais qui est vraie pour tout modèles. En revanche l'image de fond n'est pas aussi simple à afficher qu'une image en premier plan : je n'ai rien trouvé dans les codes wiki pour le faire, d'ailleurs le wiki interdit l'affichage "sauvage" d'images provenant d'autres sites, ce que permet le html. Il faut donc au préalable que l'image soit enregistrée (par sécurité) puis ajouter un style en lui donnant un nom qui fait lien avec le fichier de l'image. Ceci ne concerne que les images, pas les simples fonds colorés et/ou dégradés.

Pour la neige, en effet, dans mon souvenir elle était superposée au fond bleu. Mais non tu as raison, après vérification elle apparait seule.

Il y a peut-être moyen de faire en sorte que le titre des boites change de lui-même de hauteur, il faut chercher et modifier le modèle qui actuellement fixe la hauteur du titre. Il est délicat de modifier un modèle existant.

Pareil pour la taille de la police : il existe un argument taille qui change la police de la boite courante ! Mais changer la taille de police pour toutes les boites existantes est risqué.

Pinocchio 29 novembre 2012 à 13:52 (GMT)

Après les premiers essais, le résultat semble très satisfaisant !

J'ai à peu près terminé la page de la première série de questions du jeu, et les {{=}} ou {{!}} sont tout à fait supportables dans la mesure où il n'y en a pas trop (l'utilisation des tags de LG et leur traduction en codes wiki est autrement casse-pieds !).

Histoire de m'exercer, j'ai créé aussi la page du palmarès, qui manquait. Curieusement, les liens externes sont activés par défaut, ce qui n'est pas le cas sur LG. Peut-être qu'il serait plus prudent de les désactiver. Est-ce que c'est possible ?

Je ne sais si c'est réalisable, mais il serait bien utile, dans ce modèle Fond, d'avoir un paramètre facultatif pour régler la transparence de l'image. Dans certains cas, on peut vouloir en effet un fond très léger (si c'est un tableau, par exemple). En outre, ce serait peut-être une solution – même à faible dose – pour rendre de la lisibilité aux petits caractères, comme dans les boîtes déroulantes.

Tu dis qu'il est « délicat » et « risqué » de modifier le comportement par défaut des boîtes déroulantes (titre et police). Qu'est-ce qu'on risque vraiment ?

Pour l'instant, il y a peu de boîtes déroulantes (une ou deux intrigues masquées, des textes originaux des Évangiles et du Coran). Ces modifications n'y poseraient sans doute pas de problèmes particuliers. (Le hic, ce serait peut-être en cas de mise à jour…)

Caprineus 29 novembre 2012 à 22:37 (GMT)

Les liens peuvent être désactivés avec <nowiki>.

Le modèle {{Fond}} a été complété avec une option opacité.

Le comportement par défaut des boites déroulantes a été modifié : la hauteur enroulée suis désormais la taille du titre, et la fonte du contenu n'est plus réduite. À tester, en particulier pour les citations bilingues qui pourraient se décaler suite à une fonte plus grande. En cas de mise à jour on risque d'avoir beaucoup d'autres changements !

Pinocchio 30 novembre 2012 à 18:08 (GMT)

La hauteur des titres de boîte déroulante fonctionne bien. Il faudra simplement penser, pour les lignes longues, à lier les 2 ou 3 derniers mots (selon le sens) par des espaces insécables — sinon le rejet à la seconde ligne risque d'être assez laid.

Et en effet, le texte dans les boîtes déroulées est maintenant plus lisible.

En revanche, j'ai voulu faire des essais avec le paramètre |opacité, mais ça ne fonctionne pas. Je l'ai mis à la valeur sans doute excessive 0.5 (uniquement dans la boîte A1) afin que tu puisses vérifier. (N'aurais-tu pas oublié la barre verticale de ce paramètre, sur la page du modèle ?)

Le paramètre |marge est une bonne idée. Je ne l'ai pas encore testé, mais je suppose qu'il repousse le texte vers l'intérieur, plus loin du bord du fond.

Tant que nous sommes dans les boîtes déroulantes : ne pourraient-elles pas, comme maintenant le reste de la page, afficher par défaut des textes justifiés ?

Caprineus 30 novembre 2012 à 18:57 (GMT)

Je viens de re-tester : chez moi la boite A1 s'affiche bien avec un fond plus clair, pour Firefox 17.0 et Opéra 12.11. Voir en vidant le cache du navigateur (si cache il y a).

Pinocchio 30 novembre 2012 à 19:28 (GMT)

J'ai vidé le cache (Edition > Préférences > Avancé > Réseau > "Vider le cache maintenant"). De toute façon j'avais coché depuis longtemps "Modifier la gestion automatique du cache" > "Limiter le cache à 0 Mo d'espace disque".

Puis je me suis déconnecté, j'ai fermé Firefox (ce qui efface l'historique : Vie privée > "Vider l'historique lors de la fermeture de Firefox"), et fermé TOR Browser. Ça devrait suffire, non ?! ;-)

Ben ça marche toujours pas : aucune transparence du fond dans la boîte A1.

Est-ce que ça ne serait pas Ubuntu qui fait des siennes ? (ça lui arrive, quoi qu'en disent les adorateurs de Linux)

Caprineus 30 novembre 2012 à 21:34 (GMT)

Probablement un problème de version : TorBrowser n'est pas à la pointe des nouveautés pour le navigateur (v.10), il ne supporte donc pas les dernières fonctionnalités comme les dégradés et les transparences non hérités, désolé, je n'ai pas trouvé d'autre solution pour varier l'opacité du fond sans modifier celle du texte... Si tu as l'occasion, teste avec un Firefox ou un Opéra à jour.

Pinocchio 30 novembre 2012 à 22:21 (GMT)

Bon, comme il ne s'agit nullement d'une urgence, on va attendre que TOR Browser soit mis à jour. J'espère tout de même que les responsables passent de temps en temps à la version ultérieure.

L'information est quand même bonne à savoir, car très nombreux sont les gens qui, comme moi, n'accèdent aux sites "spéciaux" qu'à travers TOR Browser (et ils ont bien raison, par les temps qui courent !).

J'ai médit d'Ubuntu, mea culpa ! Même avec mon Windows XP tournant sur VirtualBox – mais toujours avec TOR Browser –, ça ne marche pas. Armons-nous donc de patience... (Je vais remettre l'opacité à 1.)

Caprineus 30 novembre 2012 à 22:36 (GMT)

l'opacité variable et les dégradés devraient désormais fonctionner avec Tor Browser. À tester.

Pinocchio 2 décembre 2012 à 18:17 (GMT)

Oui, l'opacité fonctionne bien. Pour les réponses au jeu, il me semble que 0.3 est une valeur équilibrée, donnant à la fois une bonne visibilité du fond et une bonne lisibilité du texte (voir la réponse A1).

L'intitulé du paramètre est quand même surprenant : s'il y a une opacité de 0.3, le fond est logiquement moins opaque que pour 0.7, non ? Et donc on le voit moins. Or c'est le contraire qui se produit. Le paramètre ne devrait-il pas s'appeler plutôt « transparence » (ou l'échelle des valeurs être renversée) ?

Après quelques essais d'exemples sur la page du modèle {{Fond}} : ça marche bien, mais je n'ai pas compris ce qu'il faut faire pour afficher une image (c'est quoi, une "classe de style" ???).

Par ailleurs, j'ai l'impression que l'angle a du dégradé ne peut prendre que les valeurs 0, 90, 180 ou 270 — toute autre valeur ramenant à l'une de ces quatre-là. Me trompé-je ?

Caprineus 5 décembre 2012 à 11:35 (GMT)

Oui, ce n'est pas très intuitif. Il faut considérer deux cadres superposés : le premier contient l'image en fond mais pas de texte en premier plan ; le second placé par dessus contient le texte en premier plan et possède un fond blanc plus ou moins opaque. C'est celui-ci qui est ajusté avec le paramètre : 0 indique totalement transparent et l'image apparait, 1 totalement opaque donc blanc et l'image est masquée.

Afficher une nouvelle image ne peut pas se faire immédiatement à partir des commandes en langage wiki, il faut d'abord déclarer l'image dans une nouvelle classe de style (qui porte son nom) dans le fichier MediaWiki:Monobook.css (à la fin), fichier accessible seulement aux administrateurs. C'est un peu compliqué, il faut récupérer le chemin réel de l'image. Mais je n'ai pas trouvé plus simple et j'ai supposé que le cas ne serait pas trop fréquent. De plus, il manque actuellement un paramètre de dimensions dans le modèle pour ajuster l'image au contenu... Le blogo fonctionne bien parce qu'il s'agit d'un petit motif répété autant que nécessaire pour remplir le cadre du contenu. Une image plus grande que le contenu n'apparait pas entière par défaut. Une image plus petite que le contenu est généralement répétée.

Pour moi l'angle fonctionne, a=45 par exemple entraine un dégradé diagonal, mais on le voit mieux sur une page remplie, l'exemple du modèle n'est pas assez haut.

Pinocchio 5 décembre 2012 à 22:58 (GMT)