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]

Idéalement, chaque élément fonctionnel de la page doit être considéré comme un objet graphiquement modifiable.
On différencie :
Cette structure fonctionnelle permet ainsi une grande souplesse graphique (mise en page, couleurs, fontes, etc.).
[Note : actuellement les éléments fonctionnels suivants posent problème :

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 :
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 : CSS1 ou 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 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 :

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


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 à :
-- Mode d'emploi