JCMS 4.

Formation
Webdesigner

®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners 1

 Formation Webdesigner

Pré-requis

• Logiciels :
– JCMS 4.0
– DreamWeaver (recommandé)
– FireWorks ou tout autre logiciels de découpe d’images pour
le Web (ImageReady, Photoshop...)

• Connaissances :
– Webdesign (création de gabarits HTML, découpage
d’images, etc.)

®Jalios JCMS 4.0 - Formation des Webdesigners

2
 Formation Webdesigner

Objectifs
• Connaître les possibilités de relookage de JCMS

• Appliquer une charte graphique à un site JCMS

• Construire les gabarits d’affichage de JCMS

• Assembler des pages portail

®Jalios JCMS 4.0 - Formation des Webdesigners

3
 Formation Webdesigner

1. Principes de JCMS et d’un portail

2. Les points d’intervention du Webdesigner

3. Le découpage spécifique de l’interface : les

portlets

4. La création et la refonte des Skins

5. La refonte des JSP

®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners 4

6. Les CSS
 JCMS

Concepts Portlets

®Jalios JCMS 4.0 - Formation des Webdesigners

5
 Portail

Principes du portail (1/2)

• Qu’est ce que c’est
– le mécanisme de construction des pages du Front-Office de
JCMS
• A quoi ça sert
– Permet d’organiser un site en différentes pages thématiques
– Chaque page ayant sa propre structure et éventuellement
sa propre identité visuelle
– personnalisation

®Jalios JCMS 4.0 - Formation des Webdesigners

6
 Portail

Principes du portail (2/2)

• Comment ça marche
– Une page portail
• Un assemblage de boites (Portlet / Publication)
• Produites par des JSP (pages dynamiques)
• Rattachées à une catégorie de l’arborescence du site
– L’accès aux publications de cette catégorie déclenchera
l’utilisation de cette page
– Navigation : autre moyen d’accéder aux pages( via la
consultation de leur catégorie)
– Portails et sous-portails

®Jalios JCMS 4.0 - Formation des Webdesigners

7
 Portail

Définition d’un portail

• Un ensemble d’éléments définissant

– La géométrie d’une page ou d’un groupe de pages
– Le contenu de cette (ces) page(s)
– Rattaché à un endroit du plan de site

®Jalios JCMS 4.0 - Formation des Webdesigners

8
 Formation Webdesigner

1. Principes de JCMS et d’un portail

2. Les points d’intervention du Webdesigner

3. Le découpage spécifique de l’interface : les

portlets

4. La création et la refonte des Skins

5. La refonte des JSP

®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners 9

6. Les CSS
 Intervention du Webdesigner

But : Relookage de l’interface

®Jalios JCMS 4.0 - Formation des Webdesigners

10
 Intervention du Webdesigner

Moyens : Composants d’un portail

Portlets

JSP
Skins

®Jalios JCMS 4.0 - Formation des Webdesigners

11
 Intervention du Webdesigner

Travail d’équipe
1. L’administrateur prépare la structure du site
(Types, catégories...)

2. Le Webdesigner prépare les gabarits et met en

forme le ou les portails

3. Le Webmaster paramètre les composants du ou des

portails

®Jalios JCMS 4.0 - Formation des Webdesigners

12
 Formation Webdesigner

1. Principes de JCMS et d’un portail

2. Les points d’intervention du Webdesigner

3. Le découpage spécifique de l’interface : les

portlets

4. La création et la refonte des Skins

5. La refonte des JSP

®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners 13

6. Les CSS
 Les portlets

Organisation visuelle d’un portail

• Similitudes avec
l’organisation d’une
page Web
classique

– Structure en
lignes et en
colonnes,
comme dans un
tableau

• Portlets
colonnes

• Portlets
lignes

®Jalios JCMS 4.0 - Formation des Webdesigners

14
 Les portlets

Organisation visuelle d’un portail

• Similitudes avec
l’organisation d’une
page Web
classique

– Structure en
lignes et en
colonnes,
comme dans un
tableau

• Portlets
colonnes

• Portlets
lignes

®Jalios JCMS 4.0 - Formation des Webdesigners

15
 Les portlets

Organisation visuelle d’un portail

• C’est une structure
imbriquée

– Chaque portlet
ligne ou colonne
peut en contenir
d’autres

®Jalios JCMS 4.0 - Formation des Webdesigners

16
 Les portlets

Les autres types de portlets utiles

• La portlet
WYSIWYG
– C’est un
morceau de
code HTML

®Jalios JCMS 4.0 - Formation des Webdesigners

17
 Les portlets

Les autres types de portlets utiles

• La portlet Image
– C’est une image
JPG, GIF ou PNG
(peut servir de
spacer)

®Jalios JCMS 4.0 - Formation des Webdesigners

18
 Les portlets

Le paramétrage des portlets

• Plusieurs aspects
des portlets sont
paramétrables

– Espaces entre
les portlets

– Espaces entre
les lignes ou les
colonnes

– Couleur ou
image de fond

– Alignements

®Jalios JCMS 4.0 - Formation des Webdesigners

19
 Formation Webdesigner

1. Principes de JCMS et d’un portail

2. Les points d’intervention du Webdesigner

3. Le découpage spécifique de l’interface : les

portlets

4. La création et la refonte des Skins

5. La refonte des JSP

®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners 20

6. Les CSS
 Les skins

Skin = gabarit d’une portlet

Titre Boutons
• Une portlet peut être associée
à un skin

• Un skin est un gabarit HTML

qui englobe le contenu d’une
Skin
portlet

• Il est possible de prévoir Contenu

plusieurs skins et de les
associer à différentes portlets

®Jalios JCMS 4.0 - Formation des Webdesigners

21
 Les skins

Complètement relookable

®Jalios JCMS 4.0 - Formation des Webdesigners

22
 Les skins

Création et refonte d’un skin

1. Créer le gabarit HTML et les découpes d’images nécessaires

2. Copier le dossier d’un skin existant,

par exemple : /types/AbstractPortletSkinable/BlueSkin/

3. Renommer ce dossier et le fichier JSP qu’il contient :

• /types/AbstractPortletSkinable/NouveauSkin/
• /types/AbstractPortletSkinable/NouveauSkin/doNouveauSkin.jsp

4. Copier les images dans le dossier

/types/AbstractPortletSkinable/NouveauSkin/images/

5. Modifier le fichier doNouveauSkin.jsp et remplacer le gabarit HTML original par le nouveau

ATTENTION : Conserver les balises JSP <% ... %> et les balises JALIOS, voir « Principe de refonte d’un
JSP »
(Insertion du titre et des boutons + Insertion du contenu)

6. Définir le fichier NouveauSkin/doNouveauSkin.jsp en tant que gabarit supplémentaire du

type Portlet Skinable

®Jalios JCMS 4.0 - Formation des Webdesigners

23
 Formation Webdesigner

1. Principes de JCMS et d’un portail

2. Les points d’intervention du Webdesigner

3. Le découpage spécifique de l’interface : les

portlets

4. La création et la refonte des Skins

5. La refonte des JSP

®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners 24

6. Les CSS
 Les JSP

3 principaux types de JSP

Dans le cadre de l’intégration d’une charte graphique, il
peut être nécessaire d’intervenir sur 3 types de JSP :

• Les JSP d’affichage des publications

• Les JSP d’affichage des résultats de recherche

• Les JSP d’affichage de certaines portlets

(Liste de publications, Recherche, Navigation,
Login...)
®Jalios JCMS 4.0 - Formation des Webdesigners
25
 Les JSP

Les JSP d’affichage des publications

Les publications sont divisées en
Types distincts (Article,
Interview, FAQ, etc.)

Pour chaque Type, il existe un

fichier correspondant au gabarit
d’affichage de la publication :
/types/[nom-du-type]/
do[nom-du-
type]FullDisplay.jsp

De même qu’un skin, il est

constitué d’un gabarit HTML
contenant des balises JSP pour
l’affichage des données.

®Jalios JCMS 4.0 - Formation des Webdesigners

26
 Les JSP

Les JSP d’affichage des résultats de

recherche
Lorsque l’on fait une recherche sur le
site, une liste de chaque publication
correspondant aux critères est
affichée.

Pour chaque Type, la façon dont les

publications s’affichent dans cette
liste correspond au gabarit contenu
dans :
/types/[nom-du-type]/do[nom-du-
type]ResultDisplay.jsp

Là encore, il s’agit d’un gabarit HTML

modifiable à loisir.

®Jalios JCMS 4.0 - Formation des Webdesigners

27
 Les JSP

Les JSP d’affichage de portlet

Chaque portlet (sauf ligne et
colonne) est associé à un ou
plusieurs fichiers JSP contenant
des gabarits HTML, tous
modifiables.

/types/[nom-de-la-portlet]/
do[.......].jsp
Skin
Il est possible de créer plusieurs JSP
qui correspondent à différents
JSP de la portlet
gabarits d’affichages pour
chaque portlet.
Chaque nouveau JSP doit être
déclaré dans les propriétés du
Type de la portlet.

®Jalios JCMS 4.0 - Formation des Webdesigners

28
 Les JSP

Principe de refonte d’un JSP (1/2)

Sous DreamWeaver, un pack
d’extension permet d’afficher
les balises spécifiques de
JCMS.

Elle vous permettent de conserver

facilement les éléments
nécessaires au fonctionnement
du site.

®Jalios JCMS 4.0 - Formation des Webdesigners

29
 Les JSP

Principe de refonte d’un JSP (2/2)

Par défaut, les pages sont
organisées sous forme de
tableau contenant les noms des
champs d’un côté et les balises
correspondantes de l’autre.

Vous pouvez ainsi conserver les

balises affichant les données
que vous souhaitez garder.

ATTENTION : Si vous désirez utiliser un gabarit HTML complet, créé sur une
autre page, copier le d’abord entièrement dans le fichier JSP d’origine, car celui-
ci contient des éléments indispensables qui ne sont pas affichés par
DreamWeaver.

®Jalios JCMS 4.0 - Formation des Webdesigners

30
 Formation Webdesigner

1. Principes de JCMS et d’un portail

2. Les points d’intervention du Webdesigner

3. Le découpage spécifique de l’interface : les

portlets

4. La création et la refonte des Skins

5. La refonte des JSP

®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners 31

6. Les CSS
 Les CSS

Portlets et CSS spécifiques

• Il est possible de prévoir
des groupes de styles
CSS spécifiques pour
chaque portlet.
Par exemple, pour une
même portlet on peut
prévoir des versions de
couleurs différentes qui
nécessitent uniquement
un changement de styles.

®Jalios JCMS 4.0 - Formation des Webdesigners

32
 Les CSS

Skins et CSS spécifiques

• Il est possible de prévoir
des groupes de styles
CSS spécifiques pour
chaque skin
Par exemple, pour un
même skin on peut
prévoir des versions de
couleurs différentes qui
nécessitent uniquement
un changement de styles.

®Jalios JCMS 4.0 - Formation des Webdesigners

33