Je fais ce topic car je remarque que globalement à part choisir un thème et traficoter deux trois options dans le panneau d'administration, la plupart des administrateurs de forum ne poussent pas loin la personnalisation de leur bébé. Pourtant, il y a énormément de possibilités pour améliorer l'expérience vécue sur un forum et pour augmenter l'immersion dans l'univers proposé, dans le cas des forums rpg. La plupart des modifications effectuées ici impliquent la modification d'un template. Certes, c'est un peu technique, mais Google est notre ami et les tutoriels forumactif aussi. Le truc le plus embêtant, c'est que Forumactif restreint l'accès aux templates au seul fondateur du forum, arf, impossible donc de déléguer la tâche à un co-admin un peu plus techos que soi. Voici donc quelques modifications faites sur ce site et la technique utilisée.

Le règlement pré-inscription
(je commence par ça, je viens de le faire)

Le règlement hérite du thème, des templates haut de page et bas de page et du template qui le concerne directement : agreement. Si on n'y change rien, ca ressemble à ça :



Plusieurs éléments sont un peu pas top ici, notamment la présence automatique d'un fil d'ariane qui se limite à "Remains" au dessus de la barre de titre. La barre de titre en elle-même n'affiche pas grand chose d'intéressant. Un titre, ca doit être accrocheur, nom d'un chat (je préfère les chats). Quant au titre, je sais pas ce qu'ils ont fait chez FA, mais ca merdouille et il affiche " - Remains" O_o

Voila à quoi ressemble ce même règlement après quelques manip' très simples : Règlement

Le template agreement commence par cette petite portion de code, qui représente le fil d'ariane.

Code:

<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a></span></td>
   </tr>
</table>

Pour enlever le fil, particulièrement inutile ici, commentez le code ou supprimez-le.

Code:

<!--<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a></span></td>
   </tr>
</table>-->

Pour ce qui est du titre, il vous suffit de trouver cette ligne un peu plus bas dans le code :

Code:

<th class="thHead" valign="middle" height="25">{SITENAME} - {REGISTRATION}</th>

et de remplacer "{SITENAME} - {REGISTRATION}" par ce que vous voulez.

Enfin pour changer le titre d'une page, il faudrait théoriquement avoir accès à l'entête de la page, qui ne figure pas dans le template, heureusement il y a un autre moyen, moins propre mais bon, quand y a pas le choix...
Glissez dans le code, le plus haut possible, au début du template par exemple, ce petit rajout

Code:

<script language="javascript" type="text/javascript">
    document.title = "Votre titre ici (dans les guillemets)";
</script>

Si je préconise de placer ce rajout le plus haut possible, c'est parce que lors du chargement de la page, celle-ci aura son titre original, défini dans l'entête, puis lorsque le code sera lu, le titre changera. Donc plus le code sera situé en bas de la page, plus tard se fera le changement (certes on parle de poignées de millisecondes, mais bon, ca compte si l'on veut faire de l'elite code )

L'effet console

Ca plait pas forcément à tout le monde mais moi, j'aime bien. Voila un aperçu de ce dont je vous parle :


Le principe fondateur est d'utiliser la police Courier New, qui ressemble vraiment beaucoup à une police de console. Pour bien trancher avec les autres polices, optez pour une police sans serif ( = empattements) en tant que police principale. N'hésitez pas à rajouter des bordures grises type 'enfoncé' un peu épaisses, en ajoutant par exemple ce code autour du texte que vous voulez faire ressembler à une console :

Code:

<div style="border: 4px inset darkgrey; font-family: Courier New; padding: 7px;">Votre texte ici</div>

Le 'padding' permet d'écarter un peu le texte des bords de ce conteneur car la bordure est assez envahissante. Pour finir l'effet comme il se doit, il faut que le curseur clignote à la fin de la saisie. Et pas le petit curseur discret, la petite barre toute fine qu'on croise un peu partout, non, le bon vieux curseur bien épais et bien gras. Ce curseur est en fait un caractère à part entière qu'on fait clignoter avec la balise HTML blink. Malheureusement, ce caractère ne peut être saisi directement à partir du clavier, il faut le copier d'un endroit où il est écrit et le coller dans votre texte...pas pratique. Ce caractère fait partie de la libraire étendue ASCII OEM qui existait à l'époque où Windows n'était qu'une idée utopiste dans la tête à Billou. On peut trouver tous les caractères de cette table ici.

Code:

<blink>█</blink>

A cette même époque, il n'existait aucun système de représentation comme Excel ou le langage HTML, donc pour faire un tableau il fallait utiliser des caractères et calibrer les lignes (même nombre de caractères, même position des bords de tableau dans chaque ligne). Ces caractères de bords sont eux aussi dans la table ASCII OEM, cherchez bien. Ils permettent de rendre un effet très "antique" à tous vos tableaux et sont donc très adaptés pour l'effet console. A noter que ces caractères existent en simple et double trait et toutes les intersections double/simple sont représentées (c'est pas facile à décrire mais regardez bien, vous comprendrez).

Des animations sans flash ?

Si vous faites comme tout le monde pour arriver sur Remains, c'est-à-dire que vous passez par "la porte d'entrée", vous aurez sûrement remarqué la (modeste) animation qui orne notre page évènement. Non, non, ce n'est pas du flash

Il s'agit en fait d'une astuce qui permet de faire des petites animations rapidement et en économisant de gros moyens techniques. Cette animation ne requiert rien de plus que ce qui est déjà en place sur le forum : du CSS et du javascript ! Attention, je préviens tout de suite les lecteurs zélés, ce type d'animation n'est réservé qu'à de petites animations sans ambitions, les limites de ce système se manifestent très vite...

Bon, si vous êtes encore en train de lire ce message, c'est que vous devez être intéressé(e)... Je ne vais pas vous faire attendre plus longtemps...

Le principe de base est simple : des balises 'span' qui contiennent le texte à animer, qu'on présente comme on veut niveau CSS et auxquelles on donne un 'id' afin de pouvoir les retrouver via javascript. Par exemple, la page d'accueil ressemble à ça :

<div id="ba_image">
<span class="text" id="slogan">Mise à prix : une fortune</span>
<span id="typein">
<span class="text" id="console"></span><blink class="text">█</blink>
</span>
</div>

Les spans animés sont 'slogan' et 'console'. le reste n'est que présentation.

Niveau CSS, rien d'obligatoire ou presque, la seule chose à fixer est l'opacité de l'élément à faire apparaître, il faut donc qu'il soit invisible au départ :

#slogan {

opacity: 0;

}

Simple, non ?

Animation par javascript

Texte écrit au fur et à mesure

Pour obtenir du texte qui s'écrit au fur et à mesure, il vous faut une balise 'span' avec un id, prenons pour l'exemple l'id 'console', sans rien dedans.

console">

Rien de compliqué ici, la partie délicate concerne le javascript. Un script javascript s'insère dans l'en-tête (quelque part entre et ) de la page comme ceci :


var chaine = "Cec¤i est ¤¤un t¤est¤¤¤¤¤¤¤¤$Et ¤hop¤ !";
var rendu = "";
var i = 0;
function derouler() {
if (i == chaine.length) {
return;
}
var toput = chaine.substr(i,1);
if (toput == '¤') {
toput = "";
}
if (toput == '$') {
toput = "";
rendu = "";
}
rendu = rendu + toput;
i++;
document.getElementById('console').innerHTML = rendu;
setTimeout("derouler();",120);
}


Ce petit script, une fois lancé, permet d'afficher caractère par caractère, toutes les 120 millisecondes (paramétrable), la phrase spécifiée à la 2e ligne entre les guillemets (en fait, il raffiche la même phrase avec un caractère de plus à chaque, ce qui, en termes de ressources, est un peu plus lourd). Les caractères $ et ¤ (touche AltGr+$) servent respectivement à effacer ce qui est écrit et à patienter jusqu'à la prochaine lettre, d'où la suite de ¤¤¤¤¤¤¤¤ qui permet d'attendre grosso-modo une seconde (8x120ms = 960ms) (pour laisser le temps de lire avant d'effacer).

Dans l'exemple, au lancement du script, dans la balise span qui a l'id 'console', la lettre 'C' va s'afficher, puis après 120ms, 'e', 120ms, 'c', 240ms (car puce d'attente ¤), 'i' etc... Lorsque 'Ceci est un test' sera affiché, une seconde après, le texte disparaîtra (car $), 120ms, 'E', 120ms, 't' etc...

"L'intérêt des puces d'attente entre les lettres d'un mot ?", me demande-t-on timidement dans le fond de la salle. Vous avez déjà vu quelqu'un capable d'écrire un texte à un rythme parfaitement stable ? Les puces d'attente servent ici simplement à simuler le rythme variable d'écriture d'un humain. Attention à ne pas en abuser

Animation par javascript

Texte qui apparaît progressivement

Pour obtenir du texte qui apparaît progressivement, il vous faut une balise 'span' avec un id, prenons pour l'exemple l'id 'slogan', avec le texte à afficher dedans (dans l'exemple, 'Mise à prix : une fortune'). Comme vu dans le premier post sur les animations, l'opacité (opacity dans le CSS) doit être fixée à 0.

<span class="text" id="slogan">Mise à prix : une fortune</span>

Comme auparavant, la partie délicate concerne le javascript. Mais ce script est tout de même plus simple que le premier :

<script language="javascript" type="text/javascript">
function apparaitre() {
o = o + 0.1;
document.getElementById('slogan').style.opacity = o;
if (o >= 1) {
return;
}
setTimeout("apparaitre();",150);
}
</script>

Ce petit script, une fois lancé, permet d'opacifier progressivement la contenu de la balise 'slogan', en augmentant tout simplement toutes les 150 millisecondes (paramétrable) l'opacité de la balise de 0 (totalement transparent) à 1 (totalement opaque) par pas de 0,1. Comme dans la première animation, vous pouvez modifier la vitesse de l'animation, mettez un nombre plus petit pour une animation plus rapide ou plus grand pour une animation plus lente.

"Et alors, les lignes en rouge dans les deux exemples ?", me demande l'une des rares personnes qui suivent encore. Eh bien il s'agit là des portes de sortie de ces animations. Le mot-clé 'return' permet de terminer l'animation, rien d'autre ne peut être écrit après cette ligne entre les accolades. par contre, vous pouvez écrire quelque chose avant. Ainsi vous allez pouvoir, notamment, lancer les animations en chaîne.

Par exemple, dans la première animation, si on écrit ceci au niveau de la 'porte de sortie' :

if (i == chaine.length) {
apparaitre();
return;
}

Alors à la fin de l'animation derouler(), l'animation apparaitre() se lancera comme c'est le cas pour la page d'accueil.

"Oui, mais comment lance-t-on la première animation alors ?", retorque un lecteur assidu. Il y a plusieurs méthodes, mais j'y viens, j'y viens...

Si vous souhaitez lancer l'animation dès le chargement de la page terminé, il faudra trouver la balise <body> de votre page et la transformer comme suit :

<body onload="derouler();">

Dans le cas où derouler() serait votre première animation. Mais il faut s'assurer que le visiteur verra l'animation, car elle ne l'attendra pas pour se déclencher. On peut aussi arbitrairement décider d'une durée de retardement en millisecondes avant le déclenchement, comme ceci :

<body onload="setTimeout(\"derouler();\",1500);">

Dernière solution, pas la plus esthétique certes, mais la plus pratique dans le cas d'une animation enfouie au coeur d'une page assez longue : le bouton. On lui donne un texte à afficher, l'action à faire lorsqu'on clique dessus et le visiteur fait le reste :

<button onclick="derouler();">Lancer l'animation</button>

Je pense avoir fait le tour de la question. Si vous connaissez javascript, vous pouvez imaginer d'autres animations. Si j'ai le temps, j'en proposerai d'autres à l'occasion.

Des questions ?