Voici un paquet de détails qu'il faudrait améliorer. Je précise que je suis un débutant (donc si certains trucs que je soulève sont clairement expliqués à la fin du tuto, ignorez les), et pour les détails graphiques, je suis sous Google Chrome avec une résolution de 1366*768.
Le texte du tuto dépasse un peu du cadre, sur la droite.
Les infobulles pour la barre en bas sont prévues pour une ligne. Or "base de données de XMR-403" tient sur 2 lignes. Donc ça dépasse.
Pour illustrer un bug, je vais partir d'un exemple:
Ouvrez une fenêtre pour construire ou améliorer des éléments (par exemple technologies). Ensuite, ouvrez n'importe quel élément (par exemple structure). Ensuite, ouvrez une autre fenêtre pour construire ou améliorer des éléments (par exemple bâtiments). La fenêtre avec structure est encore ouverte, mais elle est vide. Il faudrait qu'elle se ferme.
Pour illustrer d'autres problèmes, je prendrai la fenêtre depuis laquelle on peut construire des vaisseaux (je prendrai l'exemple de celle du Chasseur Léger Buster).
D'abord, la fenêtre de description est vide.
Ensuite, j'ai un chiffre à droite d'un dessin: 1,00k. Je suppose qu'il s'agit d'une ressource, mais l'info-bulle indique seulement 1000. Il faudrait remplacer cette infobulle par le nom du matériau correspondant. Même commentaire pour le truc qui ressemble à 2 bonhommes, et pour le Z vert.
De même pour la liste des ressources en haut de l'écran.
Ensuite, on a le bouton pour construire le vaisseau. Si la case est vide, il faudrait automatiquement la remplir avec la valeur 1. Il faudrait également faire une infobulle indiquant "construire". Et la barre bleue fait plus penser à une barre de progression vide. Du blanc, ça indique clairement qu'il s'agit d'une zone de saisie de texte.
A propos des infobulles, un délai de 0,5 ou 1 seconde avant l'affichage, et la disparition même si on pointe cette infobulle serait préférable.
Donc je décide de lancer une construction, j'ai la page de construction, donc le centre est totalement vide (la liste de constructions semble tenir sur une petite colonne à droite). Je vais sur une autre fenêtre en attendant, afin de me familiariser avec l'interface, mais je n'ai pas trouvé comment retourner à la liste de constructions après. Je dois attendre, sans savoir combien de temps il reste.
Et pour finir sur l'interface du site, je parlerais des petits boutons en haut à gauche et en haut à droite.
D'abord, ils sont petits. Trop petits. Tellement petits que pour accéder au forum, je suis passé par google, car je ne les avais pas vu.
Et pour le bouton en haut à droite, une infobulle serait appréciable.
D'un point de vue code source, j'aurai beaucoup de choses à dire, mais je vais essayer de faire court.
D'abord, vous utilisez encore les standards du HTML4, alors que le HTML5 commence à être très répandu (je pense notamment au doctype, qui est maintenant <!DOCTYPE html>). Il faut cependant garder une compatibilité HTML4 pour les utilisateurs de IE sous Windows XP, et pour certains navigateurs mobiles.
Ensuite, ma console d'erreurs me renvoie 228 erreurs! La majorité sont soit "Uncaught SyntaxError: Unexpected token .", soit un 404 pour un fichier image donc le chemin d'accès commence par: "http://www.celestus.fr/CelestusV2/Interface/Cartes/Co/16/".
Je continue avec le code suivant:
- Code: Tout sélectionner
<a href="javascript:TutoOpen();" class="info2"><img src="Decors/Events/XMR.jpg" style="border:1px solid green;margin:1px;"><span class="InfoBot2">Base de données de XMR-403</span></a>
D'abord, l'utilisation de "javascript:" dans un attribut href est totalement obsolète et à proscrire. On peut utiliser à la place l'attribut onclick, mais il est préférable de spécifier les évènements dans un fichier javascript externe en utilisant le DOM.
De plus, un lien est fait pour ouvrir une page web,
et c'est tout. Pour d'autres utilisations, il faudra utiliser la balise <input> avec l'attribut type="button" (on pourra utiliser la valeur "image" pour l"attribut type, mais il faudra alors préciser l'attribut src, et empêcher l'envoi du formulaire avec l'attribut onclick="return false").
Ensuite, il est préférable de placer le code CSS dans un fichier externe (comme vous l'avez fait ici pour les balises a et span).
Donc pour résumer, voici un code source plus correct (en modifiant tout ça, je dois aussi modifier l'apparition des infobulles).
Code HTML:
- Code: Tout sélectionner
<input type="image" src="Decors/Events/XMR.jpg" id="info2" class="info2" />
<!--
Le / à la fin de la balise input est une notation optionnelle pour préciser que la balise ne nécéssite pas de fermeture.
-->
<span id="InfoBot2" class="InfoBot2">Base de données de XMR-403</span>
<!-- l'infobulle devra être placée au bon endroit avec du CSS. -->
Code CSS:
- Code: Tout sélectionner
.info2
{
border:1px solid green;
margin:1px;
}
.InfoBot2
{
display:none;
}
/* Ces propriétés CSS doivent bien évidemment être ajoutées à celles déjà existantes, et non les remplacer. */
Code javascript:
- Code: Tout sélectionner
var info2 = document.getElementById("info2");
var infoBot2 = document.getElementById("infoBot2");
info2.addEventListener("click",function(){
TutoOpen();
return false;
},false);
info2.addEventListener("mouseover",function(){
SetInterval(function(){
document.getElementById("infoBot2").style.display="inline";
},500);
},false);
info2.addEventListener("mouseout",function(){
document.getElementById("infoBot2").style.display="none";
},false);
Je vous suggère de corriger ceci sur tous les éléments similaires, en vous rappelant, au cas où, qu'un même id ne peut être utilisé qu'une seule fois sur une page web.
Enfin, je vais finir en parlant un peu de l'inscription au forum. Je vois une question à propos des points blancs dans le ciel. Je ne vois pas d'astérisque à côté, donc je décide de ne pas y répondre puisqu'elle est optionnelle. Je comprends après 4 échecs pour créer mon compte que cette case est obligatoire. Je remplis donc avec "étoiles". Ça ne marche pas, donc j'essaye d'utiliser "soleils" (car les étoiles sont des soleils, situés très loin dans l'espace). Ça ne marche toujours pas. Je suis sur le point de demander de l'aide à 1 ou 2 joueurs au pif sur le jeu, quand, en tant qu'apprenti programmeur, je me rappelle que certains éléments ont du mal avec les caractères accentués. J'essaye donc etoiles (que le correcteur orthographique de chrome marque bien évidemment comme faux), et ça marche. Donc, il faudrait que le champ accepte toutes les réponses que j'ai essayé, indifféremment de la casse (si vous ne savez pas comment faire, regardez
ici). Ou que ce champ disparaisse, la vérification avec l'image bizarre suffit peut-être.
Au passage, je viens de voir en mettant un lien, mais il faudrait une boite de dialogue, ou autre chose, pour proposer d'insérer un titre ET une URL sans avoir à modifier soi-même le BBcode.
Edit:
J'ai oublié de certains éléments.
D'abord, à la fin d'une construction, il ne se passe rien si le temps de construction dépasse la seconde. Il serait plus joli et plus pratique que l'affichage pour le niveau suivant apparaisse automatiquement. Je pense que du javascript simple suffit pour cela, mais vous pouvez utiliser de l'AJAX si besoin.
La réception de nouveaux messages semble s'effectuer uniquement si on change de page. Il faudrait corriger ça avec de l'AJAX.