Conception de pages WEB pour les chaires de la SMA

Conception de pages WEB pour les chaires de la SMA
Léonard Gross
4 février 2009
Ce document présente un modèle de confection de page WEB destiné aux chaires
des institus de la SMA. Il s’efforce de respecter la charte graphique de l’école et
d’utiliser des standards de manière à ce qu’il soit possible d’y apporter des modifications sans connaissances approfondies de programmation WEB. Le layout général
se distingue en deux styles de pages dites page vitrine et page de contenu abordées
séparément. L’utilisation d’une feuille de style permet une séparation de la forme
et du contenu en garantissant une modularité qui simplifie la lecture du code. Les
exemples sont donnés volontairement avec un souci de généricité, laissant ainsi le
choix aux responsables WEB de chaque chaire de les customiser à leur guise (e.g.
contenus dynamiques, pages spéciales etc.).
1
Page vitrine
1.1
Généralités
Les conventions, standards et autres chartes graphiques sont disponibles en détail à
l’URL http://atelierweb.epfl.ch/. Par ailleurs le site http://css.alsacreations.
com/ constitue une bonne référence pour des informations relatives aux feuilles de
style, sous forme de tutoriaux et de FAQ. Le présent document ne consitue pas un
manuel HTML/CSS mais décrit juste quelques aspects de l’utilisation de la technologie pour la conception de la base d’un site standard.
1.2
Aspect général
La figure 1 montre le squelette de la page d’acceuil standard index.html dite page
vitrine. Son contenu est volontairement statique et exempt de tout artifice dont le
choix revient au webmaster de chaque chaire pour personnaliser la page.
La forme des différentes parties constituant la page sont définies dans un fichier
d’extenstion .css, la feuille de style 1 ou cascading style sheet. Ces parties constituent
des blocs distincs qui seront détaillés un par un dans la suite. La figure 2 montre
une vue d’ensemble de ces blocs.
1
disponible à l’URL http://www.epfl.ch/atelier/css2/styles/epfl.css
1
Fig. 1 – Page vitrine
Fig. 2 – Distinction des blocs
L’utilisation judicieuse de balises <div> fournies par la technologie CSS permet un
remodelage aisé des différents blocs de manière indépendante l’un de l’autre. Le
code gagne en lisibilité et la relation avec le visuel de la page correspondante est
plus intuitif.
1.3
Description des blocs
Cette section a pour but de passer en revue les différents blocs en mettant en parallèle
leur aspect visuel et leur code.
2
1.3.1
Le bloc header left
<div id="header_left">
<div class="logo"><a href="http://www.epfl.ch"><img
src="img/epfl_logo.gif" alt="epfl" height="34"
width="120" border="0"></a></div>
<div class="logo"><a href="http://www.epfl.ch"><img
src="img/epfl_text.gif" alt="epfl" height="28"
width="120" border="0"></a></div>
<div id="language" class="path">fran&ccedil;ais | <a
href="index.html.en" class="path">english</a></div>
</div>
Dans le cas où un choix de langues est proposé, on créera une page dans chacune
des langues i.e. index.html.fr et index.html.en.
1.3.2
Les blocs header title1 et header title2
<div id="header_title1" class="headercolor_sb1"><img
src="img/txt_m_abc.gif" alt="abc" border="0">
</div>
<div id="header_title2" class="headercolor_sb2"><img
src="img/txt_sm_abc.gif" alt="alpha beta gamma" border="0">
</div>
Pour obtenir les images a inclure dans les bandeaux (i.e. le nom de la chaire),
utiliser le générateur de titre (http://atelierweb.epfl.ch/page1126.html). Les
titres peuvent ne pas être centrés verticalement dans les bandeaux. Dans ce cas il
peut être nécessaire d’adapter la taille des l’image à celle du bandeau en les collant
au centre d’une image avec un fond de même couleur mais à la bonne taille. Pour
rappel les conventions de couleurs pour la faculté SB sont #6699CC pour le header
1 et #336699 pour le header 2.
Attention : ne pas forcer les dimensions des images dans la balise sous peine de
voir le texte devenir illisible.
1.3.3
Le bloc header graph
<div id="header_graph"><img src=
"img/graph_sb_l.gif" alt="graphe I"
border="0">
</div>
Le graphe est téléchargeable à l’adresse http://www.epfl.ch/atelier/banqueimages
g.html. Selon la convention, une chaire ou un labo doit être doté d’un graphe à 6
traits (dernier niveau de profondeur dans l’arbre des unités de l’école).
3
1.3.4
Le bloc tracking
<div id="tracking" class="path"><a href="http://www.epfl.ch"
class="path">EPFL</a> &gt;
<a href="http://sb.epfl.ch" class="path">SB</a> &gt;
<a href="http://institut.epfl.ch" class="path">INSTITUT</a> &gt;
ABC
</div>
Ce bloc permet de visualiser la situation de la chaire dans la hiérarchie de l’école,
avec des liens qui pointent sur les sites de chaque niveau supérieur.
1.3.5
Le bloc vitrine splash
Ce bloc est constitué d’une image dite splash et de deux menus nommés vitrine col1
et vitrine col2.
Télécharger le template pour l’image disponible à http://atelierweb.epfl.ch/webdav/
site/atelierweb/shared/import/migration/
chablon splash.zip. Le fichier se présente sous
forme de calques, utiliser Gimp ou Photoshop
pour la création de l’image splash.
<div id="vitrine_col1">
<div class="box_title red">Contenu</div>
<div class="red_border box">
&#8226; <a href="membres.html"> Membres </a><br />
&#8226; <a href="enseignement.html"> Enseignement </a><br />
&#8226; <a href="recherche.html">Recherche</a><br />
&#8226; <a href="publication.html">Publications</a><br />
</div>
</div>
Ces boites de menu sont disponibles en rouge, gris et blanc. Il suffit de spécifier
la couleur voulue dans la classe. Les items pointent tous vers une page contenu
correspondante. La liste d’items présentée ici est standard et peut être modifiée.
Cependant, un trop grand nombre d’items dans le menu (( CONTENU )) pénaliserait
sensiblement la lisibilité du site. Il est conseillé de faire figurer les liens ailleurs dans
le cas d’un grand nombre de pages, par exemple dans le bloc vitrine center.
1.3.6
Le bloc vitrine center
Ce bloc constitue le contenu central. Les balises <h1> et <h3> telles qu’elles sont
définies dans la CSS permettent des titres en gris. Le reste est à l’imagination du
webmaster. Garder à l’esprit qu’un trop grand nombre d’informations concentrées à
un seul endroit rend la lecture pénible.
4
1.3.7
Le bloc right
Ce bloc comporte des boı̂tes de menus comme décrites précédemment. Le formulaire
de la premère boite permet d’avoir un moyen d’accès rapide aux prestations de
recherche offertes par le site WEB de l’école. La boite de contact est à compléter
avec l’adresse de la chaire et les noms idoines.
1.3.8
Le bloc footer
<div id="footer" class="path">
<hr noshade size="1">
<a href="http://www.epfl.ch/impressum.html" class="path">&copy;2006
EPFL</a>, 1015 Lausanne, t&eacute;l. +41 21 693 XX XX,
<a href="mailto:[email protected]" class="path">[email protected] </a><br />
mise &agrave; jour: 200X-XX-XX
</div>
Faire figurer le contact du webmaster (mail + téléphone) pour qu’il puisse être
contacté facilement. Ne pas oublier d’éditer la date de mise à jour à chaque update.
2
2.1
Page de contenu
Aspect général
Les pages de contenu laissent plus de place au corps du site proprement dit en conservant une ossature similaire à la page vitrine. Le header est identique à l’exception
du tracking qui comporte un niveau de plus. On retrouve la boite de menu principal
à gauche pour une navigation aisée. Les figures 3 et 4 montrent la structure générale
ainsi que les différents blocs aussi définis dans la même feuille de style epfl.css.
Fig. 3 – Page de contenu
5
Fig. 4 – Distinction des blocs
Les trois blocs se nomment left, center2col et footer2col et sont définis de
manière similaire à ceux vus précédemment dans la page vitrine.
Ce modèle sert de base à toutes les pages contenant les informations de la chaire. Il
est conseillé de les nommer en relation avec leur contenu, par exemple membres.html,
enseignement.html de manière à faciliter la gestion des liens et à les repérer rapidement au moment d’y apporter des modifications.
2.2
La page membres
Pour avoir une liste de membres à jour, il est possible de récupérer la liste des
membres d’une unité sous forme HTML et de l’inclure dans le corps de la page. La
démarche est expliquée à http://infoscience.epfl.ch/doc/personnes%40EPFL.
Cette procédure a l’avantage d’obtenir une liste à jour.
6