Wikini

DocumentationGraphiste

PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes ec2-3-147-104-120.us-east-2.compute.amazonaws.com
<< DocumentationDeveloppeur LaDocumentation  


Cette documentation a pour objectif d'expliquer à l'utilisateur graphiste comment modifier l'aspect graphique de WikiNi.
Si vous êtes pressé, vous pourrez préférer voir CommentPersonnaliserGraphiquementWikiNiEn10Minutes et AstucesCSSPourWikini.

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 ? -- [Inconnu]

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.
-- CharlesNepote

Je suggère de définir la politique suivante à propos des feuilles de styles :
-- CharlesNepote

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 -- DavidDelon.
-- EricSegui

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).
-- CharlesNepote

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. -- CraoWiki:ArnaudFontaine (interwiki)

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

Clair Charles. J'ai pu relooker ma page perso en modifiant les 4 fichiers suivants avec une facilité déconcertante.
L'architecture et le code est trés bien élaboré, et la simplicité est de mise : Excellent projet Open Source !
Des templates ? Euh non merci, c'est plus que parfait pour l'instant. Félicitations à tous. Excellent travail, excellent coding.
-- ThierryBazzanella

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...
-- JeanPascalMilcent


J'aimerais donner mon avis sur wikini et les templates, car je pense que certaines personnes ont des a priori erronés. Je n'ai pas encore bien regardé wikini, mais jettez donc un coup d'oeil aux templates php de dotclear (outil de blog écrit par O. Meunier). Il s'agit d'une page PHP unique, décrivant l'ensemble du site. On y voit clairement les différents composants du système, appelés par des méthodes.
L'énorme avantage d'un tel système est qu'il permettrait d'intégrer wikini dans n'importe quel site, c'est-à-dire de pouvoir facilement rajouter une barre de navigation, des fonctionnalités supplémentaires, du contenu, à l'interface de wikini.
Et ça n'a rien de lourd : une page PHP, dans laquelle les instructions PHP sont le moins intrusives possible (des structures de contrôle et des appels de méthodes produisant du contenu XHTML), que chacun peut modifier pour simplement ajouter la barre de navigation de son site, et surtout pour renommer et modifier les éléments XHTML de manière à utiliser la même feuille de style CSS que pour le reste de son site.
-- François Beretti

Afin que la beauté ne soit pas réservée à une élite


--FuRax37



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. --KarlDubost

Mes remarques :
-- CharlesNepote


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 visuels qui devrait pouvoir être inscrites dans le texte. Donc je propose que soit établis une liste exaustive des usages typographiques au moins pour la langue française et qu'a partir d'elle une liste de raccourcis soit proposée. Je propose aussi qu'une forme de raccourcis soit proposée qui permette facilement d'inclure des balises span avec id et noms de class souhaités. -- NoeDeNaama?

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. -- CharlesNepote

Héritage des classes CSS


Je suis en train de remettre à plat le code CSS de la version CVS pour qu'il soit plus lisible, et j'ai vu qu'il y a plusieurs fois des styles qui devraient être dérivés d'un style de base mais ne le sont pas (voir la fin du paragraphe 5.8.3 Class selectors du W3C). C'est le cas de div.page_preview et div.include_xxx notamment. Du coup il y a des propriétés CSS qui pourraient avoir à être répétées n fois si ce n'est pas déjà le cas.
Exemple pas forcément pertinent : je veux modifier la couleur de fond du div.include. Pas de bol j'utilise toutes les possibilités include_left, include_right etc. Il faut donc que j'ajoute le même background-color à toutes les classes concernées, pas très pratique il y en a 10 !
Si on déclare dans le code Html ceci :
<div class="include left"> (vous noterez bien l'espace en remplacement du souligné)
...
</div>
alors on "hérite" de la classe include tout en appliquant une variante left qui en l'occurence nous change uniquement le placement du div (le terme hériter est ici abusif, mais c'est bien l'idée). Le CSS devient :
div.include {
 }
div.include.left {
 }
div.include.right {
 }
...

Le fin du fin c'est que le left ou right peut aussi être spécifié sans div.include dans les CSS pour pouvoir être utilisé dans d'autres cas, comme les images par exemple :
/* floats pour tout le monde */
.left {
 }
.right {
 }

/* section action include */
div.include {
 }
div.include.left,
div.include.right {
 }
...

On peut alors écrire dans le Html :
<div class="include right"> ...
 ...

Pour ce qui est de div.page_preview, il vaudrait de la même manière mieux que preview soit une variante de page :

div.page {
 }
div.page.preview {
 }

Ce qui éviterait d'ailleurs d'avoir un niveau de div supplémentaire par rapport à la page normale (à moins que ce ne soit volontaire ?). -- JmPhilippe

<< DocumentationDeveloppeur LaDocumentation  


Il n'y a pas de commentaire sur cette page. [Afficher commentaires/formulaire]
2013-03-09 02:38:33 :: Propriétaire : WikiAdmin :: Rétro-liens :: Cartographie :: Recherche :
XHTML 1.0 valide ? :: CSS valide ? :: -- Fonctionne avec WikiNi 0.5.0 (interwiki)