estion projet web ntervention caweb m1 2019/2020 – …

GESTIONDEPROJETWEB•INTERVENTIONCAWEBM12019/2020–18H SEPTEMBRE2019


§  Préambule

§  CHAP1/Etapesderéalisationd’unprojetwebDéroulésdesphasesdetravailetlivrables

§  CHAP2/

Lesacteursduprojets:définitions,missionsetrôlesMaitrised'ouvrageMaitrised’œuvreChefdeprojet

SOMMAIRE

§  CHAP3/

LesdocumentsressourcesCahierdeschargesSFTouSFD

§  CHAP4/

Lesoutilsd’aideàlagestionAsanaTrelloFigma


Imageschéma:??

PRÉAMBULE


CHAP1/Lesétapes

deréalisationd’unprojetweb

§  Déroulésdesphasesdetravailetlivrables


CHAP1/Lesétapesderéalisationd’unprojetweb

Déroulésdesphasesdetravailetlivrables

https://www.pulsar-informatique.com/creation-site-internet/comment-creer-un-site-internet/comment-gerer-son-projet-de-site-web/methodologie-pour-un-site-web/phasage-d-un-projet-web




ExempleAgenceMMCréation




https://blog.armstrong.space/wp-content/uploads/2009/09/schema-processus-realisation-projet-site-web.jpg


CHAP2/Lesacteursduprojets,

missionsetrôles

§  Maitrised'ouvrage

§  Maitrised’œuvre§  Chefdeprojet


CHAP2/Lesacteursduprojetetmissionsetrôles

Maitred’ouvrage

Lemaitred’ouvrage«Onappellemaîtred'ouvrage(parfoismaîtrised'ouvrage,notéeMOA)l'entitéporteusedubesoin,définissantl'objectifduprojet,soncalendrieretlebudgetconsacréàceprojet.Lerésultatattenduduprojetestlaréalisationd'unproduit,appeléouvrage.Lamaîtrised'ouvrage(enanglaisProjectOwner)maîtrisel'idéedebaseduprojet,etreprésenteàcetitrelesutilisateursfinauxàquil'ouvrageestdestiné.Ainsi,lemaîtred'ouvrageestresponsabledel'expressionfonctionnelledesbesoinsmaisn'apasforcémentlescompétencestechniquesliéesàlaréalisationdel'ouvrage.»

lire:https://www.commentcamarche.net/contents/983-maitrise-d-ouvrage-maitrise-d-oeuvre



Maitred’œuvre

Lemaitred’œuvre«Lemaîtred’œuvre(oumaîtrised’œuvre,notéeMOE)estl'entitéretenueparlemaîtred'ouvragepourréaliserl'ouvrage,danslesconditionsdedélais,dequalitéetdecoûtfixéesparcedernierconformémentàuncontrat.Lamaîtrised’œuvreestdoncresponsabledeschoixtechniquesinhérentsàlaréalisationdel'ouvrageconformémentauxexigencesdelamaîtrised'ouvrage.Lemaîtred’œuvre(enanglaisProjectSupervisor)aainsilaresponsabilitédanslecadredesamissiondedésignerunepersonnephysiquechargéedubondéroulementduprojet(onparlegénéralementdemaîtriseduprojet),ils'agitduchefdeprojet.»

lire:https://www.commentcamarche.net/contents/983-maitrise-d-ouvrage-maitrise-d-oeuvre



Chefdeprojetweb

Lechefdeprojetweb(création/refontedesiteoud’applicationsmobilesetc.)«Ilétablitlecahierdeschargesetcoordonnetouslesintervenantssurleprojetwebpours’assurerdubonfonctionnement.Lechefdeprojetestunprofessionnelchargédemeneràbienunprojetensuivantetcontrôlantl’ensembledesondéroulement.Laprofessionseretrouvedansunnombredesecteursextrêmementvariés,del’ingénierieindustrielle,aumarketing.Alatêted’uneéquipe,iltravailleainsiàlaconceptionouàl’améliorationdeproduits,deprestations(denouveauxprocédésouméthodes),deservicesoudesystèmes.»

lire:https://mondedudigital.home.blog/2018/12/18/chef-de-projet/



Chefdeprojetweb

Lechefdeprojetweb«Lechefdeprojetouprojectmanager,estunélémentessentield’uneentreprise.Ilseraresponsable,del’avant-venteàlaconceptionjusqu’àlaréalisationetlesuiviaprès-vente,duprojetquiluiseraconfié.IldevracoordonnerlesdifférenteséquipesdeproductionoudeMarketing,avecuneexcellenteconnaissancetechniquedudomainedanslequelilinterviendra(e-commerce,édition,référencement,sites,basededonnées…)etdesqualitésrelationnelleséprouvées.L’anglaistechniqueestunminimumrequismaisilpourraitnepasêtresuffisant.Ils’assureratoutaulongdestravauxdurespectdesdélaisetdel’enveloppefinancièrequ’ilauradéterminéeavecleclient.Ildevrafairepreuved’unespritdecuriositéetapporterauneattentiontouteparticulièreàlaveilletechnologiqueafind’apporterlesmeilleursréponsestechniquesauxproblèmesrencontrés.Ilfaitpreuved’unegrandeautonomieetd’unsensaigudel’organisation.»

lire:https://www.hire.fr/job-card/chef-de-projet



Chefdeprojetweb



Chefdeprojetweb

infographie_chef_de_projet_web-Drouin-ste.png


CHAP3/Lesdocuments

ressources

§  Cahierdescharges§  SFTouSFD


CHAP3/Lesdocumentsressources

Cahierdescharges(CdC)

Lecahierdeschargesestundocumentcontractuelàrespecterlorsd'unprojet.Ilpermetaumaîtred'ouvragedefairesavoiraumaîtred’œuvrecequ'ilattenddeluilorsdelaréalisationduprojet,entraînantdespénalitésencasdenon-respect.Ildécritprécisémentlesbesoinsauxquelsleprestataireoulesoumissionnairedoitrépondre,etorganiselarelationentrelesdifférentsacteurstoutaulongduprojet.Entantquepiècederéférenceducontrat,lecahierdeschargesprotègelesdeuxpartiesdetouteambiguïté:lemaîtred'ouvrageestassuréquelalivraisonseraconformeàsesattentes,tandisquelemaîtred’œuvrepeutmeneràbienleprojetsanssubirdechangementsintempestifsaufuretàmesuredelaréalisation.Toutefoiscommedanstoutcontrat,lemaîtred'ouvragealapossibilitédemodifierlecahierdeschargesencoursderéalisation-autraversd'unavenantacceptéparlemaîtred’œuvre.Lire:https://www.journaldunet.fr/business/dictionnaire-economique-et-financier/1199141-cahier-des-charges-definition-traduction/



Cahierdescharges:Délimiterunpérimètrefonctionnelavecl'impactmapping

Silepérimètrefonctionneldevotresiten'estpasoumaldélimité,vousnesaurezjamaisoupasexactementoùvousarrêterdanssondéveloppement.Listezdoncdemanièreaussiexhaustivequepossiblelesfonctionnalitésdontvosutilisateursaurontbesoinpourseservirdusite.Celarevientàseposerunesuccessiondebonnesquestionspré-établies:•Quelestl'objectifdemonsite?•Quelssontlesdifférentsprofilsdesesutilisateurs?•Quellesactionscherchent-ilsrespectivementàfairesurmonsite?•Quellesfonctionnalitésvontleurpermettredemeneràbiencesactions?Enrépondantàcesquestionsdemanièresystématique,vousaboutirezàunecartographiedesusagessupposésdusite.lire:https://openclassrooms.com/fr/courses/4296701-gerez-un-projet-digital-avec-une-methodologie-en-cascade/4303806-redigez-les-

specifications-fonctionnelles-de-votre-projet




lire:https://openclassrooms.com/fr/courses/4296701-gerez-un-projet-digital-avec-une-methodologie-en-cascade/4303806-redigez-les-

specifications-fonctionnelles-de-votre-projet




Schématiserl'arborescenced'unsiteL'arborescenced'unsiteestunereprésentationschématiquedesdifférentespagesquicomposerontlesite,liéesentreellesethiérarchiséesparniveauxdeprofondeur.Ceschémaserviraalorsdemodèleàvoséquipestechniquesquipourrontainsisereprésenterlastructuredusite.Attention,ilestdifficiledeproposerunearborescencepertinentesilepérimètrefonctionneldusiten'apasétédélimitéaupréalable.Auquelcas,vousnesauriezsimplementpasquellespagessontnécessaires.

lire:https://openclassrooms.com/fr/courses/4296701-gerez-un-projet-digital-avec-une-methodologie-en-cascade/4303806-redigez-les-specifications-fonctionnelles-de-votre-projet




Exempled’arborescencepourunsiteweb«HotelSpa»-lire:https://openclassrooms.com/fr/courses/4296701-gerez-un-projet-digital-avec-une-methodologie-en-cascade/4303806-redigez-les-specifications-fonctionnelles-de-votre-projet



Cahierdescharges:Ergonomiesetwireframes

Lire:https://blog-ux.com/quelle-est-la-difference-entre-le-zoning-wireframe-mockup-et-prototype/ethttps://www.lacouleurduzebre.com/ux-ergonomie-webdesign.html

Lewireframe(onparlede«maquettefildefer»enfrançais)Chaqueblocréalisélorsdel’étapeprécédentesevoitdotéd’image(s),detexte(s)oudevidéo(s).Cecontenupeutêtrefictifcarlesinformationsfinalesnesontpastoujoursconnuesàcestadeduprojet.L’objectifestdedéfinirl’organisationdesélémentsetdesformessanstravaillerl’aspectvisuel,legraphismen’interviendraqueplustard.Onsebasedavantagesurlesstandardsetsouhaitsergonomiquespourorienterlaréflexion.Lewireframe,enbonoutildecommunication,ilaideleclientàseprojeter.IlévitesurtoutlarédactiondeSFToùlesbesoinspeuventêtreincompletsoumaldéfinis,cequientraineraitunerefontecoûteusedelaplateformefinale.Leswireframesvalidésserventdebaseauxwebdesignerspourlaconceptiondesmaquettes.L’organisationdesélémentsetlesystèmedenavigationimaginésnesontpasimmuablesmaisles«créatifs»doiventrespecterlesfonctionnalitéssouhaitéesetvalidéesparleclientainsiquelebudgetallouéauprojet.



Cahierdescharges:Ergonomiesetwireframes

Lire:https://www.mybalsamiq.comethttps://www.lacouleurduzebre.com/ux-ergonomie-webdesign.html



CdCversusSFD

«Lecahierdescharges(CdC)estlerecueildesexigencesfonctionnellesdemandéesparlamaîtrised'ouvrage,ildécritdesrèglesdegestionetdetraitementdanslelangagedumétier(vueexternedusystème,c'estlavisionutilisateur).SFDLesspécificationsfonctionnellesdétailléesouSTF:LesspécificationsfonctionnellesettechniquesLesSFDsontrédigéesparlamaîtrised’œuvreaprèsréceptionetanalyseduCdC.C'estlatraductionducahierdeschargesentermesplustechniques(donnéesenentrée,donnéesensortie,descriptiondesécransdel'IHM,règlesdecalcul,detransformationdesdonnées,...)dontlebutestdedécriredefaçondétailléecommentlesexigencesfonctionnellesvontêtreimplémentéesdanslesystèmed’information,etdoncpermettreledéveloppementdulogiciel.LesSFDdoiventêtrevalidéesparlamaîtrised'ouvrage,ellesconstituentdonclepointd'articulationentrelademandeetlasolutionquiyrépondetdoiventêtrecompréhensiblesparles2parties.» lire:

https://openclassrooms.com/fr/courses/4296701-gerez-un-projet-digital-avec-une-methodologie-en-cascade/4303806-redigez-les-specifications-fonctionnelles-de-votre-projet


CHAP4/Lesoutilsd’aide

àlagestion

§  Asana

§  Trello

§  Figma


CHAP4/Lesoutilsd’aideàlagestion

Asana

Asanaestunoutilpuissantpourlagestiondeprojetsenéquipe.Asanaproposeuneinterfaceintuitiveetunservicetrèscomplet,basésurl’efficacitéetlasouplessed’utilisation:planifiezchaqueétape,attribuezlestâches,créezunplanning,partagezdesfichiersetgardezunœilsurlesdatesclésdevotreprojetgrâceàuncalendrier.

lire:https://www.codeur.com/blog/outils-gestion-de-projet/

Voir:https://asana.com/fr/guide/help/fundamentals/navigating-asana



Trello

Trelloestplusconcentrésurlagestiondetâches.Ilpermeteneffetlacréationdeblocsetdetâches,l’assignationàunepersonne,lesuividel’avancementdesdifférentesto-do,lerappeldeladatedefind’untâcheetc.Ilestidéalpourlesfreelancesquitravaillentavecdespartenairesoupouroffrirunsuividel’avancementdevostravauxàvosclients.

lire:https://www.codeur.com/blog/outils-gestion-de-projet/



Figma

L’outilcollaboratifdeconceptiond’interfacesFigmaestutilisabledirectementaprèslacréationd’uncomptesurleurplateforme.Unefoisconnectévouspouvezcommenceràprototypersurleurwebappquiestrelativementfluide.L’interfacedeFigmas’apparenteàcelledeSketch,cequipeutaccélérervotrecourbed’apprentissageduservice.Lescalquesetcomposantsgraphiquessurlacolonnedegauchetandisquelesparamètresdesfonctionnalitéssontsurlacolonnededroite.

Voir:https://newflux.fr/2016/10/06/figma-permet-de-concevoir-des-wireframes-en-collaboration/https://fr.tuto.com/ux/gratuit-maitrisez-les-bases-de-figma-ux,104881.html


Agencedecommunication3placedesOrphelins67000StrasbourgITel0369964169I

www.lacouleurduzebre.com

(àbientôt!;-)

Contact:[email protected]

estion projet web ntervention caweb m1 2019/2020 – …

Documents