Bonnes pratiques
Rédigé par :
Vincent Bouthors
David Koss
Version :
En cours de rédaction
Auteur
[email protected]
[email protected]
Tél. : 0139 23 92 81
Tél. : 0139 23 92 82
Imprimé le :
jeudi 8 avril 2004
Enregistré le :
mardi 13 juillet 2004
1. Charte graphique
1.1. Feuilles de style
Les bonnes pratiques ci-dessous sont à fournir aux
infographistes qui définissent la charte graphique.
1.1.1. Sections et commentaires
Distinguer les différentes sections d’une feuille de style par
des commentaires.
Objectif : permettre de retrouver efficacement les règles
et expliciter l’organisation utilisée.
1 /*
----------------------------------------------------------------------
*\
2 Section Navigation Haut
3 \*
----------------------------------------------------------------------
*/
1.1.2. Format des règles
Mettre une seule clé / valeur par ligne, précédé par une
tabulationObjectif : ceci facilite la comparaison de plusieurs
feuilles ou de plusieurs versions d’une même feuille ; ceci
facilite aussi la lecture.
4 a.link-NavHaut_Informer {
5 text-decoration: none;
6 font-family: Arial, Helvetica, sans-serif;
7 font-size: 10px;
8 color: #000000;
9 vertical-align: middle;
10 text-align: center;
11 }
1.1.3. Structure : commun / spécifique
Lorsque plusieurs sous-portails sont des variations d’une même
charte (par exemple variation de couleurs ou d’image), réunir les
parties communes dans un fichier et limiter les fichiers
spécifiques aux parties qui varient.
Objectif : faciliter l’évolution en factorisant ce qui est
commun et en mettant en évidence les variations.
Partie commune :
12 .Titre {
13 font-family: Verdana, Arial, Helvetica, sans-serif;
14 font-size: 15px;
15 font-style: normal;
16 font-weight: bold;
17 color: #003399;
18 background-image: url(images/custom/Home_AnnFtitre.gif);
19 text-align: left;
20 }
Partie spécifique :
21 .Titre{
22 color: #0033CC;
23 background-image:
url(../images/custom/imgCenter_fTitreInform.gif);
24 }
1.1.4. Organisation de la fourniture des feuilles de style
Les css doivent être fournis avec des fichiers HTML permettant
de visualiser et de vérifier le rendu.
Objectif : limiter les modifications aux fichiers CSS afin
de pouvoir incorporer de nouvelles versions à moindre coût.
Autant que possible, il est souhaitable de respecter
l’organisation dans JCMS :
a. Import depuis les HTML du CSS commun et du CSS spécifique au
sous-portail
b. CSS dans avec un répertoire css/ et images dans un répertoire
images/custom/ Si ce n’est pas le cas, il faut ensuite éditer les
urls
1.1.5. Validation
Vérifier les feuilles de style avec un « CSS checker »
comme http://www.htmlhelp.com/tools/csscheck/
Objectif : même si les navigateurs sont en général
tolérants, le respect des règles facilite l’identification de
vraies erreurs avec ces outils de vérification et garantit une
meilleure portabilité.
1.2. Images
1.2.1. Prévoir des images de fond plus grandes que dans le cas
usuel
Objectif : éviter l’effet non esthétique d’une image de
fond qui se répète de façon non prévue à cause d’une cellule de
tableau plus grande que dans le cas usuel.
Plus généralement, toutes les images de fond doivent être prévu
pour permettre au contenu de s’étendre. La mécanique des portails
sous JCMS permettant de gérer des sites à largeur variables, cette
possibilité doit être conservé lors de la création de skin ou de
gabarits.
1.3. Préférer le texte aux images
Objectif : permettre la modification par les utilisateurs
autorisés.
L’emploi d’image améliore l’esthétique mais empêche la mise à
jour par les administrateurs. Il est recommandé d’utiliser du texte
plutôt que des images lorsqu’il s’agit de texte qui doit être
modifiable. C’est particulièrement le cas pour les noms des
catégories. C’est aussi le cas de texte changeant selon la langue
dans le cas de site multilingue.
Dans l’exemple ci-dessus « Latext files » et « My
activity » sont des textes apparaissant avec une décoration et
non pas des images.
1.4. S’ajuster à la taille de la fenêtre
1.4.1. Eviter le scroll horizontal pour une fenêtre de largeur
800
Le problème est généralement dû à des images trop grandes.
1.4.2. Exploiter l’espace disponible pour une fenêtre de grande
taille
Ceci nécessite l’emploi de colonnes de largeur variable.
Recommandation : vérifier le bon fonctionnement sur
différents navigateurs. Il est possible de n’avoir que des tailles
exprimées en %. Si une ou plusieurs largeurs sont exprimées en
fixe, alors une et une seule largeur doit être non explicitée (ou
valeur *) afin d’absorber les variations.
Prévoir aussi des images qui se continuent par une couleur unie
ou un motif fixe.
1.5. Respecter les standards
1.5.1. HTML 4.01 Transitional
Il est recommandé de respecter le standard HTML 4.01
Transitional. Le W3C qui définit la norme HTML propose un service
accessible en ligne où on peut fournir une URL ou directement le
document HTML : http://validator.w3.org/
En standard, la partie « front office » de JCMS suit
HTML 4.01 Transitional. Pour que le site respecte cette norme, les
adaptations de la charte graphique doivent la respecter aussi.
1.5.2. WCAG niveau A
Dans le cas d’un site Internet de la fonction publique, il est
recommandé de faciliter l’accès aux mal-voyants et aux non-voyants
en respectant la norme WCAG niveau A.
http://www.w3.org/TR/WAI-WEBCONTENT/ Les services de
vérification ne donnent que des indications car certains points
nécessitent l’évaluation d’un expert humain.
En standard, la partie « front office » de JCMS suit
WCAG niveau A. Pour que le site respecte cette norme, les
adaptations de la charte graphique doivent la respecter aussi.
2. Organisation des portlets
2.1. Ne pas utiliser trop de portlets
Dans certains cas, il est préférable de créer une seule portlet
JSP remplaçant plusieurs petites portlets spécifiques.
Exemple
Sur l’exemple ci-dessus, il pourrait être tentant d’agencer une
multitude de portlets pour obtenir le résultat escompté.
Mais cela peut altérer les performances du portail et notamment
la vitesse d’affichage des pages. Il est donc recommandé, dans la
mesure du possible, de regrouper les différentes portlets qui ne
sont pas destinées à être modifiées régulièrement.
Ainsi, dans notre exemple, il est possible de développer
rapidement une seule portelt JSP regroupant l’ensemble de la partie
supérieur du site. Celle-ci se répétant sur toutes les pages et sur
tous les portails, le gain n’est pas négligeable.
a) Image prévue trop petite
Bonnes pratiques
Guide de mise en oeuvre de Jalios JCMS
c) Autre exemple d’image de fond trop petite
b) Image prévue suffisamment grande
Portlet Image
Portlet Image
Portlet Image
Portlet Recherche
Portlet WYSIWYG
Portlet JSP
Portlet JSP
Titre
Référence
Version/date
Page
Bonnes pratiques
13/07/2004
1 / 6
