El foro Doll's Wolrd está hecho con la finalidad de ser una skin básica y simple tanto en el diseño, entendimiento y manejo de la misma, pero sin dejar de lado una apariencia agradable que genere una comodidad visual para quien haga uso de ella.
Esta skin es gratuita pero limitada a tres cupos —por el momento—, para que sea más sencillo para mí monitorearla y poder atender las dudas respecto a la skin en caso de que surja algún problema con los códigos.
Normativa de uso de la Skin:
—El diseño del skin base es como se ve en la vista previa, los cambios que se pueden realizar es de colores e imágenes del foro.
—Yo hago la instalación de la skin para poder hacer las modificaciones pertinentes en caso de haber errores.
—Los imágenes del foro son responsabilidad del administrador, es decir, el header, grupos, subforos y entre otros. Dejaré sólo una categoría arreglada como muestra, los demás subforos queda a responsabilidad del administrador.
—La skin no incluye tablillas de administrativas. Los créditos deberán permanecer en el foro con un link directo a mi tumblr, cada cierto tiempo se realizará una revisión para asegurarse que no han sido borrados.
—No se aceptará la instalación de la skin en foros de prueba o foros que no estén abiertos al público.
—Está prohibida la copia y/o distribución de los códigos parcial o total sin previo aviso. Siempre pueden mandarme un mensaje privado, no cuesta nada.
One Life fête ses 6 mois et prend une nouvelle petite forme pour cette rentrée avec le magnifique travail de @code-lab (Genius Panda ♥) et le Blank Theme qui nous a permis de passer sous ModernBB et donc enfin avoir le FA Messenger, un mode Nuit tout aussi beau que le mode jour et une interface plus accessible ! Nous sommes excitées par toutes les nouveautés niveau intrigue, jeux et rp qui sont lancées avec cette nouvelle version et le design toujours par @ohdaylight
Pour cette version, un petit côté enquête en court pour rester dans l'esprit d'une île pas aussi tranquille qu'il n'y paraît. Rejoignez nous ;)
en modernbb
thème entier et suite de sujets
FORUM VITRINE + SUJET EXPLICATIF
heyyy ! je vous retrouve aujourd’hui avec un thème forumactif en libre service que j’avais réalisé il y a un certain temps mais qui, je pense, pourrait sûrement servir. il est complet et totalement opérationnel. le thème compte 28 templates, une PA et une suite de sujets administratifs classiques (mais optionnels).
il est prévu pour vous faciliter un maximum la vie pendant les maj avec un minimum de connaissances en codage. modifier profondément la structure des templates demande par contre de bonnes connaissances en HTML & CSS (ça ne sera pas nécessaire si vous décidez de le prendre tel quel ou avec un minimum de modifications, rassurez-vous).
si tout cela vous intéresse, je vous laisse lire les sujets explicatifs laissés sur le forum mis en lien ci-dessus qui est en même temps un forum vitrine et le libre service. n’hésitez pas à me revenir sur en dm ou en ask sur tumblr à la moindre question / au moindre problème !
A complete, 100% customisable forum code (ModernBB)
Integration of popular features among forum users
Detailed explanations throughout the code
Clear documentation that will guide you step by step
A community to share with, as well as technical support
All of this for free.
Codes and documentation are available in French and in English. Starting now, I'll mostly post in English to reach a majority of this vast RPG community. 🙏
Helping and sharing
All feedback is welcome! This is the result of about a hundred hours of work, made available to everyone. Your comments and shares are more than appreciated! ❤❤❤
If, thanks to the Blank Theme, you've saved time or learned something, don't hesitate to support me on Ko-Fi so the project can continue to grow!
un nouveau design que je continu de travailler de la façon la plus facile qui soit grâce au blanktheme de @code-lab et de tous ses collaborateurs que je remercie beaucouuup <3
Ou encore : Pourquoi ne pas utiliser les tableaux HTML pour faire de la mise en page.
Ce qui m’amène à rédiger ce post, c’est une question qui a été posée sur le Discord des Rpgistes.
💬 C'est vraiment mieux de faire des forums sur ModernBB plutôt que sur phpBB2 ?
S’en est suivi cette discussion :
- Personne 1 : phpBB2 ça pue, y'a trop de tableaux.
- Personne 2 : Mais les tableaux je les connais, je les aime, je les maîtrise. (...) J’suis toujours resté sur phpBB2 et j'ai jamais eu le besoin d'en bouger.
- Personne 3 : Mais à part les tableaux, y a vraiment quoi de différent ? On peut vraiment faire plus de choses sur ModernBB ou au final ce sont les mêmes possibilités sauf que ModernBB est plus moderne que phpBB2 ?
- Personne 1 : phpBB2 devient obsolète en fait, c'est une base.
- Personne 4 : Le souci, c'est que les codes en libre-service, c'est quasi que du phpBB2.
- Personne 3 : Après, “obsolète”, ça reste encore très évasif comme réponse.
Du coup, j’ai décidé de mettre mon grain de sel et j’ai essayé d’expliquer pourquoi phpBB2 n’est pas recommandé et pourquoi, au contraire, ModernBB l’est.
Au programme :
La structure de phpBB2 : les tableaux HTML
Pourquoi il ne faut pas utiliser les tableaux pour faire de la mise en page : la notion de sémantique en code
Les solutions adaptées à la mise en page : flexbox et grid
Ça risque d’être un peu long, mais y’a beaucoup d’images et je vous jure que c’est pas compliqué 🙏🏻
⚫️ LA STRUCTURE DE PHPBB2 : Les tableaux HTML
phpBB2 est codé en tableaux. En HTML, un tableau (<table>) est un élément qui sert à la représentation de données.
Pour que vous vous rendiez compte de ce que représente un tableau en code, on va voir ça en quelques schémas.
On peut le diviser en 3 parties : l’entête ( <thead> ), le corps ( <tbody> ) et le pied ( <tfoot> ).
Sauf que, cette division ne suffit pas.
Chacune de ces parties est composée de lignes ( <tr> ), qui sont elles-mêmes composées de cellules ( <td> ).
Jusqu’à présent, ça paraît simple. Mais en fait, niveau code, ça s’alourdit très vite et ça devient rapidement le bazar. Voici un exemple de code d’un tableau.
Si on récapitule, dans un tableau HTML, on a :
<table> : le conteneur du tableau
<thead> : l’en-tête
<tbody> : le corps
<tfoot> : le pied
<tr> : une ligne
<td> : une cellule
<th> : une cellule mais spécifique au <thead> (c’est pas marrant si y’a pas d’exceptions)
Et si vous êtes en train de vous dire : “ce code ci-dessus doit produire un tableau de fifou tellement c’est le bordel !” Et bien... Non.
Voilà ce que ce code donne ⬇️
Oui, je sais, décevant.
Bref ! Maintenant, vous comprenez (à peu près) la structure d’un tableau en HTML.
Dites vous que vos forums en phpBB2 sont entièrement codés en tableaux. Ça fait beaucoup de balises.
Et comme Forumactif est fourbe en plus de tout ça, il ne nomme pas ses différentes balises ; ce qui rend la personnalisation par le CSS ultra compliquée et relou.
⚫️ POURQUOI IL NE FAUT PAS UTILISER LES TABLEAUX POUR FAIRE DE LA MISE EN PAGE : La notion de sémantique en code
Je pense que je ne vous apprends rien si je vous dis qu’en code, il y a le HTML et le CSS. Les deux sont indissociables mais restent complètement différents :
Le HTML sert à la sémantique. Autrement dit, il va dire au serveur web qui affiche votre page que : "ceci est un titre principal", "ceci est un paragraphe", "ceci est un header", "ceci est une barre de navigation"... Ces informations servent notamment au référencement des sites web (= faire en sorte que votre site se trouve en bonne position dans les résultats de moteurs de recherche).
Le CSS sert à la mise en page. = mettre telle chose en gras, en couleur, ajouter une marge, centrer...
Si vous avez suivi jusqu’à présent, vous vous souviendrez qu’on a dit que les tableaux étaient des éléments HTML. Donc, ils ont une valeur sémantique.
💡 Un tableau, c’est un élément HTML qui répertorie des données.
Typiquement, ce que fait phpBB2, c’est qu’il utilise les tableaux pour coder une mise en page :
une ligne de tableau sera le titre d’une catégorie
une autre ligne sera une sous-catégorie ; dans laquelle :
une cellule sera l'image de statut de message,
une autre cellule sera la description,
une autre cellule sera le dernier posteur,
etc...
Ce n'est pas correct de procéder ainsi car on n’utilise pas la valeur sémantique d’un tableau (= on ne répertorie pas des données).
⚠️ Il faut bien retenir ici que la SÉMANTIQUE est foncièrement différente de la MISE EN PAGE.
Pour vous donner d'autres exemples de la différence entre sémantique et mise en page :
<strong> en HTML vous donnera le plus souvent du gras dans votre navigateur. Pourtant, <strong> ne veut pas dire “je mets mon texte en gras” ! <strong> veut dire que l'élément balisé est important, donc il faut le différencier visuellement du reste. Les navigateurs traduisent cette importance par le gras. Mais si vous voulez mettre un élément en gras juste pour “le style”, il faudra utiliser le CSS (par exemple, en réglant la valeur du font-weight).
<em> en HTML vous donnera le plus souvent du surlignage dans votre navigateur. Mais <em> veut dire "emphase" ; c'est-à-dire que vous mettez l'accent sur l'élément que vous balisez. Si vous voulez le faire ressortir dans votre texte autrement qu’avec un surlignage, vous allez utiliser le CSS (et d’ailleurs, vous en faites ce que vous voulez : ça peut être en gras, en italique, d'une couleur ou typo différente... ça c'est vous qui décidez !).
Ok mais du coup, si on peut pas utiliser les tableaux pour faire de la mise en page, comment on fait ?
⚫️ LES SOLUTIONS ADAPTÉES À LA MISE EN PAGE : flexbox et grid
Pour faire de la mise en page, il faut utiliser le CSS, qui lui, est fait pour ça !
Les deux outils de mise en page les plus utilisés sont flexbox et grid.
En très (trèèèès) gros résumé :
Flexbox : pour mettre en page des composants qui remplissent la page
Grid : pour construire le gabarit général de la page
Le but ici n’est pas de vous faire un cours sur flexbox et grid (@code-lab est la maître de grid ici, pas moi).
C’est un peu “compliqué” à saisir quand on se lance dedans, mais une fois que vous avez compris la logique, ils changent la vie. (En plus, y’a pleeeeins de jeux sur Internet pour apprendre à utiliser flexbox de façon ludique. Moi, c’est à force de faire ces jeux que j’ai dompté la bête.)
Et pour terminer, pour répondre à l’une des questions du début de ce post : ModernBB est dit plus “moderne” et recommandé par les codeurs dans la communauté RPG justement parce qu’il n’utilise pas de tableaux et il tourne nativement avec flexbox pour sa mise en page.
Mais je suis d’accord avec le fait que ceux qui savent coder (me included) devraient produire davantage de codes en libre-service utilisant flexbox et grid, pour inciter ce détachement des tableaux et véhiculer les bonnes pratiques. Les gens ont appris à se servir des tableaux pour coder sur les forums RPG car il n’y avait que ça de dispo en libre-service à l’époque (et encore un peu maintenant). À nous de changer ça 🙏🏻
Voilààààà c’était très long mais on m’avait demandé des explications plus détaillées 👀 J’espère ne pas vous avoir ennuyés et vous avoir appris quelque chose aujourd’hui. Si vous avez des questions ou des zones d’ombre, n’hésitez pas à laisser un petit commentaire et j’essayerai d’y répondre au mieux 🥰
De plus, si ça vous intéresse d’apprendre flexbox et grid, je serais plus que ravie de vous guider et de vous aider dans votre apprentissage alors n’hésitez pas à me le demander 💪🏻
Allez, je vous laisse, je vais manger maintenant 🥐 👀
La skin Rose Red es una skin exclusiva de nivel avanzado que realicé para un foro privado. Los colores principales son el negro, rojo, ornamentaciones doradas, la integración de algunas transparencias. Además, como agregado contiene partículas por la pantalla y reproductores de música. Me tomó aproximadamente un mes terminarla por completo con sus respectivas tablillas y entre algunas correcciones básicas durante los primeros días de uso.
Mi intención no era solamente mostrarles lo que hice, sino que más o menos esto es lo que pueden esperar de mi próxima skin gratuita nivel intermedio que contendrá tablillas incluidas.
