Proposition de thème pour le wiki khaganat

Suite aux échanges sur lXMPP, voici une proposition de design pour le wiki khaganat. Libre à chacun de proposer.

Le cahier des charges se trouve ici : https://khaganat.net/wikhan/fr:yakalfr_themewiki

Tout ce qui suit est une proposition et mon point de vue (Voyez le je dans chaque phrase).

Pour essaie_khaganat.png et essaie_khaganat_2.png, j'ai changé les couleurs de la charte graphique en utilisant http://paletton.com/. Je suis partie de la couleur du logo puis le preset very light.

J'ai conservé l'image de fond.

Potentiellement, c'est un thème qui pourra être utilisé sur les deux wikis.

Les images :

• essai_khaganat : https://reduit.fr/image/f.php?h=399nHszx
• essai_khaganat_2 : https://reduit.fr/image/f.php?h=3Y4pWAab
• essai_khaganat_3 : https://reduit.fr/image/f.php?h=2sBeQO5G

Pour ceux qui n'arrives pas à accéder aux liens (clic froit > afficher l'image pour voir la totalité.) :

essai_khaganat

Spoiler for Hiden:

essai_khaganat_2

Spoiler for Hiden:

essai_khaganat_3

Spoiler for Hiden:

Fonctionnalités :

• la barre latérale sur le wiki actuel se trouve à gauche. Cela permet d'accéder rapidement à la lecture du contenu wiki.
• Les items Piste et Arborescence sont des menus déroulants
• la couleurs des liens de cette barre sera à modifier en fonction de la couleur du fond.
• le selecteur des langues aura cette forme si Javascript est activé, sinon c'est une forme déroulé. Idem pour les actions qui regroupe les liens en haut a gauche du wiki actuel
• Les blocs grisés font référence aux blocs dispoble dans docuwiki. Il serait possible de les styliser en fonction de leurss caractéristiques.

Si jamais il n'est pas possible de trouver un accord. Je propose de passer par une étape intermédiaire (rough = définition de la mise en forme globale des éléments sans couleur) Une fois fait, chacun sur la base du rough pourra proposer ses couleurs).

Je copie aussi la proposition de Stan : https://imgur.com/a/ZNtf67w

Mon avis sur tout ça (je le répète, c'est personnel, z'avez le droit d'en dire autre chose, c'est pas parce que je cause beaucoup que c'est moi qui décide !).
Côté couleurs :
- J'aime beaucoup la palette que tu as trouvé sur le premier. C'est proche de notre palette originale de Khaganat ; il n'y a pas le bleu du Khanat mais ça se marie quand même bien avec ce fond. Le violet de l'onglet est doux mais présent. Celui pour le texte des liens peut-être un chouïa trop clair pour cet usage (un léger manque de contraste avec le fond). La barre de menu gagnerait peut-être (à voir) à être dans un des violet les plus clairs (le 2e ou 3e en haut ?)

Côté formes :
- J'aime vraiment beaucoup le mode d'onglet du premier : la forme, que ce soit collé au bloc, la flèche qui renforce l'aspect "sélection", bref, tout me semble parfait !
- J'aime bien aussi la gestion des blocs "wrap" dans cette première proposition, plus sobre que le design par défaut de dokuwiki. À voir comment chaque icône pourra se décliner.
- Je préfère la barre pour la piste et la recherche de l'essai 3, avec le bout tronqué.
- Pour la bannière et la position des boutons, c'est la première version qui a ma préférence.

Ensuite il y a des éléments qui sont un peu plus complexes...
- Je préfère que le bouton "s'enregistrer" et "se connecter" soient confondus, parce que la fenêtre de connexion donne un lien vers celui pour s'enregistrer et que l'enregistrement, on s'en sert une seule fois. Préférence personnelle, c'est ptet pas pertinent... À noter qu'une fois qu'on aura Django, la connexion sera générale via django (d'ailleurs ça va concerner la barre en haut, j'y reviens après)
- Pour les divers boutons d'action, ce qui s'affiche est différent si on est déconnecté (gestionnaire multimédia, index, derniers changements, connexion, créer un compte) et si on est connecté (administrer, gestionnaire multimédia, index, derniers changements, "connecté en tant que (wiki:user:user)", déconnexion, mettre à jour le profil). J'imagine que tu a tout calé dans le menu déroulant "action" en dehors de la connexion ? Ce qui me semble un bon choix côté design. Je pense qu'on pourrait aussi mettre dans ce menu les outils : "afficher le texte source"(si pas les droits)/"modifier la page"(si on a les droits), Anciennes révisions, Liens vers la page. Il reste le bouton "remonter"... et à ce propos...
- Je me sert rarement du bouton "remonter" sur PC, par contre sur mobile c'est super utile. Bref, ça peut rester une icône dans un coin en bas à droite sur la version pc ; sur la version mobile, je ne sais pas où elle sera confortable, mais c'est là où il faudra vraiment bien réfléchir à son ergonomie . Si ce menu de droite reste fixe sur l'écran (on l'a toujours visible, comme les outils actuels), le lien "remonter" peut être là, mais ... en fait, avec les modifs proposées plus haut, je pense que je verrais ça plus light : pas de vrai menu, juste ce bouton pour remonter.
- La "piste" me semble bien placée, en face de "rechercher", pas besoin de la mettre en doublon dans le menu. Mais du coup il reste l'arborescence, et toute seule dans un menu à droite, c'est bizarre ; sous le bandeau "piste/rechercher", ça va ajouter une ligne... J'en suis au point où je ne vois pas quelle proposition pertinente faire... la mettre dans le pied de page ? Dans les faits je devrais la désactiver des wiki, l'arborescence est claire dans le lien de navigation...
- Les titres : pour des questions d'ergonomie, on est passé à des titres avec numérotation automatique. Sur les articles très denses avec beaucoup de niveaux (comme https://khaganat.net/um1/talk:fr:microscope ) cela aide à s'y retrouver, les différences de taille des polices ne suffisent pas toujours... La barre sous les titres est facultative mais personnellement j'aime bien ta proposition dans l'essai 3 (jusqu'au 3 niveau, avec des couleurs différentes).
- Passage oublié : le sommaire. J'aime pas trop le sommaire de dokuwiki, la page de microscope en est un bon exemple : quand il y a beaucoup de titre, ça met le bazar, et c'est pas extra à naviguer. J'ai installé un plugin qui permet de forcer un autre mode de sommaire dans certains cas (exemple sur https://khaganat.net/wikhan/fr:faq ) ; ce plugin a en plus l'intérêt de mettre le sommaire où on veut sur la page, mais bon, c'est rare qu'on ait besoin d'organiser différemment . Sur le thème khum1, j'avais implémenté un sommaire automatique de ce genre, qui prend toute la largeur. Le seul souci est qu'il était déplié de base, c'est bien de pouvoir le plier/déplier d'après les retours (voir https://git.khaganat.net/zatalyz/khum1-doku/issues/7 ).
- Pour la police : celle qui a servi à faire les titres a donné lieu à un fichier SVG avec les lettres de base. Il devrait être possible d'en décliner une font minimaliste. Ça fait un bail que je n'ai pas créé de police, j'espère que les outils pour le faire sont devenus plus ergonomiques 


Concernant la barre générale, indépendante de dokuwiki, elle sera gérée par Django. J'aime vraiment beaucoup ce design, la forme est parfaite ; peut-être le gris du fond à mettre en violet très clair (un gris-violet !) mais c'est un détail car cette couleur passe déjà partout. Par contre son design actuel n'intègre pas certaines contraintes. En plus du menu de la partie Khaganat et Khanat, elle va avoir à terme les éléments suivants :
- Connexion/déconnexion/enregistrement
- Lorsque connecté : de quoi gérer le profil (lien vers une page qui gèrera des préférences du type thème, pseudo affiché, mail utilisé...)
- barre de recherche générale sur tout le site
- switch de la langue
- switch du thème

Peut-être que ça peut tout se mettre dans un menu de type "configuration". Je ne sais pas trop. À noter que lorsque cette barre sera en place, il n'y aura en principe plus besoin d'afficher la langue et la connexion sur les wikis (si on arrive à lier la langue côté django à celle côté wiki, on a pas encore essayé  ). Il me semble qu'il faudra garder la page d'user sur dokuwiki... enfin je ne sais pas trop, à discuter de comment on peut gérer ça.

Un petit mot à propos du fond : on doit encore avoir la version haute qualité dans un coin, ça vaudrait le coup que je lui fasse faire un tour sur un optimizer. À l'époque j'avais du bidouillé avec gimp pour en réduire le poids, pixellisant le résultat. Ho, et... j'aime beaucoup ces fonds (y'a deux versions, khanat et khaganat, avec une symbolique...) mais comme on peut le voir sur khum1, c'est négociable Je suis assez attachée à cette saturation et au bleu qui pour moi est plus confortable dans la durée, mais c'est un aspect éminemment personnel et quand on aura un switcheur de thème, j'imposerais un peu moins mes goûts

Je n'ai pas trop d'avis sur les thèmes proposés : j'ai besoin d'utiliser pour pouvoire faire ce genre de retours. Mais je peux applaudir le travail réalisé.

Par contre, je réagis sur la remarque ci-dessous :

Peut-être que ça peut tout se mettre dans un menu de type "configuration". Je ne sais pas trop. À noter que lorsque cette barre sera en place, il n'y aura en principe plus besoin d'afficher la langue et la connexion sur les wikis (si on arrive à lier la langue côté django à celle côté wiki, on a pas encore essayé  ).

Ce que je comprends, c'est une proposition de ne plus afficher la langue (même si je n'ai pas bein compris pourquoi).
J'aimerais qu'on puisse garder la langue pour deux raisons (peut-être plus, mais ce sont les deux qui m'ont sauté à l'esprit en lisant) : d'abord, c'est pratique pour les traductrices de pouvoir voir les différentes langues et naviguer entre les différentes versions. Accessoirement, ça veut dire que s'il n'y a que des pages en français et en anglais, et qu'on a une lectrice lusophone, elle a le choix de la langue qu'elle maîtrise le mieux (qu'elle que soit celle qu'on mettra par défaut).
Et la deuxième raison, c'est que je garde l'objectif, dans la Mediateki, de réécrire certains textes en "fasybau", c'est-à-dire le français qui applique la féminisation à la sauce Khanat, et d'avoir donc des textes en français "académique" *et* en fasybau, selon les envies des lectrices. Du coup... Besoin d'afficher la langue et surtout de pouvoir en changer.

C'est une bonne remarque. Peut-être quelque chose comme une icône pour le drapeau de langue (on clique et ça déplie le choix de langue), une pour la recherche (la classique petite loupe, on clique et ça déplie un champ de recherche), et enfin une icone "configuration" avec un menu proposant de se connecter, de s'enregistrer, et de changer de thème ? Cette partie du menu ayant plus d'options une fois connecté, suivant ce qu'on aura créé en plus, par exemple un lien vers la page de préférences

Un autre thème de couleurs : https://imgur.com/a/qHfqIQt

Comme je l'ai dit sur XMPP les deux images que j'ai postées sont plus pour donner une idée du style que pour fournir un exemple de la page web. D'où le fait qu'il manque des choses dessus. C'est aussi un moyen pour moi de procrastiner.

Vous comptez internationaliser le site en combien de langues ? S'il y en a deux trois les drapeaux feront l'affaire (A moins que certaines personnes ne désactivent les images).

C'est quoi le drapeau pour le fasybau ? Bleu blanc rouge avec un K ?

Vous comptez internationaliser le site en combien de langues ? S'il y en a deux trois les drapeaux feront l'affaire (A moins que certaines personnes ne désactivent les images).

On internationalisera autant qu'il y a de traducteurs motivés... donc ça peut faire très peu ou beaucoup. Pour moi, le coup du drapeau c'est surtout pour avoir un repère visuel, si on clique dessus ça ouvre le menu de sélection des langues. Et là dans l'idéal, ce menu combine drapeau et nom de la langue.

J'aime beaucoup le essai_khaganat_2 à la fois dans les couleurs et dans l'organisation des blocs et le design des modules. Je me pose juste la question du poids de l'image d'arrière-plan. Une grande image de paysage, si c'est très joli, pèse assez lourd a priori.Je me souviens qu'on avait pas mal galéré avec Zatalyz pour alléger ce point.

En effet, je ne m'etais pas penché sur le chargement de la page. Vu qu'il y a pleins de petites images, cela impacte (le serveur a aussi un impact). A voir pour compulser ces images dans un sprite ou via une font icône.

Mais si il y a une image de fond, il faut qu'elle soit belle.

Je le reposte ici pour que ce ne soit pas perdu : https://contrast-ratio.com/
C'est un petit outil pour calculer le contraste entre deux couleurs afin de choisir des couleurs qui vont ensemble.

Pour ce qui est du background, I'm faut faire attention à ce que ce ne soit pas trop Kitsch sinon ça fait tout de suite vieux. Les considérations de poids sont bien aussi même si la mode désormais est plus d'avoir des vidéos que des images statiques ce qui n'aide pas vraiment. Un bon standard c'est 500ms pour une connexion HTML il me semble que firefox a des outils qui peuvent aider a simuler un lag réseau.

Petit message pour dire que le travail de pingouincodeur n'est plus accessible, il faut se connecter pour avoir accès aux images...

Agave est sympa pour les couleurs. Permet d'avoir les complémentaires, les opposés, des tryades, etc

Je remet les images de PC sur Framapic, ce sera valide un an.
https://framapic.org/OqiniEHED93t/MuuTD3kAheEx.png
https://framapic.org/C4xoKWVc8sdo/KfaUEba1KBTs.png
https://framapic.org/1076oXv1xaj5/jymToEdryHLW.png