La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

®Jalios Octobre 2003JCMS 4.0 - Formation des Webdesigners1 JCMS 4.0 Formation Webdesigner.

Présentations similaires


Présentation au sujet: "®Jalios Octobre 2003JCMS 4.0 - Formation des Webdesigners1 JCMS 4.0 Formation Webdesigner."— Transcription de la présentation:

1 ®Jalios Octobre 2003JCMS Formation des Webdesigners1 JCMS 4.0 Formation Webdesigner

2 ®Jalios Octobre 2003JCMS Formation des Webdesigners2 Pré-requis Logiciels : –JCMS 4.0 –DreamWeaver (recommandé) –FireWorks ou tout autre logiciels de découpe dimages pour le Web (ImageReady, Photoshop...) Connaissances : –Webdesign (création de gabarits HTML, découpage dimages, etc.) Formation Webdesigner

3 ®Jalios Octobre 2003JCMS Formation des Webdesigners3 Objectifs Connaître les possibilités de relookage de JCMS Appliquer une charte graphique à un site JCMS Construire les gabarits daffichage de JCMS Assembler des pages portail Formation Webdesigner

4 ®Jalios Octobre 2003JCMS Formation des Webdesigners4 Formation Webdesigner 1.Principes de JCMS et dun portail 2.Les points dintervention du Webdesigner 3.Le découpage spécifique de linterface : les portlets 4.La création et la refonte des Skins 5.La refonte des JSP 6.Les CSS

5 ®Jalios Octobre 2003JCMS Formation des Webdesigners5 Concepts Portlets JCMS

6 ®Jalios Octobre 2003JCMS Formation des Webdesigners6 Principes du portail (1/2) Quest ce que cest –le mécanisme de construction des pages du Front-Office de JCMS A quoi ça sert –Permet dorganiser un site en différentes pages thématiques –Chaque page ayant sa propre structure et éventuellement sa propre identité visuelle –personnalisation Portail

7 ®Jalios Octobre 2003JCMS Formation des Webdesigners7 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 larborescence du site –Laccès aux publications de cette catégorie déclenchera lutilisation de cette page –Navigation : autre moyen daccéder aux pages( via la consultation de leur catégorie) –Portails et sous-portails Portail

8 ®Jalios Octobre 2003JCMS Formation des Webdesigners8 Définition dun portail Un ensemble déléments définissant –La géométrie dune page ou dun groupe de pages –Le contenu de cette (ces) page(s) –Rattaché à un endroit du plan de site Portail

9 ®Jalios Octobre 2003JCMS Formation des Webdesigners9 Formation Webdesigner 1.Principes de JCMS et dun portail 2.Les points dintervention du Webdesigner 3.Le découpage spécifique de linterface : les portlets 4.La création et la refonte des Skins 5.La refonte des JSP 6.Les CSS

10 ®Jalios Octobre 2003JCMS Formation des Webdesigners10 But : Relookage de linterface Intervention du Webdesigner

11 ®Jalios Octobre 2003JCMS Formation des Webdesigners11 Moyens : Composants dun portail Intervention du Webdesigner Portlets Skins JSP

12 ®Jalios Octobre 2003JCMS Formation des Webdesigners12 Travail déquipe 1.Ladministrateur 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

13 ®Jalios Octobre 2003JCMS Formation des Webdesigners13 Formation Webdesigner 1.Principes de JCMS et dun portail 2.Les points dintervention du Webdesigner 3.Le découpage spécifique de linterface : les portlets 4.La création et la refonte des Skins 5.La refonte des JSP 6.Les CSS

14 ®Jalios Octobre 2003JCMS Formation des Webdesigners14 Organisation visuelle dun portail Similitudes avec lorganisation dune page Web classique –Structure en lignes et en colonnes, comme dans un tableau Portlets colonnes Portlets lignes Les portlets

15 ®Jalios Octobre 2003JCMS Formation des Webdesigners15 Organisation visuelle dun portail Similitudes avec lorganisation dune page Web classique –Structure en lignes et en colonnes, comme dans un tableau Portlets colonnes Portlets lignes Les portlets

16 ®Jalios Octobre 2003JCMS Formation des Webdesigners16 Organisation visuelle dun portail Cest une structure imbriquée –Chaque portlet ligne ou colonne peut en contenir dautres Les portlets

17 ®Jalios Octobre 2003JCMS Formation des Webdesigners17 Les autres types de portlets utiles La portlet WYSIWYG –Cest un morceau de code HTML Les portlets

18 ®Jalios Octobre 2003JCMS Formation des Webdesigners18 Les autres types de portlets utiles La portlet Image –Cest une image JPG, GIF ou PNG (peut servir de spacer) Les portlets

19 ®Jalios Octobre 2003JCMS Formation des Webdesigners19 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

20 ®Jalios Octobre 2003JCMS Formation des Webdesigners20 Formation Webdesigner 1.Principes de JCMS et dun portail 2.Les points dintervention du Webdesigner 3.Le découpage spécifique de linterface : les portlets 4.La création et la refonte des Skins 5.La refonte des JSP 6.Les CSS

21 ®Jalios Octobre 2003JCMS Formation des Webdesigners21 Skin = gabarit dune 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 dune portlet Il est possible de prévoir plusieurs skins et de les associer à différentes portlets

22 ®Jalios Octobre 2003JCMS Formation des Webdesigners22 Complètement relookable Les skins

23 ®Jalios Octobre 2003JCMS Formation des Webdesigners23 Création et refonte dun skin Les skins 1.Créer le gabarit HTML et les découpes dimages nécessaires 2.Copier le dossier dun skin existant, par exemple : /types/AbstractPortletSkinable/BlueSkin/ 3.Renommer ce dossier et le fichier JSP quil 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 dun 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

24 ®Jalios Octobre 2003JCMS Formation des Webdesigners24 Formation Webdesigner 1.Principes de JCMS et dun portail 2.Les points dintervention du Webdesigner 3.Le découpage spécifique de linterface : les portlets 4.La création et la refonte des Skins 5.La refonte des JSP 6.Les CSS

25 ®Jalios Octobre 2003JCMS Formation des Webdesigners25 3 principaux types de JSP Dans le cadre de lintégration dune charte graphique, il peut être nécessaire dintervenir sur 3 types de JSP : Les JSP daffichage des publications Les JSP daffichage des résultats de recherche Les JSP daffichage de certaines portlets (Liste de publications, Recherche, Navigation, Login...) Les JSP

26 ®Jalios Octobre 2003JCMS Formation des Webdesigners26 Les JSP daffichage des publications Les publications sont divisées en Types distincts (Article, Interview, FAQ, etc.) Pour chaque Type, il existe un fichier correspondant au gabarit daffichage de la publication : /types/[nom-du-type]/ do[nom-du-type]FullDisplay.jsp De même quun skin, il est constitué dun gabarit HTML contenant des balises JSP pour laffichage des données. Les JSP

27 ®Jalios Octobre 2003JCMS Formation des Webdesigners27 Les JSP daffichage des résultats de recherche Lorsque lon 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 saffichent dans cette liste correspond au gabarit contenu dans : /types/[nom-du-type]/do[nom-du- type]ResultDisplay.jsp Là encore, il sagit dun gabarit HTML modifiable à loisir. Les JSP

28 ®Jalios Octobre 2003JCMS Formation des Webdesigners28 Les JSP daffichage 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 daffichages 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

29 ®Jalios Octobre 2003JCMS Formation des Webdesigners29 Principe de refonte dun JSP (1/2) Sous DreamWeaver, un pack dextension permet dafficher les balises spécifiques de JCMS. Elle vous permettent de conserver facilement les éléments nécessaires au fonctionnement du site. Les JSP

30 ®Jalios Octobre 2003JCMS Formation des Webdesigners30 Principe de refonte dun JSP (2/2) Par défaut, les pages sont organisées sous forme de tableau contenant les noms des champs dun côté et les balises correspondantes de lautre. 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 dabord entièrement dans le fichier JSP dorigine, car celui-ci contient des éléments indispensables qui ne sont pas affichés par DreamWeaver.

31 ®Jalios Octobre 2003JCMS Formation des Webdesigners31 Formation Webdesigner 1.Principes de JCMS et dun portail 2.Les points dintervention du Webdesigner 3.Le découpage spécifique de linterface : les portlets 4.La création et la refonte des Skins 5.La refonte des JSP 6.Les CSS

32 ®Jalios Octobre 2003JCMS Formation des Webdesigners32 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

33 ®Jalios Octobre 2003JCMS Formation des Webdesigners33 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


Télécharger ppt "®Jalios Octobre 2003JCMS 4.0 - Formation des Webdesigners1 JCMS 4.0 Formation Webdesigner."

Présentations similaires


Annonces Google