#code rpg

[rizwans]

recherche de tuto code

coucou!! je m'adresse à la communauté FA parce que je suis à la recherche d'un tutoriel qui expliquerait comment ajouter des liens "custom" en plus des liens de sous-forum présents dans l'index. je crois me rappeler d'un tuto qui jouait les avec id des catégories mais peut-être que j'hallucine complet. si jamais vous voyez de quoi je parle, help a girl out please!!!!! merci merci merci <3

[midnight---shadow]

FICHE RP #7 - MIDNIGHT SHADOW



{ LIEN VERS LE CODE }



crédit gif : autumnchillthatwakesmeup

[batterycitycodes]

Devout like the moonlight — pack trama, rol, baúl de personaje y ficha

PREVIEW — DESCARGA

Se puede cambiar el color dorado, viene donde en el código. Si usan varias en un mismo tema, el color de acento siempre debe ser el mismo para todos los participantes.

CSS externo.

Las imagenes se autoajustan siempre.

No quiten el crédito.

La fuente es Arcane Gold, el link de la webfont viene de mi propio dropbox.

En la cronología les recomiendo que numeren del 1 al 9, luego el cero y vuelvan a empezar. No se rompe, pero visualmente es más bonito si sólo tienen un número.

Se pueden agregar más personajes al code de la trama, tantos como sean necesarios.

A cambio, aunque sea, de dos kofi les agrego atributos a la ficha.

Gifs de Til The End of The Moon.

No tiene scrolls, no tiene hovers ni nada. Se sabe que no me gustan esas cosas, jaja. De hecho, vi varios de mis códigos y dije: tienen demasiadas cosas, quiero hacer algo que tenga muchos espacios.

[elementary-graph]

CODE SIGNATURE #1 | WATSON

Je vous propose ici un premier code pour signature en libre service. La signature doit être installée en iframe (les explications sont dans le lien du code) et les couleurs et les icons sont facilement modifiables. Vous pouvez voir un aperçu du code en direct juste ici. Le code et les explications se trouvent ici.  --> Pensez à liker, rebloguer et me suivre pour soutenir mon travail. --> N’enlevez pas les crédits. 

CÓDIGO DE FIRMA #1 | WATSON

Propongo aquí un primer código para firmas en foros de rol. La firma debe estar instalada en iframe (las explicaciones están en el enlace del código) y los colores y íconos son fácilmente modificables. Pueden ver una vista previa del código en vivo aquí. El código y las explicaciones se pueden encontrar aquí. --> Recuerdan dar me gusta, rebloguear y seguirme para apoyar mi trabajo. --> No quitar los créditos.

[creatreasurebox]

Code rp/post simple #1

[ pastebin square ] [ pastebin circle ]

Informations :

Like or reblog if you use this code ❤︎

Don't remove the credit at the end of the code and try to credit the people who made the gif or icons you're gonna use.

You are welcome to change the colors, size, typo/font or number of icons as much as you want.

This code is made to work on forumactif platforms.

I hope you will like my first code I post on Tumblr, I'm not a master in it, but I like to make some small ones now and then. ☺️

[noxeternam]

Pourquoi vous devriez vous détacher du phpbb2

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 🥐 👀

[midnight---shadow]

FICHE RP #4 - MIDNIGHT SHADOW

{ LIEN VERS LE CODE }

crédit gifs : cloudyyminded

[midnight---shadow]

FICHE RP #6 - MIDNIGHT SHADOW



{ LIEN VERS LE CODE }