Rapport de projetOK -...

Rapportdeprojet Agence‘Imagine’____________________________________________________________________________________________

-1-

RapportdeprojettuteuréPremièreannée

«AtelierArchitecture»

IUTdeTroyesDépartementSRC

___________________________________________________________________

AgenceImagine: ‐CRESPINKevin‐SCHERMANNJulien‐THIEBAUTJean‐Philipp


- 2 -

Remerciements

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.


-3-

Tabledesmatières

Remerciements……………………………………………………………………….2

Tabledesmatières…………………………………………………………………..3

Introduction……………………………………………………………………………4

Présentationdel’Agence……………………………………………………….4Quesontlesprojetstuteurés?……………………………………………....4Présentationduprojet……………………………………………..………........4

I)Conceptionduproduit……………………………………………………...………6

1.Àquelsbesoinsdoitrépondreleproduit?……………………….…6 2.Organisationdutravail……………………………………………………....6 3.Analysedel’existant…………………...……………………………………...8 a.Lessitesprésentantdespointsfaibles…………..…………...8 b.Lessitesprésentantdespointsforts………………………..10 4.MaquettesetLook&Feel…………………………………………………12 a.présentationdestroismaquettes………………………..…...13 b.Evolutiondelamaquetteretenue…………………………….18

II)Réalisation………………………………………………………………………..19

1.Arborescencedusiteetmenu………………...………………………...19 2.Evolutiondesélémentsgraphiquesdusite………………………..20 a.Logo…………………………………………………...…………………..20 b.Bannièresdusite…………………………………………………….21 c.Carteinteractive…………………………………..………………….21 d.Bannièredepromotion……………………….…………………..22 3.Gestionducontenu…………………………………………………………..22 a.Imagé……………………………………………………..………………22 b.Textuel…………………………………………………………………...24 4.Perspectived’hébergement………………………………………………25

Conclusion…………………………………………………………………………….26

Perspectivespourlesite……………………………………………………...26 Apportspersonnelles…………………………………………………………..26

Webographie………………………………………………………………………...27


-4-

Introduction

Présentationdel’Agence

Nous sommes l’agence Imagine, nous avons choisi ce nom car ilsymboliselerêveetl’envied’allerdel’avant,cetteagenceestcomposéedetroismembres:

KévinCrespin:JulienSchermannJean‐PhilippeThiebautChefdel’agence

Nousavionschoisidetravaillerensemblesurpratiquementtouteslespartiesetdes’aiderdèsquel’undenousétaitbloquédoncnousnepouvonspasvraimentdirequenousavionschacununrôledistinct,nousavonsététousàlafoisprogrammeur,designeretinfographiste.

Quesontlesprojetstuteurés?

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.


-5-

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.

Nousdevionségalement créerunebannièreaniméepouvantêtremisesurdessitesetquirenverraiverslesitedel’atelierarchitecture.


-6-

I)Conceptionduproduit

1.Àquelsbesoinsdoitrépondreleproduit?

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.

2.Organisationdutravail

Voicilesdifférentestâchesquenousavonseffectuées:

Préparationduprojet Analysedel’existant Maquettes RéflexionssurlesongletsRéalisationducontenu Synthèseducontenutextueloffertparlecommanditaire RedimensionnementducontenuimagéRéalisationdesélémentsgraphiques Logo Bannières CarteCliquableDéveloppement CodageHTML+CSS IntégrationduJavaScript intégrationducontenu ValidationW3Cetcorrectiondeserreurs


-7-

DiagrammedeGANTT

Afinderéalisercestâchesnousavionsàdisposition:

‐Lestroismembresdel’agence‐Deuxmacbook‐DessalleséquipésdePCdisponiblespendantlesprojets

Aussi,nousavonsutiliséleslogicielssuivant:‐DreamweaverCS3‐PhotoshopCS3‐FlashCS3‐Word2008pourmac‐PowerPoint2008pourmac.


-8-

3.Analysedel’existant

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.

‐Iln’yapasunassezfortcontrasteentrelesongletsetlacouleurdefondcequifaitquelesongletssontàpeinevisible.

‐Ilyatropd’ongletscelapeutfairetropchercherl’internauteavantdetrouvercequ’ilcherchesurlesite.


-9-

SiteN°2:http://www.clubarchi.com/

‐Nousneretrouvonspasdanscesitelathématiquedel’architectureàpartunlogoqu’ilfautregarderattentivementpourledéchiffrer.

‐Lecontenuesttropspécialisédansledomainedel’architecture,lesinternautes qui ne s’intéressent pas plus à l’architecture mais qui sontcurieux,nepeuventcomprendre,oucomprendreavecdifficultélecontenudecesite.


-10-

b.Lessitesprésentantdespointsforts

SiteN°1:http://www.architecture‐studio.fr

‐Nousavonsrepritledesigndesongletsaveclacouleurdefondquichangelorsquel’onsurvolecelui‐ciaveclasouris,ainsiquelacouleurdelapolicedel’onglet.

‐Nousavonsrepritaussilesystèmedenavigationaveconglets/sousonglets.

‐ Nous nous sommes aussi inspiré de la structure carrée et de lasobriétédusite.


-11-

SiteN°2:http://www.histoiredelart.net

‐Surcesitenousavonssimplementrepris, l’idéede labannièrequichangeàchaqueonglet.


-12-

4.Maquettesetlookandfeel

Après l’étude de l’existant présenté ci‐dessus nous avons pumettreenœuvreunlook&feelquinousapermisdedirigernosidéesdansunseulsensafindemettreenformelestroismaquettesdemandées.

Look&Feel


-13-

a.Présentationdestroismaquettes

MaquetteN°1:

Structure:Tailledelapage:Lalargeurdusiteestfixéeà800pixelsenviron.La

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).


-14-

Couleurs:Palettegraphique:Bleuciel‐marronbrique‐vertmentheAgencementdescouleurs:Lescouleurssonttiréesdesbâtimentsen

haut,lebleurappellesvitres,leciel;lemarronrappellemurenbrique;levertrappel l’afficheet laverdure.Le fondbleucieldonneune légèretéausite.

Texte&Images:Texte : La police utilisée pour les onglets est «PrestigeElite Std» et

«Arial»pour lecontenu,cettepoliceestacceptépar tous lesutilisateursàdéfautd’autrestypographiesplusoriginales.

Images:Lesimagesserontajustéesenpoidsafindenepasfavoriserles internautes avec un gros débit. Et placées dans l’emplacement ducontenuetexte.


-15-

MaquetteN°2:

Structure:Tailledelapage:Lalargeurdusiteestfixéeà400pixelsenviron.La

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.

Couleurs:Palettegraphique:Grisclair‐Gris50%‐NoirAgencementdescouleurs:Peutdecouleurssontutilisés,celadonne

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.


-16-

Texte&Images:Texte : La police utilisée pour les onglets est «Silome» avec en

alternative «Verdana», ce sont des polices sans serif sans signesparticuliers.

Images:Lesimagesserontréduitesenminiaturesetuneffetlightboxseraappliqué.


-17-

MaquetteN°3:

Structure:Taillede lapage :Labarregriseenhautainsique labarreverteen

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

alternativepourlesutilisateursquinedisposentpasdelapremièrepolice.Cesdeuxpolicessontrelativementproches,simplesetlisibles.

Images:Lesimagesserontajustéesenpoidsafindenepasfavoriserlesinternautesavecungrosdébit.


-18-

b.Evolutiondelamaquetteretenue

La maquette retenue a donc été la maquette n°2. Nous avons

cependanteffectuédesmodificationstelque:

‐Unchangementsurlescouleursdusiteenpassantd’unecouleurdefondnoireàbleuclairgrisé.

‐ Les couleurs utilisées ont été certifiées pour l’affichage web pourquetouslesinternautesvoientlesitedelamêmemanière.

‐Nousavonsaussiajoutéunebarredesousmenuentrelabannièreetle contenu pour ne pas regrouper toutes les informations sur une seulepage.

‐Unemodificationsurlelogoprésentsurlamaquetteaétéfaitepourpasserde«Clubarchitecture»à«L’architectureaulycée»,etenajoutantunlogoanimésimplementsurlapaged’accueil.


-19-

II)Réalisation

1.Arborescencedusiteetmenu

Une fois la maquette sous Photoshop fini, nous avons cherché lestitresdenosonglets,ainsiquel’arborescencedusitequevouspouvezvoirici.

Nousavonsvoululimiter lemenuprincipalàcinqongletsdivisésensous onglets afin que l’internaute puisse accéder à l’information plusfacilement.


-20-

2.Evolutiondesélémentsgraphiquesdusite

a.Logo

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:


-21-

b.Bannièresdusite

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.

Nousavonscommencéparsélectionnerplusieursfondsdebannièreàpartirdesphotosfournies.

Onaensuitecherchécommentintégrerletextesurlefondàtraversdiversessaies.Aufinal,onadoncchoisideréduire l’opacitéà l’arrièredutitrecombinéavecuneffetlumineux.Cequidonnececi:

c.Carteinteractive

Afin de présenter les voyages effectués par l’atelier, nous avonsréaliséunecartecliquable,c’estàdirequechaquevillevamenersoitàunepagedédiercommeLyonouAmiens,soitàlagaleriephoto.


-22-

d.Bannièredepromotion

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.

Pourvoirl’animation,allezsur:

http://195.83.128.55/~src8e04/divers/projettut/banniere.html

3.Gestionducontenu

a.Imagé

Nousgéronslesgaleriesphotosàl’aided’unelightbox.

LalightboxestunscriptJavaScriptquipermetd’intégreretdegérerlesimagessurunsite.

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.


-23-


-24-

b.Textuel

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).

Lorsquel’onavaitbeaucoupd’informationssurundomaine,mettionsceux‐cidansunepageannexe.

Parexemple,pourAmiensavecleParcsaint‐Pierre:


-25-

4.Perspectived’hébergement

Le site étant terminé, il fautmaintenantpenser à sonhébergement,voici un tableau comparatif montrant différents hébergements possiblespourlesite(cettelisten’estpasexhaustive,celapermetjustedesedonneruneidéedecequel’onpeuttrouver):


-26-

Conclusion

Perspectivespourlesite

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.


-27-

Webographie

http://google.frhttp://wwww.clubarchi.comhttp://www.architecture‐studio.frhttp://www.atelier‐architecture.fr/simonteyssou.htmhttp://www.histoiredelart.nethttp://www.mahj.org/fr/index.phphttp://byc.ch/hga/art/index.htmhttp://www.atelier‐d.fr/http://www.hallerarchitecture.com/http://caparchitecture.com/


-28-

Annexes

Annexe1:FeuilleHTMLpageindex.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 5 <title>Atelier Architecture</title> 6 <link href="stylearchi.css" rel="stylesheet" type="text/css" /> 34 </head> 35 <body onload="prechargement()"> 36 <div id="header"></div> 37 <div id="ligne1"></div> 38 <div id="ligne2"></div> 39 <div id="content"> 40 <div id="logo"> 41 <script type="text/javascript"> 42 AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=9,0,28,0','width','600','height','100','title','logo','src','img/ logo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi P1_Prod_Version=ShockwaveFlash','movie','img/logo' ); 43 </script><noscript> 44 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="600" title="logo"> 45 <param name="movie" value="img/logo.swf" /> 46 <param name="quality" value="high" /> 47 <embed src="img/logo.swf" quality="high" pluginspage="http://www.adobe.co download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" height="100"></embed> 48 </object> 49 </noscript> 50 </div> 51 <div id="ban"> 52 <ul> 53 <li><a onmouseover="change_image('img_roll',1)"onmouseout="change_image


-29-

('img_ href="index.html">Accueil</a></li> 54 <li><a onmouseover="change_image('img_roll',2)" onmouseout="change_image( href="genese.html">Génèse</a></li> 55 <li><a onmouseover="change_image('img_roll',3)" onmouseout="change_image('im href="activitees.html">Activités</a></li> 56 <li><a onmouseover="change_image('img_roll',4)" onmouseout="change_image('i href="voyages.html">Voyages</a></li> 57 <li><a onmouseover="change_image('img_roll',5)" onmouseout="change_image('i href="temoignages.html">Témoignages</a></li> 58 </ul> 59 <img name="img_roll" src="img/ban1.png" width="450" height="100" alt="" /> </d 60 <ul id="menu2"> 61 <li><a href="#"></a></li> 62 <li><a href="equipe.html">Equipe</a></li> 63 <li><a href="oblique.html">Oblique</a></li> 64 <li><a href="bilan.html">Bilan</a></li> 65 <li><a href="#"></a></li> 66 </ul> 67 <div id="contenu"> 68 <p>Bienvenue sur le site de l'Atelier Architecture du lycée Chrestien de Troyes 69 <p>Vous y trouverez la présentation de l'atelier qui a permis la cr association d'architecture à Troyes "Oblique" et l'option "Histoire de l'art" au lyc&eacu 70 <p>Bonne visite.</p> 71 </div> 72 </div> 73 <div id="footer"></div> 74 <div id="validate"> 75 <p> 76 <a href="http://validator.w3.org/check?uri=referer"> 77 <img src="img/w3c_xhtml.gif" height="15" width="80" alt="XHTML Valide !"/> 78 </a> 79 <a href="http://jigsaw.w3.org/css-validator/"> 80 <img src="img/w3c_css.gif" alt="CSS Valide !" /> 81 </a> 82 <br /> 83 <a href="plan.html">Plan du site</a> - Copyright 2009 © Agence Imagine 84 </p> 85 </div> 86 </body> 87 </html>


-30-

Annexe2:JavaScriptdesbannièresquichangentenfonctiondesonglets

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>

Rapport de projetOK -...

Documents

Transcript of Rapport de projetOK -...