Formation Webdesigner

Présentation au sujet: "Formation Webdesigner"— Transcription de la présentation:

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

2 JCMS 4.0 - Formation des Webdesigners
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 Octobre 2003 JCMS Formation des Webdesigners

3 JCMS 4.0 - Formation des Webdesigners
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 Octobre 2003 JCMS Formation des Webdesigners

4 JCMS 4.0 - Formation des Webdesigners
Formation Webdesigner Principes de JCMS et d’un portail Les points d’intervention du Webdesigner Le découpage spécifique de l’interface : les portlets La création et la refonte des Skins La refonte des JSP Les CSS ®Jalios Octobre 2003 JCMS Formation des Webdesigners

5 JCMS 4.0 - Formation des Webdesigners
Concepts Portlets ®Jalios Octobre 2003 JCMS 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 ®Jalios Octobre 2003 JCMS 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 ®Jalios Octobre 2003 JCMS 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 ®Jalios Octobre 2003 JCMS Formation des Webdesigners

9 JCMS 4.0 - Formation des Webdesigners
Formation Webdesigner Principes de JCMS et d’un portail Les points d’intervention du Webdesigner Le découpage spécifique de l’interface : les portlets La création et la refonte des Skins La refonte des JSP Les CSS ®Jalios Octobre 2003 JCMS Formation des Webdesigners

10 But : Relookage de l’interface
Intervention du Webdesigner But : Relookage de l’interface ®Jalios Octobre 2003 JCMS Formation des Webdesigners

11 Moyens : Composants d’un portail
Intervention du Webdesigner Moyens : Composants d’un portail Portlets JSP Skins ®Jalios Octobre 2003 JCMS Formation des Webdesigners

12 JCMS 4.0 - Formation des Webdesigners
Intervention du Webdesigner Travail d’équipe L’administrateur prépare la structure du site (Types, catégories...) Le Webdesigner prépare les gabarits et met en forme le ou les portails Le Webmaster paramètre les composants du ou des portails ®Jalios Octobre 2003 JCMS Formation des Webdesigners

13 JCMS 4.0 - Formation des Webdesigners
Formation Webdesigner Principes de JCMS et d’un portail Les points d’intervention du Webdesigner Le découpage spécifique de l’interface : les portlets La création et la refonte des Skins La refonte des JSP Les CSS ®Jalios Octobre 2003 JCMS Formation des Webdesigners

14 Organisation visuelle d’un portail
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 Octobre 2003 JCMS Formation des Webdesigners

15 Organisation visuelle d’un portail
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 Octobre 2003 JCMS Formation des Webdesigners

16 Organisation visuelle d’un portail
Les portlets Organisation visuelle d’un portail C’est une structure imbriquée Chaque portlet ligne ou colonne peut en contenir d’autres ®Jalios Octobre 2003 JCMS Formation des Webdesigners

17 Les autres types de portlets utiles
Les portlets Les autres types de portlets utiles La portlet WYSIWYG C’est un morceau de code HTML ®Jalios Octobre 2003 JCMS Formation des Webdesigners

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

19 Le paramétrage des portlets
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 Octobre 2003 JCMS Formation des Webdesigners

20 JCMS 4.0 - Formation des Webdesigners
Formation Webdesigner Principes de JCMS et d’un portail Les points d’intervention du Webdesigner Le découpage spécifique de l’interface : les portlets La création et la refonte des Skins La refonte des JSP Les CSS ®Jalios Octobre 2003 JCMS Formation des Webdesigners

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

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

23 Création et refonte d’un skin
Les skins Création et refonte d’un skin Créer le gabarit HTML et les découpes d’images nécessaires Copier le dossier d’un skin existant, par exemple : /types/AbstractPortletSkinable/BlueSkin/ Renommer ce dossier et le fichier JSP qu’il contient : /types/AbstractPortletSkinable/NouveauSkin/ /types/AbstractPortletSkinable/NouveauSkin/doNouveauSkin.jsp Copier les images dans le dossier /types/AbstractPortletSkinable/NouveauSkin/images/ 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) Définir le fichier NouveauSkin/doNouveauSkin.jsp en tant que gabarit supplémentaire du type Portlet Skinable ®Jalios Octobre 2003 JCMS Formation des Webdesigners

24 JCMS 4.0 - Formation des Webdesigners
Formation Webdesigner Principes de JCMS et d’un portail Les points d’intervention du Webdesigner Le découpage spécifique de l’interface : les portlets La création et la refonte des Skins La refonte des JSP Les CSS ®Jalios Octobre 2003 JCMS Formation des Webdesigners

25 3 principaux types de JSP
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 Octobre 2003 JCMS 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. ®Jalios Octobre 2003 JCMS 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. ®Jalios Octobre 2003 JCMS 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. Skin JSP de la portlet ®Jalios Octobre 2003 JCMS Formation des Webdesigners

29 Principe de refonte d’un JSP (1/2)
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 Octobre 2003 JCMS Formation des Webdesigners

30 Principe de refonte d’un JSP (2/2)
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 Octobre 2003 JCMS Formation des Webdesigners

31 JCMS 4.0 - Formation des Webdesigners
Formation Webdesigner Principes de JCMS et d’un portail Les points d’intervention du Webdesigner Le découpage spécifique de l’interface : les portlets La création et la refonte des Skins La refonte des JSP Les CSS ®Jalios Octobre 2003 JCMS Formation des Webdesigners

32 Portlets et CSS spécifiques
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 Octobre 2003 JCMS Formation des Webdesigners

33 Skins et CSS spécifiques
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 Octobre 2003 JCMS Formation des Webdesigners