Rapport de projet Agence ‘Imagine’ ____________________________________________________________________________________________ -1- Rapport de projet tuteuré Première année « Atelier Architecture » IUT de Troyes Département SRC ___________________________________________________________________ Agence Imagine : ‐ CRESPIN Kevin ‐ SCHERMANN Julien ‐ THIEBAUT Jean‐Philipp
30
Embed
Rapport de projetOK - julien.schermann.frjulien.schermann.fr/SRC/src1/projettut/s1rapport_projet.pdf · Introduction Présentation ...
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Nous tenons à remercier l’ensemble de l’équipe enseignante pourleurs conseils utiles et avisés, notammentMme. FORD pour son aide surnotreLookandFeeletM.CHIBOUTpourlasoutenanceetlerapportfinal.
Merci aussi à la commanditaire pour les renseignements et lesinformations qu’elle nous a fourni sur l’atelier architecture.
Les projets tuteurés sont un moyen de nous plonger dans la viepréprofessionnelleennouspermettantdedécouvrircequ’est letravaildegroupe, l’implication d’autrui sur notre travail comme par exemple desconseilsoudesremarquessurunebannièreouunemiseenforme,leschoixdu commanditaire et ses attentes et surtout de devoir livrer un produitdansuntempsimparti.
Présentationduprojet
Nous avions le choix parmi trois projets proposés: les passeurs defresque, lamaisonde lascienceet l’atelierarchitecturedulycéeChrestiende Troyes qui n’existe plus aujourd’hui. Nous avons choisi l’atelierarchitectureprésentéparDominiqueSabroux car l’atelierétait avant toutunclubde lycéencequenousétions iln’yapassi longtemps,nousavonsdoncpenserquec’était le thème leplusappropriépournousetquenouspouvionsrépondreaumieuxauxattentes.
Pour ce projet nous devions créer un siteweb statique, accueillant,avec un nombre de rubriques prédéterminées, et des rubriques sur lesdifférentsvoyagesetunerubriquegalerie.
Notre produit doit répondre à un manque, en effet l’atelierarchitectureduLycéechrestiendeTroyesneprésentaitpasdesiteinternet.Aussiceluiciàsubitbeaucoupdechangementdestatuts,c’estpourquoilesiteestunbonmoyenpourrendrehommageàcetatelier.Deplusunsitedédiéuniquementà l’architecturedansles lycéespeutfairesedéveloppercegenred’activitédanslemilieuscolaire.Notrecommanditaire,enfaisantla demanded’un support accessiblepar lemonde entier, désir avant toutfaireconnaîtresonactivitéetpartagersapassiondel’architecture.
Nous avions 3maquettes différentes à réaliser, c’est pourquoi nousavons fait une étude de l’existant pour en tirer les points faibles ou lespoints fortsde sitesexistantsetqui traitentdumême thème, afinde s’eninspirer.
a.Lessitesprésentantdespointsfaibles
SiteN°1:http://byc.ch/hga/art/index.htm
Pointsfaibles:
‐ Ce site utilise une palette de couleur qui ne correspond pas avecnotresujet,eneffetnousnepensonspasàl’architectureenétantsurunsitebeige/violet/jaune.
‐Lecontenuesttropspécialisédansledomainedel’architecture,lesinternautes qui ne s’intéressent pas plus à l’architecture mais qui sontcurieux,nepeuventcomprendre,oucomprendreavecdifficultélecontenudecesite.
Après l’étude de l’existant présenté ci‐dessus nous avons pumettreenœuvreunlook&feelquinousapermisdedirigernosidéesdansunseulsensafindemettreenformelestroismaquettesdemandées.
hauteur est ajustée en fonction du contenu de la pages ou une barre dedéfilementseraprésentesurlecotédroitducontenu.
Navigation : La navigation principale est situé en dessous de labannière,lorsdusurvoledulien,celui‐cipasseengrasavecunchangementdecouleurs(exemple:levertdegenèse).
Pourlesous‐menuquiestsituésurlagauche:‐ sionprend l’exemple1et2, lorsdusurvolde la casedu liencelle‐ci sedéplaceversladroitelégèrement(Onpassedelacase1àlacase2).‐ Si on prend l’exemple 3 et 4, lors du survol de la case du lien, celle‐cidevientplusfoncée(Onpassedelacase3àla4).
hauteur est ajustée en fonction du contenu de la pages ou une barre dedéfilementseraprésentesurlecotédroitducontenu.
Navigation:L’ouverturedusiteferaarriverl’internautesurunepageavecunlogoplacéaucentre,enhautdelapageetserafixe,tandisqu’unebannière est placée en dessous de celui‐ci et changera en fonction de laposition de la souris, un onglet correspond à une bannière différente, letitredelapageseraplacésurcettemêmebannière.Letexteestpositionnéenbasdelapartiecentrale.
delasobriétédanslesite.Legrispeutfairepenserauxmatièrespremières.Cependant une version avec le fond bleuté peut être proposé si cetteversionesttropsombre.Aussiilestenvisageabledecréerlesdeuxversionsetd’offriràl’internautelechoixdelaversionqu’ilpréfère.
bas occupe toute la largeur de la page. Le contenu est centré et d’unelargeurde800pixels.Lahauteurestajustéeenfonctionducontenu.
Navigation : La bannière est placée tout en haut, les onglets sontpositionnéssurlagaucheaveclessousmenusdéroulantssurleurdroite.Letitredelapageestsituéentrelabannièreetletextedelapage.
Couleurs:Palettegraphique:Nuancesdegris‐vertmétal‐vertpâleAgencement des couleurs : Les couleurs restent sobres et servent à
rappeler certains éléments du domaine de l’architecture. Les nuances degris rappellent le béton des bâtiments; le vert pâle nous fait penser à lanature présente autour de l’architecture des bâtiments ; et le vert métalreprésente tous lesmétauxprésentsdans les constructions.Le fond resteblanc,afind’aérerlesite.
Texte&Images:Texte : La police utilisée est «Palatino Linotype» avec «Arial» en
Lelogosertàidentifierlesite,ilesttoujoursvisibleenhautdespagesafindesoulignerlethèmedusite.Nousavonschoisiungraphismecohérentavec le designdu site et nous avons réalisé une animationdu logo sur lapaged’accueilafindedonnerdudynamismeausite.
Nous avons due modifier le logo afin de répondre aux attentes ducommanditaire,voicil’évolutiondecelui‐ci:
Une fois le logo fini, nous sommes partis sur la création desdifférentes bannières pour le menu, étant donné que celle ci change aupassagedelasourissurundesonglets.
Afin de présenter les voyages effectués par l’atelier, nous avonsréaliséunecartecliquable,c’estàdirequechaquevillevamenersoitàunepagedédiercommeLyonouAmiens,soitàlagaleriephoto.
La bannière est animée, elle permet de faire la promotion de notresite grâce à un lien cliquable intégré en direction du site. On peut ladisposerdansdiversendroitscommelesforums,lesblogsetautressites.
La bannière de promotion a été en réflexion parallèlement à nosautrestâches,nousavonstousréfléchiesurlafaçondelaréaliser.Decefait,nousavonsréunisnosidéesafindedonnerlabannièreactuelle.
Ilpermetunaperçudel’imagegrâceàuneminiature,etlorsquequel’on clique dessus, celle‐ci s’agrandit afin de donner la taille originale del’image.
Nous avons donc configuré les lightbox de façon à bien les intégrerdansnotresite.
Nous avons bien sûr redimensionné toutes les images afin de leurdonnerunetailleraisonnableàl’aided’unscriptPhotoshop.Nousavonsfaitdemêmepourréaliserlesimagesminiatures.
Notrecommanditairenousadonnébeaucoupdetextes,cequenousapermisd’enrichir lecontenudusite.Maisafindemieux les intégrer,nousavons fait la synthèsede certain texte etmis en forme tous les textes. Lamiseenformedutexteesteffectuéegrâceauxstyles(css).
Le site étant terminé, il fautmaintenantpenser à sonhébergement,voici un tableau comparatif montrant différents hébergements possiblespourlesite(cettelisten’estpasexhaustive,celapermetjustedesedonneruneidéedecequel’onpeuttrouver):
Afin de permettre aux anciens élèves de pouvoir dire ce qu’ils ontvécu dans cet atelier nous avions eu l’idée d’y ajouter un livre d’or et unforum.
Nous avions eu l’idée également de créer deux nouveaux sitesindépendant: un sur l’association oblique et un autre pour l’architecteTroyensMarcelloRicchiero.
Apportspersonnels
Ceprojetapunousapporterdenombreusessatisfactions,aussibienàtitrepersonnelquecollectif.Eneffet,chacunapuconnaîtred’avantageleséléments qui constituaient le groupe, ses méthodes de travail, sonorganisation,sonespritd'analyse…
Nous avons pu apprendre des autres et approfondir nosconnaissances dans un domaine. Il s'agit donc d'une expérienceenrichissante où chacun a dû s'adapter aux autres pour mener à bien letravail de groupe. Par exemple, le travail a dû être divisé afin de fairetravailler autant tous lesmembres du groupe, semettre d'accord sur leshorairesdeprésence,s'accordersurnosidées,échangerafindeconfronternos points de vue et aboutir sur un choix commun pour les réalisationsfinales.
function change_image(i, source) { document.images[i].src = eval("ban"+source+".src") }
function prechargement() { ban1 = new Image(450,100); ban2 = new Image(450,100); ban3 = new Image(450,100); ban4 = new Image(450,100); ban5 = new Image(450,100); ban1.src="img/ban1.png"; ban2.src="img/ban2.png"; ban3.src="img/ban3.png"; ban4.src="img/ban4.png"; ban5.src="img/ban5.png"; }
Associé dans la page html avec la commande « onmouseover » <a onmouseover="change_image('img_roll',1)" onmouseout="change_image('img_href="index.html">Accueil</a>