bonnes pratiques · web view2004/06/07 · tél. : 0139 23 92 82 imprimé le : jeudi 8 avril 2004...
Post on 05-Feb-2021
2 Views
Preview:
TRANSCRIPT
Bonnes pratiques
Rédigé par :
Vincent Bouthors
David Koss
Version :
En cours de rédaction
Auteur
vincent.bouthors@jalios.com
david.koss@jalios.com
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
top related