Wikini:BandeauDAideSurLesReglesDeFormatage

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 :

le bas de page affiche un lien "[+/-] Règles de formatage" ;
avec un navigateur graphique comprenant JavaScript, un clic sur le texte fait apparaître le bandeau d'aide ; un autre clic le referme ;
avec un navigateur graphique l'utilisation de la combinaison de touches [Alt] + [Maj] + [7], fait apparaître/disparaître le bandeau (sur Internet Explorer il s'agit de [Alt] + [Maj] + [7] -> [Entrée]) ;
avec des navigateurs graphiques anciens ou textuels (ou brailles ou vocaux), le texte est rendu (Lynx, Netscape 4.7)
avec des navigateurs graphiques anciens ou textuels (ou brailles ou vocaux), la combinaison de touches [Alt] + [Maj] + [7] positionne le lecteur au début du bandeau (non testé).

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é) :

Mozilla 1.6
Internet Explorer 5.01
Galeon 1.3.8
Konqueror 3.1.4
Safari

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

Il me paraît intéressant, avant cela, de tester la proposition de DaOuar ci-dessous. Il faut que je m'y remette... -- CharlesNepote

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