#forumactif

Sebastian Stan 𓇢𓆸 1982 (43yo)

répertoire de symboles pour vos profils, fiches, aesthetics ꕤ

testés sur forumactif 𖹭𖹭

ㅤꐦㅤ-ㅤೇㅤ-ㅤꕤㅤ-ㅤ화ㅤ-ㅤ⌂ㅤ-ㅤછㅤ-ㅤ★ㅤ-ㅤ⫿⫿ㅤ-ㅤㅤ-ㅤ⪰ㅤ-ㅤꮺㅤ-ㅤꔫㅤ-ㅤㆀㅤ-ㅤꗺㅤ-ㅤ⪩ㅤ-ㅤᗝㅤ-ㅤㅤ-ㅤ੭ㅤ-ㅤ□ㅤ-ㅤꃋㅤ-ㅤꫢㅤ-ㅤㅤ-ㅤㅤ-ㅤြ

Cœurs : 𖹭 ♡ ꨄ ❥ Lunes & astres : ☽ ☾ ☿ ♀ ♁ ♂ ♃ ♄ ♅ ♆ ♇ ⊙ ✵ ✶ Musique : ♩ ♪ ♫ ♬ ♭ ♮ ♯ Alchimie & symboles anciens : 🜀 🜁 🜂 🜃 🜄 🜅 🜆 🜇 🜈 🜉 🜊 🜋 🜌 🜍 🜎 🜏 🜐 🜑 🜒 🜓 🜔 🜕 🜖 🜗 🜘 🜙 🜚 🜛 🜜 🜝 Dés : ⚀ ⚁ ⚂ ⚃ ⚄ ⚅ Étoiles & fleurs : ⛤ ⛥ ⛦ ⛧ ۞  ⚝︎  ★ ☆ ✩ ✦ ✧ ✪ ✫ ✬ ✭ ✮ ✯ ✰ ✵ ✶ ✷ ✸ ✹ ✺ ✻ ✼ ✽ ✾ ⋆ ⁂ ⁎ ⁑ ⭒ ˖ ✢ ✣ ✤ ✥ ✱ ✲ ≛ ꙳໋ ꙳  ✿ ❀ ❁ ❂ ❃ ❈ ❉ ❊ ❋ ❆ ❅ ★ ☆ ✶ ✸ ✵ ✷ ✹ ✺ ✻ ✼ ✽ ✾ ✦ ✧ ✶ ✸ ✽ ꕤ Échecs : ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟

Tu fais du RP sur forum ? Tu gères trop de personnages, trop de fiches, trop d’avatars, trop de codes, trop d’onglets ouverts et pas assez de neurones disponibles pour tout suivre ? Alors tu es probablement au bon endroit.

RPG Portal, c'est deux plateformes dédiées aux forums RPG, aux outils pour rôlistes, à la gestion de personnages, aux annuaires, aux fiches, aux codes RP, à l’organisation… et parfois aux idées beaucoup trop ambitieuses pour notre santé mentale collective.

Le projet regroupe deux outils :

🦸 Heroes Portal Un dashboard pensé pour gérer tes personnages, tes forums, tes avatars, tes codes RP et ton organisation sans finir comme un gobelin sous caféine avec 47 onglets ouverts. ➡️ https://www.heroesportal.fr/

📖 Forum RPG Portal Un annuaire / top-site pour découvrir, référencer et faire vivre les forums RPG. ➡️ https://www.forumrpg.fr/

💬Discord communautaire Il existe aussi un Discord que je vous encourage à rejoindre afin de collaborer avec leurs créateurs ! ➡️ https://discord.gg/Cn4zn2GbkA

Le but du serveur est simple : aider les rôlistes, récolter vos retours, améliorer les outils avec vous, faire circuler les forums et les projets, et construire tout ça en mode multi-cerveau — parce qu’un seul cerveau, franchement, c’est surfait.

Hey ! 👋

Je suis super heureuse de vous annoncer que : j'ai terminé de coder la nouvelle version du Blank ✨

Le travail est LOIN d'être fini. Je dois désormais m'attaquer à la documentation qui me fait un peu peur, pour être honnête. Je crois que je met la barre un peu haute et je passe autant de temps à me rationnaliser qu'à réellement travailler haha.

BREF, et si je vous montrais les nouveautés ?

LE HUB

Voici à quoi ressemble le nouveau qeel HUB ! J'ai jamais aimé l'appellation "qui est en ligne" donc j'ai profité de cette nouveauté pour renommer la section avec un nom plus pertinent qui reflètent son utilité : l'endroit où sont rassemblés les informations du forum et des membres. Ce qu'il apporte :

Nouvelle apparence

Affichage des avatars des membres actuellement connecté

Compteur du nombre de membre par groupe

Affichage automatique de l'avatar du dernier inscrit

Modification du texte facilité

Nouvelle structure HTML

Pour ce qui est du code qui génère le Hub, j'en parlais déjà dans le précédent devblog.

Aperçu du template terminé

Javascript du plugin

POSTER UN MESSAGE

Cette partie a été complètement refaite et surtout optimisée. Les nouveautés visibles sont minimes mais je peux vous assurer que cette page sera beaucoup plus facile à personnaliser !

Nouveautés :

Aperçu de votre profil lors de la prévisualisation du message (permet de mieux visualiser son message avec les dimensions du profil)

Meilleure hiérarchisation des informations

Cadre des smileys qui s'accorde par défaut au thème sélectionné

Refonte visuel de l'éditeur de texte avec des boutons personnalisables

Aperçu du profil

Ca m'a toujours agacée de pas voir mon message dans les vrais conditions du post (notamment pour poser une fiche), donc voilà un petit ajout de pur confort. A savoir que le bloc de prévisualisions à son propre template donc il est facile de reprendre la structure de vos sujets pour l'appliquer ici ! (avatar pour la démo par @rathmoore)

Aperçu du template

Nouvel éditeur de texte

Je suis particulièrement contente d'avoir enfin un éditeur de texte qui parait un peu plus "moderne". Les icones sont personnalisables comme du texte, ce qui veut dire plus d'harmonie dans vos designs ! J'ai retiré les boutons inutiles pour ne laisser que l'essentiel et aérer un peu la zone. Normalement les codes qui permettent d'ajouter les balises personnalisées fonctionnent toujours !

Javascript pour personnaliser l'éditeur de texte

BARRE DE NAVIGATION

Avant, la navbar était générée avec une seule variable ({GENERATED_NAV_BAR}) ce qui rendait sa personnalisation frustrante. Désormais le HTML est totalement déconstruit et vous pouvez afficher les liens dans l'ordre que vous voulez, horizontalement, verticalement, séparément, ...

Il est également possible de personnaliser l'alerte d'un nouveau MP ! Par défaut, c'est une petite pastille.

SIDEBAR

Tous les éléments "flottants" ont été rassemblé dans la sidebar pour créer un vrai petit menu de profil dans lequel on retrouve Switcheroo et Notiffi. J'y ai également ajouté deux éléments HTML qui permettent d'afficher son propre avatar et son pseudo. Un petit plugin discret que j'ai appelé "Miroir" que vous pouvez mettre n'importe où tant que vous utilisez les bonnes balises HTML !

Aperçu du template dédié à la sidebar

Javascript Miroir

EDITION DE PROFIL

Vous remarquez ? PLUS DE CHAMPS INUTILES !

Fini de voir les champs "genre, date d'anniversaire, humeur" ou encore "facebook, twitter, SKYPE??" alors que personne s'en sert mais que pour une raison inconnu on peut pas retirer. C'est désormais chose faite.

Elles sont juste invisibles mais au moins ça épure la page d'édition de profil !

AMÉLIORATION DU CSS

Tout le CSS a été refait ! Ca m'a permis de l'optimisé à son maximum de retirer presque 400 LIGNES ! Du précieux espace que vous préférez utiliser pour votre design.

La hiérarchisation a été revu et les blocs mieux commentés. Dans la documentation vous aurez accès à un chapitrage des différentes parties ainsi que les templates qui sont concernés.

Pour réussir cet exploit, j'ai dû me résoudre à deux choses :

imposer un CSS de base dans un fichier importé : c'est un fichier libre d'accès, hébergé sur deux plateformes fiables (Github et JSdlvr), qui me permet de mettre tout le CSS "structurel". Un CSS auquel vous aurez peu de chance de toucher car il sert juste à faire ajuster les mises en page de page dont on a pas accès (la page d'inscription et connexion par exemple). Mais aussi pour y mettre tout les indésirables de FA.

créer un CSS utilitaire : parfois, vous avez du code qui se répète beaucoup. Par exemple, pour avoir des avatars carrés bien redimensionnés. J'ai donc créé des class dites "utilitaires" pour les réutiliser partout. Toutes ces class sont aussi dans fichier importé (libre d'accès).

Libre à vous de récupérer les codes de ces deux fichiers importés et les réhéberger de votre côté pour les modifier !

Fichier CSS de base

Fichier CSS utilitaire

MEILLEURE GESTION DU JAVASCRIPT

C'est la partie la plus invisible et la plus technique de cette mise à jour, et pourtant celle qui m'a pris le plus de temps.

J'ai créé une "librairie de code" javascript avec plein de fonction utilitaires que j'ai appelé Blanket (🥁). En gros, j'ai fais une boîte à outils qui permet de créer des scripts plus facilement et plus proprement.

Tout les scripts et plugins du Blank on été réécrit avec ces outils. Ca m'a permis de les améliorer, de pas réécrire des fonctions en double ou en triple, d'avoir une meilleure gestion du debug etc.

Exemple concret : avoir une fonction qui récupère l'avatar des membres pour les afficher ailleurs. Elle est utilité dans Notiffi et le Hub, et puisqu'il s'agit de la même fonction, elle optimise les requêtes faites par votre navigateur et réduit (au possible) le temps de chargement des pages malgré ces deux "gros" plugins qui modifient beaucoup Forumactif.

Je ne ferais pas de tuto sur comment l'utiliser car c'est d'un niveau avancé et je crains que ça serve à trop peu de personne pour le temps que ça prendrait de tout documenté en détails. Si vous êtes néanmoins désireux d'avoir une "démonstration" de comment ça fonctionne, je serais ravie de vous montrer ça sur Discord !

Blanket est un fichier javascript importé de base avec le Blank. Il sera désormais nécessaire de l'avoir pour utiliser les scripts/plugins, que vous utilisez le Blank ou non. Comme pour le CSS, il est libre d'accès et vous pouvez le réhéberger vous-même.

EN VRAC ET FIN

De nombreux éléments de fonctionnalités ont été supprimés dans les templates pour les épurés (encore). Par exemple, il n'est plus possible d'avoir des annonces défilantes ou la petite fenêtre de recherche rapide.

Ce n'est pas définitif, je ferais des tutos à part pour les ajouter. J'ai néanmoins l'impression que les forums qui les utilisent sont trop peu et qu'il est préférable de s'en décharger par défaut.

Et voilà !

Je sais pas si quelqu'un lira ça parce que ce post est gigantesque mais ça me permet de revenir aux nouvelles et de récolter un peu de motivation pour entamer la documentation. De voir des gens intéressés ça me permet toujours de me rappeler que je fais pas ça dans le vide ❤