+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Comment gérez-vous le contenu des "fenêtres" d'information? (/showthread.php?tid=4674)
Pages :
1
2
Comment gérez-vous le contenu des "fenêtres" d'information? - Argorate - 28-03-2010
Bonjour,
J'aimerais savoir comment faire pour afficher les informations de la meilleure manière.
C'est à dire, j'ai un plateau de jeu, et lorsque je passe sur un objet (perso, bâtiment ou autre) sur la map, j'affiche un div qui suit la souris lorsqu'on la bouge tant qu'on est sur l'objet en question et qui redisparait sinon.
Il y a autant de <div> que d'objet sur la map, car on peut en cliquant forcé la fenêtre à rester visible.
Ce que je voudrais savoir c'est :
Faut t-il créer le contenu de chaque div dès le chargement de la page ou utiliser Ajax pour ne créer le contenu du div qu'au moment où l'utilisateur en a besoin? (Ce qui paraitrait déjà plus logique puisque tout charger a chaque fois alors que l'utilisateur ne s'en servira peut être même pas, ce n’est pas malin)
Ou y a t-il une meilleur solution encore?
Voilà j'aimerais avoir vos avis la dessus.
RE: Comment gérez-vous le contenu des "fenêtres" d'information? - atra27 - 28-03-2010
Hum personnelement:
Si les messages sont fixes ou mettons que le message est identique pour une multitude d'objets sur la map je propose de mettre la fonction qui appelle la popup et qui définis sont contenu dans un fichier .js qui sera changé de toute façon (pas oublier que le cache du navigateur entre en jeu aussi!!! donc il devrai pas recharger toujours.)
Sinon pour les messages dynamiques:
-Cas 1: une portion minime change (affichage des ressources par exemple)
J'utilise une fonction JS qui a les mêmes caractéristiques que précédemment mais qui prend la/les valeurs a afficher dynamiquement en paramètre)
-Cas 2: La totalité du contenu peut changer.
Dans ce cas j'utilise une popup qui charge une page php pour récupérer le contenu (en utilisant si besoin les paramètres de la fonction pour passer des paramètres spéciaux en get mais niveau sécurité c'est bof ^^)
Voila!
RE: Comment gérez-vous le contenu des "fenêtres" d'information? - Argorate - 28-03-2010
En l'occurence j'ai bien un contenu dynamique, sinon effectivement je ne poserais pas la question^^
Pour le dynamique donc, le probleme d'une fonction où tu passes que ce qui varie en parametre, c'est que ça présupose que tu définis un cadre par type d'objet.
Ca peut marcher, mais bon le jour où tu veux rajouter une info, faut modifier le modele dans le js, et ajouter partout où tu l'appel le nouveau parametre... C'est assez peu fléxible je trouve.
Sinon j'aime pas trop l'idée de pop up, ou d'iframe pour faire ça. c'est pour ça que je pensais partir sur un <div> remplit avec ajax (ce qui pour le resultat final revient au meme, mais c'est plus propre je trouve).
RE: Comment gérez-vous le contenu des "fenêtres" d'information? - atra27 - 28-03-2010
Pfff pourquoi tout le monde joue sur les mots...
Pour info avec Jquery tu peut faire une div qui apparait comme une popup (comprendre ici: en surimpression du reste de la page).
De la méme façon je vois pas ou tu as vu que je parlais d'iframe, avec Jquery (encore oui je sais) tu peut charger le contenu d'une page en ajax simplement avec $.get(params) (voir doc pour les paramétres ^^)
RE: Comment gérez-vous le contenu des "fenêtres" d'information? - Allwise - 28-03-2010
Ces cadres sont communément appelés des "tooltips".
Les principaux frameworks JS ont des outils pour les gérer très simplement. Mais si tu poses la question c'est que tu dois pas en utiliser. Quand tu dis que le contenu est dynamique, ça veut dire que si je survole un élément à un instant t, je vais avoir un contenu, et qu'à l'instant t+1 je peux en avoir un autre ? Si oui, ou si le contenu des tooltip est très lourd, le chargement du contenu des tooltip en Ajax est peut-être justifié, mais je pense qu'il vaut mieux les précharger, en les mettant dans un attribut custom, par exemple
Code :
<a data-tooltip="Ma tooltip">xxx</a>Sinon, si tu dois les charger en Ajax, tu te fais une fonction côté client générique avec un script php de l'autre côté et qui sont en mesure de te retourner tous les contenus dont tu as besoin. T'as pas à avoir une fonction dont le nombre de paramètres varie.
Ensuite, il faut aussi voir si à chaque survol, la requête Ajax se relance, ou si c'est le contenu récupéré la 1ère fois qui est affiché. Mais dans ce cas-là, mieux vaut précharger toutes les tooltips. Et dans le cas contraire, ça risque de faire beaucoup de requêtes Ajax tout ça...
Enfin, pour ce qui est de l'affichage et du stockage des infos, en général ces infos sont stockés dans un attribut, et sont affichés dans un unique div dont le contenu change en fonction de ce qui est survolé. Le div est unique car, sauf cas particuliers, on ne survole qu'un élément à la fois, pas la peine donc d'avoir plusieurs calques pour afficher différentes tooltips. Seul le contenu de la tooltip et sa position changent.
RE: Comment gérez-vous le contenu des "fenêtres" d'information? - Argorate - 28-03-2010
atra27: Si tu me dis pop up c'est une pop up, y a pas d'histoire de jquery pour moi ^^
mais si c'est se que tu suggerais, je préfere sans.
Et pour l'iframe je parlais en prévention, tu étais pas visé
Allwise :
Dynamique c'est dans le sens que c'est pas forcément pareil d'un batiment a l'autre par exemple, mais pour un batiment donnée, cela garde le meme contenu.
Donc, toi tu me suggeres de toutes les précharger dès le départ, mais je ne comprend pas l'utilité de le faire tant que l'utilisateur n'y fait pas appel?
Quand a ajax effectivement, je ne recharge pas le contenu a chaque fois, uniquement la premiere fois, pas la peine de faire des requetes en doublon.
Sinon comme je l'ai dis, les joueurs pourront afficher plusieurs de ses fenaitres d'info en meme temps, c'est pour ça que je ne peux pas jouer qu'avec un div.
RE: Comment gérez-vous le contenu des "fenêtres" d'information? - atra27 - 28-03-2010
(28-03-2010, 05:13 PM)Argorate a écrit : Dynamique c'est dans le sens que c'est pas forcément pareil d'un batiment a l'autre par exemple, mais pour un batiment donnée, cela garde le meme contenu.
A moi que tu aie 6 millions de batiments différents, pourquoi ne pas les charger dés le début?
Maintenant sa dépend du style des infos, par exemple si elle peuvent (et doivent) changer entre l'instant ou l'user charge la page ou l'instant ou il veut les afficher. alors ajax.
Si c'est une cinquantaine de ligne par batiment et qu'on n'en apelle pas la moitié alors ajax aussi.
Maintenant si c'est juste pour afficher le cout de tel ou tel truc ou la description et les actions associées a tel ou tel objet je pense que charger dés le début peut être la solution.
Argorate a écrit :Ca peut marcher, mais bon le jour où tu veux rajouter une info, faut modifier le modele dans le js, et ajouter partout où tu l'appel le nouveau parametre... C'est assez peu fléxible je trouve.Dépend encore une fois de ce que tu veux faire et de comment est fait ton modéle.
Pour la messagerie j'ai du php qui liste les mess du joueur et propose des liens du type "javascript
how_mp(1)" ou 1 est l'id du message en bdd.dérréire j'ai un .js qui defini cette fonction pour appeller la page message.php?id=1 (enfin l'id appelé dans la fonction)
Cett page verrifie que le message existe et qu'"il est bien destiné au joueur, retire le flag "NEW" si besoin etc...
C'est juste un exemple suivant ce que tu veux faire adapte mais n'oublie pas de verrifier ce qu'apelle ton javascript en php... (je précise au cas ou
)
RE: Comment gérez-vous le contenu des "fenêtres" d'information? - Argorate - 28-03-2010
Vous ne me dites toujours pas en quoi c'est un avantage de tout charger des le début
Moi je trouve ça bête de charger des trucs qui seront potencielement pas utilisé...
C'est pour ça que j'ai posté ici, c'était pour avoir des avis exterieur. Mais j'avoue que y a pas d'argument favorable pour l'instant...
RE: Comment gérez-vous le contenu des "fenêtres" d'information? - atra27 - 28-03-2010
Bah y a pas spécialement de justification.
Je pense que c'est inutile d'aller faire un script ajax (qu'il faudra charger de toute façon) pour aller charger ensuite une seule ligne d'html.
Autant foutre la ligne en question directement...
Maintenant si c'est pour en charger des tartines qui seront pas toutes utilisées, ou bien qui changent dynamiquement (Ici je veux dire changer entre le chargement de la page et l'affichage de l'info en question) alors on rentabilise l'ajax...
Je sais pas exactement ce que tu attend comme arguments, les deux méthodes fonctionnerons dans tous les cas et sur un seul user la différence niveau serveur est nulle donc y a pas tellement d'arguments marquants...
Maintenant sa ce gére au cas par cas...
Je sais pas tellement quoi te dire de plus...
RE: Comment gérez-vous le contenu des "fenêtres" d'information? - Sephi-Chan - 28-03-2010
Je pense qu'il parle de popup au sens large : pas forcément des popups de l'an 2000. Plutôt ceux qui sont simplement des blocs mis au premier plan (comme les lightbox, par exemple) et qui voilent ou non le reste de la page (on dit alors que ce sont des fenêtre modales : elles bloquent les autres fonctionnalités).
Pour t'aider, Il faut que tu précises ton contexte : est-ce que les joueurs auront besoin de survoler tes bulles ? Ou servent-ils juste d'aide à une minorité ?
Si leur consultation est un besoin (si par exemple ils doivent ouvrir la bulle de ta mine pour lancer l'évolution, par exemple), alors charger à l'ouverture peut ne pas être mal : ça leur évitera de patienter pour chaque bâtiment dont ils veulent les informations.
Sinon, tu peux les charger en Javascript puis les stocker en cache. Admettons un cas comme ça :
<div class="case building" id="case-24-89" data-informations-loaded-at="never" />
Ainsi, quand on survole la case, tu récupères la valeur de l'attribut data-informations-loaded-at et tu testes :
- Si c'est never, tu charges la bulles ;
- Si c'est une date qui remote à 3 minutes ou plus, tu recharges ;
Ta récupération va créer un sous-arbre DOM que tu vas injecter dans le bloc de ta case, ça va alors donner :
<div class="case building" id="case-24-89" data-informations-loaded-at="date-serialisee">
<div class="tooltips">
<p>Hey mon ami, t'aime ça manger des patates ?</p>
</div>
</div>
Voilà, voilà !
Sephi-Chan