®jalios octobre 2003jcms 4.0 - formation des webdesigners1 jcms 4.0 formation webdesigner
TRANSCRIPT
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
1
JCMS 4.0
FormationWebdesigner
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
2
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.)
Formation Webdesigner
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
3
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
Formation Webdesigner
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
4
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
6. Les CSS
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
5
Concepts Portlets
JCMS
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
6
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
Portail
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
7
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
Portail
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
8
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
Portail
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
9
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
6. Les CSS
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
10
But : Relookage de l’interface
Intervention du Webdesigner
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
11
Moyens : Composants d’un portail
Intervention du Webdesigner
Portlets
SkinsJSP
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
12
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
Intervention du Webdesigner
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
13
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
6. Les CSS
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
14
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
Les portlets
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
15
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
Les portlets
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
16
Organisation visuelle d’un portail
• C’est une structure imbriquée
– Chaque portlet ligne ou colonne peut en contenir d’autres
Les portlets
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
17
Les autres types de portlets utiles
• La portlet WYSIWYG– C’est un
morceau de code HTML
Les portlets
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
18
Les autres types de portlets utiles
• La portlet Image– C’est une image
JPG, GIF ou PNG(peut servir de spacer)
Les portlets
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
19
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
Les portlets
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
20
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
6. Les CSS
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
21
Skin = gabarit d’une portlet
Les skins
Contenu
Titre
Skin
Boutons• Une portlet peut être
associée à un skin
• Un skin est un gabarit HTML qui englobe le contenu d’une portlet
• Il est possible de prévoir plusieurs skins et de les associer à différentes portlets
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
22
Complètement relookable
Les skins
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
23
Création et refonte d’un skin
Les skins
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 nouveauATTENTION : 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 Octobre 2003 JCMS 4.0 - Formation des Webdesigners
24
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
6. Les CSS
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
25
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...)
Les JSP
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
26
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.
Les JSP
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
27
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.
Les JSP
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
28
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
Il est possible de créer plusieurs JSP qui correspondent à différents gabarits d’affichages pour chaque portlet.Chaque nouveau JSP doit être déclaré dans les propriétés du Type de la portlet.
Les JSP
Skin
JSP de la portlet
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
29
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.
Les JSP
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
30
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.
Les JSP
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 Octobre 2003 JCMS 4.0 - Formation des Webdesigners
31
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
6. Les CSS
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
32
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.
Les CSS
®Jalios Octobre 2003 JCMS 4.0 - Formation des Webdesigners
33
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.
Les CSS