Groupe 3 (services applicatifs)
Date de création :	02/04/2004
Dernière modification :	24/06/2004
Diffusion :	internet

Charte graphique du Portail

Tout établissement, qui met en place le portail, doit pouvoir personnaliser le rendu de celui-ci et le rendre cohérent par rapport à la charte graphique de l'établissement. L'objectif de ce document est de présenter une solution pour simplifier la mise en place de nouvelles chartes graphiques. Un modèle de l'interface du portail est proposé sous forme d'un fichier photoshop, qu'il est facile de redéfinir; ce fichier peut ensuite être exporté sous forme d'une collection d'images nécessaires au rendu dans le portail, que ce soit au niveau des onglets, des canaux… L'outil ant est ensuite utilisé pour placer les fichiers générés dans les différents répertoires utilisés par uPortal pour stocker les images d'un skin.

Téléchargement

Le fichier proposé en téléchargement contient les éléments suivants :

un fichier psd, charte_esup.psd, dans lequel sont placés tous les icônes et bordures caractéristiques d'un skin; les tranches pour l'exportation sont définies.
un fichier build.xml pour créer le squelette d'un skin en plaçant les fichiers images exportés depuis le fichier photoshop dans les répertoires associés à un skin dans le portail.
un répertoire skin contenant les feuilles de styles portlet.css et style.css (à modifier pour finaliser le skin) ainsi que deux fichiers images transparent.gif (un fichier vide de contenu de largeur 1 pixel et de hauteur 1 pixel) et thumb.gif qui est une vignette du skin final (dimensions : largeur : 120 pixels, hauteur : 90 pixels).
répertoire exemple avec le développement de skin, fichier psd et répertoire skin inclus.

Fichier psd

Le modèle est divisé en plusieurs zones :

La décomposition du modèle :

la zone d'en tête
- le logo d'index (1) situé dans la partie gauche de la zone
  Remarque pour les utilisateurs de la distribution uPortal
  par défaut dans la feuille de transformation de thème l'image mainlogo.gif a une dimension de 426 pixels de largeur et 102 pixels de hauteur; la dimension de cette image a été modifié en conséquence, il vous faut modifier la feuille de style xsl associée (ici integratedModes_en_US.xsl) en supprimant la partie grisée ci-dessous
  
  129 <td align="left" valign="top">
  130 <img src="{$mediaPathHeader}/mainlogo.gif" width="426" height="102"/>
  131 </td>
- les icônes de la barre d'outils (2)
les icônes associés aux onglets (3)
le rendu du canal (4)
- canal rendu par défaut
- le canal sélectionné : il est visualisé lorsque l'utilisateur est en mode préférences; le canal est sélectionné lors de son déplacement d'une colonne vers une autre.
le rendu de colonne (5)
- la colonne rendue par défaut
- la colonne sélectionnée : elle est visualisée lorsque l'utilisateur est en mode préférences, et que la colonne est activée pour un déplacement.

Dans le modèle, un groupe de calques libellé css contient les calques nommés suivant les classes de la feuille de style css associées à un skin.

Pour modifier une teinte de l'interface, remplissez simplement le calque d'une nouvelle couleur; le résultat sera répercuté sur le modèle. (Ne modifiez pas les masques de fusion…).
Une fois les icônes et les bordures modifiées, vous exportez votre fichier (fichier > enregistrer pour le web). Vous enregistrez le fichier html dans le répertoire contenant le fichier build.xml. Par défaut, cet enregistrement crée en plus du fichier html, un répertoire images contenant plus de 400 images alors que seule une petite centaine nous est utile.

Un skin uPortal est constitué également de deux feuilles de style portlet.css et style.css qu'il faut modifier. Dans le répertoire skin, éditez ces fichiers et remplacez les couleurs de chaque style par ceux définis dans le fichier psd (les styles relatifs au texte ne sont pas compris en compte).

Les répertoires d'un skin

Nous utilisons l'outil ant pour créer les différents répertoires d'images pour un skin avec seulement les fichiers nécessaires. Un skin, dans le portail, contient quatre répertoires images :

columnBorder : contient les images associées aux bordures des colonnes dans les 2 modes, normal et sélectionné
icons : contient les images des boutons utilisées pour la navigation dans le portail au niveau des colonnes, des canaux et de la barre d'outils située par défaut dans la partie supérieure droite du portail
institutional : contient un seul fichier mainlogo.gif qui est affiché dans la partie supérieure gauche du portail
mainBorder : contient les images associées aux bordures des canaux dans les 2 modes, normal et sélectionné

Deux tâches sont définies dans le build.xml :

Création uniquement des sous répertoires (tâche dispatch)

la commande ant dispatch crée un répertoire build dans lequel les 4 répertoires cités au dessus sont créés et les images nécessaires à un skin sont placés. Ces sous répertoires seront la base pour créer un nouveau skin dans le portail.

Mise en place d'un nouveau skin dans le portail (tâche deploy)

la commande ant deploy crée un nouveau skin dans le portail (pensez à renseigner le fichier build.properties avant de lancer cette comande). Un nouveau répertoire nommé ${nomskin} est alors créé sous uPortal.home/WEB-INF/classes/org/jasig/portal/layout/AL_TabColumn/integratedModes/ avec les quatre sous-répertoires cités au dessus plus un cinquième nommé skin.
Pour compléter l'installation du nouveau skin, il faut :

modifiez le fichier uPortal.home/WEB-INF/media/org/jasig/portal/layout/AL_TabColumn/integratedModes/skinList.xml et et insérez l'élément suivant avant </skins> :

<skin>
<skin>${nomskin}</skin>
<skin-name>${nomskin}</skin-name>
<skin-description>Une description du skin qui appaîtra dans le canal skin selector</skin-description>
</skin>

où vous remplacez ${nomskin} par la valeur saisie dans le fichier build.properties.

Création : 02/04/2005 Sébastien (UHP)
Modifications :24/06/2004