Partie 3 - Quelques principes de codage à connaitre

Pour ceux d'entre vous qui auraient déjà de bonnes bases en codage (html et css), vous risquez de lire des informations que vous avez déjà acquises. Cependant, cette partie peut être une bonne piqûre de rappel sur le fonctionnement du codage, et j'y aborde en second temps quelques notions bien utiles sur les templates ForumActif.
Par ailleurs, pour ceux qui trouveraient ces notions de codage déjà compliquées, sachez qu'il n'est pas vital de tout retenir par coeur d'un coup. A force de lire ces explications un peu partout, en voir des exemples dans des tutoriels ou tout au long de ce cursus spécial, vous parviendrez à retenir l'essentiel. Pour une première approche, cherchez juste à comprendre simplement l'idée donnée.

Comment fonctionnent le HTML et le CSS ?

Je l'ai déjà mentionné, mais n'oubliez pas que pour de meilleures connaissances en codage le "Cursus codage" est le plus indiqué. Ici, les notions sont importantes pour mieux comprendre le cursus sur la conception de thème FA, mais ne fera pas de vous un codeur à proprement parlé. Il risque de vous manquer d'autres éléments pour cela.

Entrons cependant dans le vif du sujet : le html et le css sont deux langages différents mais complémentaires qui ne peuvent pas vraiment s'utiliser l'un sans l'autre. Le premier sert à écrire des éléments dans une page (des titres, des paragraphes...) l'autre sert à les mettre en forme. Il est important de les utiliser ensemble et de comprendre comment cela est possible.

Imaginons donc un élément en html, par exemple un bloc de texte. Normalement, dans une page il sera possible d'utiliser la balise html de paragraphe "p" :

Code:

<p>Notre paragraphe ici/</p>

Mais sur les forum cette balise apparait assez peu finalement et donc on la pratique pas vraiment. Ce qui sera plus utile c'est un simple "span".

Code:

<span>Notre paragraphe ici.</span>

Si vous testiez ces deux codes sur une page internet vierge, vous obtiendrez exactement la même chose : le texte "Notre paragraphe ici."
Pour mettre en forme ce texte, il y a deux solutions :
- vous pouvez tout d'abord inclure votre mise en forme directement dans le code, comme ceci :

Code:

<span style="display: block; background-color: white; padding: 2px; border: 1px solid grey;">Notre paragraphe ici.</span>

- ou bien vous pouvez raccorder un css via une "feuille CSS", et cela tombe bien car nous avons à disposition une feuille css sur notre forum ! Pour utiliser cette méthode, il faut donner un nom à notre "span", afin de pouvoir lui appliquer un css ensuite.

Code:

<span class="paragraphe">Notre paragraphe ici. </span>

Notre span possède désormais le nom "paragraphe", il sera donc identifiable par ce nom dans le css. Ainsi, nous pouvons maintenant lui lister des propriétés de style dans la feuille CSS sous la forme suivante :

Code:

.paragraphe
{
display: block;
background-color: white;
border: 1px solid grey;
padding: 2px;
}

Cela aura le même effet que la première solution.



Tout simplement car si vous avez beaucoup d'éléments où doit s'appliquer le style, vous devrez chaque fois retaper le code css dans votre code html. De plus, si vous voulez modifier quelque chose dans ce code, une couleur par exemple, il faudra la modifier PARTOUT ! C'est une horrible perte de temps... Par contre, si vous avez fait votre css à part, il vous suffira de modifier ce css et le style choisi sera appliqué dans tout les éléments qui portent le nom attribué, comme ici "paragraphe".



Tout cela pour justifier de l'utilisation de la feuille CSS d'un forum, qui est d'ailleurs aujourd'hui un outil majeur et même vital pour vos forum, dès que vous souhaitez le personnaliser un peu.
Si certains points de ce début de partie ne sont pas clairs pour vous, c'est peut-être que vous avez besoin de plus de détails, je vous note donc quelques liens utiles vers le cursus codage pour vous aider.

Que sont les templates et comment les utiliser ?

Voilà que nous entrons dans un aspect plus délicat du codage sur forum : la compréhension des templates. Tout d'abord, qu'est-ce qu'un template ? Il s'agit de la structure de vos forum, tout simplement. Il a été généreusement mis à votre disposition par ForumActif, morcelé pour plus de facilité selon les différentes parties affichées : haut de page, accueil, catégories, listes de sujets, messages...
Ils contiennent tout les éléments présents sur votre page, à l'exception de la programmation (langage php, plus complexe, que vous ne pourrez pas utiliser sur les forum). Si vous en ouvrez un vous remarquerez qu'il y a beaucoup d'éléments et que cela semble incompréhensible. En réalité, on peut distinguer plusieurs types d'éléments :
- du html

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> [...] </table>

(première ligne du template "index_box" dont le tableau se referme tout à la fin, ligne 85 dans le template par défaut).
Voilà donc une table (ou tableau), ici vide mais dans votre template il comporte des lignes (tr) et des cases (td), ainsi que des cases de titre (th). C'est ainsi que sont présentés vos catégories, avec la colonne pour l’icône de sujet, celle pour le contenu, celle du nombre de vue, etc...

- des variables

Code:

{catrow.tablehead.L_FORUM}

(celle-ci se trouve à la ligne 22 de votre template, toujours "index_box"). Une variable est un code qui n'affichera pas toujours la même chose, cela dépendra de divers éléments. Par exemple une variable de date et heure affichera la date et l'heure actuelle, donc au moment de l'actualisation de la page. Ce n'est pas une information fixe, elle est "variable", d'où le nom de ce bout de code. La variable que j'ai mise ici en exemple affiche le titre de catégorie. Il change donc puisque c'est vous qui le déterminez dans le panneau d'administration lorsque vous créez une catégorie.
L'utilisation de ces variables est simple : il permet de déplacer le dit élément où vous le souhaitez dans le template. Vous pourriez par exemple décider d'afficher le titre de catégorie à la fin de la catégorie et non au début, pourquoi pas ! Ce ne serait pas une bonne idée niveau ergonomie car il faut tout de même que cela reste pratique pour le visiteur, mais ça serait faisable !
Vous pouvez constater que certaines variables se trouve à l'intérieur des balises html, comme par exemple celle-ci :

Code:

<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>

(lignes 53 à 55 du template index_box).

Elle affiche le titre et lien du forum. Par exemple sur Never-Utopia vous auriez "Affichage", puis "Votre vie à bord"... Tout cela c'est des forum. Vous avez donc la variable du nom du forum qui est celle-ci :

Code:

{catrow.forumrow.FORUM_NAME}

Mais ! Ce titre doit être en lien pour conduire à l'intérieur du forum, or le lien n'est jamais le même, chaque forum possède son propre lien, c'est logique, du coup il est nécessaire d'avoir une variable en guise d'adresse dans le code du lien et c'est celle-ci :

Code:

{catrow.forumrow.U_VIEWFORUM}

Vous pouvez très facilement vous assurer de ce que j'avance : essayer de supprimer la variable du lien et votre forum ne pourra pas s'ouvrir, le titre ne mènera nulle part.
Il est donc important de ne pas enlever de variable, ou du moins pas de variables importantes. Rassurez-vous, vous serez guidés là-dessus, je ne vous ferez pas enlever n'importe quoi.

- les marqueurs

Code:

<!-- BEGIN forumrow -->

(ligne 43)
Ces éléments sont un peu particuliers. En effet, normalement un marqueur dans un code html est juste une "note", une indication pour aider à l'utilisation, un repère si vous préférez, et donc totalement facultatif et indépendant. Il devrait pouvoir être enlevé. Et bien non, pas dans les templates. Ces marqueurs sont bien plus que des annotations, car si vous enlevez par exemple celui que j'ai mis en exemple cela vous mettra un message d'erreur à la validation du template. En effet, ils vont par deux (BEGIN pour le début d'un élément, END pour la fin) et s'il en manque un des deux vous ne pouvez pas valider. Par contre, vous pouvez valider en retirant les deux, le début et la fin. Cependant, comme pour les variables, il y a des duos de marqueurs qu'il ne faut pas retirer, et d'autres que l'on peut se permettre d'enlever.
Si vous enlevez par exemple celui que j'ai mis plus haut ainsi que son frère de "fin", vous n'aurez plus rien d'affiché à l'intérieur de vos catégories, car ce sont eux qui délimitent l'affichage des forum à l'intérieur, et sans eux votre forum ne comprend pas où il doit afficher ce que vous avez mis, même si vous avez vos forum, avec l’icône, le titre, description etc... rien ne s'affichera.



Le HTML peut être totalement modifié, mais les variables et les marqueurs doivent rester, se sont eux qui affichent le contenu. Si vous décidez d'enlever le tableau pour l'affichage des catégories par exemple, ce qui est très souvent le cas aujourd'hui, vous pouvez tout défaire pour tout reconstruire différemment, mais il faudrait maintenir les variables et les marqueurs pour que l'affichage soit bon.

Pas de panique, nous verrons petit à petit comment faire des mises en formes simples sans toucher (ou presque) aux templates, puis nous verrons quelques astuces pour bouger certains éléments des templates facilement.

Règle essentielle concernant les variables :
Vous allez peut-être me dire que vous connaissez déjà des variables, comme par exemple la célèbre

Code:

{USERNAME}

qui affiche pour chacun son propre pseudo à la place de la variable. Tout à fait ! C'est un exemple de variable. Par contre, vous ne pouvez pas utiliser ces variables n'importe où.
Essayez de mettre cette variable dans un template et cela ne vous affichera RIEN !
De la même manière, essayer de mettre une variable de template dans un message et ça sera pareil.
D'une manière générale, les variables ne sont utilisables QUE dans leur propre template. Elles peuvent être déplacées à l'intérieur de celui-ci, mais pas déplacées dans un autre template. De la même façon, les variables utilisables dans les messages ne peuvent être mises que dans les messages et la page d'accueil.

L'utilisation des templates peut être diverse selon votre niveau. Tout d'abord il faut savoir qu'une première utilisation simple n'implique pas de modification du template ! En effet, vous avez pu constater que les templates comportent de l'HTML, et des éléments ayant des "class" ou "id", en d'autres termes un nom permettant de les identifier. Vous pouvez donc vous servir de cela pour mettre en forme ces éléments via le css, sans toucher votre template !





La seconde utilisation des templates est bien sûr sa modification. Celle-ci peut avoir plusieurs degrés, il n'est pas nécessaire de TOUT supprimer pour tout reconstruire dès le début, certaines modifications simples peuvent permettre une personnalisation très intéressante ! Vous en aurez d'ailleurs des exemples dans chaque partie !

Les erreurs courantes à éviter

Pour terminer cette partie, je vous propose quelques erreurs que l'on fait tous à un moment donné et qu'il faut éviter bien sûr. Du coup si vous êtes avertis de cela avant de vous lancer c'est nettement mieux que d'y être confronté soudain sans savoir d'où vient le problème.


Abus de travail ?
Et oui, il arrive qu'un forum test ne suive plus votre rythme ! Si vous y appliquez beaucoup de modifications touchant au css et aux templates, il arrive qu'il bug et vous affiche le css que vous aviez une heure avant... C'est très surprenant au début je vous l'assure ! Mais rassurez-vous, ce n'est pas vous qui êtes fautif là-dessus, et avant de modifier quoi que ce soit dans votre code pensez à rafraîchir totalement la page avec les moyens suivants :
- Ctrl + F5 sur votre clavier
- lien "supprimer les cookies du forum", en bas de votre forum normalement
=> attention ce lien vous obligera à vous reconnecter sur le forum ensuite

Si le problème persiste et vous empêche de continuer, ne mangez pas votre souris et ne balancez pas votre écran à travers la pièce, faites juste une pause ! Votre forum en a besoin, et ça ne vous fera pas de mal non plus x). Remettez la suite de votre élaboration à quelques heures, voire au lendemain.

Partie précédentePartie suivante