Conception de pages WEB pour les chaires de la SMA
Transcription
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ç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> > <a href="http://sb.epfl.ch" class="path">SB</a> > <a href="http://institut.epfl.ch" class="path">INSTITUT</a> > 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"> • <a href="membres.html"> Membres </a><br /> • <a href="enseignement.html"> Enseignement </a><br /> • <a href="recherche.html">Recherche</a><br /> • <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">©2006 EPFL</a>, 1015 Lausanne, tél. +41 21 693 XX XX, <a href="mailto:[email protected]" class="path">[email protected] </a><br /> mise à 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