Wikini

BandeauDAideSurLesReglesDeFormatage

PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes ec2-3-80-211-101.compute-1.amazonaws.com

En cours d'édition : bandeau d'aide pour rappeler les ReglesDeFormatage


A l'exemple de PhpWiki ou de TikiWiki.
J'ai déjà réalisé le code qui donne ça : http://charles.nepote.free.fr/wakka/wakka.php?wakka=HomePage/edit.
Je pense améliorer encore la présentation. N'hésitez pas à me faire des remarques.
-- CharlesNepote

Ok, vu, peut être supprimé l'indication AIDE, car c'est suffisamment explicite. Tu l'intègre au CVS ?
-- DavidDelon

Je ne suis toujours pas satisfait de mon oeuvre : ça alourdit beaucoup la lecture et bouffe 5 lignes...
J'ai eu une autre idée, plus simple et plus élégante : c'est d'ajouter sur une seule ligne "Aide : ReglesDeFormatage". Si l'utilisateur a besoin de voir les règles il clique sur ce lien qui ouvre les règles dans une autre fenêtre. Qu'en pensez-vous ?
-- CharlesNepote

Je trouve que la seule utilisation potable des fenêtres pop-up est de founir des informations détaillées sur le sujet de la page. Donc dans le cas d'une fenêtre d'aide sur les règles de formatage cela me semble une excellente idée!
-- JeanPascalMilcent

Je trouve aussi que le popup est bien. Sinon une solution élégante avec une pointe de unobtrusive dhtm est celle adoptée par dotclear, tikiwiki et quelques autres:

<!-- Code extrait de dotclear (www.dotclear.net) --> 
<h3><a href="http://aidewiki.html" onclick="openClose('aidewiki',0); return false"><img
  src="images/moins.png" id="img_aidewiki" alt="montrer/masquer" /></a>
  R&egrave;gles de formatage Wiki</h3>
  <div id="aidewiki">
  <dl class="wikiHelp"> .../... texte d'aide ici .../... </div>

<script type="text/javascript"><!--
    function openClose(id,mode)
    {
    if(document.getElementById) {
        element = document.getElementById(id);
        img = document.getElementById('img_' + id);
    } else if(document.all) {
        element = document.all[id];
        img = document.all['img_' + id];
    } else return;
    
    if(element.style) {
        if(mode == 0) {
            if(element.style.display == 'block' ) {
                element.style.display = 'none';
                img.src = 'images/plus.png';
            } else {
                element.style.display = 'block';
                img.src = 'images/moins.png';
            }
        } else if(mode == 1) {
            element.style.display = 'block';
            img.src = 'images/moins.png';
        } else if(mode == -1) {
            element.style.display = 'none';
            img.src = 'images/plus.png';
        }
    }
}
  openClose('aidewiki',-1);
//--></script>

Fichier impacté par cette modification: handlers/page/edit.php
--EricDelord

Voir aussi la barre d'icône de la fenêtre d'édition de .


Proposition de code

J'ai fini par coder le bandeau d'aide avec une version simplifiée du code JavaScript de DotClear? (le même mais sans image) qui donne le résultat suivant :
Une démo en ligne : http://wikini.net/dev/wakka.php?wiki=TaillesDePolicesRelatives/edit

Le code est ci-dessous :

/wakka.css : ajouter :
.hr_clear { clear: both; visibility: hidden; margin: 0px; height: 0px; }

#help_title { margin: 4px 0px 4px 0px; }
#help_title a { text-decoration: none; }
#formhelp { background: #DDDDDD; padding: 4px 8px 4px 8px; border: 1px inset; }
#formhelp p { margin: 0.3em; font-size: 11px; line-height: 1.2em; }
#formhelp .formhc { margin-left: 0.5em; margin-right: 0.5em; background: #EEEEEE; color: darkblue; }


/handler/page/edit.php, ajouter après $output .= $this->FormClose?();:
(attention, le code ci-dessous est mal rendu suite à un bogue qu'il faudra corriger : éditer la page pour voir le source.)
<?

		$output .=
			"<h4 id=\"help_title\">\n".
			"<a href=\"#\" onclick=\"openClose('formhelp',0); return false\" accesskey=\"7\">[+/-] R&egrave;gles de formatage</a>\n".
			"</h4>\n".
			"<div id=\"formhelp\">\n".
			"<p><strong>Typographie&nbsp;: </strong>".
			"<span class=\"formhc\">**Gras**</span> ".
			"<span class=\"formhc\">//Italique//</span> ".
			"<span class=\"formhc\">__soulign&eacute;__</span> ".
			"<span class=\"formhc\">##courrier##</span> ".
			"<span class=\"formhc\">
code
</span> ".
			"<span class=\"formhc\">
(php) code PHP


-- CharlesNepote

Lorsque JavaScript est désactivé, le bandeau est affiché par défaut.
Le bandeau devrait s'afficher correctement avec tous les navigateurs ; il a été testé et a donné de bons résultats avec les navigateurs suivants (avec Javascript activé ou désactivé) :
Avec quelle configuration as-tu expérimenté des problèmes ?
-- CharlesNepote, JeanPascalMilcent, FidelioEspoir

Autre aparté (que tu as lu tout de suite ;-): mettre le plus vite possible la fenêtre de formatage dans wikinet : c'est drôlement pratique ! -- FidelioEspoir



Proposition sans utiliser de JavaScript

Heuu, question bête, pourquoi utiliser du javascript ? On doit pouvoir faire a peu près pareil avec du pur css, du genre un tag en display:none, qui se montre avec un "hover", non ? Du genre : http://www.meyerweb.com/eric/css/edge/popups/demo.html
perso je trouve très lourd cet usage du javascript...Alors qu'avec cette solution, il suffit de passer sa souris sur ReglesDeFormatage pour qu'elles apparaissent.
--DaOuar -- DavidDelon qui approuve sans être un spécialiste du CSS et donc sans pouvoir évaluer la faisabilité.

Je suis en train de tester ça : avec des résultats encourageants sous Mozilla mais pas sous IE 5. Il faut voir si ça valide bien... Je publie bientôt mes résultats. -- CharlesNepote


Externaliser ce code pour une mise à jour simplifiée

1. mais... pourquoi ne pas faire appel à un fichier qui contiendrait cette notice et serait plus aisément modifiable ? -- FidelioEspoir

1. Oui, pourquoi pas. Je ne suis pas hyper chaud pour augmenter le nombre de fichiers, mais l'argument de la maintenance est assez juste. -- CharlesNepote

1. Et pourquoi ne pas utiliser une page WikiNi avec un {{include}} ? --GarfieldFr

1. Et pourquoi ne pas en faire une page WikiNi "tout court"... ? Voir le ConceptToutEstPage. ;-) -- ProgFou

1. Allez, hop une page WikiNi dans.... une nouvelle fenêtre ! ;-)) voir ActionInclude et MultiWikini --FidelioEspoir
Il n'y a pas de commentaire sur cette page. [Afficher commentaires/formulaire]