Cette documentation a pour objectif d'expliquer à l'utilisateur graphiste comment modifier l'aspect graphique de WikiNi.
[A faire : rédaction en cours - tiré de Wikini.net]


=== Décomposition fonctionnelle de la page ===

Chaque page affichée contient des éléments pouvant eux-même contenir d'autres éléments.
La page [contenant]
	- le titre du site [contenant]
	- le titre de la page [contenant]
	- l'en-tête de la page [contenant]
		- la page d'accueil du site (au choix de l'administrateur)
		- le menu de navigation dans le site [contenant]
			- contenus au choix de l'administrateur
		- l'identité de l'utilisateur (soit son nom de machine, soit son nom d'utilisateur s'il s'est identifié)
	- le texte [contenant]
		- des contenus en gras
		- des contenus en italique
		- des contenus soulignés
		- des contenus indentés
		- des titres (plusieurs niveaux de titre)
		- des liens
		- du code
		- du contenu résultat d'une insertion
		- du contenu résultat d'une suppression
	- l'en-tête des commentaires [contenant]
	- le commentaire //n// [contenant]
		- des contenus (identiques aux contenus du contenant "texte" ci-dessus)
		- l'auteur et la date du commentaire
	- le formulaire d'entrée d'un nouveau commentaire [contenant]
	- le menu relatif à la page [contenant]
		- le label d'édition de la page "Éditer cette page"
		- la date de la page
		- le propriétaire de la page
		- le label d'édition des permissions "Éditer permissions"
		- le label de suppression de la page "Supprimer"
		- le label indiquant le référants de la page "References"
		- le label de la recherche "Recherche"
		- le champ de recherche
	- la "signature" [contenant]
		- le label de validation XHTML 1.0 "Valid XHTML 1.0"
		- le label de validation CSS "Valid CSS"
		- la signature et la version du moteur "powered by WikiNi 0.1.1.0.3"
	- les informations de débogage [contenant]

**Idéalement, chaque élément fonctionnel de la page doit être considéré comme un objet graphiquement modifiable.**
On différencie :
  - les contenants (ou "boites"), gérables indépendament les uns des autres (éventuellement à l'intérieur d'un autre contenant)
  - les contenus, alignés les uns à la suite des autres à l'intérieur d'un contenant.
Cette structure fonctionnelle permet ainsi une grande souplesse graphique (mise en page, [[CouleursDUnePageWeb couleurs]], fontes, etc.).
[Note : actuellement les éléments fonctionnels suivants posent problème :
	- le menu de navigation dans le site, qui pourrait avoir vocation à sortir de l'en-tête et être graphiquement géré de façon indépendante dans la page
	- le label du champ recherche et le champ de recherche, éléments fonctionnels concernant le site et pourtant rattachés au menu relatif à la page]

----
=== Principes techniques essentiels ===

La presque totalité du site est contrôlée par des feuilles de style CSS.
Une feuille de style est un document destiné à contrôler la présentation visuelle de toutes les pages qui s'y réfèrent. Toutes les pages de WikiNi font référence à une seule feuille de style : cela permet de contrôler à partir d'un seul document le design de la totalité des pages. Grace à cette feuille de style on obtient une séparation complète entre les données et leur représentation.

WikiNi utilise deux feuilles de style :
	- une feuille de style destinée aux navigateurs anciens (Netscape 4.x, IE 3.x) : [[http://www.wikini.net/wakka.php?wiki=wikini.basic.css wakka.basic.css]] [documentation à venir]
	- une feuille de style destinée aux navigateurs modernes (Netscape 6-7, Mozilla 1.x, IE 4-5-6) : [[http://www.wikini.net/wakka.php?wiki=wikini.default.css wakka.css]]
Concrètement, chaque élément fonctionnel affiché est régi par un style particulier. Par exemple, l'élément fonctionnel que nous avons appelé "signature", fait référence, dans wakka.css, au style "copyright" qui définit une taille de caractère de 11 pixels, une couleur grise (codée #AAAAAA) et un alignement à droite.



----
=== Propositions d'améliorations ===

Pourrait on préciser la version de [[CSS]] à laquelle adhère WikiNi : [[http://www.yoyodesign.org/doc/w3c/css1/index.html CSS1]] ou [[http://www.yoyodesign.org/doc/w3c/css2/cover.html CSS2]] ? 

La question n'a pas de sens du fait que peu de navigateurs se targuent d'être complètement compatibles CSS1 et //a fortiori// CSS2. La plupart des navigateurs gèrent plus ou moins bien une grande part de CSS1 et une partie plus ou moins importante de CSS2. Par ailleurs, CSS2 n'est guère qu'une extention de CSS1 et non une refonte comme c'est le cas du passage de HTML 3.2 à HTML 4.0. La question pertinente, c'est donc : à quels navigateurs s'adressent les feuilles de style de WikiNi ?
Pour une feuille de style donnée, l'outil [[http://www.bradsoft.com/topstyle/download/litedload.asp TopStyle Lite]] pour Windows (outil gratuit) montre en rouge les propriétés qui ne sont pas gérés en CSS1 -- mieux, il fait de même pour chaque navigateur. Pour la feuille de style qui nous intéresse ici, la totalité des propriétés sont CSS1, **sauf**, dans la classe de style .code, la propriété "overflow" qui est CSS2. Cela dit, elle est gérée par Netscape 4.x et IE 4.x et suivants.


Je suggère de définir la politique suivante à propos des feuilles de styles :
  - les styles utilisés, pour des raisons d'interopérabilité, respectent les standards CSS 1 et CSS 2 définis pas le W3C
  - les styles utilisés permettent un affichage lisible, pas forcément identique, dans les principaux navigateurs du marchés gérant les CSS :
     - Internet Explorer des versions 5.x à 6.x
     - tous les navigateurs fondés sur le moteur Gecko : Mozilla 1.x, Netscape 6.x à 7.x, etc.
     - tous les navigateurs fondés sur le moteur KHTML : Konqueror, Safari
     - Opera 6.x à 7.x.
  - les navigateurs anciens font l'objet d'une feuille de style à part : netscape 4.x et Internet Explorer 3.x et 4.x
  - les styles CSS qui ne sont gérés que par quelques navigateurs peuvent être employé modérément et à condition de ne pas gêner l'affichage dans les navigateurs qui ne les supportent pas.

----
Un certain nombre de styles spécifiques de WikiNi font double emploi avec des styles existants dans CSS2 (par exemple .del/DEL, .add/INS, .code/SAMP, etc..). Cela inhibe les styles définis par l'utilisateur sur leur navigateur, et gêne, par exemple, les utilisateurs mal voyants. Ne serait-il pas préférable de réutiliser les styles existants de CSS2 ?  Oui 


Les "styles" DEL, INS, SAMP, etc., mentionnés par Éric, sont des balises HTML 4.0 (et donc XHTML) et non des styles CSS2.
Cela dit, ta remarque sur les utilisateurs mal voyants est peut-être juste mais je ne la comprend pas bien, peux-tu préciser ?
Peux-tu préciser tes sources et pourquoi cela "gêne les utilisateurs mal voyants" (je suis assez sensible à l'argument).


----
WikiNi utilise t'il un système de template ? Pouvoir écrire une feuille de style, c'est une chose, pouvoir modifier fonctionnellement l'interface, c'en est une autre ... En plus, les pages de WikiNi ne sont pas faites pour jouer avec les positionnements CSS ce qui limite la restructuration d'une page. 

Wikini n'utilise pas de système de template. Nous considérons que les systèmes de template :
  - sont trop lourds à mettre en oeuvre, nécessitant l'apprentissage d'un "langage" supplémentaire qui soit demeure trop simple pour les besoins exprimés, soit devient si complexe que le PhP devient alors le meilleur des langage de templates
  - ne sont pas standardisés et ajoutent ainsi une dépendance supplémentaire de WikiNi vis à vis d'un tiers.
L'administrateur fonctionnel a des moyens limités de modification de l'interface. En revanche, le code de WikiNi est assez simple à comprendre et facile à modifier pour qui connaît PhP.
Nous comptons faire des progrès dans cette voie là en donnant à l'administrateur fonctionnel plus de possibilités pour configurer son interface.
"En plus, les pages de WikiNi ne sont pas faites pour jouer avec les positionnements CSS ce qui limite la restructuration d'une page." -> Peut-être ai-je mal compris le sens de votre phrase mais les pages WikiNi, essentiellement composées avec des <div></div> peuvent au contraire facilement être restructurées. Chaque "[contenant]" indiqué ci-dessus est un <div></div>. Ainsi, par exemple, la page de test suivante présente, uniquement sur la base d'une nouvelle feuille de style, un menu placé à gauche en position "fixed" (du plus bel effet sous Mozilla) : http://charles.nepote.free.fr/wakkafr/wakka.php?wiki=BacASable


Ta page ( http://charles.nepote.free.fr/wakkafr/wakka.php?wiki=BacASable ) fonctionne aussi sous Konqueror 3.1.0 et donc je suppose sous Safari... 


  Sur la lourdeur des systèmes de template  ... je ne suis d'accord qu'à 90% ... Les 10% restant s'appellent Smarty Templates. C'est simple à mettre en oeuvre et le language, même si il faut l'apprendre, j'en convient, est simple et puissant.
  Ton argument sur la non standardisation est imparable :) 
  Pour les CSS et la partie positionnement des div, d'expérience, j'ai constaté qu'il ne faut pas spécifier de positionnement absolu dans des classes, mais le faire dans des div identifiés (id). C'était juste le sens de ma remarque :)
  Maintenant, avant de faire le pénible, je vais de ce pas installer un WikiNi pour pouvoir le décortiquer ! 
----
===Afin que la beauté ne soit pas réservée à une élite===

 Je suggère que l'on puisse déposer ici des fichiers wakka.css avec un site présentant leur effet sur wikini au niveau visuel.
 Cela permettra à ceux qui ne veulent pas se palucher la compréhension de ce type de fichiers de pouvoir accèder à la beauté ;-)


   Ca c'est une bonne idée, mais il faudrait avoir un système de "téléversement" de fichier, projet dont il a déjà été discuté voir déjà développé, mais aucune decision n'a été prise. --

   Je ne parle pas ici d'ajouter de nouvelles fonctions à wikini (attention au syndrome de l'usine à gaz) mais simplement de faire un lien du type Download WikiNi , ça suffit bien. 

----
=== Suggestions pour l'organisation du gabarit de Wikini ===

%%
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>
<body>


<div class="wrapper">

<div id="entete">
<h1>
<span class="wiki_name">WikiNi<span>
<span class="page_name">toto<span>
</h1>
</div>

<div id="menu">
<div id="outils"> </div>
<div id="utilisateur"> </div>
</div>

<div id="contenu" class="page">
blabla

</div>

<div id="pied"></div>

</div>
</body>
</html>
%%


C'est une suggestion afin de permettre une utilisation plus souple pour les règles CSS. Il faudrait également déclarer toutes les class CSS et id utilisées dans Wikini. une remarque, quelquechose que je trouve troublant dans wikini, c'est la zone texte qui s'affiche comme un formulaire. 
Mes remarques :
 - pour la DTD en strict, je ne te promet rien mais je vais essayer (cf. WikiNi En HTML Strict ; je ne suis pas convaincu de l'intérêt) ;
 - pour ##<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">##, je ne suis pas contre mais certains WikiNi sont multilingues... alors ça va poser quelques problèmes (je vais y réfléchir)
 - pour le charset en UTF-8, je voudrais bien mais MySQL ne le supporte pas (cela nous ferait perdre le bénéfice de l'indexation en texte intégral de MySQL)
 - pour le ##<div class="wrapper">## s'est une excellente remarque (on ne peut pas l'appliquer au <body> ? il faut nécessairement une <div> ?)
 - je ne comprend pas la ligne ##<div id="contenu" class="page">## pourquoi une classe **et** un id ? Pour une meilleure accessibilité : pour proposer un lien du type "aller directement au contenu" ?
 - pour le code suivant je ne suis pas d'accord : ##<div id="entete"><h1><span class="wiki_name">WikiNi<span><span class="page_name">toto<span></h1></div>## ; en effet je ne vois pas l'intérêt de réunir sous la même <div> le nom du Wiki et le titre de la page ; on peut vouloir au contraire les séparer ; au niveau structurel, il ne sont pas sur le même plan
 - pour le menu : ##<div id="menu"> <div id="outils"></div><div id="utilisateur"></div> </div>## ; je ne suis pas contre... peux-tu expliquer le pourquoi des ID systématiques ?
 - pour le ##<div id="pied"></div>##, WikiNi propose déjà ##<div class="footer">## ; est-il vraiment plus important de mettre un id ? pour des raisons d'accessibilité ? faut-il alors ajouter des accesskey ?


Je profite du passage de Karl pour en remettre une couche sur la conformité. Wikini comme d'autre éditeurs de texte inclus parmis ces raccourcis wiki des éléments non conforme comme les gras, italiques soulignés alors que ce sont les structures signifiantes porteuses de ces rendus visuelle qui devrait pouvoir être inscrite dans le texte. Donc je propose que soit établis une liste des exaustive des usages typographiques au moins pour la langue française et qu'a partir d'elle une liste de racourcis soit proposée. Je propose aussi qu'une forme de racourcis soit proposée qui permette facilement d'inclure des balises span avec id et noms de class souhaités. 

Les balises <b>, <i>, etc. sont parfaitement conformes aux normes HTML 4.01 et XHTML 1.0 (prière de réviser vos classiques). Cela dit, je suis d'accord avec vous sur le fait d'utiliser des balises métatypographiques avec une sémantique plus adaptée (<strong>, etc.). N'hésitez pas à faire des propositions plus concrètes, je suis à l'écoute et sensible à vos arguments. 
---
Cette page (DocumentationGraphiste) est liée à :
-- **[[DocumentationUtilisateur Mode d'emploi]]**