1 / 33

JCMS 4.0

JCMS 4.0. Formation Webdesigner. 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.).

alexis
Download Presentation

JCMS 4.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JCMS 4.0 Formation Webdesigner JCMS 4.0 - Formation des Webdesigners

  2. 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.) JCMS 4.0 - Formation des Webdesigners

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

  4. 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 JCMS 4.0 - Formation des Webdesigners

  5. JCMS Concepts Portlets JCMS 4.0 - Formation des Webdesigners

  6. 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 JCMS 4.0 - Formation des Webdesigners

  7. 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 JCMS 4.0 - Formation des Webdesigners

  8. 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 JCMS 4.0 - Formation des Webdesigners

  9. 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 JCMS 4.0 - Formation des Webdesigners

  10. Intervention du Webdesigner But : Relookage de l’interface JCMS 4.0 - Formation des Webdesigners

  11. Intervention du Webdesigner Moyens : Composants d’un portail Portlets JSP Skins JCMS 4.0 - Formation des Webdesigners

  12. 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 JCMS 4.0 - Formation des Webdesigners

  13. 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 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 JCMS 4.0 - Formation des Webdesigners

  15. 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 JCMS 4.0 - Formation des Webdesigners

  16. Les portlets Organisation visuelle d’un portail • C’est une structure imbriquée • Chaque portlet ligne ou colonne peut en contenir d’autres JCMS 4.0 - Formation des Webdesigners

  17. Les portlets Les autres types de portlets utiles • La portlet WYSIWYG • C’est un morceau de code HTML JCMS 4.0 - Formation des Webdesigners

  18. Les portlets Les autres types de portlets utiles • La portlet Image • C’est une image JPG, GIF ou PNG(peut servir de spacer) JCMS 4.0 - Formation des Webdesigners

  19. 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 JCMS 4.0 - Formation des Webdesigners

  20. 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 JCMS 4.0 - Formation des Webdesigners

  21. 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 JCMS 4.0 - Formation des Webdesigners

  22. Les skins Complètement relookable JCMS 4.0 - Formation des Webdesigners

  23. 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 JCMS 4.0 - Formation des Webdesigners

  24. 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 JCMS 4.0 - Formation des Webdesigners

  25. 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...) JCMS 4.0 - Formation des Webdesigners

  26. 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. JCMS 4.0 - Formation des Webdesigners

  27. 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. JCMS 4.0 - Formation des Webdesigners

  28. 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 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 JCMS 4.0 - Formation des Webdesigners

  29. 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. JCMS 4.0 - Formation des Webdesigners

  30. 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. JCMS 4.0 - Formation des Webdesigners

  31. 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 JCMS 4.0 - Formation des Webdesigners

  32. 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. JCMS 4.0 - Formation des Webdesigners

  33. Les CSS Skins et CSS spécifiques • Il est possible de prévoir des groupes de styles CSS spécifiques pour chaque skinPar exemple, pour un même skin on peut prévoir des versions de couleurs différentes qui nécessitent uniquement un changement de styles. JCMS 4.0 - Formation des Webdesigners

More Related