Recherche d'un générateur avec aperçu

[Gaara du désert]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.star-city-heroes.com/

Description du problème

Bonjour !

Ce n'est pas un problème, mais une recherche de code qui m'amène ici !
Actuellement j'utilise un générateur sur le forum où je suis graphiste et qui permet de générer le codage des formulaires présents sur le forum ! Mais le fondateur est récemment tombé sur un forum qui propose la même chose MAIS avec un aperçu direct du rendu (ce qui éviterait pas mal de bug qui arrivent encore avec notre générateur actuel). J'ai écumé le net à la recherche d'un tuto qui permette ça, mais je n'ai rien trouvé, donc je poste ici au cas où quelqu'un aurait ça sous la main !

Mon générateur : http://www.star-city-heroes.com/h6-presentation-modele-1 ; le générateur qui m'a été donné en exemple : http://pleasure-school-2.azurforum.com/h2-generateur-de-fiches-de-personnage

Je recherche donc un tutoriel qui me permettent d'avoir le même rendu (avec la prévisualisation directe du formulaire, donc).

Merci d'avance ♥

[Gaara du désert]

Je cherche encore !
Merci.

[Gaara du désert]

Toujours d'actualité !
Merci.

[Gaara du désert]

Je cherche encore ^^
Merci.

[Teurancher]

Chalut à toi,
Je pense qu'ils sont simplement repris la forme du code et incrusté les boxs dans cette mise en page pour donner l'impression d'un rendu immédiat. Je ne pense pas me tromper. ^^

[Gaara du désert]

Bonsoir,

Je n'ai pas trop compris de quels box vous parlez !
Le résultat n'est pas seulement un rendu visuel puisqu'il est possible de sélectionner sa classe et de remplir les cases directement dans les zones destinées à les recevoir : le code est donc bien fonctionnel et pas seulement visuel, donc je ne comprends pas trop ce que vous voulez dire ! :/

[Gaara du désert]

Je cherche encore, merci !

[lilas]

Hello forum,
M'intéresse aussi le générateur...

[Gaara du désert]

Bonjour,
Je cherche toujours !
Merci.

[Gaara du désert]

Toujours d'actualité !
Merci.

[Gaara du désert]

Je cherche encore, merci !

[Gaara du désert]

Je cherche toujours.
Merci !

[Gaara du désert]

Je remonte.
Merci.

[Gaara du désert]

Je cherche encore !
Merci.

[Gaara du désert]

Encore et toujours.
Merci.

[Gaara du désert]

Toujours d'actualité !
Merci.

[Gaara du désert]

Bonjour,
Je cherche toujours !
Merci.

[Gaara du désert]

Bonjour,

Je cherche encore !

Merci.

[Selendo]

Bonjour, quel est le code de votre générateur ?

[Gaara du désert]

Bonjour,

Alors, je précise que je ne souhaite pas modifier le code que j'utilise actuellement, mais bel et bien trouver un tutoriel qui explique clairement comment avoir cet aperçu à remplir directement. J'aime savoir ce que je fais et si quelqu'un se contente d'ajouter des parties dans le code que j'utilise actuellement, je crains de ne plus savoir comment l'utiliser efficacement et corriger les éventuels bugs que j'aurai ! Bref, tout cela pour dire que c'est un tutoriel que je chercher et non une modification de mon code actuel, le fournir ne m'avancera donc à rien ! =)

Merci d'avance !

[[Nihil]]

Bonsoir

Le second lien (avec l'exemple si j'ai bien compris) ne fonctionne plus.

La solution de Teurancher est la plus probable et la plus simple. Il s'agit de faire une page HTML avec la fiche telle qu'elle doit être générée (avec le html de la fiche donc).
Ensuite, on place les éléments du formulaire (input, select, etc) à la place des réponses. Comme ça le membre a l'impression de remplir directement l'aperçu, alors que non

Ou alors tu souhaites qu'une fois que le formulaire est rempli on puisse voir l'aperçu tout en bas ?

[Gaara du désert]

Bonsoir !

Oula, en effet, le forum semble avoir été supprimé ! En passant par le cache google j'ai réussi à mette la main sur la fiche que j'ai hébergé sur mon forum test pour donner un aperçu : http://betelgeuse-test.graphforum.com/h19-fiche

Comme vous voyez, je voudrais donc que lorsque le membre doit remplir une case, il la sélectionne simplement et rédige ce qu'il doit remplir directement dans le bon emplacement ! Après, le problème que j'ai avec la solution suggérée, c'est que je vois mal comment superposer le codage de la fiche ET le codage du générateur ! Enfin, à moins de jouer avec les margin et compagnie, mais là le résultat risque d'être différent sous chaque navigateur (j'ai déjà du mal à optimiser le design du forum de manière générale... xD). Puis le problème c'est que dans le code que j'utilise actuellement, les zones de texte ont toutes les mêmes dimensions (avec une class "label" qui est liée au javascript aussi), du coup ce serait compliqué (voire impossible) de réussir à superposer la fiche et le générateur :/

Je ne sais pas si je suis claire... Mais comme l'exemple le montre, il est possible de faire un rendu directement dans le code donc c'est pour ça que je cherchais un tutoriel sur cette base (après si c'est trop compliqué, je resterais à mon générateur actuel plutôt que de rendre tout ça incompatible avec certains navigateurs).

[[Nihil]]

C'est pourtant exactement ce qui est fait dans la fiche d'exemple . Les zones qui sont normalement remplies par les réponses sont remplacées par les input.
Ça demande un peu de travail en CSS bien évidemment.
Je ne vois pas en quoi le résultat serait différent sur différents navigateurs O_Ô... Il ne s'agit pas de mettre le code du générateur superposé sur le code fiche, mais de le mettre directement dedans.

On peut t'aider à le faire (sans te faire tout le monde bien évidemment). La première étape est de créer une page HTML avec ta fiche dedans.

[Gaara du désert]

Bonjour,

Alors, j'avais évité de reprendre le code de leur fiche pour l'adapter à la mienne, autant parce que ça fait un peu "copiage" que parce que je ne comprends pas la totalité du code >< Je ne suis pas spécialiste en javascript et compagnie, du coup rien que réussir à faire que le générateur s'ouvre dans un sujet au bon endroit est un véritable casse-tête pour moi (enfin, ça fonctionne avec le générateur vierge, mais dès qu'il est complété, tout bugue). C'est pour ça que je parlais d'un tutoriel, là je crains d'avoir pas mal de lacunes pour faire le transfert...

Enfin, j'ai tout de même mis le rendu de ma fiche sur page HTML (enfin un, vu que nous avons 6 fiches différentes) : http://betelgeuse-test.graphforum.com/h20-fiche-rendu vous parlez donc de "remplacer" le code de la fiche en exemple par celui-là ?

Quand au rendu suivant les navigateurs, j'avais mal compris ce que vous vouliez dire, je pensais que vous vouliez juste superposer les deux blocs ^^

Merci de votre aide en tous les cas

[[Nihil]]

Il faudrait que quelqu'un prenne le temps d'écrire un tuto dessus :/

Prenons un exemple, si tu veux insérer un textarea dans la fiche au niveau de informations complémentaire :

Il faut que tu repères dans ton HTML l'endroit où tu mettrais normalement le texte à l'intérieur. Une fois que c'est fait, à la place de mettre le texte, tu mets ceci :

Code:

<textarea class="textarea-info-plus" placeholder="Vous pouvez ajouter quelque chose pour préciser un point important de votre personnage (CHAMP FACULTATIF)."></textarea>

J'ai rajouté une classe "textarea-info-plus" au cas où on a besoin de mettre du CSS. Et le placeholder sert à mettre un petit texte explicatif par défaut.

Tu auras donc ceci :

Il faut donc maintenant rajouter du CSS pour que le textarea prenne la bonne taille

Code:

.textarea-info-plus {
    height: 93px;
    width: 99%;
}

Et cela te donne donc ceci :

Il faut faire ça pour chaque élément de ta fiche. Là où il y a normalement un bloc de texte tu mets un textarea. C'est le plus facile pour commencer. Par exemple pour Historique, il en faudra 2 pour Dossier Médical, etc etc...

Une fois que c'est fait, il faudra rajouter les input (pour les textes très courts), par exemple ici :

Une fois que tous les champs du formulaire seront placés, il faudra rajouter quelques petits éléments afin de coller à ton ancien javascript
Il s'agira de rajouter des attributs id à chaque input / textarea / select.

Par exemple le champ pour les informations complémentaires :

Code:

<textarea class="textarea-info-plus" placeholder="Vous pouvez ajouter quelque chose pour préciser un point important de votre personnage (CHAMP FACULTATIF)."></textarea>

Il faut lui rajouter l'id "complement" comme dans ton générateur actuel, ce qui donne :

Code:

<textarea class="textarea-info-plus" placeholder="Vous pouvez ajouter quelque chose pour préciser un point important de votre personnage (CHAMP FACULTATIF)." id="complement"></textarea>

Tu devrais donc te retrouver au final avec 26 champs avec chacun 1 id: image, nom, prenom, sexe, age, date, lieu, nationalite, orientation, metier, avatar, credit, pseudo, reel, perso, connu, trouver, conseils, histoire, physique, particularite, mental, groupe, pouvoirs, surnom, complement.

[Gaara du désert]

Bonjour !

Désolée du temps de réponse, j'ai voulu tester tout ça avant de répondre ! Du coup ça fonctionne parfaitement, c'est pile poil ce que je voulais ♥ Je n'ai juste pas testé pour les images, mais au pire si c'est le seul point qui n'apparaîtra pas, ce n'est pas dramatique non plus !

Du coup je crois que le sujet est réglé grâce à vous, merci beaucoup de votre aide et de votre patience [Nihil] !
Bonne journée =)