Mission #9 - les catégories, c'est du gâteau [ TOUS niveaux ]

Oyé oyé !
Tentons aujourd'hui de dédiaboliser nos chères catégories de forumactif ou, si l'on en est familier, d'atteindre la paroxysme de l'originalité (oui oui rien que ça, visons haut les amis). Cette mission s'adresse à TOUS, mais vraiment, vraiment: à TOUS. A TOUS. Je m'explique. A travers différents exercices (trois à l'heure actuelle, si vous avez des idées, n'hésitez pas à m'envoyer un MP), quelque soit votre niveau, vous pouvez participer.

Ne t'enfuis pas jeune novice ! *Youp attrape jeune novice sauvage par le col* Je fournirais TOUS les tutoriels nécessaires à la réalisation de catégories, et je jure solennellement de la facilité de ces tutoriels. En effet ils n'utilisent pas de tableaux, tout est placé en unité de longueur (pixel généralement, pourcentage pourquoi pas). C'est donc plutôt facile. De plus, je vais aussi répertorier tout ce qui fait office de "détails" (les tutos sur les animations typiquement, ou celui sur l'ajout de l'avatar du membre), pour pouvoir atteindre ce que tu souhaites réellement. Le gros avantage d'une mission est que tu n'es pas tenu à l'anonymat des défis, tu peux donc poster dans "problème avec mon code" ou à la suite afin que l'on puisse t'aiguiller (et c'est même mieux <3 ). T'aiguiller, oui, pas te mâcher le boulot ! Le but est réellement que tu progresses et que finalement, tu réalises la facilité de la chose, pour peut-être t'essayer à plus compliqué, qui sait ?! Les exercices 1 et 2 seront tout à fait dans tes cordes héhé, et si l'envie t'en prends, n'hésite pas à participer à l'exercice 3. N'hésite pas à poser des questions si tu n'as pas compris quelque chose dans les tutos fournis !

Et toi qui connaît quelques arcanes secrets du codage (ou qui a déjà lu tous ses tutos mwaha), ne tourne pas les talons ! L'exercice 3 demande de meilleurs connaissances car il s'agit en fait de déconstruire complètement la structure basique de forumactif, d'aller vers le plus originale, le plus foufou pourquoi pas! La participation de Palcopie au défi
"repenser le design des forums" m'a trèèèèès fortement inspiré cet exercice. Tu peux aussi participer aux deux autres exercices, revoir les bases ne fait pas de mal et le deuxième porte plutôt sur la capacité à harmoniser, à coder en fonction d'un design.

Exercice 1 - Pour commencer, exercice libre
En bref : Zouuuu, il est temps de créer ses propres catégories à l'aide de tutoriels et pour commencer, d'un petit schéma. L'exercice est sous spoiler à la suite :

Exercice 1:

Exercice 2 - réaliser des catégories selon un thème pré-existant, harmoniser son design
En bref: s'appuyer sur un design de base pour créer des catégories qui s'harmonisent bien avec lui. Des images diverses sont fournies !

Exercice 2:

La base, images, couleurs et préférences:

La base, le css rudimentaire et une template modifiée:

Les images fournies pour les catégories:

Exercice 3 - Rendre méconnue la structure de base
Vous avez compris le but: abats la structure de base de forumactif, ouvrez la porte à toutes vos envies les plus folles ! Ce qui serait pas mal, c'est de vous poser un objectif en terme de difficultés, d'essayer de poser par écrits vos questionnements sur le sujet, les difficultés que vous rencontrez, en somme, le cheminement de votre codage (mais vous n'êtes pas du tout obligé) (ça peut juste permettre à d'autres de se questionner avec vous quand à votre but, de progresser ensemble vers une connaissance encore plus grande) (MWAHAHAHAHA oui la connaissance mérite un rire diabolique)

Exemple de la participation de Palcopie au défi "repenser le design des forums" :

Coucou Youp ! Super mission que tu offre ^^. J'ai pris plaisir à la faire *enfaîte j'ai fait seulement la première pour le moment mais bon xD* .

Alors voici mon superbe, magnifique et sexy schéma. Et oui c'est moche mais bon j'en fait jamais mais comme tu en parlais dans le texte de la mission je me suis dit que j'allais en faire un ^^. Comme le tuto d'Okh parlais des cats sur deux colonnes, je me suis dit que j'allais les réaliser comme lui. J'aime beaucoup ce genre de catégorie alors, pourquoi pas ^^.

Pour être tout à fait honnête, je n'ai pas changer grand chose du codage d'origine. J'ai rajouter certaines choses et modifier les dimensions pour qu'elle soit moins longues. J'ai plus travailler coté graphisme pour la modification ^^. Que voulez-vous une bleue se cache sous se orange .

Bref voici un screen de mon résultat.

Vous pouvez les voir action sur un de mes forum test.

Heureuse que cette mission te plaise ! Ta création est sublime, on sent bien la patte d'une bleu tu as vu comment c'est simple avec les tutos d okh ? N'hésite pas à participer aux autres exercices si l'envie t'en prend ! Et si tu as des questions, ou tout autre chose, je suis à ta disposition ^^

Wesh !

Si je peux me permettre Cruelly, pense peut-être à être plus précise dans tes maquettes. Je pense que tu as lu le tuto d'Okh et par ailleurs que tu t'es rendue compte que la maquette est très utile pour coder. Cependant, plus elle est précise, mieux c'est. C'est plus rapide pour coder, et t'as pas besoin de changer sans arrêt de place tes éléments. Après faut le temps que ça vienne ^^

Néanmoins, j'adore ta création ! C'est vraiment superbement fait ! Je n'aime pas tant les forums sur deux colonnes mais je trouve que c'est bien géré ici :)


Je vais essayer de faire l'exo 1 et 3 en même temps

Coucoute !!

Voilà une mission intéressante. *-* Je viens vous faire part de ce que je suis en train de coder pour la reprise de L.C.D :

- La maquette : J'étais partie sur une base d'avoir les forums sur deux colonnes, une petite image descriptive, les sous-forums bien rangé et un effet "bulle", même si les forums ne sont pas entièrement sphérique. Pour en avoir vue des complètement sphérique, je trouve que ça fait soit trop petit, soit trop gros. Et en fin un fond marin pour plus d'immersion.

- Le rendu final : Finalement j'ai mis les forums sur trois colonnes pour plus d'ergonomie au niveau de la structure, en faite sur deux colonnes la structure faisait très long. Pareillement, je trouvais les images descriptive trop petite, alors j'ai opté pour le tuto permettant de placer la description derrière une image qui se dévoile au passage de la souris.

Je n'ai pas encore tester l’exercice deux et il me tente bien tien.

Je me suis aussi essayé à l'exercie :

- La maquette - Alors je suis partie sur des catégories de ce genre, pas trop compliquées à réaliser parce que j'ai toujours la flemme de faire des trucs compliqués même si c'est joli mais le mieux est l'ennemi du bien. Bref je me suis dit que ça pouvait être sympa de faire un truc de genre là.

- Le résultat final - on peut voir que le résultat final est ressemblant au schéma mais différent au niveau des couleurs et des polices d'écriture, là encore c'est par flemme mais c'était aussi pour les adapter au design actuel d'un de mes forums.

Allez je passe maintenant à l'exercice 2 !

Bouh !

Moi aussi, j'ai tenté un truc o/ Bon, autant prévenir de suite, avec moi, c'est toujours plus joli sur le papier xD

Maquette - C'est ma première maquette, me tapez pas si c'est moche ;-; J'ai fait deux forums ici : un où le forum est "au repos" et l'autre avec différents survols. N'aimant pas vraiment les catégories sur plusieurs colonnes (même si parfois c'est plus pratique, mais je trouve que ça laisse moins de liberté), j'ai préféré faire des catégories "classiques", sur une ligne donc. Je me suis rendue compte au dernier moment que j'avais oublié l'image new/no new/lock xD Du coup, bah... elle y est pas sur la maquette.

Aperçu/Rendu final kitu - Bon, j'avoue être UN PEU partie sur autre chose, mais je galérai tellement avec mon idée de départ... (je suis jusqu'à aller regarder quelques codes pour m'aider, c'est pour dire) xD J'ai donc réussi à rajouter la petite icône new/no new/lock à l'endroit du dernier message, tout simplement parce qu'il me restait un peu de place o/ L'effet sur le titre du forum est toujours présent. Je sais que l'heure devait se trouver sous le pseudo du posteur, mais j'estime avoir assez galéré comme ça pour en plus tenter un autre truc compliqué xD Je pense que je vais refaire un peu ces catés ultérieurement pour les adapter selon mes goûts xD Et on ne juge pas mes descriptions ainsi que mes noms de catégories è_é

Je passerai à l'exercice 2 sous peu (c'est à dire dès que je trouve un truc cool à faire), je me demande juste si c'est obligatoire d'être sous PhPBB2 pour cet exo, j'ai envie de le faire sous PhPBB3 en fait (oui, explorer les autres versions me fait même pas peur) ><

Roz' -> Superbes catégories Tu as bien fait de les mettre sur trois colonnes, ça laisse moins de vide à mon avis. Je trouve juste que la partie des sous forums est un peu grande en hauteur, ça laisse du vide justement. Sinon c'est extra-chouette !

Nemalus -> J'adore tes catégories ! Justement, je trouve que le "trop compliqué" est très souvent l'ennemi du beau, à trop vouloir en rajouter, ça finit par être trop chargé. Je trouve aussi que les nouvelles couleurs mettent encore plus en valeur tes catégories.

Shoki -> Vraiment super-chouette ce que tu as fais ! Je te propose mon aide si tu veux que ton codage actuel ressemble encore d'avantage à ta maquette. Tu voulais une animation au survol n'est ce pas ? Je crois savoir comment on pourrait faire ça, avec des sélecteurs ! En gros, tu mets tes trois "rectangles" en display:none au repos, ensuite tu indiques que lorsqu'on survole le gros bloc avec l'image, ceux ci ne sont pas en display none (tu mets tes valeurs actuelles). Cela donnerait un truc comme ça :

Code:

.gros_bloc:hover .rectangle1
 (...)

Je ne sais pas si j'arrive à me faire comprendre En tout cas je suis opé pour t'aider à avoir ton résultat voulu, c'est le but de cette mission ^^ Si tu veux bien me fournir tes codes (en hide si tu veux), je pourrais t'aider plus efficacement en tentant des choses de mon côté
PS: tes noms de sous forums m'ont bien fait rire
PPS: tu t'es aidé d'un tuto pour les mettre un en dessous de l'autre ?
PPSS: Coder en phbb3 ? Le problème est que j'ai modifié une template de phbb2 pour avoir la barre de navigation en haut, ça risque donc de ne pas fonctionner sur phbb3 mais si tu arrives à ce résultat sur phbb3 ou que tu ne veux pas de barre nav en haut du forum, tu peux tout à fait coder sur une autre version ^^


Merci d'avoir participé

Je ne pense pas qu'il y ai besoin de sélecteurs ou de display: none;, je pense qu'on peut jouer sur l'opacité et les z-index :3 Je te donne les codes sous hide :


Pour info, les images ont la modeste taille de 830*170 (Bien sûr que c'est petit ene) ~

PPS : Yep, je me suis aidée du tutoriel de Taktiik pour mettre les sous-forums en retour à la ligne ~
PPPS : ne t'inquiète pas pour l'adaptation, je saurais me débrouiller, j'ai déjà un peu codé en PhPBB3, et des catés en prime x3

Heey ! J'ai vu cette mission et je la trouve super intéressante ! En particulier l'exercice 3, c'est drôle il est un peu dans la continuité de celui de graphisme sur repenser le design des forums, là mais voilà, c'est vraiment un truc qui m'intéresse et sur lequel j'essaye de m'appliquer quand je code... Parce que la structure de base de FA, hé bah elle est pas forcément la plus adaptée à l'usage qu'on en fait, surtout quand c'est du rpg je trouve.

Et du coup je voulais juste montrer un truc un peu vieux que j'avais fait avec Palcopie sur la base de " bah puisque sur un forum rpg on joue dans des lieux, pourquoi les présenter sous forme de liste ? "
On voit parfois des forums particulièrement complexes qui mettent en addition une carte de leur monde et du coup on s'est dit ALLEEEEEZ et on a transformé nos catégories en 4 cartes, à des échelles différentes, qui permettent d'accéder aux forums.
Vous pouvez les voir ici (désolée c'est un forum actif, mais le forum test est en chantier pour le moment...) http://leschroniquesdesumer.forumactif.org/

Mais bon ça a quand même quelques inconvénients, notamment celui de ne plus trop pouvoir utiliser de sous-forums (on les a transformés en forums tout court pour qu'ils apparaissent direct sur la carte). Mais au moins on a une meilleure vision de l'espace du jeu. Par contre on a été obligées d'utiliser unue carte aussi pour la partie hors RPG, ce qui est assez déroutant au début. On travaille à une version plus explicite d'ailleurs !

Et comme c'est pas très pratique à utiliser sur un appareil tactile on a laissé une interface pus normale en-dessous (c'est le truc où c'est marqué "interface pour mobile", il faut cliquer dessus) qui est en fait un doublon de nos catégories et qui alourdit pas mal la page aussi...

Voilà, hésitez pas si vous avez des commentaires surtout, parce qu'on travaille encore dessus !

Désolée pour tout ce blabla >>

Hey Alumine.

On discutait de ta structure sur la CB il n'y a pas si longtemps. :) Je trouve ça hyper chouette et plus immersif pour les rpg. Mais pour ceux n'en ayant pas l'habitude, c'est trèèèèès déroutant au début. xD

Pour le fait d'avoir mis les parties hors-rpg en map aussi, tu as le forum 21 TWENTY-ONE qui a réussi, je ne sais comment, à garder la structure initiale pour les zones hors-rp et une map pour les zones rp. Pourquoi tu n'irais pas leur demander comment ils ont fait ? :)

Il faut du JS à mon avis pour réaliser deux structures différentes sur forumactif.

On peut réaliser des structures différentes en HTML / CSS avec le template index_box sans js

Je dévie un peu de la mission mais en gros on peut donner dans les templates à chacune de nos catégories un id unique.

Je donne ici une explication rapide et peu détaillée, je comptais en faire un tuto il y a longtemps puis... J'ai eu la flemme

Cet id correspond à celui qu'on peut retrouver sur l'URL avec le lien de la catégorie. Par exemple https://www.never-utopia.com/c29-discussions-entraides a comme id "c29" ^^
Grâce à cela, ensuite il "suffit"de mettre un CSS spécifique à chacune (on utilise les sélecteurs CSS) et ainsi facilement les modifier séparément. (ou bien faire un sommaire vers chaque catégorie du forum :p)
Que ce soit simplement pour changer la couleur, ou bien jouer avec la structure/le placement des éléments.
Par contre, ça demande de réfléchir quand même, à comment on veut placer tel élément, quels positionnement on va utiliser en CSS, etc :)

Cette variable c'est {catrow.tablehead.ID} qui ne peut s'utiliser que dans la boucle tablehead ^^ (il faut donc avoir les bonnes séparations de catégories dans le panneau d'admin)
Par exemple, voici le template de base phpbb2 :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

On peut voir l'ouverture d'une balise table qui va entourer toute la catégorie.

Je vais lui rajouter un id (je vais préfixer avec un texte de mon choix car j'en ai envie) :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table id="cate-{catrow.tablehead.ID}" class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

On peut le voir avec l'inspecteur d'élément ensuite, chaque catégorie a maintenant son propre id ^^
Par exemple la catégorie "Discussions & entraides" aura dans son HTML : id="cate-c29"

Voilà voilà, c'était une petite explication très rapide au cas où il y a des curieux (ce topic roxxe <3)

+1 Nihil !
En fait sur mon forum j'utilise qu'une seule structure de catégorie mais ça me permet de faire des choses très différentes, et même sans utiliser d'id pour chaque catégorie, juste avec des sélecteurs CSS3 du type .cat:nth-child(3) (pour la 3°catégorie) et ensuite toujours avec ce même type de sélecteurs je peux donner un style à chacun de mes forums dans chacune de mes catégories. Et j'ajoute même qu'on peut dédoubler ses catégories ; dans le template INDEX_BODY (en phpbb2) l'emplacement où est inclus le template INDEX_BOX est signalé par une variable {BOARD_INDEX}. Il suffit de la mettre une deuxième fois dans index_box, avec un autre id, pour la voir apparaître en double (du coup j'ai fait ça pour avoir un affichage alternatif de mes catégories, pour les gens un peu perdus justement; mes catégories s'affichent donc deux fois, très différemment. Une fois sous forme de carte, et une autre sous forme d'alignement de blocs un peu plus classique). J'admets que du coup mon forum fait très expérimental mais bon xD
D'ailleurs je suis sûre qu'on pourrait se servir d'un dédoublement de catégories pour faire plein d'autres choses (même si là j'ai pas d'idées) enfin c'est à réfléchir quoi ^^