CID 041 : Conception de pages web, initiation : Cahier des

Transcription

1 Master II Histoire moderne et contemporaine Recherche Cécile Brun CID 041 : Conception de pages web, initiation : Cahier des charges du site : Conception du site : Analyse, conception, implémentation, déploiement et diffusion Sujet : l immigration italienne à Lyon durant l entre-deux-guerres : 1. Analyse de l existant : A. Profil du site web : aperçu du contenu et objectifs du site : a. Nature du site : La réalisation de ce site a vise un intérêt dit professionnel et universitaire : il s agit de mettre en valeur, par le biais du site, les axes de recherches qui furent ceux du travail de recherche de la première année de Master d Histoire tout en proposant les premières pistes de la seconde année en cours. L objet du site proposé dans le cadre de ce CID concerne donc un sujet de mémoire de master d Histoire Recherche de M1 et de M2 qui porte sur l immigration italienne à Lyon durant l entre-deux-guerres. b. Contenus présentés : A la première année s attache la présentation succincte des conclusions qui furent établies à la question «en quoi la territorialisation des Italiens à Lyon en 1926 révèle-t-elle les mutations de deux sociétés mises en interaction par le processus migratoire?». Ensuite, l exposé succinct de l étude de cas du M2 devrait également être mis en avant, concernant l étude de l immigration italienne au cours de la même période, en provenance du Frosinone (Latium) et à destination du troisième arrondissement, plus précisément de la rue Mazenod. De même, la présentation des prémices du travail de M2 passe par un appel à témoignages 1

2 (engagé depuis le début du mois d octobre 2012 sous forme de lettres) dans le cadre d expériences familiales qui furent concernées par ces mouvements migratoires. c. «Stratégie» mise en œuvre : Les besoins correspondants seraient en conséquence ceux d une interface web qui permettrait de présenter brièvement le sujet de ce travail mené depuis deux ans ; par le biais du partage de quelques pistes de réflexions, la hiérarchie du travail tel qu il fut mené au travers de plans, etc. Le projet sous-jacent a quelque peu évolué au fur et à mesure des séances : au désir initial de présenter pour chaque page web une synthèse de la partie concernée dans le mémoire s est progressivement substituée la volonté de ne pas être trop exhaustive, dans un souci de clarté du propos et dans le simple but de donner envie de lire. Une place prépondérante s est alors vue accordée à l iconographie, accompagnés de brefs extraits et des pistes abordées sous forme de plan. B. Le profil du public : La population visée serait en premier lieu composée d universitaires travaillant sur un sujet proche de celui-ci et plus généralement n importe quel étudiant ou personne concernée par la migration ou simplement intéressée. En conséquence, l idéal impliqué serait celui d un accès possible à partir de mots-clés identifiés par l intermédiaire d un moteur de recherche. Afin de correspondre au public recherché, l accent est aussi mis sur l utilisation des sources requises pour un tel sujet, qu il s agisse du cadastre, du recensement ou de l iconographie (respectivement pages 4 pour le III. et 5 pour le IV.). 2. Conception du site : A. Architecture de l information présentée : a. Le découpage de l information : Les pages présentées contiennent un à deux document(s) iconographiques maximum (trois dans le cadre d un doublon d images de petites tailles) pour chacune des pages, afin de limiter le temps de chargement ; et ce d autant plus qu il s agit parfois de photographies ou de cartes réalisées grâce au logiciel MapInfo. De plus, les tailles des documents iconographiques sont choisies avec soin dans le but de s adapter à la quantité d informations présentée et à l aspect général de chaque page et leur lisibilité pour l internaute. 2

3 Dans un souci de clarté et de lisibilité comme pour faciliter la navigation dans les pages du site, ces dernières répondent de la même structure de présentation de l information, tant du point de vue de l apparence du site que de l ordre d agencement des informations : est-ce-à dire que les images tendent à être insérées en haut et en bas de pages afin d alterner avec les passages écrits. b. Structure hiérarchisée permettant la présentation de ces informations : Une organisation thématique simple accentue la visibilité des différentes informations délivrées grâce à la mise en valeur de leur hiérarchie. La stratégie de navigation au sein de la page d accueil répond à la règle des trois écrans et se trouve être la suivante : Bandeau Sommaire horizontal Fenêtre principale La page d accueil impliquée par la stratégie de navigation tente d être visuellement attractive et cherche à susciter l intérêt de l internaute. La hiérarchie présentée au travers des trois niveaux de titres (structure permanente pour toutes les pages) vise à guider l internaute dans le site et le familiariser avec les principales thématiques. Un objectif similaire est conféré par la fixité du sommaire synthétique, mis en valeur par ses couleurs. De plus, le nom de l auteur figure au bas de chaque page, ainsi que son courriel. Les images offrent un premier contact avec les espaces étudiés, cherchent à délivrer un aspect visuel relativement agréable (cf. photographie du village d Acquafondata) et sont occupent ainsi une place de premier plan, sans pour autant être imposantes ou gêner la lecture (cf. les armoiries mises en regard en tête de page). 3. Présentation de l information et aspect visuel du site : a. Harmonie des couleurs : Dans le but de créer une certaine harmonie des couleurs pour faciliter la lecture, voire dans l idéal de la rendre la plus agréable possible ; la palette des couleurs choisies pour l ensemble des pages est dupliquée sur chacune des pages du site et repose sur la gamme suivante : Noir (premier «background» : # (intitulé «black»)), Beige/Marron clair (second «background» : #CD853F (intitulé «Peru»)) et Rouges #8B0000 (intitulé «DarkRed»), #E00000 et #FF0000 ; afin de mettre en valeur le bandeau qui abrite le menu principal : il s agit ici d attirer l attention de l internaute sur la navigation qui lui est offerte dans le site au travers des grands axes de recherche présentés. 3

4 b. Lisibilité du texte : police et taille : Toujours dans cette volonté d uniformiser et d harmoniser pour une plus grande lisibilité du site, la police choisie et constamment dominante est Times New Roman. La mise en gras ou en italique de certains termes et mots-clés permet logiquement de détacher les notions selon leur importance tout autant que du point de vue de la graphie de la page. De même, les tailles dépendent de la hiérarchie de l information qui s en trouve impliquée. De cette façon, l écriture en 12 est privilégiée du fait qu elle corresponde à la taille standard des documents rédigés sur un logiciel de traitement de texte. En revanche et bien entendu, la taille des titres diffère fréquemment, à l instar de ceux de l entête du site : trois niveaux de titres figurent en effet, le premier : «L immigration italienne à Lyon durant l entre-deux-guerres», rédigé en 30 pt et centré sur la page délivre le sujet général du site et du travail universitaire ; Le second : «Master de Recherche», écrit en 15 et également au centre de la page donne d emblée le cadre universitaire dans lequel se situe le sujet du site et le travail réalisé. Le dernier, «Latium et 3 e arrondissement : des stratégies d intégration familiales différenciées», indiqué en 20 pt et aussi placé au centre de la page rédigée vise à donner un rapide aperçu de la thématique suivie en Master II. c. Aspect visuel du contenu : Dans la volonté de rester en accord avec le choix de la structure des trois écrans, la lecture de l information s effectue de manière horizontale. De plus, un effort est fait dans l élaboration de phrases courtes et claires, parallèlement aux extraits de travaux universitaires. Les notions d homogénéité et de sobriété sont également recherchées au travers de l agencement de l information et de l apparence des pages ; ainsi les fonds sont clairs et uniformes pour accentuer la lisibilité du texte. Le choix est aussi fait de ne pas faire figurer d animation dans le site. d. CHARTE GRAPHIQUE DU SITE : La structure des pages se veut uniforme : chacune d entre elle obéit à la même configuration qui est la suivante : a. CSS / HTML : La couleur noir qui constitue le fond pour chacune des pages correspond au code couleur : # ; les marges de 15*25 pixels permettent à cette teinte de transparaître sous le fond général marron/beige intitulé «Peru» (#CD853F) qui forme le support de l écriture. 4

5 Les tailles et formes des trois niveaux de titres répondent d une même cohérence : rédigés en Times New Roman, tous sont situés au centre de la page et s inscrivent, du point de vue de la taille de leurs caractères, de la manière suivante : 30 / 20 / 18 ; sauf pour la première page du menu : 30 / 18 /20. De même, le menu est également uniforme quel que soit la page concernée ; il est constitué d un bandeau de menu rouge sombre, dont la référence est «DarkRed» (#8B0000), haut de 150 pixels. La rédaction des titres à l intérieur s effectue selon une marge la séparant de la limite du bandeau rouge en haut de 20 pixels, 50 pixels pour la limite du bas. La rédaction de ces mêmes titres correspond à du Times New Roman, en gras, 15 et est en surbrillance avec une couleur rouge légèrement plus vive (#E00000) ; elle-même en surbrillance une nouvelle fois plus claire lors du passage de la souris (#FF0000). Le contenu répond de la même uniformité : rédigé en 15 pt New Times Roman et centré sur chacune des pages, chaque paragraphe s inscrit dans une surface haute de 415 pixels et se distingue des autres grâce à de minces bandeau noirs qui laissent transparaitre la couleur de fond sur 5 pixels de hauteur. Ainsi, mis à part la page 1, chaque feuille est constituée de 4 paragraphes différents qui alternent Iconographie/texte/iconographie/texte, sur cette même surface de 415 pixels. Notons l insertion de trois liens externes au bas de chacune des pages, reliés à des documents externes ou à des liens vers d autres sites (dans tous les cas ce lien s ouvre bien dans une autre page, en plus de celle du site) : le cahier des charges du site, l adresse mail de l administrateur pour tout contact et un lien vers le site des Archives départementales du Rhône, d après lequel le travail de Master I fut réalisé grâce à l appui sur les sources nominatives du recensement. 4. Navigation : La page d accueil fonctionne, d une certaine façon, comme une page centrale : le retour est toujours possible vers la première page d accueil et les liens externes s ouvrent dans d autres pages pour ne pas effacer ce premier écran. D autre part, cinq ancres facilitent la navigation en permettant le retour en haut de chaque page. Dans le même ordre d idées, le retour à la page précédente est également toujours possible. Le mode de navigation dans le site tente aussi de s adapter au public qu il cherche à atteindre : la structure du site fonctionne comme celle d une dissertation écrite dans la mesure où chaque page renvoie aux éléments d une seule grande partie du mémoire. 5

6 5. Aspect fonctionnel : a. Gestion des documents iconographiques : Rappelons que dans le but de limiter le temps de chargement des pages, le nombre de documents iconographiques (cartes et photographies dont le poids est relativement conséquent) est limité à un voire deux seulement par page (sauf à deux reprises dans le cas d images plus petites). b. Gestion des éléments multimédia : Numér o image Page concernée par l emplacemen t Taille de l image 1 Accueil 1 150px 200px 2 Accueil 1 150px 200px 3 Accueil px 800px px 900px px 350px px 980px px 320px px 425px px 320px px 320px px 500px Poids de l image Format de l image Emplaceme nt sur la page Référence/informations 156 Ko PNG Haut 1 Armoiries de Frosinone 131 Ko GIF Haut 2 Armoiries de Lyon 277 Ko JPG Bas Site Panoramio - Photo Acquafondata 2453 Ko JPG Bas Répartition Italiens 1926 MI 1079 Ko PNG Haut The American museum in Britain - Livre de l émigrant 1036 Ko PJG Bas Carte répartition lieux naissance / métiers Master I 945 Ko PNG Haut Extrait Cadastre Ko PNG Bas Naissances lyonnaises parents Sicile/Acquafondata 185 Ko PNG Haut 1 Extrait recensement Ko JPG Haut 2 Extrait base données Excel 786 Ko PNG Bas Carte postale place Guichard 6

7 6. Implémentation du site web a. Arborescence du site : Page d accueil Image 1 Image 2 Image 3 Page thème 1 Page thème 2 Page thème 3 Page thème 4 Image 4 Image 5 Image 7 Image 9 Image 6 Image 8 Image 10 Image 11 b. Création des pages web, déploiement et diffusion : Du point de vue du choix des logiciels permettant la constitution du site, NotePad++ fut utilisé pour la rédaction des pages html et de la page css ; Excel fut également sollicité comme base de données en regard avec les recensements tandis que Paint fut aussi mis à contribution pour retoucher et recadrer certaines images. Le déploiement permettant le transfert du site web sur le serveur web s effectue par le biais de FileZilla FTP Client. Enfin, la transmission est assurée par l auteur avec une référence dans les moteurs de recherche. 7