#modernbb

⚫️  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 💪🏻