REPUBLIQUEALGERIENNEDEMOCRATIQUEETPOPULAIRE

MINISTEREDELENSEIGNEMENTSUPERIEURETDELARECHERCHESCIENTIFIQUE
FACULTEDESSCIENCESETDESSCIENCESDELINGENIORAT
DEPARTEMENTDINFORMATIQUE

LICENCEPROFESSIONNELLE
Activitsettechniquesdecommunication
Option:AnimationetgestiondessitesWeb

Mmoiredefindecycle

Thme:Ralisationdunsitevitrinepour
lEntrepriseIFRI

Prsentpar:

HASNIOUAbdselam

Organismedaccueil:

SARLVigisud

Promoteur:
M.BELHOULYacine

20062007

Remerciement
Jeremercietrssincrement:

MonpromoteurMonsieurY.BELHOULquimaaccompagntoutaulongde
cetteexprienceprofessionnelleavecbeaucoupdepatienceetdepdagogie.

AuresponsabledesoprationsdeVigisudMonsieurF.CHERFA,demavoir
acceptauseindecettesocitpendantladuredemonstage.

MercigalementMlleS.IMLOULetMrH.SLIMANIresponsablesdela
formationpourleursuivicontinudurantlanneainsiquepourleursefforts
quilsfournissentpournousassurerlebondroulementdenotreformation
luniversitcommelentreprise.

Auxmembresdejurydavoiracceptdejugercemodestetravail.

Atousceuxquiontcontribularalisationdeceprojetdeprsoudeloin.

Jaipourmoimme,tenchantdetravailleraveclquipedeVigisudetde
raliserundeleursprojets.Jespreavoirdonn,auseindecetteentreprise,
satisfactiondansletravailquimatconfi.

Pourterminer,ungrandmercimesparentsettoutemafamillepourtousles
encouragementsetlesespoirsquilsontplacsenmoi.

Sommaire
ChapitreI
Analyseduprojet
I1Lentreprisedaccueil........................................................................................3
I11Prsentation...............................................................................................3
I12Activits......................................................................................................3
I13Partenaires.................................................................................................3
I2Travaildemand...............................................................................................4
I3LEntrepriseIFRI...............................................................................................4
I4Objectifsdusite...............................................................................................5
I5Ciblesdusite....................................................................................................6
I6Adquationaveclescibles................................................................................6
I7DiagrammedeGANTT.....................................................................................6
I8Analysedelaconcurrence................................................................................8

ChapitreII
Conceptionduprojet
II1Dfinitiondesrubriques.................................................................................12
II2Contenudusite..............................................................................................12
II3Arborescencedusite.....................................................................................13
II4Spcificationstechniques...............................................................................15
II5Gabaritdepage.............................................................................................15
II6Choixdescouleurs........................................................................................17
II7Choixdelapolice...........................................................................................17

II8ModlisationUML..........................................................................................17
II81Diagrammedecasdutilisation................................................................17
II82Diagrammedeclasses............................................................................19
II83Diagrammedesquence........................................................................20

ChapitreIII
Ralisationduprojet
III1Langagesettechnologiesutiliss.................................................................23
III2Outilsutiliss.................................................................................................24
III3Espaceclient................................................................................................25
III31PagedintroductionFlash......................................................................26
III32Lapagedaccueil...................................................................................26
III33Lapageproduits....................................................................................27
III34LapageEauminralenaturellegazifie.............................................28
III4Espacedadministration................................................................................29
III41Lapagedesaisidumotdepasse..........................................................29
III42LapageAdministration...........................................................................30
III43Scuritdumotdepasse.......................................................................31
III5Testsetcontrles..........................................................................................31
III6Hbergement................................................................................................31
III7Rfrencement.............................................................................................32

Introduction
Dans le cadre de la formation en licence professionnelle Activits et
techniquesdecommunication,optionAnimationetgestiondessitesWeb,nous
avonseffectuunstagedapprentissageauseindelentrepriseVIGISUD

situe

Bjaaentrele16/06/2007etle30/08/2007.
Montravail,consisteraliserunsiteWebvitrinepourlEntreprisedeau
minraleetdeboissonsIFRI.Cesitepermettradonc,deprsenterlentrepriseet
sesproduits,commeilpermettraaussiauxinternautesdesabonnerausitepour
recevoirdesNewslettersetdesnouveautsdelentreprise.
LesiteInternetestdcoupendeuxpartiesprincipales:unespacepublic
donttouslesinternautespeuventaccderetunespacedadministrationdusitedont
l'accsestrservladministrateurgrceunmotdepasse.
Ceprsentmmoiresarticuleautourdetroisprincipauxchapitres;lepremier
contientuneanalyseduprojet,oilyaunetudepralabledesbesoinsde
lentreprise,lesecondcomporteunevueconceptuelledusystme.Enfin,letroisime
etdernierchapitreestconsacrlaralisation.

Site : www.vigisud.com

ChapitreI
Analyseduprojet

ChapitreI

Analyseduprojet

La russite dun projet Web repose sur une bonne formulation et la

comprhensiondesbesoinsduclient.
Dans ce chapitre Nous dfinissons les entreprises IFRI et Vigisud, le travail
demand,lesobjectifsetlesciblesainsiquelesbesoinsduclient.

I1Lentreprisedaccueil(VIGISUD)
I11Prsentation
VIGISUD est une jeune entreprise cre en 2006, dun capital de
20000000.00DA.ElleestspcialisedansledveloppementdessolutionsWEB,la
ralisationdeCDinteractifs,devidosdesurveillanceIPetinstallationrseaux.
VIGISUDdisposedesespropresinfrastructures,plateformedhbergement
devidosurveillance,desiteswebetdetlphonie.Ceciluipermetderaliserdes
conomiesdchellesimportantespoursespartenairesagrsetsesclientsfinaux.
Sonrseaudedistributiondeproximit,installdanschaquepaysluipermet
dassurerunequalitdeservicetaillehumaineetirrprochable.
I12Activits
InstallationetconfigurationdescamrasdesurveillanceParInternet.
ConceptionethbergementdesitesWeb.
Infogrance(plateformedetravailcollaboratif).
Tlcommunication(TlphonieVoiP).

I13Partenaires

VIGISUDpossdeplusieurspartenairesdanslemonde,quisont:
1

VIGIWARE

(France):

spcialis

dans

la

virtualisation.

IPMONDE COMMUNICATION (France): spcialis dans lhbergement et la

Tlcommunication.

Site www.vigiware.com
:
Site:www.ipmonde.net

ChapitreI

Analyseduprojet
3

VIDENTYS (France):spcialisdanslintgrationdumatrielInformatique.
4

AxisCommunications (France):spcialisdanslavidoSurveillancematriels.

I2Travaildemand

IlnousatdemanddurantlapriodedustagelEntreprisederaliserunsite

WebpublicitairepourlentreprisedeauminraleetdeboissonsIFRI

situe

Bjaa,quiestlundesprojetsdeVIGISUD.

Cesiteprsentelentrepriseetsesproduitscommeilpermetauxinternautes

de sabonner au service de Newsletters pour recevoir toutes nouveauts de

lentreprise.
Lesitedoitcontenirdeuxespacesprincipaux:
Espacepublic:espaceinformatifdeprsentationdelentrepriseetdeses
produits;ildoitpermettre,aussi,auxinternautesdesabonnerauservicedes
5

newsletters,proposerunequestionouuncommentairedanslapageFAQ et
envoyerunmessagedanslesite.
Espacedadministration:grcecetespace,ladministrateurpourragrerla
FAQ,lirelesmessagesreusetenvoyeruneNewslettersauxabonnsdu
site.

I3LEntrepriseIFRI
Prsentation

LEntrepriseIFRIestsitueIghzerAmokrane,cheflieudecommuneetde

dara(sousprfecture)dIfriOuzellaguen,danslawilayadeBjaa,danslenordde
lAlgrie.ElleestimplantelentreestdelavalledelaSoummam,encontrebas
dumassifmontagneuxdeDjurdjuraquiconstituesonrservoirnatureldeau.

Site:www.videntys.com
Site:www.axis.com
5
FAQ:FoireAuxQuestions
4

ChapitreI

Analyseduprojet

Pionnier dans lutilisation du PET (polythylne trphtalate) au niveau

national, IFRI inaugure son premier atelier dembouteillage le 20 juillet 1996.
Acettedate,plusde20millionsdebouteillessontcommercialisessurlensemble
duterritoirenational.Cechiffreatteint48millionsdunitsen1999puis252millions
delitresen2004avantdefranchirlecapdes500millionsdelitres(emballagePET
etverre)en2005.
Les Etablissements Ibrahim & Fils (socit IFRI) sont producteurs de
limonadesdiversesetdesiropsdepuis1986.

I4Objectifsdusite
Lesitedoitrpondreauxobjectifsdecommunicationsuivants:
Objectifcognitif(faireconnatre)

Ilestfixafindamliorerlesconnaissancesduconsommateursurlentreprise

etsesproduit.ParexemplefaireconnaitrelexistencedunproduitIFRIproduitde
leaugazifie,oufournirdescaractristiquesduproduit,etnotammentcellesqui
motiventleconsommateuretquipermettent,enoutre,desediffrencierdela
concurrence.ParexempleLeauIFRIestricheencalcium.
Objectifaffectif(faireaimer)
Ilestfixafindeconstruireuneimagedemarquec'estdirelensembledes
traitsquiconstituentlapersonnalitduproduittelquelleestperueparunindividu.
Onarriveraalorspalperlessentimentsressentisvisvisduproduit.Parexemple:
IFRI,uneeauminralepluspure,elleest,donc,lesymboledelappartenance
unmilieusocialfavoris.
Objectifconatif(faireagir)
Ilestfixafindefaireagirunconsommateur,linciterserendredansun
magasin,essayerleproduit,demanderunebrochuredinformation,etc.Cet
objectifapourbutdemodifierlecomportementdesconsommateurs.

ChapitreI

Analyseduprojet

I5Ciblesdusite
Clients
Lesclientscherchentconnatrelesproduitsdelentreprise,sonhistorique,sa
source,consulterlesquestionsfrquentesdansFAQ,etc.
Partenaires
Lespartenaires,cherchentdcouvrirlaprsentationdeleurvoisin,leurchiffre
daffaires,leurhistorique,contacterlentreprise,etc.
Grandpublic
Outrelesvisiteursprofessionnels,cestaussipourunelargepartaugrandpublicque
sadressentcesinformations.Cesvisiteursnonavertisdevronttresduitsparla
clartdesinformationsetdelanavigation,laqualitdelaprsentationetlarichesse
desillustrations.

I6Adquationaveclescibles
Pourrpondreauxcontraintesrespectivesgnresparcesdiffrentspublics,lesite
doitdonccombiner:
Unegranderichessedecontenu,uneractivitexemplaire,uneergonomiedune
grandeclart,etunhabillagericheetattractif.
Ildoitaussitrefacilementaccessible,maisrpondreauxattentesdesutilisateurs
avancs.

I7DiagrammedeGANTT
LediagrammedeGANTTestunoutilpermettantdemodliserlaplanification
detchesncessaireslaralisationd'unprojet.Ils'agitd'unoutilinventen1917
parHenryL.GANTT.
EtantdonnlarelativefacilitedelecturedesdiagrammesGANTT,cetoutil
estutilisparlaquasitotalitdeschefsdeprojetdanstouslessecteurs.Le
diagramme GANTT reprsente un outil pour le chef de projet, permettant de
reprsentergraphiquementl'avancementduprojet,mais,c'estgalementunbon
moyendecommunicationentrelesdiffrentsacteursd'unprojet.[s2]

Juin
S3
Analyseduprojet

Rceptionduprojet

Juillet
S4

S1

S2

S3

Collectedinformations
Dfinitiondesobjectifs
Dfinitiondescibles
Analysedelaconcurrence

Conception

Choixtechniques
Conceptiongraphique
Dfinitionducontenu
RdactionduCDC
ModlisationUML
Dveloppementdespages

Ralisation

Programmationdesscripts

Tests-Contrles
Hbergement
Rfrencement

:Tempsestim

CDC:Cahierdescharges

Tableau1:DiagrammedeGANTT

S4

S1

ChapitreI

Analyseduprojet

I8Analysedelaconcurrence
Lanalysedelaconcurrenceestunedmarcheutilisetrsfrquemmentdans
lecycledeconceptiondunproduitinformatique.
Elleconsistetudierlessitesquelonjugeconcurrentsoucomparables,afinden
extrairelespointspositifset/oungatifs.[s2]
Nousavonseffectuuneanalysesurdeuxsites,unsiteAlgrienetunautre
FranaisquitravaillentdanslemmedomainequIfri,quisont:GuedilaetVittel.

Site1

Site2

Nomdusite

Guedila

Vittel

URLdusite

http://www.guedila.com

http://www.vittel.fr

Datedelanalyse

08Aout2007

10Aout2007

Publicvis

Grandpublic

Grandpublic

Languesutilises

Franais

Franais

Technologies
utilises
Accsausite
Hirarchisation/
Organisation

HTML,JavaScript,Flash

HTML,JavaScript,CSS,
Flash,ASP

Libre

Libre

Arborescenceclaire

ArborescenceclaireQuatre

Cinqrubriques

rubriquesverticalesavec

horizontales

sousmenus
ActualitVittel,Dcouvrez

Titredes

Socit,Produits,

Vittel,BougezavecVittel,

rubriques

Situation,News,FAQs

Sivoustestiezvotre
Vitalit?

Styledulangage
utilis

Professionnel
Couleurdominantebleue

Mtaphore/
Formegraphique

Chartegraphiquenestpas
respecte
Mauvaisequalitdimages

Professionnel
Couleursdominantesbleue
etrouge
Chartegraphiquerespecte
Bonnequalitdimages

ChapitreI

Typede
navigation
Partiedynamique
Liensvers
dautressites
NormeW3C

Analyseduprojet

Menuhorizontal(enflash),
icnesnonsignificatifs

Navigationsimpleavecun
menuverticaltroisniveaux

Non

formulairedecontact

Oui

Oui

Non(19erreurs)

Non(11erreurs)
-Design&intgrationatelier
buz.com

Lesauteurs

SoufNet.com

-Hbergement:digex.com
-Contenus:ecrito.com
-Photos:OlivierBuhgiar
-nestlewaters.com

Lespartenaires

Aucun

-thermesvittel.com
-vitalitos.fr

Moteurde
recherche

Non
-Navigationsimple

-Miseenpageen800x600

Non
-Navigationsimple

-Miseenpageen800x600
quis'adaptentauxautres

quis'adaptentauxautres
Leslments
positifs

rsolutions

-Rapiditdechargement
dusiteetdesdiffrentes
pages

-Adresseintuitive

Leslments
ngatifs

-Leformulairedecontact
nemarchepas

rsolutions

-Bienrfrenc

-Adresseintuitive

-Chartegraphiques
respecte
Iln'yapasdelienexplicite
verslapaged'accueil

ChapitreI

Analyseduprojet

-FAQ'snemarchepas

-Lesiteutilisedesframes
(cadres),cequipeut
empchercertains
moteursderecherche
d'indexercespageset
d'enlirelecontenu.

-LesNewsnesontpasmis
jour.

-Lesimagesnesontpas
dotesduparamtre
1

ALT .

-Lestitresn'utilisentpas
lesbalisesH1,H2.Les
robotsdesmoteursde
rechercheaccordentplus
d'importanceauxtitres
qu'aucontenu,celafreine
lerfrencement.

-Aucunmeta tagsn'est
insrdanslespages.
Tableau2:Analysedelaconcurrence

Lanalyseduprojetconstitueunetapeimportantedansledroulementdu
projet.Cetteanalysevanouspermettredepasserlaconceptiondusiteentenant
comptedesbesoinsduclient,desobjectifsfixsetdelaconcurrence.

ALT : attribut de la balise <img>, il permet d'afficher du texte lorsque l'image ne peut tre affiche et d
la possibilit de communiquer alternativement avec les malvoyants.
2
Meta : Balise qui contient des mots cls. Les moteurs de recherche accordent de limportance cet lm

10

ChapitreII
Conceptionduprojet

ChapitreII

Conceptiondusite

Aprslanalyseetladfinitiondesbesoinsspcifiquesduclient,vientltape
delaconceptionduprojetetquiconsistedfinirlecontenudusite,larborescence
des pages, leur prsentation ainsi que le diagramme de cas dutilisation, le
diagrammedeclassesetlesdiffrentsdiagrammesdesquence.

II1Dfinitiondesrubriques

NousavonspropospourlesitedIFRI,undcoupageensixrubriquesqui

sont:
Rubrique

Description
Cestlapageprincipale,elleoffredespistesversl'ensemble

Accueil

desinformationsdisponiblesdanslesite.Ellemontredune
manire synthtique lensemble des principaux titres
dvelopps.

Quisommesnous

Pagedeprsentationdelentreprise.

Produits

Contientlesproduitsdelentreprise.

Mentionslgales

Desmentionsquiservironttablirlecadredutilisationde
toutcontenufigurantsurlesite.
Pageddieauxquestionsfrquentessurlentrepriseetses
produits,dontlesinternautespeuventproposerunequestion

FAQ

ouuncommentaire,maisresteladministrateurdevalideret
derpondrecettedernire.

Contact

Contient les coordonnes de lentreprise ainsi quun

formulairedecontact.
Tableau 3 : Dfinition des rubriques

II2Contenudusite
Lavritablerichessedecesite,seravidemmentlecontenuuniquedes
informationsquiyserontprsentes.

12

ChapitreII

Conceptiondusite

Silevisiteur,vientychercheruneinformation,ildevrapouvoiryaccder
dunemaniretransparenteentroisclicsdesouris.
Maislaprsentationsynthtiqueetattractivedelapagedaccueillincitera
dcouvrirdavantagedautresinformationstellesque:Plandaccs,historique,IFRI
etlasant,etc.

II3Arborescencedusite

13

Accueil

Quisommes
nous

FAQ

Contact

Nosvaleurs

Historique

Source
bouteille

Qalit
sanitaire

Produits

Mentions

Accueil

Accueil

Accueil

Accueil

Accueil

Accueil

Accueil

Accueil

Accueil

Produits

Qui
sommes
Nous

Qui
sommes
nous

Qui
sommes
nous

Qui
sommes
nous

Qui
sommes
nous

Qui
sommes
nous

Qui
sommes
nous

Qui
sommes
nous

Mentions
lgales

Mentions
lgales

Produits

Produits

Produits

Produits

Produits

Produits

Produits

FAQ

FAQ

FAQ

Mentions
lgales

Mentions
lgales

Mentions
lgales

Mentions
lgales

Mentions
lgales

Mentions
lgales

Contact

Contact

Contact

Contact

FAQ

FAQ

FAQ

FAQ

FAQ

Nosvaleurs

Eau
minrale

Qualit
sanitaire

Contact

Contact

Contact

Contact

Historiqe

Eau
gazeifie

Analyse

Historique

Nosvaleurs

Quali
sanitaire

Analyse

Plan

Eau
armatise

Historique

Qualit
sanitaire

Qualit
sanitaire

Analyse

Source
bouteille

Soda

Plan

Source
bouteille

Source
bouteille

Historiqe

Nectar

Poser
Question

Plan

Figure 1 : Arborescence du site

ChapitreII

Conceptiondusite

II4Spcificationstechniques
Pourlebientredusite,nousavonsdfiniunensembledespcifications
techniquesrespectertoutaulongdelaralisationdusite:
Lutilisationdesframesestinterdite,carilsempchentcertainsmoteursde
recherched'indexercespagesetdenlirelecontenu.
UnepageWebnedoitpasoccuperplusde40Kopoursechargerrapidement.
Latailleduneanimationgifnedoitpasdpasser15Ko.
Lesbalises<IMG>doiventtreassociesdelattributALTquipermetd'afficher
dutextelorsquel'imagenepeuttreaffiche.
Remplirlesbalises<META>pourlesdescriptionsetlesmotsclsdechaque
page.
Pouvoirrevenirlapaged'accueilden'importequellepagedusite.
Quellequesoitlapageactuelle,lapagedestinationneserajamaisloigne
deplusdetroisclicsdesouris.
AppliquerlesstylesCSSpourlesmisesenpageetprsentations.
Testerlesitesurplusieursconfigurations.
Miseenpageen800x600s'adaptantauxautresrsolutions.
laborerunenavigationlogique,simpleetintuitive.L'internautenedoitpasse
perdre.
Animationoueffetsspciauxutiliseravecmodration.

II5Gabaritdepage
Touteslespagesdusitedoiventserassemblerpournepasperturberla
navigationdelutilisateur.Ellesvarientaussi,quelquepeu,enfonctiondeleur
contenu.Pourcelanousavonsdfinilegabaritdepagesuivant:

15

ChapitreII

Conceptiondusite

800px
239px

Entte

Corps

51px

Pieddepage
Figure2:Gabaritdepage

Lesiteestoptpourunaffichageparfaiten800X600pixelspourunemeilleure
compatibilitaveclesancienscrans.
Lesiteeststructurdelamaniresuivanteavectroispartiesdistinctes:
Lentte
ContientuneanimationFlash,quicomportelelogodelentrepriseetsonsloganpour
permettreauxinternautesdesavoirquilssontbienarrivsausitequilsvoulaient,
ainsiquunebarredenavigation.
Lecorps
Estlapartieinformativedusite.Ilcontientlensembledinformationssurlentreprise
etsesproduits.Toutelanavigationseffectuedanscettepartie.
Lepieddepage
Comporteunrappeltextueldumenudenavigationetuncopyright.

16

ChapitreII

Conceptiondusite

II6Choixdescouleurs
Lechoixdescouleursestprimordial.Lescouleursutilisesdanslesite
changentenfonctionduproduitpourunemeilleureinteractivitaveclinternaute,par
exemplelapageduproduitSodapommeverteestenvert,SodaOrangeest
enorangeetainsidesuite.
Maislescouleursdominantesdusiterestentlableueetlaverte.Lebleuestla
couleurdulogo,levertpourresterencohrenceavecleslogandelentrepriseetqui
faitrfrencelavieifri,sourcedevie.

II7Choixdelapolice
LechoixdespolicesdecaractreserasimplifiauxlimitesimposesparInternet,
caronnepeutpasutilisernimportequellepolicedecaractrespourletextepuisque
les navigateurs Internet utilisent celles disponibles sur la machine o ils sont
installs.Heureusement,lessystmesdexploitationdesPCsetdesMacsdisposent
pardfautdunensembledepolicesdontcertainessontcommunesauxdeux
plateformes.Maiscettelistedepolicesestpluttrduite.
Pourcela,nousutilisonsArialpourlestextes,carcestunepolicesystmeprsente
pratiquementcheztouslesutilisateurs,lisiblelcrancommeelleesttrsutilise
surInternet.[s1]

II8ModlisationUML
II81Diagrammedecasdutilisation
Lediagrammedecasd'utilisationestundesoutilsimportantsdUML.Ildcrit
lefonctionnementd'unsystmedupointdevuedel'utilisateur.Ilnumre,d'une
faonsimpleetcomprhensible,lespossibilitsd'interactionentrelesystmeetles
acteurs.[s3]

17

ChapitreII

Conceptiondusite

Ifri.fr

SabonnerauxNews
letter

EnvoyeruneNews
letter

ConsulterlaFAQ

include

RpondredansFAQ

include

Sauthentifier

include

Internaute

Poserquestiondans
FAQ

Lirelesmessages
reus

Administrateur

include

Ecrireunmessage

Ecrireunmessage
danscontact

Figure3:Diagrammedecasdutilisation

18

ChapitreII

Conceptiondusite

II82Diagrammedeclasses
Lediagrammedeclasseestgnralementconsidrcommeleplusimportant
danslaconceptionduneapplication.Ilreprsentelarchitectureconceptuelledu
systme:Ildcritlesclassesquelesystmeutilise,ainsiquelesrelationsqui
existententreeux.[s3]

Abonnes

FAQ

Id_ab
email

Id_faq
question
reponse

EnvoyerNewsletter

0..*

Administrateur

Mess_recus

Id_adm
login
passe
mail

0..*

0..*

Rpondre

Liremessages

Figure4:Diagrammedeclasse

Id_mess
nom
prenom
1 mail
tel
societe
ville
objet
message

19

ChapitreII

Conceptiondusite

II83Diagrammedesquence
Lediagrammedesquencereprsentelasuccessionchronologiquedes
oprationsralisespourunacteur.Ilindiquelesobjetsquelacteurvamanipuleret
lesoprationsquivontpasserdunobjetunautre.[s3]
Acteur:Internaute

Abonnes

FAQ

Internaute

Sabonner
Vrification

Confirmationdabonnement

ConsulterFAQ

AffichagedelapageFAQ

Poserunequestion

Confirmation

Figure5:Diagrammedesquencedelinternaute

20

ChapitreII

Conceptiondusite

Acteur:Administrateur

Administrate
ur

FAQ

Abonnes

Mess_recus

Administrateur

Sauthentifier

Confirmation

Vrification

Rpondreunequestion
Confirmation
EnvoyeruneNews
Confirmationdenvoi
Demandedelapagedesmessages

reus

Affichagedelapagedesmessages

Figure6:Diagrammedesquencedelinternaute

Aprslamodlisationdusite,ladfinitiondesrubriquesetducontenu,vient
ltapedelaralisationquivanouspermettrededvelopperlesdiffrentespagesdu
site.

21

ChapitreIII
Ralisationduprojet

ChapitreIII

Ralisationdusite

Maintenantquel'onadterminlescibles,laconcurrence,lesobjectifsetle
contenu,lemomentestvenulimplmentation.Acettetape,lesitecommence
rellementseprofiler.
Nousallonsprsenterdanscechapitre,lesdiffrentslangagesetoutilsutilisspour
la ralisation du site, les pages principales du site ainsi que la procdure
dhbergementetderfrencement.

III1Langagesettechnologiesutiliss[s1]
Lechoixdelatechnologieseradictparlebesoin.Parexemple,pourfaire
unevrificationdesinformationssaisiesdansleformulairedecontact,JavaScript
ctclientserasuffisantetbeaucoupplusrapidequ'unscriptctserveurqui
ncessiteunerequteauserveur.Parcontre,pourtesterunmotdepasse,une
vrificationctserveurestobligatoirepourlascuritdecedernier.
Nousavonschoisilensembledeslangagesettechnologiessuivants:
HTML
LeHTMLestunlangagededescriptiondepagesWeb.Ilpermetlinsertiondesliens
hypertextesetdimages.
JavaScript
JavaScript est un langage de programmation non compil, orient objet,
Principalementutilisctclient,Nouslavonsutilispourlecontrleduformulaireet
laffichagedespopup.
CSS
AbrviationdeCascadingStyleSheets.Lesfeuillesdestyledterminentlaspect
delatypographieetduncertainnombredeliensutilisspourlensembledusite.
Ellespourronttremodifiesfacilementpouraffecterprofondmentlaprsentation
gnraledusite.
PHP
EstunlangagedeScriptingembarqudanslespagesHTMLettraitparleserveur.
Ilestutilispouraccderlabasededonnesetlacrationdapplications
dynamiquestellesquelalectureoulcrituredesmessagesdanslabasede
donnes.

23

ChapitreIII

Ralisationdusite

Apache
EstunserveurwebtrsrpanduquisupportelePHP,nousdevronspossdernotre
serveurlocalpourfaireduPHP.
MySql
EstunsystmedegestiondebasesdedonnestrsutilissurleWeb.
PHPMyAdmin
C'estunoutilcritenPHPpourgrerlesbasesdedonnesMySQL.Ilapourrlede
faciliterlagestiondesbasesdedonnesMySQLsurunserveur.

III2Outilsutiliss

Notrechoixdelogicielsestportsur:
Logiciel

Justificationduchoix

Notrematrisedulogiciel.

Disponibilitdulogiciel.

Ilpermetlamiseenplacevisuelledeslmentsde
notrepagewebengnrantlecodeanotreplace
(logiciel de typeWYSIWYG:What

Macromdia
Dreamweaver

You See Is

WhatYouGet).

CapacitdegrerducodeJavaScriptdemanire
transparente.

Adapt pour l'intgration d'lments crs avec

FireworksouFlash.

Saitgrerleslangagesdynamiquesetbasesde
donnes.

Permet

la

cration

d'animations

hautement

interactives.
MacromdiaFlash

Permetd'exploiterdesgraphismesvectorielssur
Internet.

Leplugin ncessaire sonfonctionnement est

distribuaveclesderniresversionsdenavigateur.

24

ChapitreIII

Ralisationdusite

Programmationassocie(ActionScript)permetde
trs notables avances dans l'intelligence des
pagesweb.

Flash peut permettre des exploits d'ergonomie

autrementtrsdlicatsraliseravecduHTML,
CSSouJavaScript.

Permetderetoucherquasimenttouslesformats
d'images.

Permetderajouterdestruquagesauximages:
effetsspciaux,d'ombreetdelumiresetbien
d'autres.

AdobePhotoshop

Trspratiquepourlesphotomontages.

Possdedenombreuxoutilsderetoucheetde
correction.

Lesfonctionspeuventtretenduesparl'adjonction
demodules(plugsin).

Possibilit d'enregistrement de squences de

tchespermettantletraitementd'imagesparlot.

Permetlacrationdesgraphiquesvectoriels.

Peut

tre

utilis

indpendamment

ou

en

complmentdePhotoshop.
AdobeIllustrator

Offredesoutilsdedessinvectorielpuissants.

Un des avantages des images vectorielles est

qu'ellesnesontpasdpendantesdelarsolution,
cestdirequ'ellesneperdentpasenqualitsion
lesagrandit.

Tableau4:Choixdeslogiciels

III3Espaceclient
Lespaceclientestlapartiepubliquedusitedontlaccsestautoristoutle
monde,ilconstitueunespaceinformatifdeprsentationdelentrepriseetses
activits.

25

ChapitreIII

Ralisationdusite

III31PagedintroductionFlash
introductionFlash
LesitecommenceparuneintroductionFlash,lepassagelapagedaccueil

sefaittraversdeuxliens,unlienenflashetunautreen HTMLpourceuxquine
sefaittraversdeuxliens,unlienenflashetunautreenHTMLpourceuxquine
possdentpaslepluginFlashinstallsurleursnavigateurs.
inFlashinstallsurleursnavigateurs.
C'estsurcettepagequel'internautearriveaprsavoirvalidl'adressedusite
surlenavigateur.
CetteintroductionFlashexigeparlecommanditaireapourbutdatti
CetteintroductionFlashexigeparlecommanditaireapourbutdattirer
lattentiondelinternauteverslelogodelentrepriseainsiquesonsloganetde
donnerenviedallerplusloin.
donnerenviedallerplusloin.

Figure7:Paged'introductionflash

III32Lapagedaccueil
Lapagedaccueil

Lahomepageoulapagedaccueil,estunepagelgreau
oulapagedaccueil,estunepagelgreauchargement.Onytrouve
chargement.Onytrouve
le nom du site, indiquant au visiteur qu'il est bien arriv o il voulait aller,
ventuellementunlogoetdesliensverslesprincipauxpointsfortsdusite.Onpourra
ensuitetrouveraprslespagesdecontenusig
ensuitetrouveraprslespagesdecontenusignificatif,(produits,plan,FAQ,
uits,plan,FAQ,etc.).

26

ChapitreIII

Ralisationdusite

Figure8:Paged'accueil

III33Lapageproduits
Contientlensembledescatgo riesdesproduitsquiexistent.Chaqueproduit
Contientlensembledescatgoriesdesproduitsquiexistent.C
estprsentsousformeduneimagecliquablequiramneverslapagedesproduits
concerns.

27

ChapitreIII

Ralisationdusite

Figure9:PageProduits

III34LapageEauminralenaturellegazifie
LapageEauminralenaturellegazifie
Cette page contient la description du produit "eau minrale naturelle
gazifie",elleprendlammecouleurquecelledesbouteillesdeceproduit.
gazifie",elleprendlammecouleurquecelledesbouteillesdeceproduit.

28

ChapitreIII

Ralisationdusite

Figure10:PageEauGazifie

III4Espacedadministration
Espacedadministration
Estunespacerservladministrateurdusiteetquiluipermetdegrerla
partie client, de rpondre aux questions et aux remarques des internautes,
denvoyerdesNewslettersauxabonnsdusiteainsi
lettersauxabonnsdusiteainsiquedelireetd
delireetdenvoyerdes
messages.
Laccs

lespace

dadministration

se

fait

par

saisi
saisie

dURL:

htt://www.ifri.fr/admin.php
Cettepartieestprotgeparunmotdepasse.Parmi
Cettepartieestprotgeparunmotdepasse.Parmi
lespagesdadministration::
III41Lapagedesaisiedumotdepasse
dumotdepasse
Estunepagedesaisi
saisieduLoginetdumotdepassepouraccderlespace
duLoginetdumotdepassepouraccderlespace
dadministration.Ainsi,unepossibilitestdonneladministrateurdercuprer
unepossibilitestdonneladministrateurdercuprer
unepossibilitestdonneladministrateurdercuprerle
motdepasseencasdoubli laideduneadresselectroniquesecondaire.
motdepasseencasdoublilaideduneadresselectroniquesecondaire.

29

ChapitreIII

Ralisationdusite

Figure
Figure11:Pagedesaisiedumotdepasse

III42LapageAdministration
LapageAdministration
Nousavonsmisladispositiondeladministrateurcetteinterfacedadministration
simpleetintuitive.Cestpartirdecettepagequeladministrateurpeutgrerlesite.
partirdecettepagequeladministrateurpeutgrerlesite.
partirdecettepagequeladministrateurpeutgrerlesite.

Figure 2
1 : Page d'administration du
site

30

ChapitreIII

Ralisationdusite

III43Scuritdumotdepasse
LespagesduBackofficesontprotgesparlinstructiondienedofservicequi
interditimprativementlaccscetteespacesanssaisirleloginetlemotdepasse.
LemotdepasseestcryptaveclafonctiondehachageMD5pourunemeilleure
scurit.
Motdepassenoncrypt

bejaia06

MD5

Mot de passe crypt

76f9c2321620f0898604

III5Testsetcontrles
Cettetapeconsistesassurerquelesiteestconformeauxattentesdu
clientetfaireensortequesonutilisationsedroulecorrectement.
Pourcelanousavonseffectudestestsdecompatibilitaveclesdiffrents
navigateurslesplusconnusetlesplusutilissainsiquelesdiffrentesversions:
InternetExplorerV5,V6etV7,FireFoxV1.5etV2.Commenousavonseffectuun
contrledecontenudusitepouridentifierleserreursquipeuventseproduirelorsde
lardactionoududveloppement.
Aprslestestsetlecontrleducontenuetaprsquetouteslesbugsetles
erreurssontidentifiesnousavonspulescorriger.

III6Hbergement[o1]
PourquelesitesoitaccessibleparInternetilfautquilsoithbergsurun
serveurrelienpermanenceInternet.Pourcela,nousavonsplusieurspropositions
doffresdhbergementdanslaplateformedeVigisud.
Selonnosbesoinsnousavonschoisiuneoffrede500Moquipossde20
comptesFTP.LutilisationdePHP/MySQLestpossibleavecdesstatistiquesde
connexionetmesuredaudience.

31

ChapitreIII

Ralisationdusite

III7Rfrencement[o1]
LerfrencementestunepartietrsimportantedanslaviedunsiteWeb.La
grandemajoritdesvisiteurscherchentlesitegrcedesoutilsderecherche,ilest
doncprimordialdelefairefigurerdanslesplusconnusetlesplusutiliss.Mais,ilne
suffitpasdtreprsentdanslesbasesdedonnesdecesmoteurs,ilfauttreaussi
danslespremirespagesdesrsultats.
Pourassurerunbonrfrencementdusite,nousavonseffectulestapesde
rfrencementsuivantes:
Nettoyageducode
Pourobtenirunbonrsultat,lesitedoittreoptimis.Pourcelanousavonsutilis
loutildunettoyageducodedeDreamWeaverquinouspermetdesupprimerles
partiesinutilesetredondantesducode.
Choixdesmotscls
Nousavonschoisiunensembledemotsclsquipeuventtresaisiparlinternaute
lorsdesarecherche.Ilsvontnousservirpourlerfrencement.Parexemple:ifri,
eau,minrale,jus,boisson,bjaa,usine,etc.
Insertiondesbalises<meta>
Nousavonsinsrlesbalises<meta>suivantesdanslespagesdenotresitepour
quelesmoteursderecherchepuissentlestrouverfacilement.
<metaname="description"content="EntrepriseAlgriennedeau
minraleetdeboissons>
<metaname="keywords"content="ifri,eau,minrale,naturelle,
boissons,jus,Bjaia,Algrie,entreprise,ighzerAmokrane,bjaa>
<metaname="identifierurl"content="http://www.ifri.fr>
<metaname="datecreationyyyymmdd"content="20070915>

Rfrencementmanuel
Consisteinscrirelesitedanslesmoteursderechercheetannuaireslesplus
courantsenremplissantlesfeuillesderfrencementdecesderniers.

32

ChapitreIII

Ralisationdusite

Rfrencementautomatique
Rfrencementlaidedunlogicieloudunsitederfrencement.Nousavons
utilis le site http://referencement-gratuit.erezine.com/
pour le rfrencement
automatiquedenotresite.

33

Conclusion
DurantcesdeuxmoisetdemidestageauseindelentrepriseVigisud,ilnous
atconfilatchederalisationdunsiteWebvitrinepourlentreprisedeau
minraleetdeboissonsIFRI,quiestlundesprojetsdeVigisud.
Dansunpremiertemps,noussommesamensraliseruncahierdes
chargespourguiderleclientversuneconceptionquilibreetconformeses
objectifs.
Aprslavalidationducahierdeschargesparleclient,nousavonsconuune
maquettedusitequiest,ensuite,prsenteetaccepteparleclient.
Puis,nousavonsentreprislaconceptiondtailledusite,lesaspectsde
communication,lardactionducontenu,etc.
Enfin, nous avons entam la ralisation, lintgration du contenu, la
programmationdesscripts,jusqu'lhbergementetlerfrencementdusiteaprs
savalidationparleclient.
Finalement,nousavonsobtenuunsiteconvenablequiatapprouvparle
client.Mais,celanecestpasfaitsanspeinecarnousavonstobligsdemodifier
plusieursfoislesmmeschosespourresterdanslesexigencesduclient.
Ce stage a t trs bnfique pour nous en tant quune exprience
personnelleetprofessionnelle.Notremissionnousabeaucoupintresssetnousa
permisderaliserunsiteWebpourunegrandeentrepriselchellenationale.

Webographie
[s1]http://www.mowebmaster.com
[s2]http://www.commentcamarche.net
[s3]http://www.uml.free.fr

Bibliographie
[o1]M.Martin,CrersonsiteWeb,EditionCampusPress,2001.

Rsum
NotretravailconsisteenlaconceptionetlaralisationdunsiteWebvitrine
pourlentreprisedeauxminralesetdeboissonsIFRIauseindelentrepriseVigisud.
Ceprsentmmoiresecomposedetroisprincipauxchapitres:lepremier
chapitreestconsacrlanalyseduprojet,oilyadesdfinitionsdesentreprises
VigisudetIFRIainsiquunetudepralabledesbesoinsdelentreprise.
Lesecondcontientuneconceptiondtailldusite,ladfinitionducontenu,
larborescencedespagesainsietunemodlisationUML.
Letroisimechapitreestconsacrlaralisation.Ilcomportelechoixdes
logicielsetdesoutilsdudveloppement,ladescriptiondequelquespagesralises,
lhbergementetlerfrencement.